Create custom VisualState in xaml and manually set

2020-07-10 10:43发布

问题:

I have a TabItem style, which has VisualStates.

<VisualState x:Name="MouseOver"> 
<!-- Tab turns bronze when mouseover -->
</VisualState>

Now I want to have a custom visual state and manually set the state in codebehind instead of relying on the MouseOver event.

<VisualState x:Name="CustomVisualState">
<!-- this will be a storyboard to cause flashing -->
</VisualState> 

Then I need to set it in CodeBehind.

MyTabItem.VisualState = CustomVisualState.  //something like this

回答1:

Have you tried VisualStateManager.GoToState

Takes a Control, string with the custom state name and a bool flag for using transitions.

Example Usage From msdn

private void UpdateStates(bool useTransitions)
{
    if (Value >= 0)
    {
        VisualStateManager.GoToState(this, "Positive", useTransitions);
    }
    else
    {
        VisualStateManager.GoToState(this, "Negative", useTransitions);
    }

    if (IsFocused)
    {
        VisualStateManager.GoToState(this, "Focused", useTransitions);
    }
    else
    {
        VisualStateManager.GoToState(this, "Unfocused", useTransitions);
    }
}

A slightly more complicated example usage from here

Given this xaml

      <Grid x:Name="LayoutRoot"  Background="LightBlue">
          <VisualStateManager.VisualStateGroups>
              <VisualStateGroup x:Name="SG1">
                  <VisualStateGroup.Transitions>
                      <VisualTransition GeneratedDuration="00:00:01">
                          <VisualTransition.GeneratedEasingFunction>
                              <ElasticEase EasingMode="EaseOut"/>
                          </VisualTransition.GeneratedEasingFunction>
                      </VisualTransition>
                  </VisualStateGroup.Transitions>
                  <VisualState x:Name="SG1Normal"/>
                  <VisualState x:Name="SG1EllipseRight" >
                      <Storyboard>
                            <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Duration="00:00:00.0010000" Storyboard.TargetName="ellipse" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.X)">
                              <EasingDoubleKeyFrame KeyTime="00:00:00" Value="320"/>
                          </DoubleAnimationUsingKeyFrames>
                      </Storyboard>
                  </VisualState>
              </VisualStateGroup>
          </VisualStateManager.VisualStateGroups>
          <Ellipse x:Name="ellipse" Fill="Red" Stroke="Black" 
                   Height="116" HorizontalAlignment="Left" Margin="50,98,0,0" 
                   VerticalAlignment="Top" Width="235" RenderTransformOrigin="0.5,0.5" >
              <Ellipse.RenderTransform>
                  <TransformGroup>
                      <ScaleTransform/>
                      <SkewTransform/>
                      <RotateTransform/>
                      <TranslateTransform/>
                  </TransformGroup>
              </Ellipse.RenderTransform>
          </Ellipse>
      </Grid>

Changing state can be done like so.

 VisualStateManager.GoToState(this, SG1EllipseRight.Name, true);

Or alternatively

VisualStateManager.GoToState(control, "SG1EllipseRight", true);


回答2:

Try this,

VisualStateManager.GoToElementState(Control, "StateName", true/false);

or

VisualStateManager.GoToState(Control, "StateName", true/false);


回答3:

The VisualStateManager also enables you to specify when a control enters a specific state. The method that you should call to change states depends on your scenario. If you create a control that uses the VisualStateManager in its ControlTemplate, call the GoToState method. For more information about how to create controls that use the VisualStateManager, see Creating a Control That Has a Customizable Appearance. If you use the VisualStateManager outside of a ControlTemplate (for example, if you use a VisualStateManager in a UserControl or in a single element), call the GoToElementState method. In either case, the VisualStateManager performs the logic that is required to appropriately start and stop the storyboards that are associated with the involved state. - VisualStateManager Class

That is how different between GoToElementState and GoToState.