xaml button uwp uwp-xaml visualstates

xaml - Botón VisualState Focused no funciona



button uwp (1)

Intento cambiar el color de la fuente de un botón cuando se hace clic en el botón. He intentado muchas cosas diferentes, pero ninguna ha funcionado. Esta es la última cosa que probé y creo que debería ser la respuesta, pero no está funcionando. ¿Alguien puede ayudar? PointerOver funciona bien, pero Focused no está haciendo nada cuando se hace clic en el botón.

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

EDITAR basado en comentarios: agregar aclaración: intenté usar Pressed antes de publicar esta pregunta, pero no hace lo que estoy buscando. Después de hacer clic en Quiero que el color permanezca aplicado hasta que se haga clic en otro botón, luego el texto en el nuevo botón presionado cambiará de color y el botón anterior al que se hizo clic volverá al color predeterminado. Con presionar, tan pronto como suelta el botón del mouse, el texto vuelve al valor predeterminado.

Sugerencias de respuesta basadas en la edición: también proporciona el código circundante para ver si se está cometiendo un error en otro lugar.

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


En UWP, hay un enfoque visual de nivel de sistema aplicado al Button y muchos otros controles de forma predeterminada. Si desea administrar su propio enfoque visual como lo definió en su estado visual Focused , intente configurar

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

en tu estilo

Además, el estado visual del foco personalizado no está dentro de CommonStates sino en FocusStates . Por lo tanto, deberá mover su estado de enfoque dentro

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

Actualizar

Cuando desee mantener el foco en el clic, querrá dos cosas. Primero, necesita AllowFocusOnInteraction establecido en True . Por defecto, ya es True en un Button . En segundo lugar, desea manejar el estado PointerFocused junto con Focused one. Así que reemplace sus estados de enfoque con el siguiente

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

¿Por qué? Debido a que dos estados están sucediendo al mismo tiempo cuando hace clic en un Button - Pressed desde CommonStates y PointerFocused desde FocusStates . El estado Focused generalmente se activa cuando toca la tecla Tab .

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