VisualStateManager.GoToElementState(FrameworkElement, String, Boolean) Method
Definition
Important
Some information relates to prerelease product that may be substantially modified before it’s released. Microsoft makes no warranties, express or implied, with respect to the information provided here.
Transitions the element between two states. Use this method to transition states that are defined by an application, rather than defined by a control.
public:
static bool GoToElementState(System::Windows::FrameworkElement ^ stateGroupsRoot, System::String ^ stateName, bool useTransitions);public static bool GoToElementState (System.Windows.FrameworkElement stateGroupsRoot, string stateName, bool useTransitions);static member GoToElementState : System.Windows.FrameworkElement * string * bool -> boolPublic Shared Function GoToElementState (stateGroupsRoot As FrameworkElement, stateName As String, useTransitions As Boolean) As BooleanParameters
- stateGroupsRoot
- FrameworkElement
The root element that contains the VisualStateManager.
- stateName
- String
The state to transition to.
- useTransitions
- Boolean
true to use a VisualTransition object to transition between states; otherwise, false.
Returns
true if the control successfully transitioned to the new state; otherwise, false.
Exceptions
Examples
The following example creates an application that prompts the user to guess a number between 1 and 100. When the user enters a number, the application indicates whether the guess is too high, too low, or correct. The following XAML creates the user interface for the application and defines 4 states: TooLow, TooHigh, Correct, and Guessing. When the application begins, it is in the Guessing state. .
<Grid x:Name="LayoutRoot">
<Grid.Background>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="#FF022343" Offset="0"/>
<GradientStop Color="#FF006BD2" Offset="1"/>
</LinearGradientBrush>
</Grid.Background>
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="ResultStates">
<VisualStateGroup.Transitions>
<VisualTransition GeneratedDuration="0:0:0.5">
<VisualTransition.GeneratedEasingFunction>
<CubicEase EasingMode="EaseOut"/>
</VisualTransition.GeneratedEasingFunction>
</VisualTransition>
</VisualStateGroup.Transitions>
<VisualState x:Name="TooLow">
<Storyboard>
<ColorAnimationUsingKeyFrames
Storyboard.TargetProperty="(Panel.Background).
(GradientBrush.GradientStops)[1].(GradientStop.Color)"
Storyboard.TargetName="LayoutRoot">
<EasingColorKeyFrame KeyTime="0" Value="#FFD22700"/>
</ColorAnimationUsingKeyFrames>
<ColorAnimationUsingKeyFrames
Storyboard.TargetProperty="(Panel.Background).
(GradientBrush.GradientStops)[0].(GradientStop.Color)"
Storyboard.TargetName="LayoutRoot">
<EasingColorKeyFrame KeyTime="0" Value="#FFE2D7D0"/>
</ColorAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames
Storyboard.TargetProperty="(UIElement.RenderTransform).
(TransformGroup.Children)[0].(ScaleTransform.ScaleX)"
Storyboard.TargetName="viewbox">
<EasingDoubleKeyFrame KeyTime="0" Value="1"/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames
Storyboard.TargetProperty="(UIElement.RenderTransform).
(TransformGroup.Children)[0].(ScaleTransform.ScaleY)"
Storyboard.TargetName="viewbox">
<EasingDoubleKeyFrame KeyTime="0" Value="1"/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames
Storyboard.TargetProperty="(Panel.Background).
(GradientBrush.GradientStops)[0].(GradientStop.Offset)"
Storyboard.TargetName="LayoutRoot">
<EasingDoubleKeyFrame KeyTime="0" Value="0.5"/>
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="TooHigh">
<Storyboard>
<ColorAnimationUsingKeyFrames
Storyboard.TargetProperty="(Panel.Background).
(GradientBrush.GradientStops)[1].(GradientStop.Color)"
Storyboard.TargetName="LayoutRoot">
<EasingColorKeyFrame KeyTime="0" Value="#FFF3EBE9"/>
</ColorAnimationUsingKeyFrames>
<ColorAnimationUsingKeyFrames
Storyboard.TargetProperty="(Panel.Background).
(GradientBrush.GradientStops)[0].(GradientStop.Color)"
Storyboard.TargetName="LayoutRoot">
<EasingColorKeyFrame KeyTime="0" Value="#FFF12807"/>
</ColorAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames
Storyboard.TargetProperty="(UIElement.RenderTransform).
(TransformGroup.Children)[0].(ScaleTransform.ScaleX)"
Storyboard.TargetName="viewbox">
<EasingDoubleKeyFrame KeyTime="0" Value="1"/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames
Storyboard.TargetProperty="(UIElement.RenderTransform).
(TransformGroup.Children)[0].(ScaleTransform.ScaleY)"
Storyboard.TargetName="viewbox">
<EasingDoubleKeyFrame KeyTime="0" Value="1"/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames
Storyboard.TargetProperty="(Panel.Background).
(GradientBrush.GradientStops)[1].(GradientStop.Offset)"
Storyboard.TargetName="LayoutRoot">
<EasingDoubleKeyFrame KeyTime="0" Value="0.5"/>
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="Correct">
<Storyboard>
<ColorAnimationUsingKeyFrames
Storyboard.TargetProperty="(Panel.Background).
(GradientBrush.GradientStops)[0].(GradientStop.Color)"
Storyboard.TargetName="LayoutRoot">
<EasingColorKeyFrame KeyTime="0" Value="#FF0E4302"/>
</ColorAnimationUsingKeyFrames>
<ColorAnimationUsingKeyFrames
Storyboard.TargetProperty="(Panel.Background).
(GradientBrush.GradientStops)[1].(GradientStop.Color)"
Storyboard.TargetName="LayoutRoot">
<EasingColorKeyFrame KeyTime="0" Value="#FF14D200"/>
</ColorAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames
Storyboard.TargetProperty="(UIElement.RenderTransform).
(TransformGroup.Children)[0].(ScaleTransform.ScaleX)"
Storyboard.TargetName="viewbox">
<EasingDoubleKeyFrame KeyTime="0" Value="1"/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames
Storyboard.TargetProperty="(UIElement.RenderTransform).
(TransformGroup.Children)[0].(ScaleTransform.ScaleY)"
Storyboard.TargetName="viewbox">
<EasingDoubleKeyFrame KeyTime="0" Value="1"/>
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="Guessing"/>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition/>
<ColumnDefinition Width="247"/>
</Grid.ColumnDefinitions>
<TextBlock Grid.Row="0" Grid.ColumnSpan="2" Margin="20,5,20,5"
FontSize="24" Foreground="White"
Text="Guess a number between 1 and 100"/>
<TextBox x:Name="Guess" Grid.Row="1" Margin="20,20,10,10"
TextWrapping="Wrap" FontSize="48"
TextChanged="OnTypingGuess"/>
<Button x:Name="GuessButton" Grid.Row="1" Content="Guess"
Margin="10,20,20,10" Grid.Column="1"
FontSize="48" Click="OnGuess"
IsDefault="True"/>
<Viewbox x:Name="viewbox" Grid.ColumnSpan="2" Grid.Row="2"
Margin="20,10,20,20" RenderTransformOrigin="0.5,0.5">
<Viewbox.RenderTransform>
<TransformGroup>
<ScaleTransform ScaleX="0" ScaleY="0"/>
<SkewTransform/>
<RotateTransform/>
<TranslateTransform/>
</TransformGroup>
</Viewbox.RenderTransform>
<TextBlock x:Name="Result" TextWrapping="Wrap"/>
</Viewbox>
</Grid>
The following code shows the logic of the application. When the user enters a number and clicks the button, the application calls GoToElementState to transition to TooHigh, TooLow, or Correct to provide feedback to the user about the guess. To try this example, call the GenerateNumber method when the application begins.
int number;
private void GenerateNumber()
{
System.Random r = new System.Random();
number = r.Next(100) + 1;
}
private void OnGuess(object sender, System.Windows.RoutedEventArgs e)
{
int guess;
if (int.TryParse(this.Guess.Text, out guess))
{
if (guess < this.number)
{
VisualStateManager.GoToElementState(this.LayoutRoot, "TooLow", true);
this.Result.Text = "Too Low!";
}
else if (guess > this.number)
{
VisualStateManager.GoToElementState(this.LayoutRoot, "TooHigh", true);
this.Result.Text = "Too High!";
}
else
{
VisualStateManager.GoToElementState(this.LayoutRoot, "Correct", true);
this.Result.Text = "Correct!";
}
}
}
private void OnTypingGuess(object sender, System.Windows.Controls.TextChangedEventArgs e)
{
VisualStateManager.GoToElementState(this.LayoutRoot, "Guessing", true);
this.Result.Text = "";
}
Private number As Integer
Private Sub GenerateNumber()
Dim r As New System.Random()
number = r.Next(100) + 1
End Sub
Private Sub OnGuess(ByVal sender As Object, ByVal e As System.Windows.RoutedEventArgs)
Dim guess As Integer
If Integer.TryParse(Me.Guess.Text, guess) Then
If guess < Me.number Then
VisualStateManager.GoToElementState(Me.LayoutRoot, "TooLow", True)
Me.Result.Text = "Too Low!"
ElseIf guess > Me.number Then
VisualStateManager.GoToElementState(Me.LayoutRoot, "TooHigh", True)
Me.Result.Text = "Too High!"
Else
VisualStateManager.GoToElementState(Me.LayoutRoot, "Correct", True)
Me.Result.Text = "Correct!"
End If
End If
End Sub
Private Sub OnTypingGuess(ByVal sender As Object, ByVal e As System.Windows.Controls.TextChangedEventArgs)
VisualStateManager.GoToElementState(Me.LayoutRoot, "Guessing", True)
Me.Result.Text = ""
End Sub
Remarks
Call the GoToElementState method to change states on an element outside of a ControlTemplate (for example, if you use a VisualStateManager in a DataTemplate or Window). Call the GoToState method if you are changing states in a control that uses the VisualStateManager in its ControlTemplate.
Applies to
Collaborate with us on GitHub
The source for this content can be found on GitHub, where you can also create and review issues and pull requests. For more information, see our contributor guide.
Feedback
Coming soon: Throughout 2024 we will be phasing out GitHub Issues as the feedback mechanism for content and replacing it with a new feedback system. For more information see: https://aka.ms/ContentUserFeedback.
Submit and view feedback for