如何使用 VisualState AdaptiveTrigger 更改 ListView Item FontSize

2023-12-01

我正在使用视觉状态自适应触发器根据有效的屏幕分辨率更改页面外观。这很好用，但我无法让它适用于 ListView 项目。

我的 ListView 看起来像这样：

<ListView x:Name="listView" >
    <ListView.ItemTemplate>
        <DataTemplate>
                <TextBlock FontSize="20" Text="{Binding MyItem}"/>
        </DataTemplate>
    </ListView.ItemTemplate>
</ListView>

我可以在 XAML 中静态更改 TextBlock 字体大小。但我不知道如何在 VisualState setter 目标中引用它。作为自动生成的子项，我无法给 TextBlock 命名。我的视觉状态代码如下。我放了？？？我想在其中引用 ListView TextBlock 项 FontSize。

 <VisualStateManager.VisualStateGroups>
    <VisualStateGroup>
            <VisualState x:Name="NormalStateReadView">
                    <!-- VisualState to be triggered when window width is <720 effective pixels -->
                    <VisualState.StateTriggers>
                        <AdaptiveTrigger MinWindowWidth="0" />
                    </VisualState.StateTriggers>
                    <VisualState.Setters>
                        <Setter Target="???" Value="20" />
                    </VisualState.Setters>
                </VisualState>
    </VisualStateGroup>

    <VisualStateGroup>
            <VisualState x:Name="NormalStateReadView">
                    <!-- VisualState to be triggered when window width is >=720 effective pixels -->
                    <VisualState.StateTriggers>
                        <AdaptiveTrigger MinWindowWidth="720" />
                    </VisualState.StateTriggers>
                    <VisualState.Setters>
                        <Setter Target="???" Value="30" />
                    </VisualState.Setters>
                </VisualState>
    </VisualStateGroup>

任何帮助表示赞赏。

您需要将模板包装在UserControl让自适应触发器发挥作用；视觉状态也应该进入模板内部，并确保它位于第一个直接子级下（即Grid）的UserControl。我看到您定义了两个视觉状态组，但实际上您只需要一个。

<ListView.ItemTemplate>
    <DataTemplate>
        <UserControl>
            <Grid>
                <VisualStateManager.VisualStateGroups>
                    <VisualStateGroup>
                        <VisualState x:Name="NarrowState">
                            <VisualState.StateTriggers>
                                <AdaptiveTrigger MinWindowWidth="0" />
                            </VisualState.StateTriggers>

                            <VisualState.Setters>
                                <Setter Target="Title.(TextBlock.FontSize)" Value="24" />
                            </VisualState.Setters>
                        </VisualState>

                        <VisualState x:Name="WideState">
                            <VisualState.StateTriggers>
                                <AdaptiveTrigger MinWindowWidth="720" />
                            </VisualState.StateTriggers>

                            <VisualState.Setters>
                                <Setter Target="Title.(TextBlock.FontSize)" Value="36" />
                            </VisualState.Setters>
                        </VisualState>
                    </VisualStateGroup>
                </VisualStateManager.VisualStateGroups>

                <TextBlock x:Name="Title" Text="{Binding Property1}" />
            </Grid>
        </UserControl>
    </DataTemplate>
</ListView.ItemTemplate>

Update

这是我认为更灵活的解决方案。它需要一些代码来设置，但结果是您获得干净、可重用且可读的代码。

这个想法是为了获得顶层的参考VisualStateGroup其定义为outside of the ListView，主要是在Page level.

然后，创建三个VisualStates (i.e. Narrow, Normal & Wide）并将它们附加到新的VisualStateGroup它应该属于第一个孩子UserControl.

一旦我们引用了这两个VisualStateGroups，我们可以监控顶级的CurrentStateChanged并相应地更新第二个中的状态。

上面的所有逻辑都可以用一个Behavior来自UWP XAML 行为 nuget 包.

一旦Behavior在适当的地方，你可以简单地定义你的内心状态：

<DataTemplate>
    <UserControl>
        <Interactivity:Interaction.Behaviors>
            <local:VisualStateInTemplateBehavior ParentVisualStateGroup="{Binding ElementName=AdaptiveVisualStates}">
                <local:VisualStateInTemplateBehavior.NarrowState>
                    <VisualState x:Name="Narrow">
                        <VisualState.Setters>
                            <Setter Target="Title.(TextBlock.FontSize)" Value="24" />
                        </VisualState.Setters>
                    </VisualState>
                </local:VisualStateInTemplateBehavior.NarrowState>

                <local:VisualStateInTemplateBehavior.NormalState>
                    <VisualState x:Name="Normal">
                        <VisualState.Setters>
                            <Setter Target="Title.(TextBlock.FontSize)" Value="32" />
                        </VisualState.Setters>
                    </VisualState>
                </local:VisualStateInTemplateBehavior.NormalState>

                <local:VisualStateInTemplateBehavior.WideState>
                    <VisualState x:Name="Wide">
                        <VisualState.Setters>
                            <Setter Target="Title.(TextBlock.FontSize)" Value="40" />
                        </VisualState.Setters>
                    </VisualState>
                </local:VisualStateInTemplateBehavior.WideState>
            </local:VisualStateInTemplateBehavior>
        </Interactivity:Interaction.Behaviors>

工作演示

请随意查看工作示例here.

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)