Windows apps
Collapse the table of content
Expand the table of content
Information
The topic you requested is included in another documentation set. For convenience, it's displayed below. Choose Switch to see the topic in its original location.

VisualStateManager.GoToElementState Method (FrameworkElement, String, Boolean)

.NET Framework (current version)
 

Transitions the element between two states. Use this method to transition states that are defined by an application, rather than defined by a control.

Namespace:   System.Windows
Assembly:  PresentationFramework (in PresentationFramework.dll)

public static bool GoToElementState(
	FrameworkElement stateGroupsRoot,
	string stateName,
	bool useTransitions
)

Parameters

stateGroupsRoot
Type: System.Windows.FrameworkElement

The root element that contains the VisualStateManager.

stateName
Type: System.String

The state to transition to.

useTransitions
Type: System.Boolean

true to use a VisualTransition object to transition between states; otherwise, false.

Return Value

Type: System.Boolean

true if the control successfully transitioned to the new state; otherwise, false.

Exception Condition
ArgumentNullException

stateGroupsRoot is null.

-or-

stateName is null.

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.

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 = "";
}

.NET Framework
Available since 4.0
Return to top
Show:
© 2016 Microsoft