在 Windows 10 通用应用程序的数据模板中根据窗口大小更改 FontSize答案

【问题标题】：Change FontSize as per Window size In Data Template in Windows 10 Universal App在 Windows 10 通用应用程序的数据模板中根据窗口大小更改 FontSize
【发布时间】：2016-03-31 09:02:57
【问题描述】：

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>

所以给我建议如何根据窗口大小更改字体大小。我想在窗口大小更改时更改字体大小。我使用了内置样式。实际上我正在 Windows 通用应用程序中制作主细节视图。所有功能都正常工作，但字体大小没有改变。

【问题讨论】：

这样您就可以扩展您的 UI 了吗？你为什么不把你的用户界面放在一个视图框中并使用它来控制大小？
@joe：我没有得到你想要解释的内容。实际上我不了解 View box。所以请提供源代码，以便我可以轻松理解。并告诉我一种使 Windows 通用应用程序在所有设备中响应的简单方法。我一直面临许多关于 UI 响应性的问题。所以请指导我制作响应式 Windows 通用应用程序。
我已经尝试过使用 viewbox，但它不适合我的代码，所以请让我让字体变小

标签： wpf windows xaml win-universal-app

【解决方案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>

【讨论】：