ウィンドウサイズごとにフォントサイズを変更するWindows 10のデータテンプレートでユニバーサルアプリケーション

Question

I used a Data template and use that Data Template in the List view.i also use a Visual State Trigger for increase and decrease font size so my question is that when the windows state trigger but font size not changed. font size remain same in both mobile view in PC view. 

Its my Code: 

Data Template: 

<Page.Resources> 
     <DataTemplate x:Name="CustomerListViewTemplate" x:DataType="data:Customerlistdata"> 
      <Grid> 
       <Grid.RowDefinitions> 
        <RowDefinition Height="*"/> 
        <RowDefinition Height="*"/> 
       </Grid.RowDefinitions> 

       <TextBlock Grid.Row="0" 
          Text="{x:Bind full_firstname}" 
          x:Phase="1" 
          x:Name="product_name_layout" 
          Style="{ThemeResource BaseTextBlockStyle}" 
          TextWrapping="NoWrap" 
          Foreground="Gray"             
          Margin="15,10,0,0" 

          /> 

       <TextBlock 
          Grid.Row="1" 
          Text="{x:Bind email_id}" 
          x:Phase="2" 
          Style="{ThemeResource BodyTextBlockStyle}" 
          Margin="15,5,0,10" 
          x:Name="email_id" 
          FontSize="12" 
          Foreground="Gray"/> 


      </Grid> 
     </DataTemplate> 
    </Page.Resources> 



List View: 


<ListView x:Name="MasterListView" 
        SelectionMode="Extended" 
        UseLayoutRounding="False" 
        ScrollViewer.VerticalScrollMode="Enabled"     
        BorderBrush="#FFA79E9E" 
        SelectionChanged="OnSelectionChanged" 
        IsItemClickEnabled="True" 
        ShowsScrollingPlaceholders="False" 
        ItemTemplate="{StaticResource CustomerListViewTemplate }" 
        ItemClick="OnItemClick" 
        Grid.Column="0" 
        Grid.Row="1"     
         > 

       <ListView.ItemContainerStyle> 

        <Style TargetType="ListViewItem"> 

         <Setter Property="HorizontalContentAlignment" Value="Stretch" /> 

        </Style> 
       </ListView.ItemContainerStyle> 

      </ListView> 


Visual State: 

    <VisualState x:Name="NarrowState"> 
        <VisualState.StateTriggers> 
         <AdaptiveTrigger MinWindowWidth="0" /> 
        </VisualState.StateTriggers> 
        <VisualState.Setters> 
         <Setter Target="MasterListView.Visibility" Value="Visible" /> 
         <Setter Target="DetailContentPresenter.Visibility" Value="Collapsed" /> 
         <Setter Target="MasterColumn.Width" Value="*" /> 
         <Setter Target="DetailColumn.Width" Value="0"/> 
         <Setter Target="product_name_layout.FontSize" Value="10"/> 

        </VisualState.Setters> 
       </VisualState> 

私はどのようにフォントサイズをウィンドウサイズごとに変更できますか？ iウィンドウサイズの変更時にフォントサイズを変更したい。私はそのスタイルを組み込んだ。完全に私はマスター詳細を作成しています。Windowsでの表示汎用アプリケーション.all機能は正常に動作しますが、フォントサイズは変更されません。

Answer 1

In this situation we can not change the font size of the data template so we need to add two data template 

1) data template for pc 

2) data template for mobile 

for pc: 
-------------------------------------------------------------------------- 
<Page.Resources> 
     <DataTemplate x:Name="CustomerListViewTemplatePC" x:DataType="data:Customerlistdata"> 
      <Grid> 
       <Grid.RowDefinitions> 
        <RowDefinition Height="*"/> 
        <RowDefinition Height="*"/> 
       </Grid.RowDefinitions> 

       <TextBlock Grid.Row="0" 
          Text="{x:Bind full_firstname}" 
          x:Phase="1" 
          x:Name="product_name_layout" 
          Style="{ThemeResource BaseTextBlockStyle}" 
          TextWrapping="NoWrap" 
          Foreground="Gray"             
          Margin="15,10,0,0" 

          /> 

       <TextBlock 
          Grid.Row="1" 
          Text="{x:Bind email_id}" 
          x:Phase="2" 
          Style="{ThemeResource BodyTextBlockStyle}" 
          Margin="15,5,0,10" 
          x:Name="email_id" 
          FontSize="12" 
          Foreground="Gray"/> 


      </Grid> 
     </DataTemplate> 
    </Page.Resources> 
------------------------------------------------------------------------------- 

for mobile 

<Page.Resources> 
     <DataTemplate x:Name="CustomerListViewTemplateMobile" x:DataType="data:Customerlistdata"> 
      <Grid> 
       <Grid.RowDefinitions> 
        <RowDefinition Height="*"/> 
        <RowDefinition Height="*"/> 
       </Grid.RowDefinitions> 

       <TextBlock Grid.Row="0" 
          Text="{x:Bind full_firstname}" 
          x:Phase="1" 
          x:Name="product_name_layout" 
          Style="{ThemeResource BaseTextBlockStyle}" 
          TextWrapping="NoWrap" 
          Foreground="Gray"             
          Margin="15,10,0,0" 

          /> 

       <TextBlock 
          Grid.Row="1" 
          Text="{x:Bind email_id}" 
          x:Phase="2" 
          Style="{ThemeResource BodyTextBlockStyle}" 
          Margin="15,5,0,10" 
          x:Name="email_id" 
          FontSize="12" 
          Foreground="Gray"/> 


      </Grid> 
     </DataTemplate> 
    </Page.Resources> 
----------------------------------------------------------------- 

aftre make a two individual data template then fire a trigger for both mobile(narrow state) and pc(wide state) 


like this........... 

<VisualStateManager.VisualStateGroups> 
      <VisualStateGroup x:Name="PageSizeStatesGroup" 
           CurrentStateChanged="OnCurrentStateChanged"> 


<VisualState x:Name="NarrowState"> 
        <VisualState.StateTriggers> 
         <AdaptiveTrigger MinWindowWidth="0" /> 
        </VisualState.StateTriggers> 
        <VisualState.Setters> 
         <Setter Target="MasterListView.Visibility" Value="Visible" /> 
         <Setter Target="DetailContentPresenter.Visibility" Value="Collapsed" /> 
         <Setter Target="MasterColumn.Width" Value="*" /> 
         <Setter Target="DetailColumn.Width" Value="0"/> 

        </VisualState.Setters> 
       </VisualState> 


<VisualState x:Name="WideState"> 
        <VisualState.StateTriggers> 
         <AdaptiveTrigger MinWindowWidth="0" /> 
        </VisualState.StateTriggers> 
        <VisualState.Setters> 
         <Setter Target="MasterListView.Visibility" Value="Visible" /> 
         <Setter Target="DetailContentPresenter.Visibility" Value="Collapsed" /> 
         <Setter Target="MasterColumn.Width" Value="*" /> 
         <Setter Target="DetailColumn.Width" Value="auto"/> 


        </VisualState.Setters> 
       </VisualState> 


    </VisualStateGroup> 
     </VisualStateManager.VisualStateGroups> 


----------------------------------------------------------------------------- 

then apply data template in the listview like this 

<ListView x:Name="MasterListView" 
        SelectionMode="Extended" 
        UseLayoutRounding="False" 
        ScrollViewer.VerticalScrollMode="Enabled"     
        BorderBrush="#FFA79E9E" 
        SelectionChanged="OnSelectionChanged" 
        IsItemClickEnabled="True" 
        ShowsScrollingPlaceholders="False" 
        ItemTemplate="{`enter code here`StaticResource CustomerListViewTemplate }" 
        ItemClick="OnItemClick" 
        Grid.Column="0" 
        Grid.Row="1"     
         > 

        <ListView.ItemContainerStyle> 

         <Style TargetType="ListViewItem"> 

          <Setter Property="HorizontalContentAlignment" Value="Stretch" /> 
          <Setter Property="FontSize" Value="10" /> 
         </Style> 
        </ListView.ItemContainerStyle> 

       </ListView>