UWP Adaptive UI Code not working as expected - xaml

Question

I'm trying to resize an image and a FontSize of a textblock based on the window width. My code is as shown below:
<DataTemplate x:Name="TestItemTemplate" x:DataType="data:TestItem">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<VisualStateManager.VisualStateGroups>
<VisualStateGroup>
<VisualState x:Name="Default" >
<VisualState.StateTriggers>
<AdaptiveTrigger MinWindowWidth="340" />
</VisualState.StateTriggers>
<VisualState.Setters>
<Setter Target="ChannelImage.Height" Value="80" />
<Setter Target="ChannelImage.Width" Value="80" />
<Setter Target="CategoryTitle.FontSize" Value="16" />
</VisualState.Setters>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<RelativePanel Margin="5,5,5,5">
<Image x:Name="ChannelImage" Source="{Binding assetName}" HorizontalAlignment="Center"/>
<TextBlock Foreground="Black" FontSize="14" RelativePanel.Below="ChannelImage" RelativePanel.AlignHorizontalCenterWith="ChannelImage"
Typography.Capitals="AllSmallCaps" x:Name="CategoryTitle" Text="{Binding itemName}" HorizontalAlignment="Center"/>
</RelativePanel>
</Grid>
</DataTemplate>
Here's the problems I'm having.
I've tried using different phone emulators with resolutions whose width is more than 340 but the resolution of ChannelImage simple doesn't scale to 80x80 epx.
I've also tried running the desktop version of the program. The image doesn't scale to 80x80 BUT as soon as I start resizing the window it gets way bigger than 80x80 and continues to grow as the window is widened further.
I would really appreciate if someone could point out what I'm doing wrong.

Answer 1

You need to wrap your datatemplate in UserControl like this:
<DataTemplate x:Name="TestItemTemplate" x:DataType="data:TestItem">
<UserControl>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<VisualStateManager.VisualStateGroups>
<VisualStateGroup>
<VisualState x:Name="Default" >
<VisualState.StateTriggers>
<AdaptiveTrigger MinWindowWidth="340" />
</VisualState.StateTriggers>
<VisualState.Setters>
<Setter Target="ChannelImage.Height" Value="80" />
<Setter Target="ChannelImage.Width" Value="80" />
<Setter Target="CategoryTitle.FontSize" Value="16" />
</VisualState.Setters>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<RelativePanel Margin="5,5,5,5">
<Image x:Name="ChannelImage" Source="{Binding assetName}" HorizontalAlignment="Center"/>
<TextBlock Foreground="Black" FontSize="14" RelativePanel.Below="ChannelImage" RelativePanel.AlignHorizontalCenterWith="ChannelImage"
Typography.Capitals="AllSmallCaps" x:Name="CategoryTitle" Text="{Binding itemName}" HorizontalAlignment="Center"/>
</RelativePanel>
</Grid>
</UserControl>
</DataTemplate>