UWP XAML 使用 VisualStateManager 更改目标的样式答案

【问题标题】：UWP XAML Change Style of a target with VisualStateManagerUWP XAML 使用 VisualStateManager 更改目标的样式
【发布时间】：2023-04-05 04:20:01
【问题描述】：

我正在使用 Style 来自定义我的组件：

<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
    <StackPanel Orientation="Horizontal" HorizontalAlignment="Center" VerticalAlignment="Center">
        <StackPanel.Resources>
          <Style TargetType="Button">
            <Setter Property="Height" Value="80"/>
            <Setter Property="Width" Value="80"/>
            <Setter Property="Margin" Value="10"/>
          </Style>
        </StackPanel.Resources>

        <Button Content="Listas"/>
        <Button Content="Filas"/>
        <Button Content="Pilhas"/>
    </StackPanel>

    <VisualStateManager.VisualStateGroups>
       <VisualStateGroup x:Name="VisualStateGroup">
          <VisualState x:Name="VisualStatePhone">
            <VisualState.StateTriggers>
                <AdaptiveTrigger MinWindowWidth="0"/>
            </VisualState.StateTriggers>
            <VisualState.Setters>
            </VisualState.Setters>
        </VisualState>
        <VisualState x:Name="VisualStateTablet">
            <VisualState.StateTriggers>
                <AdaptiveTrigger MinWindowWidth="600"/>
            </VisualState.StateTriggers>
            <VisualState.Setters>
                <Setter Target="Button.Width" Value="100"/>
            </VisualState.Setters>
        </VisualState>
        <VisualState x:Name="VisualStateDesktop">
            <VisualState.StateTriggers>
                <AdaptiveTrigger MinWindowWidth="800"/>
            </VisualState.StateTriggers>
            <VisualState.Setters>
                <Setter Target="Button.Width" Value="200"/>
            </VisualState.Setters>
        </VisualState>
    </VisualStateGroup>
  </VisualStateManager.VisualStateGroups>
</Grid>

但我不知道如何使用 VisualStateManager 更改样式。我想在按钮、文本块等目标上应用样式，然后更改这些样式的属性。

【问题讨论】：

您能详细说明您要更改的样式吗？您是要更改样式中的值还是要将样式替换为另一个？
这两个选项都有效，@JamesCroft。但我宁愿更改 Style 中的值。

标签： xaml styles uwp visualstatemanager

【解决方案1】：

我不知道有什么方法可以进入按钮样式并像那样进行更改。但是如果你愿意为按钮创建一个完整的模板，你可以在模板本身中添加VisualStateGroups：

<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
    <StackPanel Orientation="Horizontal" HorizontalAlignment="Center" VerticalAlignment="Center">
        <StackPanel.Resources>
            <Style TargetType="Button">
                <Setter Property="Height" Value="80"/>
                <Setter Property="Margin" Value="10"/>
                <Setter Property="Template">
                    <Setter.Value>
                        <ControlTemplate TargetType="Button">
                            <Grid x:Name="buttonGrid" Width="80">
                                <VisualStateManager.VisualStateGroups>
                                    <VisualStateGroup x:Name="VisualStateGroup">
                                        <VisualState x:Name="VisualStatePhone">
                                            <VisualState.StateTriggers>
                                                <AdaptiveTrigger MinWindowWidth="0"/>
                                            </VisualState.StateTriggers>
                                        </VisualState>
                                        <VisualState x:Name="VisualStateDesktop">
                                            <VisualState.StateTriggers>
                                                <AdaptiveTrigger MinWindowWidth="800"/>
                                            </VisualState.StateTriggers>
                                            <VisualState.Setters>
                                                <Setter
                                                    Target="buttonGrid.Width"
                                                    Value="200" />
                                            </VisualState.Setters>
                                        </VisualState>
                                    </VisualStateGroup>
                                </VisualStateManager.VisualStateGroups>
                                <Border BorderThickness="2" BorderBrush="Blue">
                                    <ContentPresenter
                                        HorizontalAlignment="Center"
                                        VerticalAlignment="Center"
                                    />
                                </Border>
                            </Grid>
                        </ControlTemplate>
                    </Setter.Value>
                </Setter>
            </Style>
        </StackPanel.Resources>

        <Button Content="Listas" />
        <Button Content="Filas" />
        <Button Content="Pilhas" />
    </StackPanel>
</Grid>

这只是我制作的一个快速丑陋的模板；您应该从 default button template 开始。

【讨论】：

很好，但是我如何更改宽度和高度。如果我有更多属性要更改，我是否必须对每个属性执行所有这些结构？这似乎不是一个好的解决方案，但谢谢！
这个例子确实改变了宽度，cf。 buttonGrid.Width 的 Setter。对于要更改的每个属性，您都需要一个 Setter。考虑到您要完成的工作，我同意该解决方案是不完美的，但是我认为没有更好的方法。