UWP XAML 使用 VisualStateManager 更改目标的样式 [英] UWP XAML Change Style of a target with VisualStateManager

问题描述

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

I´m using Style to custom my components:

<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 更改样式.我想在按钮、文本块等目标上应用样式，然后更改这些样式的属性.

But I don´t know how to change a Style with VisualStateManager. I´d like to apply styles on targets like Buttons, TextBlocks, etc, and then change the properties of that styles.

推荐答案

我不知道您可以通过什么方式进入按钮样式并像这样更改它.但是如果你愿意为按钮创建一个完整的模板，你可以在模板本身中添加VisualStateGroups:

I don't know any way you can reach into the button style and change it like that. But if you're willing to create a complete template for the button, you can add VisualStateGroups in the template itself:

<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>

那只是我制作的一个快速丑陋的模板；您想从 默认按钮模板 代替.

That's just a quicke ugly template I made up; you'd want to start with the default button template instead.

这篇关于UWP XAML 使用 VisualStateManager 更改目标的样式的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！