XAML 如何使用AdaptiveTriggers更改StackPanel的字体大小？

在下面的XAML代码中，我有多个VisualState。每个VisualState都有一个AdaptiveTrigger，用于搜索最小窗口宽度。我的目标是使StackPanel的FontSize随着窗口大小的增加而增加。
我已经尝试过这样做，将VisualState.Setter设置为：Target="stackPanel.FontSize" Value="20"/>或Value="30"或Value="40"，这取决于窗口的大小。只要满足AdaptiveTrigger.MinWindowWidth值，就会发生这种情况。但这并不像我希望的那样工作。
下面是我的示例代码：

<Grid>
    <VisualStateManager.VisualStateGroups>
        <VisualStateGroup>
            <VisualState x:Name="LargeScreen">
                <VisualState.StateTriggers>
                    <!--Increase FontSize to 40 when window width is >=1000 effective pixels.-->
                    <AdaptiveTrigger MinWindowWidth="1000"/>
                </VisualState.StateTriggers>
                <VisualState.Setters>
                    <Setter Target="stackPanel.FontSize" Value="40"/>
                </VisualState.Setters>
            </VisualState>

            <VisualState x:Name="MediumScreen">
                <VisualState.StateTriggers>
                    <!--Increase FontSize to 30 when window width >=720 effective pixels.-->
                    <AdaptiveTrigger MinWindowWidth="720"/>
                </VisualState.StateTriggers>
                <VisualState.Setters>
                    <Setter Target="stackPanel.FontSize" Value="30"/>
                </VisualState.Setters>
            </VisualState>

            <VisualState x:Name="SmallScreen">
                <VisualState.StateTriggers>
                    <!--Increase FontSize to 20 when window width >=200 effective pixels.-->
                    <AdaptiveTrigger MinWindowWidth="200"/>
                </VisualState.StateTriggers>
                <VisualState.Setters>
                    <Setter Target="stackPanel.FontSize" Value="20"/>
                </VisualState.Setters>
            </VisualState>
        </VisualStateGroup>
    </VisualStateManager.VisualStateGroups>

    <StackPanel x:Name="stackPanel" Orientation="Vertical" >
        <StackPanel.Resources>
            <Style TargetType="TextBlock">
                <Setter Property="FontSize" Value="10" />
            </Style>
        </StackPanel.Resources>
        <TextBlock Text="Sample text line 1." />
        <TextBlock Text="Sample text line 2." />
    </StackPanel>
</Grid>

有趣的是，作为一个完全独立的注意事项，如果你把setter从这个改为这个：

<VisualState.Setters>
    <Setter Target="stackPanel.FontSize" Value="20"/>
</VisualState.Setters>

对此：

<VisualState.Setters>
    <Setter Target="stackPanel.Orientation" Value="Horizontal"/>
</VisualState.Setters>

然后，只要满足AdaptiveTrigger.MinWindowWidth值，StackPanel的方向就会更改为Horizontal。我不确定stackPanel.Orientation和stackPanel.FontSize之间有什么不同，但显然一个在此上下文中有效，而另一个无效。

StackPanel Class没有名为FontSize的属性，而StackPanel类确实包含Orientation属性。这就是stackPanel.Orientation工作但stackPanel.FontSize失败的原因。
如果要更改TextBlock的大小，则需要调用TextBlock.FontSize。例如：

<VisualState x:Name="LargeScreen">
                <VisualState.StateTriggers>
                    <!--Increase FontSize to 40 when window width is >=1000 effective pixels.-->
                    <AdaptiveTrigger MinWindowWidth="1000"/>
                </VisualState.StateTriggers>
                <VisualState.Setters>
                    <Setter Target="TextBlockOne.FontSize" Value="40"/>
                </VisualState.Setters>
            </VisualState>

 <TextBlock x:Name="TextBlockOne" Text="Sample text line 1." />

更新日期：

您可以将其他TextBlocks的FontSize属性系结至TextBlockOne。因此，当TextBlockOne的FontSize属性变更时，其他TextBlocks也会变更。
就像这样：

<TextBlock x:Name="TextBlockOne" Text="Sample text line 1." />
        <TextBlock  Text="Sample text line 2." FontSize="{Binding FontSize, ElementName=TextBlockOne,Mode=TwoWay}" />
        <TextBlock  Text="Sample text line 3." FontSize="{Binding FontSize, ElementName=TextBlockOne,Mode=TwoWay}" />

XAML 如何使用AdaptiveTriggers更改StackPanel的字体大小？

1条答案

相关问题

热门标签

最新问答