按钮VisualState聚焦不起作用 [英] Button VisualState Focused not working

问题描述

我试图在单击按钮时更改按钮的字体颜色.我尝试了许多不同的方法，但是都没有奏效.这是我尝试的最新操作，我认为应该是答案，但无法正常工作.有人可以帮忙吗?PointerOver工作正常，但是单击按钮时Focused无法执行任何操作.

I'm trying to change the font color of a button when the button is clicked. I have tried many different things but none have worked. This is the latest thing I tried and what I believe should be the answer but its not working. Can someone help? PointerOver isworking fine, but Focused is not doing anything when the button is clicked.

<Style x:Key="ButtonStyle" TargetType="Button">
    <Setter Property="Background" Value="Transparent" />
    <Setter Property="Foreground" Value="Black" />
    <Setter Property="FontWeight" Value="Normal" />
    <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="ContentPresenter.FontWeight" Value="Bold" />
                                </VisualState.Setters>
                            </VisualState>

                            <VisualState x:Name="Pressed"/>

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

                            <VisualState x:Name="Disabled">
                            </VisualState>
                        </VisualStateGroup>

                    </VisualStateManager.VisualStateGroups>
                    <ContentPresenter
                        x:Name="ContentPresenter"
                        Content="{TemplateBinding Content}"
                        ContentTransitions="{TemplateBinding ContentTransitions}"
                        ContentTemplate="{TemplateBinding ContentTemplate}" />
                </Grid>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

根据评论进行添加说明-在发布此问题之前，我曾尝试使用Pressed，但它并没有满足我的需求.单击后，我希望颜色保持应用状态，直到单击另一个按钮，然后单击的新按钮中的文本将更改颜色，而单击的上一个按钮将恢复为默认颜色.按下后，只要放开鼠标按钮，文本就会恢复为默认值.

EDIT based on comments: Adding clarification- I tried using Pressed prior to posting this question but it doesn't do what I'm looking for. After click I want the color to remain applied until another button is clicked, then the text in the new button clicked will change color and the previous button clicked will go back to the default color. With pressed, as soon as you let the mouse button go the text goes back to default.

基于编辑的答案建议:还提供了周围的代码，以查看是否在其他地方犯了错误.

Edit based Answer suggestions: Also providing surrounding code to see if mistake is being made somewhere else.

    <Page.Resources>
    <Style x:Key="ButtonStyle" TargetType="Button">
        <Setter Property="Background" Value="Transparent" />
        <Setter Property="Foreground" Value="Black" />
        <Setter Property="FontWeight" Value="Normal" />
        <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="ContentPresenter.FontWeight" Value="Bold" />
                                    </VisualState.Setters>
                                </VisualState>

                                <VisualState x:Name="Pressed"/>

                                <VisualState x:Name="Disabled">
                                </VisualState>
                            </VisualStateGroup>
                            <VisualStateGroup x:Name="FocusStates">
                                <VisualState x:Name="Focused">
                                    <VisualState.Setters>
                                        <Setter Target="ContentPresenter.Foreground" Value="Purple" />
                                    </VisualState.Setters>
                                </VisualState>
                                <VisualState x:Name="Unfocused" />
                            </VisualStateGroup>
                        </VisualStateManager.VisualStateGroups>
                        <ContentPresenter x:Name="ContentPresenter"
                      Content="{TemplateBinding Content}"
                    ContentTransitions="{TemplateBinding ContentTransitions}"
                    ContentTemplate="{TemplateBinding ContentTemplate}" />
                    </Grid>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
</Page.Resources>
<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
    <Button Style="{StaticResource ButtonStyle}" Content="Button" HorizontalAlignment="Left" Margin="10,180,0,0" VerticalAlignment="Top" />
    <Button Style="{StaticResource ButtonStyle}" Content="Button" HorizontalAlignment="Left" Margin="100,180,0,0" VerticalAlignment="Top"/>
    <Button Style="{StaticResource ButtonStyle}" Content="Button" HorizontalAlignment="Left" Margin="194,180,0,0" VerticalAlignment="Top"/>
</Grid>

推荐答案

在UWP中，有系统级焦点视觉应用于 Button 和许多其他控件默认.如果您想像在 Focused 视觉状态中那样定义自己的焦点视觉，请尝试设置

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

以您的风格.

此外，自定义焦点的视觉状态不是在 CommonStates 内部，而是在 FocusStates 中.因此，您需要将焦点状态移入内部

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>

---

更新

要保持对点击的关注，您将需要两件事.首先，您需要将 AllowFocusOnInteraction 设置为 True .默认情况下，它在 Button 上已经是 True .其次，您要同时处理 PointerFocused 状态和 Focused 状态.因此，将您的焦点状态替换为以下内容

---

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> 

为什么?因为当您单击 CommonStates 中的 Button - Pressed 和<焦点状态.当您点击 Tab 键时，通常会触发 Focused 状态.

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>

这篇关于按钮VisualState聚焦不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！