I want to show multiple images one after one vertically. That's why I've implemented Nested grid. It works fine for same height images. but different height images it looks odd because in nested grid height set according to first item height. Here is my code:
<DataTemplate x:Key="ImageTemplate">
<Grid x:Name="ImageGridViewItem"
HorizontalAlignment="Center"
Padding="0,0,0,0"
Background="#FAFAFA"
BorderBrush="#E6E6E6"
BorderThickness="0,0,0,0">
<Grid.RowDefinitions>
<RowDefinition Height="*" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Grid Background="#FAFAFA"
VerticalAlignment="Center"
HorizontalAlignment="Center"
BorderThickness="1">
<Image Source="{Binding ImageSource, Mode=OneWay}"
Stretch="Uniform"
Width="{Binding ImageSource.PixelWidth, Mode=OneWay}"
Height="{Binding ImageSource.PixelHeight, Mode=OneWay}"/>
</Grid>
<Grid Grid.Row="1"
Background="#F5F5F5"
Padding="0,0,0,0">
<TextBlock x:Name="ImageNoTxtBox"
HorizontalAlignment="Left"
VerticalAlignment="Bottom"
Margin="0,4,0,0"
Padding="0"
FontFamily="Segoe UI"
FontSize="10"
FontWeight="Normal"
Foreground="#252525"
Text="{Binding ImageNo,Mode=TwoWay}">
</TextBlock>
</Grid>
</Grid>
<GridView x:Name="ImagesGridView"
Grid.Row="5"
Margin="12,0,2,0"
Padding="10,10,0,0"
Width="{Binding MainGridViewWidth}"
ItemsSource="{Binding ImageList, Mode=OneWay}"
ItemTemplate="{StaticResource ImageTemplate}">
</GridView>
Image
As you mentioned, the row height of GridView depends on the first item, if you want to show the Variable height in GridView, you can try to use WrapPanel from Windows Community Toolkit. Before using it, you need to add Microsoft.Toolkit.Uwp.UI.Controls nuget package and then override the ItemsPanel of GridView, for example:
.xaml:
xmlns:controls="using:Microsoft.Toolkit.Uwp.UI.Controls"
<GridView x:Name="ImagesGridView"
Grid.Row="5"
Margin="12,0,2,0"
Padding="10,10,0,0"
Width="{Binding MainGridViewWidth}"
ItemsSource="{Binding ImageList, Mode=OneWay}"
ItemTemplate="{StaticResource ImageTemplate}">
<GridView.ItemsPanel>
<ItemsPanelTemplate>
<controls:WrapPanel Name="VerticalWrapPanel" Orientation="Vertical" />
</ItemsPanelTemplate>
</GridView.ItemsPanel>
</GridView>
Related
I'd like to put a grid into the first item of my listbox, i dont just need a setter to change property but an entire grid (need add a headband with button and text).
I've serached a while...
I tried to put two listbox and "combine it" but it is not clean and it's make the ui bad.
<ListBox Style="{DynamicResource MaterialDesignListBox}"
x:Name="first" Visibility="Visible"
ScrollViewer.HorizontalScrollBarVisibility="Auto"
ScrollViewer.VerticalScrollBarVisibility="Disabled"
VerticalAlignment="Stretch" HorizontalAlignment="Stretch"
HorizontalContentAlignment="Stretch" VerticalContentAlignment="Stretch"
Grid.Row="1" BorderThickness="0" MouseDoubleClick="LessonList_MouseDoubleClick"
Background="{StaticResource Secondary}" ItemsSource="{Binding FirstLesson}">
<ItemsControl.ItemTemplate>
<DataTemplate>
<!-- <Border Margin="10" Height="160" BorderBrush="DodgerBlue" BorderThickness="1"> -->
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="249*"></RowDefinition>
<RowDefinition Height="22*"></RowDefinition>
<RowDefinition Height="25*"></RowDefinition>
<RowDefinition Height="25*"></RowDefinition>
<RowDefinition></RowDefinition>
</Grid.RowDefinitions>
<Image Source="{Binding thumbnail}" Grid.Row="0" RenderOptions.BitmapScalingMode="HighQuality"></Image>
<Viewbox Grid.Row="2">
<TextBlock TextWrapping="Wrap" Foreground="{StaticResource Txt}" Text="{Binding title}"/>
</Viewbox>
<Viewbox Grid.Row="3">
<TextBlock TextWrapping="Wrap" Foreground="{StaticResource Txt}" Text="{Binding style}"/>
</Viewbox>
</Grid>
<!-- </Border> -->
</DataTemplate>
</ItemsControl.ItemTemplate>
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<WrapPanel></WrapPanel>
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
</ListBox>
<ListBox Style="{DynamicResource MaterialDesignListBox}"
Visibility="Visible"
ScrollViewer.HorizontalScrollBarVisibility="Auto"
ScrollViewer.VerticalScrollBarVisibility="Disabled"
VerticalAlignment="Stretch" HorizontalAlignment="Stretch"
HorizontalContentAlignment="Stretch" VerticalContentAlignment="Stretch"
Grid.ColumnSpan="2" Grid.Row="1" BorderThickness="0"
x:Name="LessonList" MouseDoubleClick="LessonList_MouseDoubleClick"
Background="{StaticResource Secondary}" ItemsSource="{Binding lessonss}">
<ItemsControl.ItemTemplate>
<DataTemplate>
<!-- <Border Margin="10" Height="160" BorderBrush="DodgerBlue" BorderThickness="1"> -->
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="249*"></RowDefinition>
<RowDefinition Height="22*"></RowDefinition>
<RowDefinition Height="25*"></RowDefinition>
<RowDefinition Height="25*"></RowDefinition>
<RowDefinition></RowDefinition>
</Grid.RowDefinitions>
<Image Source="{Binding thumbnail}" Grid.Row="0" RenderOptions.BitmapScalingMode="HighQuality"></Image>
<Viewbox Grid.Row="2">
<TextBlock TextWrapping="Wrap" Foreground="{StaticResource Txt}" Text="{Binding title}"/>
</Viewbox>
<Viewbox Grid.Row="3">
<TextBlock TextWrapping="Wrap" Foreground="{StaticResource Txt}" Text="{Binding style}"/>
</Viewbox>
</Grid>
<!-- </Border> -->
</DataTemplate>
</ItemsControl.ItemTemplate>
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<WrapPanel></WrapPanel>
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
</ListBox>
I tried to make a grid inside the grid and make it visible only on first item but the grid is not detected because the grid is to "deep".
I've found this post : How to have first item bolded in ListBox?
But i dont think it is usefull because grid isn't a property.
I don't know what to try now.
Thanks !
I've got a big problem and I can't figure out how to solve it. I have a xaml layout:
<Hub x:Name="MainHub" DataContext="{x:Bind Model}" Margin="108,30,0,0">
<Hub.Resources>
<DataTemplate x:Key="HeaderTemplate">
<TextBlock Text="{Binding}" FontSize="26" FontWeight="Light" Foreground="#4B5054"/>
</DataTemplate>
</Hub.Resources>
<HubSection Header="News">
<HubSection.HeaderTemplate>
<StaticResource ResourceKey="HeaderTemplate"/>
</HubSection.HeaderTemplate>
<DataTemplate>
<Grid Margin="0,4,0,0">
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="10" />
<RowDefinition Height="30"/>
</Grid.RowDefinitions>
<controls:VariableGridView x:Name="NewsGrid" Grid.Row="0" ItemsSource="{Binding News}">
<GridView.Resources>
<DataTemplate x:Key="NewsItemTemplate">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="188*" />
<RowDefinition Height="50*" />
<RowDefinition Height="57*" />
</Grid.RowDefinitions>
<Grid Grid.Row="0" VerticalAlignment="Stretch" HorizontalAlignment="Stretch">
<controls:WebImage ImageUri="{Binding Image, Mode=OneWay}" HorizontalAlignment="Stretch" VerticalAlignment="Stretch"/>
</Grid>
<Grid Background="#802A2B2D" Grid.Row="1">
<TextBlock Text="{Binding Title, Mode=OneWay}" Foreground="#D7D7D7" VerticalAlignment="Top" HorizontalAlignment="Stretch"/>
</Grid>
<Grid Background="White" Grid.Row="2">
<TextBlock Text="{Binding Text, Mode=OneWay}" Foreground="#2A2B2D" VerticalAlignment="Top" HorizontalAlignment="Stretch"/>
</Grid>
</Grid>
</DataTemplate>
</GridView.Resources>
<GridView.ItemsPanel>
<ItemsPanelTemplate>
<VariableSizedWrapGrid x:Name="TestGrid" Orientation="Vertical" MaximumRowsOrColumns="2"
ItemWidth="{Binding Width, ElementName=DummyNews, Mode=OneWay}" ItemHeight="{Binding Height, ElementName=DummyNews, Mode=OneWay}"/>
</ItemsPanelTemplate>
</GridView.ItemsPanel>
<GridView.ItemTemplate>
<StaticResource ResourceKey="NewsItemTemplate"/>
</GridView.ItemTemplate>
<GridView.ItemContainerStyle>
<Style TargetType="FrameworkElement">
<Setter Property="Margin" Value="0 0 15 15"/>
</Style>
</GridView.ItemContainerStyle>
</controls:VariableGridView>
<TextBlock VerticalAlignment="Bottom" Grid.Row="2" HorizontalAlignment="Right" Text="More >" FontSize="26" FontWeight="Light" Margin="0,0,15,0" Foreground="#4B5054" />
</Grid>
</DataTemplate>
</HubSection>
<HubSection Header="Featured Products">
<HubSection.HeaderTemplate>
<StaticResource ResourceKey="HeaderTemplate"/>
</HubSection.HeaderTemplate>
<DataTemplate>
<Grid/>
</DataTemplate>
</HubSection>
</Hub>
I have VariableSizedWrapGrid's width and height bound to code-behind models (item size changes when I resize a window):
ItemHeightVM.Value = (e.NewSize.Height - 200) / 2;
ItemWidthVM.Value = ItemHeightVM.Value / NEWS_WH_ASPECT;
This part working, but grid, specified in VariableGridView's data template don't fill whole item:
Widht and height not specified, grid do not fill parent container
But when I bind grid's width and height to my code-behind VM, or just specify width and height values, I've got right item size and right layouting, but only if item's rowspan and colspan are 1:
<DataTemplate x:Key="NewsItemTemplate">
<Grid Width="{Binding Width, ElementName=DummyNews, Mode=OneWay}" Height="{Binding Height, ElementName=DummyNews, Mode=OneWay}">
<Grid.RowDefinitions>
<RowDefinition Height="188*" />
<RowDefinition Height="50*" />
<RowDefinition Height="57*" />
</Grid.RowDefinitions>
When colspan or rowspan are 2 or more, margins are back :(
Bound to view model, colspan set to 2
Please, tell me how can I remove those margins and stretch my grid to fill whole item container if colspan (or rowspan) will be set to 2 or more? Hope that you can help me, I tried to solve this issue for a couple of hours and gave up
my list view inside the split view is not scrolling.
XAML code of total page goes like below.
<SplitView ScrollViewer.IsVerticalRailEnabled="True" BorderBrush="White" BorderThickness="1" x:Name="windowssplit1" DisplayMode="Overlay" Margin="40,-95,0,-200" Width="340" HorizontalAlignment="Left" x:FieldModifier="Public" Grid.RowSpan="2">
<SplitView.Pane>
<!--<Grid Background="Gray" ScrollViewer.VerticalScrollMode="Enabled" ScrollViewer.IsVerticalScrollChainingEnabled="True">-->
<StackPanel Background="Gray" BorderBrush="White" BorderThickness="1" ScrollViewer.VerticalScrollBarVisibility="Auto" ScrollViewer.IsVerticalScrollChainingEnabled="True" Margin="0,49,0,-162">
<TextBlock Text="All Ages" Margin="20,10,0,10" Foreground="White" FontSize="20" />
<Border BorderThickness="0.4" BorderBrush="White" Margin="20,0,0,10" Width="280" HorizontalAlignment="Left"/>
<ListView x:Name="filterlist1" Margin="10,0,0,0" ScrollViewer.VerticalScrollMode="Enabled" ScrollViewer.IsVerticalRailEnabled="True" SelectionChanged="filterlist_SelectionChanged">
<ListView.ItemTemplate>
<DataTemplate>
<TextBlock FontSize="18" Margin="0,10,0,0" Foreground="White" Text="{Binding CategoryName}"/>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
<!--</Grid>-->
</StackPanel>
</SplitView.Pane>
</SplitView>
The List View present in the Bolded Code must Scroll how this can be done, Help me....
How to make the List scroll
i think you need to put your listview inside a scrolViwer !
I believe this has to do with the panel that the ListView is in. Set the ListView to have a 'fixed' MaxHeight so that it can know when to scroll.
<ListView x:Name="filterlist1" Margin="10,0,0,0"
ScrollViewer.VerticalScrollMode="Enabled"
ScrollViewer.IsVerticalRailEnabled="True"
SelectionChanged="filterlist_SelectionChanged"
MaxHeight="400">
<ListView.ItemTemplate>
<DataTemplate>
<TextBlock FontSize="18" Margin="0,10,0,0" Foreground="White" Text="{Binding CategoryName}"/>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
To make the ListView scrollable, we need give the ListView a explicit height or use a layout that can limit the height of ListView.
StackPanel is not suitable for this scenario as it won't limit the size of ListView. All items are showed in the ListView, but only these items in StackPanel can be seen.
We can use Grid instead of StackPanel and try with following code:
<SplitView x:Name="windowssplit1"
Grid.RowSpan="2"
Width="340"
HorizontalAlignment="Left"
BorderBrush="White"
BorderThickness="1"
DisplayMode="Overlay"
IsPaneOpen="True"
x:FieldModifier="Public">
<SplitView.Pane>
<Grid Background="Gray">
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<TextBlock Margin="20,10,0,10"
FontSize="20"
Foreground="White"
Text="All Ages" />
<Border Width="280"
Margin="20,0,0,10"
HorizontalAlignment="Left"
BorderBrush="White"
BorderThickness="0.4" />
<ListView x:Name="filterlist1"
Grid.Row="1"
Margin="10,0,0,0"
SelectionChanged="filterlist_SelectionChanged">
<ListView.ItemTemplate>
<DataTemplate>
<TextBlock Margin="0,10,0,0"
FontSize="18"
Foreground="White"
Text="{Binding CategoryName}" />
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
</Grid>
</SplitView.Pane>
</SplitView>
Here I set two rows in Grid and put the ListView in the second row. Second row's Height is set to * so it can get the rest Height of the Grid. I also remove the Margin in SplitView to see the scroll bar clearly.
On one of the XAML Pages, I have 3 combo boxes on left side and ListView with Horizontal Scroll on the right.
The three combo boxes are not cascading combo boxes. If I click any of the three combo boxes, under "PopupRoot", some ComboBoxLightDismiss gets generated which has width and height of the entire screen. This leave my screen in the hang state as this is some invisible canvas. I am not able to figure out the reason for this.
Visual Tree before Combo box Click
Visual Tree after Combo Box is click or any item is selected
I am adding the XAML code for the left User Control of the combo boxes as well the page below:
UserControl XAML Code which includes 3 Combo Boxes
<StackPanel Margin="10,0,0,0">
<TextBlock x:Name="textBlockSourceLabel" Text="Source" Margin="0,6,6,6" Style="{StaticResource LeftNavTextBlock}"/>
<ComboBox Height="30" x:Name="comboBoxSourceName" Margin="0,6,6,6" FontSize="14"
Style="{StaticResource NewComboBoxStyle}" ItemContainerStyle="{StaticResource NewComboBoxItem}"
ItemsSource="{Binding Codes,Mode=TwoWay,UpdateSourceTrigger=PropertyChanged}"
SelectedValue="{Binding SourceFile.FeedCode,Mode=TwoWay,UpdateSourceTrigger=PropertyChanged}"
Width="250">
<interactivity:Interaction.Behaviors>
<awbehaviors:ComboBoxKeyboardSelection/>
<core:EventTriggerBehavior EventName="SelectionChanged">
<core:InvokeCommandAction Command="{Binding LoadSelectedSourceCommand}" CommandParameter="{Binding SelectedValue, ElementName=comboBoxSourceName}"/>
</core:EventTriggerBehavior>
</interactivity:Interaction.Behaviors>
</ComboBox>
<TextBlock x:Name="textBlockFiscalMonthLabel" Text="Calendar Month" Margin="0,6,6,6" Style="{StaticResource LeftNavTextBlock}" />
<ComboBox Height="30" x:Name="comboBoxFileFiscalMonth" FontSize="14" Margin="0,6,6,6" Width="250" ItemsSource="{Binding MonthNames}"
DisplayMemberPath="Item1" SelectedValue="{Binding SourceFile.CalendarMonth,Mode=TwoWay,UpdateSourceTrigger=PropertyChanged}"
SelectedValuePath="Item2" Style="{StaticResource NewComboBoxStyle}" ItemContainerStyle="{StaticResource NewComboBoxItem}">
</ComboBox>
<TextBlock x:Name="textBlockFiscalYearLabel" Margin="0,6,6,6" Text="Calendar Year" Style="{StaticResource LeftNavTextBlock}"/>
<ComboBox Height="30" x:Name="comboxBoxFileFiscalYear" Margin="0,6,6,6" FontSize="14"
ItemsSource="{Binding Years,Mode=TwoWay,UpdateSourceTrigger=PropertyChanged}"
SelectedValue="{Binding SourceFile.CalendarYear,Mode=TwoWay,UpdateSourceTrigger=PropertyChanged}"
Style="{StaticResource NewComboBoxStyle}" ItemContainerStyle="{StaticResource NewComboBoxItem}"
Width="250"></ComboBox>
XAML code for Page which includes the ListView and UserControl
<Grid Style="{StaticResource LayoutRootStyle}" x:Name="gridLayout" VerticalAlignment="Stretch">
<Grid >
<Grid.ColumnDefinitions>
<ColumnDefinition Width="20*"/>
<ColumnDefinition Width="80*"/>
</Grid.ColumnDefinitions>
<Grid Grid.Column="0" Background="#FFADB9CA">
<UserControls:FeedInformation DataContext="{Binding FeedInformationVM}" HorizontalAlignment="Stretch" Margin="0" Height="{Binding ActualHeight, ElementName=Row1}" Background="{StaticResource gridcontainerBackGroundBrush}"/>
</Grid>
<Grid Grid.Column="1">
<Grid.RowDefinitions>
<RowDefinition Height="10*"/>
<RowDefinition Height="90*" x:Name="GridRow"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="50*" x:Name="GridColumn"/>
</Grid.ColumnDefinitions>
<Grid Grid.Row="0" HorizontalAlignment="Stretch" x:Name="titleGrid">
<TextBlock Style="{StaticResource NewHeaderTextStyle}" Text="{Binding FeedSourceFileStatus.FileName}" Margin="10,0,0,0"/>
</Grid>
<Grid Grid.Row="1">
<ListView IsItemClickEnabled="False" IsSwipeEnabled="False" IsDoubleTapEnabled="False" IsTapEnabled="False" SelectionMode="None"
Margin="12,25,50,25" BorderThickness="1" HorizontalAlignment="Stretch" VerticalAlignment="Stretch"
Height="{Binding ActualHeight, ElementName=GridRow}"
ItemsSource="{Binding SubItemsCollection, ElementName=pgControl, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}"
ScrollViewer.HorizontalScrollBarVisibility="Visible"
ScrollViewer.HorizontalScrollMode="Enabled" ScrollViewer.VerticalScrollBarVisibility="Auto"
ItemContainerStyle="{StaticResource LvItemStyle}">
<ListView.ItemTemplate>
<DataTemplate>
<ListView SelectionMode="None" IsZoomedInView="False" IsHoldingEnabled="False" IsSwipeEnabled="False" x:Name="ListRow" Tag="{Binding RowNo}"
ItemsSource="{Binding FeedData, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}" HorizontalAlignment="Stretch"
VerticalAlignment="Center" ItemContainerStyle="{StaticResource LvItemStyle}" AllowDrop="True"
ShowsScrollingPlaceholders="True" CanDragItems="{Binding RowNo, Converter={StaticResource ListInttoBooleanConverter}}">
<ListView.ItemTemplate>
<DataTemplate>
<Grid Height="35" Width="120" HorizontalAlignment="Center" >
<Rectangle StrokeDashArray="1 1 0.3 1" Height="30" VerticalAlignment="Top" IsHitTestVisible="False" Opacity="0.5"
Stroke="Gray" StrokeThickness="1" Margin="0" StrokeEndLineCap="Square" StrokeDashOffset="1.5"
Visibility="{Binding Tag, Converter={StaticResource RowNotoVisibilityConverter4}, ElementName=ListRow}"
Fill="#FF9DC3E6"/>
<TextBlock Text="{Binding FeedCellData, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}"
FontSize="12" LineHeight="13" Foreground="{StaticResource TaxHubItemForegroundBrush}" TextTrimming="WordEllipsis" Width="120" AllowDrop="True" Padding="5,1,1,1" TextWrapping="NoWrap"
VerticalAlignment="Top" Tag="{Binding Tag, ElementName=ListRow}" ToolTipService.ToolTip="{Binding FeedCellData}"
Height="{Binding Tag, Converter={StaticResource RowtoHeightConverter}, RelativeSource={RelativeSource Mode=Self}}" />
</Grid>
</DataTemplate>
</ListView.ItemTemplate>
<ListView.ItemsPanel>
<ItemsPanelTemplate>
<ItemsStackPanel Margin="0,0,0,0" Width="Auto" Orientation="Horizontal" Height="35" VirtualizingStackPanel.VirtualizationMode="Standard"/>
</ItemsPanelTemplate>
</ListView.ItemsPanel>
</ListView>
</DataTemplate>
</ListView.ItemTemplate>
<ListView.ItemsPanel>
<ItemsPanelTemplate>
<VirtualizingStackPanel Orientation="Vertical" VirtualizingStackPanel.VirtualizationMode="Standard"/>
</ItemsPanelTemplate>
</ListView.ItemsPanel>
</ListView>
</Grid>
</Grid>
</Grid>
I don't seem to figure out the reason for this canvas getting generated when combobox is clicked.
Note: This application is moved from Win 8.1 App to Win 10 UWP app. This seems to be working fine in the 8.1 app which is made compatible with win 10 but this problem is coming from using this in UWP
After debugging, I realized that this is happening because of using VirtualizingStackPanel in the outer ListView. In my ListView, every row has 200 columns. When I removed VirtualizingStackPanel, horizontal scroll bar for the whole List doesnt appear and I am not able to move horizontally. Does anybody can help with this?
My problem is this:
I got this ListView -
<ListView ItemsSource="{Binding GameRow1}" ItemTemplate="{StaticResource GamePiecesTemplate}" VerticalAlignment="Bottom" Grid.Column="12" Grid.Row="1" />
and I got this Image -
<Image Grid.Column="12" Grid.Row="1" Source="/Images/Gray_triangle2.png" Stretch="Fill"/>
The problem is that the Image covers my ListView and I can't the ListView items. is there a way to set picture to be on a grid cell as background?
this is the ItemTemplate btw:
<DataTemplate x:Key="GamePiecesTemplate">
<StackPanel>
<Image Source="{Binding IsWhite , Converter={StaticResource GamePiceToImgSrc}}" Height="50" Width="50" ></Image>
<Label HorizontalAlignment="Center" Content="{Binding Path=UserName}" />
</StackPanel>
</DataTemplate>