This topic has not yet been rated - Rate this topic

VisualStateManager.GoToElementState Method

.NET Framework 4.5

.NET Framework 4

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)

Syntax

C++

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.

Exceptions

Exception	Condition
ArgumentNullException	stateGroupsRoot is null. -or- stateName is null.

Exception

Condition

ArgumentNullException

stateGroupsRoot is null.

-or-

stateName is null.

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.

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

XAML

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

Version Information

.NET Framework

Supported in: 4.5, 4

.NET Framework Client Profile

Supported in: 4

Platforms

Windows 8, Windows Server 2012, Windows 7, Windows Vista SP2, Windows Server 2008 (Server Core Role not supported), Windows Server 2008 R2 (Server Core Role supported with SP1 or later; Itanium not supported)

The .NET Framework does not support all versions of every platform. For a list of the supported versions, see .NET Framework System Requirements.

Reference

VisualStateManager Class

System.Windows Namespace

Other Resources

Customizing the Appearance of an Existing Control by Creating a ControlTemplate

Creating a Control That Has a Customizable Appearance

Did you find this helpful? Yes No

Not accurate

Not enough depth

Need more code examples

(1500 characters remaining)