如何使用 VisualState AdaptiveTrigger 更改 ListView Item FontSize [英] How to use VisualState AdaptiveTrigger to change ListView Item FontSize

问题描述

我正在使用 Visual State Adaptive Trigger 根据有效屏幕分辨率更改页面外观.这很好用，但我无法让它用于 ListView Items.

I am using Visual State Adaptive Trigger to change page appearance depending on effective screen resolution. This works great, but I cannot get it to work for ListView Items.

我的 ListView 看起来像这样:

My ListView looks something like this:

<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 的地方.

I can change the TextBlock font size statically in XAML. But I don't know how to reference this in VisualState setter target. Being automatically generated child, I cannot give TextBlock a name. My Visual State code is below. I've put ??? where I want to refer to ListView TextBlock item 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>

感谢任何帮助.

推荐答案

我们不能将 AdaptiveTrigger 用于 DataTemplate 中的元素.您应该使用 UserControl 来做它.此答案可能对您有所帮助.如果你想要一个 视频教程 那么这个视频可能对你有所帮助.但我有一些解决方法.

We can't use AdaptiveTrigger for an element inside the DataTemplate. You should use UserControl to do it. This answer may help you. If you want a video tutorial then this video may help you. But I have a little workaround for it.

这是我的方法:

1. 在 DataTemplate 之外创建一个 TextBlock 并设置 Visibility="Collapsed"

1. Create a TextBlock outside the DataTemplateand set Visibility="Collapsed"

<TextBlock Name="SetFontSize" Visibility="Collapsed"/>

注意:您也可以使用 BindableValueHolder 而不是这个，并使用 AdaptiveTrigger 设置它的 Value 属性.

Note: You could also use BindableValueHolder instead of this and set the Value property of it using AdaptiveTrigger.

<helpers:BindableValueHolder x:Name="SetFontSize"/>

使用AdaptiveTrigger来改变这个TextBlock

<VisualStateManager.VisualStateGroups>
    <VisualStateGroup>
        <VisualState x:Name="NormalStateReadView">
            <VisualState.StateTriggers>
                <AdaptiveTrigger MinWindowWidth="0" />
            </VisualState.StateTriggers>
            <VisualState.Setters>
                <Setter Target="SetFontSize.FontSize" Value="20" />
            </VisualState.Setters>
        </VisualState>
    </VisualStateGroup>

    <VisualStateGroup>
        <VisualState x:Name="WideStateReadView">
            <VisualState.StateTriggers>
                <AdaptiveTrigger MinWindowWidth="720" />
            </VisualState.StateTriggers>
            <VisualState.Setters>
                <Setter Target="SetFontSize.FontSize" Value="30" />
            </VisualState.Setters>
        </VisualState>
    </VisualStateGroup>
</VisualStateManager.VisualStateGroups>

DataBind 将DataTemplate内的TextBlock的FontSize绑定到外层的TextBlock

<TextBlock FontSize="{Binding Path=FontSize, ElementName=SetFontSize}"/>

这是您的代码:

<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="SetFontSize.FontSize" Value="20" />
            </VisualState.Setters>
        </VisualState>
    </VisualStateGroup>

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

<TextBlock Name="SetFontSize" Visibility="Collapsed"/>
<ListView x:Name="listView">
    <ListView.ItemTemplate>
        <DataTemplate>
            <TextBlock FontSize="{Binding Path=FontSize, ElementName=SetFontSize}" Text="{Binding MyItem}"/>
        </DataTemplate>
    </ListView.ItemTemplate>
</ListView>

这篇关于如何使用 VisualState AdaptiveTrigger 更改 ListView Item FontSize的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！