UWP XAML Change Style of a target with VisualStateManager

问题

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>

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.

回答1:

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.

来源：https://stackoverflow.com/questions/40668527/uwp-xaml-change-style-of-a-target-with-visualstatemanager

标签

xaml

styles

uwp

visualstatemanager