How to dynamic change ItemTemplate width and height in ListView UWP? - xaml

Question

I have a ListView like this
<ListView Name="lvTrailers"
Grid.Row="3"
SelectionChanged="lvTrailers_SelectionChanged"
SizeChanged="lvTrailers_SizeChanged">
<ListView.ItemTemplate>
<DataTemplate>
<Grid Height="65" Margin="5">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="2.5*" />
</Grid.ColumnDefinitions>
<Image HorizontalAlignment="Center"
VerticalAlignment="Center"
Source="{Binding Thumbnail}"
Stretch="UniformToFill" />
<TextBlock Grid.Column="1"
Margin="10,5"
Text="{Binding Title}"
TextWrapping="Wrap" />
</Grid>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
private void lvTrailers_SizeChanged(object sender, SizeChangedEventArgs e)
{
// add some userful code
// not working
lvTrailers.ItemTemplate.SetValue(HeightProperty, e.NewSize.Height / 6);
}
In UWP apps users can resize window height and width so when it happen, I want to dynamic resize ListView ItemTemplate too. Any one could tell me how to do that?

Answer 1

You need to use AdaptiveTrigger. Here is an example to achieve that :
<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
<Grid.Resources>
<DataTemplate x:Key="MyCustomItemDataTemplate">
<UserControl>
<Grid x:Name="content"
Margin="8"
Background="Transparent">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="2.5*" />
</Grid.ColumnDefinitions>
<Image HorizontalAlignment="Center"
VerticalAlignment="Center"
Source="ms-appx:///Assets/StoreLogo.png"
Stretch="Uniform" />
<TextBlock Grid.Column="1"
Margin="10,5"
Text="blabla"
VerticalAlignment="Center"
TextWrapping="Wrap" />
<VisualStateManager.VisualStateGroups>
<VisualStateGroup>
<VisualState x:Name="Small">
<VisualState.StateTriggers>
<AdaptiveTrigger MinWindowWidth="0" />
</VisualState.StateTriggers>
<VisualState.Setters>
<Setter Target="content.Height"
Value="30" />
</VisualState.Setters>
</VisualState>
<VisualState x:Name="Wide">
<VisualState.StateTriggers>
<AdaptiveTrigger MinWindowWidth="720" />
</VisualState.StateTriggers>
<VisualState.Setters>
<Setter Target="content.Height"
Value="Auto" />
</VisualState.Setters>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
</Grid>
</UserControl>
</DataTemplate>
</Grid.Resources>
<ListView Name="items"
ItemTemplate="{StaticResource MyCustomItemDataTemplate}" />
</Grid>