UWP XAML Change Style of a target with VisualStateManager

Question

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.

Could you expand on what Style you're trying to change? Are you trying to change a value in a Style or are you wanting to swap out a Style for another? — James Croft, Nov 20 '16 at 13:24
The two options are valid, @JamesCroft. But I'd rather to change a value in a Style. — Sérgio Damasceno, Nov 21 '16 at 15:50

Petter Hesselberg · Answer 1 · 2016-11-22T07:20:43.300

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.

Great, but how I change the width and height. And if I have more properties to change, will I have to do all this structure to each property? It seems not a good solution, but thanks! — Sérgio Damasceno, Nov 21 '16 at 21:58
The example does change the width, cf. the `Setter` of `buttonGrid.Width`. You'd want one `Setter` for each property you want to change. I agree the solution is imperfect, given what you're trying to accomplish, but I don't see anything better. — Petter Hesselberg, Nov 22 '16 at 07:19

UWP XAML Change Style of a target with VisualStateManager

1 Answers1

Linked