Button VisualState Focused not working

眉间皱痕 提交于 2019-12-06 07:34:56

In UWP, there's a System-level focus visual applied to Button and a lot of other controls by default. If you want to manage your own focus visual like how you defined in your Focused visual state, try setting

<Setter Property="UseSystemFocusVisuals" Value="False" />

in your style.

Also, custom focus visual state is not inside CommonStates but FocusStates. So you will need to move your focus state inside

<VisualStateGroup x:Name="FocusStates">
    <VisualState x:Name="Focused">
        <VisualState.Setters>
            <Setter Target="ContentPresenter.Foreground" Value="Purple" />
        </VisualState.Setters>
    </VisualState>
    <VisualState x:Name="Unfocused" />
</VisualStateGroup>

Update

When you want to maintain the focus on click, you will want two things. First, you need AllowFocusOnInteraction set to True. By default, it's already True on a Button. Second, you want to handle PointerFocused state along with Focused one. So replace your focus states with the following

<VisualStateGroup x:Name="FocusStates">
    <VisualState x:Name="Focused">
        <VisualState.Setters>
            <Setter Target="ContentPresenter.Foreground" Value="Purple" />
        </VisualState.Setters>
    </VisualState>
    <VisualState x:Name="PointerFocused">
        <VisualState.Setters>
            <Setter Target="ContentPresenter.Foreground" Value="Purple" />
        </VisualState.Setters>
    </VisualState>
    <VisualState x:Name="Unfocused" />
</VisualStateGroup> 

Why? Because two states are happening around the same time when you click a Button - Pressed from CommonStates and PointerFocused from FocusStates. The Focused state is generally triggered when you tap the Tab key.


<Style x:Key="ButtonStyle" TargetType="Button">
    <Setter Property="Background" Value="Transparent" />
    <Setter Property="Foreground" Value="Black" />
    <Setter Property="FontWeight" Value="Normal" />
    <Setter Property="FontSize" Value="40" />
    <Setter Property="UseSystemFocusVisuals" Value="False" />
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="Button">
                <Grid x:Name="RootGrid" Background="{TemplateBinding Background}">
                    <VisualStateManager.VisualStateGroups>
                        <VisualStateGroup x:Name="CommonStates">
                            <VisualState x:Name="Normal" />

                            <VisualState x:Name="PointerOver">
                                <VisualState.Setters>
                                    <Setter Target="FocusContentPresenter.FontWeight" Value="Bold" />
                                    <Setter Target="ContentPresenter.FontWeight" Value="Bold" />
                                    <Setter Target="ContentPresenter.Foreground" Value="Pink" />
                                </VisualState.Setters>
                            </VisualState>

                            <VisualState x:Name="Pressed">
                                <VisualState.Setters>
                                    <Setter Target="ContentPresenter.Foreground" Value="Purple" />
                                </VisualState.Setters>
                            </VisualState>

                            <VisualState x:Name="Disabled">
                            </VisualState>
                        </VisualStateGroup>
                        <VisualStateGroup x:Name="FocusStates">
                            <VisualState x:Name="Focused">
                                <VisualState.Setters>
                                    <Setter Target="FocusContentPresenter.Foreground" Value="Purple" />
                                    <Setter Target="FocusContentPresenter.(UIElement.Opacity)" Value="1" />
                                </VisualState.Setters>
                            </VisualState>
                            <VisualState x:Name="PointerFocused">
                                <VisualState.Setters>
                                    <Setter Target="FocusContentPresenter.Foreground" Value="Purple" />
                                    <Setter Target="FocusContentPresenter.(UIElement.Opacity)" Value="1" />
                                </VisualState.Setters>
                            </VisualState>
                            <VisualState x:Name="Unfocused" />
                        </VisualStateGroup>
                    </VisualStateManager.VisualStateGroups>
                    <ContentPresenter x:Name="ContentPresenter" Content="{TemplateBinding Content}" ContentTransitions="{TemplateBinding ContentTransitions}" ContentTemplate="{TemplateBinding ContentTemplate}" />
                    <ContentPresenter x:Name="FocusContentPresenter" Opacity="0" Content="{TemplateBinding Content}" ContentTransitions="{TemplateBinding ContentTransitions}" ContentTemplate="{TemplateBinding ContentTemplate}" />
                </Grid>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>
易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!