UWP適応UIコードが期待どおりに機能しない

Question

ウィンドウの幅に基づいて画像とテキストブロックのFontSizeのサイズを変更しようとしています。私のコードは以下の通りです。

<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> 

ここに私が持っている問題があります。

1. 私は幅340以上であるが、ChannelImageシンプルの解像度は80×80のEPXにスケールしない解像度の異なる携帯電話のエミュレータを使用してみました。
2. また、デスクトップ版のプログラムを実行しようとしました。画像は80x80に拡大されませんが、ウィンドウのサイズ変更を開始するとすぐに80x80より大きくなり、ウィンドウがさらに広がるにつれて拡大し続けます。

私が間違っていることを誰かが指摘できるかどうか、本当に感謝します。

Answer 1

あなたは、このようにユーザーコントロールであなたのDataTemplateをラップする必要があります。

<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>