c# - style - ¿Cómo uso VisualStateManager correctamente?

xamarin forms

Question

mi Código para cambiar las propiedades no funciona y no tengo absolutamente ninguna idea de lo que está mal, pero quizás sí.

Aquí hay un ejemplo simplificado de mi Código, que reproduce el error. Este es mi código Xaml:

<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
<Button x:Name="MyButton"
Height="100"
Width="300"
Content="Click"
FontSize="40"
FontWeight="Bold"
VerticalAlignment="Center"
HorizontalAlignment="Center"
Background="Red" Click="MyButton_Click"/>
</Grid>
<VisualStateManager.VisualStateGroups>
<VisualStateGroup>
<VisualState x:Name="Blue">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="MyButton"
Storyboard.TargetProperty="Background">
<DiscreteObjectKeyFrame KeyTime="0" Value="Aqua"/>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>

Este es el Código-Detrás:

public sealed partial class MainPage : Page
{
public MainPage()
{
this.InitializeComponent();
}
private void MyButton_Click(object sender, RoutedEventArgs e)
{
VisualStateManager.GoToState(this, "Blue", true);
}
}

En teoría, esto debería cambiar el color del botón a "Aqua" al hacer clic en él, pero no sucede nada.

Answer 1

Coloque el contenido dentro de ContentControl y aplique VisualState en el control en lugar de en Page.

También en lugar de ObjectAnimation , usa ColorAnimation para animar el color de Button.

<ContentControl x:Name="contentControl">
<ContentControl.Template>
<ControlTemplate>
<Grid
Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
<Button x:Name="MyButton"
Height="100"
Width="300"
Content="Click"
FontSize="40"
FontWeight="Bold"
VerticalAlignment="Center"
HorizontalAlignment="Center"
Background="Red" Click="Button_Click"/>
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CustomGroups">
<VisualState x:Name="Blue">
<Storyboard>
<ColorAnimation Storyboard.TargetName="MyButton"
Storyboard.TargetProperty="Background.Color"
To="Aqua"/>
</Storyboard>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
</Grid>
</ControlTemplate>
</ContentControl.Template>
</ContentControl>

y en código subyacente, pase el control de contenido en lugar de la página:

VisualStateManager.GoToState(contentControl, "Blue", true);