locked
VisualStateManager::GoToState not take effect?

    Question

  • hi , As http://social.msdn.microsoft.com/Forums/windowsapps/en-US/35181239-b932-4a64-ba65-eefd6514d332/create-an-customized-animation-appbar-button?forum=winappswithnativecode metioned, I am adding a animation effect to appbar button..

    I am planning to update statndardstyles.xaml to have a ProgressRing defined. By default its Active set to false. The whole xaml code like below, VisualState x:Name="Executing" is newly added into the appbar button view states. However, when I call

    VisualStateManager::GoToState(CopyToClient, "Executing", false);

    the function return true seems it should succeed, but button does not go the my visual state as desired:

       <Style x:Key="AppBarButtonStyle" TargetType="ButtonBase">
          <Setter Property="Foreground" Value="#FF000000;"/>
          <Setter Property="VerticalAlignment" Value="Stretch"/>
          <Setter Property="FontFamily" Value="Segoe UI Symbol"/>
          <Setter Property="FontWeight" Value="Normal"/>
          <Setter Property="FontSize" Value="20"/>
          <Setter Property="AutomationProperties.ItemType" Value="App Bar Button"/>
          <Setter Property="Template">
             <Setter.Value>
                <ControlTemplate TargetType="ButtonBase">
                   <Grid x:Name="RootGrid" Width="100" Background="Transparent">
                      <StackPanel VerticalAlignment="Top" Margin="0,12,0,11">
                         <Grid Width="40" Height="40" Margin="0,0,0,5" HorizontalAlignment="Center">
                            <TextBlock x:Name="BackgroundGlyph" Text="&#xE0A8;" FontFamily="Segoe UI Symbol" FontSize="53.333" Margin="-4,-19,0,0" Foreground="{StaticResource AppBarItemBackgroundThemeBrush}"/>
                            <TextBlock x:Name="OutlineGlyph" Text="&#xE0A7;" FontFamily="Segoe UI Symbol" FontSize="53.333" Margin="-4,-19,0,0"/>
                            <ProgressRing x:Name="ProgressRing" IsActive="False" HorizontalAlignment="Center" VerticalAlignment="Center" Width="45" Height="45"/>
                            <ContentPresenter x:Name="Content" HorizontalAlignment="Center" Margin="-1,-1,0,0" VerticalAlignment="Center"/>
                         </Grid>
                         <TextBlock
                                    x:Name="TextLabel"
                                    Text="{TemplateBinding AutomationProperties.Name}"
                                    Foreground="#FF000000"
                                    Margin="0,0,2,0"
                                    FontSize="12"
                                    TextAlignment="Center"
                                    Width="88"
                                    MaxHeight="32"
                                    TextTrimming="WordEllipsis"
                                    Style="{StaticResource BasicTextStyle}"/>
                      </StackPanel>
                      <Rectangle
                                    x:Name="FocusVisualWhite"
                                    IsHitTestVisible="False"
                                    Stroke="{StaticResource FocusVisualWhiteStrokeThemeBrush}"
                                    StrokeEndLineCap="Square"
                                    StrokeDashArray="1,1"
                                    Opacity="0"
                                    StrokeDashOffset="1.5"/>
                      <Rectangle
                                    x:Name="FocusVisualBlack"
                                    IsHitTestVisible="False"
                                    Stroke="{StaticResource FocusVisualBlackStrokeThemeBrush}"
                                    StrokeEndLineCap="Square"
                                    StrokeDashArray="1,1"
                                    Opacity="0"
                                    StrokeDashOffset="0.5"/>
    
                      <VisualStateManager.VisualStateGroups>
                         <VisualStateGroup x:Name="ApplicationViewStates">
                            <VisualState x:Name="FullScreenLandscape"/>
                            <VisualState x:Name="Filled"/>
                            <VisualState x:Name="FullScreenPortrait">
                               <Storyboard>
                                  <ObjectAnimationUsingKeyFrames Storyboard.TargetName="TextLabel" Storyboard.TargetProperty="Visibility">
                                     <DiscreteObjectKeyFrame KeyTime="0" Value="Collapsed"/>
                                  </ObjectAnimationUsingKeyFrames>
                                  <ObjectAnimationUsingKeyFrames Storyboard.TargetName="RootGrid" Storyboard.TargetProperty="Width">
                                     <DiscreteObjectKeyFrame KeyTime="0" Value="60"/>
                                  </ObjectAnimationUsingKeyFrames>
                               </Storyboard>
                            </VisualState>
                            <VisualState x:Name="Snapped">
                               <Storyboard>
                                  <ObjectAnimationUsingKeyFrames Storyboard.TargetName="TextLabel" Storyboard.TargetProperty="Visibility">
                                     <DiscreteObjectKeyFrame KeyTime="0" Value="Collapsed"/>
                                  </ObjectAnimationUsingKeyFrames>
                                  <ObjectAnimationUsingKeyFrames Storyboard.TargetName="RootGrid" Storyboard.TargetProperty="Width">
                                     <DiscreteObjectKeyFrame KeyTime="0" Value="60"/>
                                  </ObjectAnimationUsingKeyFrames>
                               </Storyboard>
                            </VisualState>
                         </VisualStateGroup>
                         <VisualStateGroup x:Name="CommonStates">
                            <VisualState x:Name="Normal"/>
                            <VisualState x:Name="PointerOver">
                               <Storyboard>
                                  <ObjectAnimationUsingKeyFrames Storyboard.TargetName="BackgroundGlyph" Storyboard.TargetProperty="Foreground">
                                     <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource FlyoutButtonDisabledBackgroundThemeBrush}"/>
                                  </ObjectAnimationUsingKeyFrames>
                                  <ObjectAnimationUsingKeyFrames Storyboard.TargetName="Content" Storyboard.TargetProperty="Foreground">
                                     <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource BottomAppBarForegroundThemeBrush}"/>
                                  </ObjectAnimationUsingKeyFrames>
                               </Storyboard>
                            </VisualState>
                            <VisualState x:Name="Pressed">
                               <Storyboard>
                                  <ObjectAnimationUsingKeyFrames Storyboard.TargetName="OutlineGlyph" Storyboard.TargetProperty="Foreground">
                                     <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource AppBarItemForegroundThemeBrush}"/>
                                  </ObjectAnimationUsingKeyFrames>
                                  <ObjectAnimationUsingKeyFrames Storyboard.TargetName="BackgroundGlyph" Storyboard.TargetProperty="Foreground">
                                     <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource BottomAppBarItemPressedBackgroundThemeBrush}"/>
                                  </ObjectAnimationUsingKeyFrames>
                                  <ObjectAnimationUsingKeyFrames Storyboard.TargetName="Content" Storyboard.TargetProperty="Foreground">
                                     <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource BottomAppBarItemPressedForegroundThemeBrush}"/>
                                  </ObjectAnimationUsingKeyFrames>
                               </Storyboard>
                            </VisualState>
                            <VisualState x:Name="Disabled"/>
                            <VisualState x:Name="Executing">
                               <Storyboard>
                                  <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ProgressRing" Storyboard.TargetProperty="IsActive">
                                     <DiscreteObjectKeyFrame KeyTime="0" Value="True"/>
                                  </ObjectAnimationUsingKeyFrames>
                                  <ObjectAnimationUsingKeyFrames Storyboard.TargetName="OutlineGlyph" Storyboard.TargetProperty="Visibility">
                                     <DiscreteObjectKeyFrame KeyTime="0" Value="Collapsed"/>
                                  </ObjectAnimationUsingKeyFrames>
                               </Storyboard>
                            </VisualState>
                         </VisualStateGroup>
                         <VisualStateGroup x:Name="FocusStates">
                            <VisualState x:Name="Focused">
                               <Storyboard>
                                  <DoubleAnimation
                                                    Storyboard.TargetName="FocusVisualWhite"
                                                    Storyboard.TargetProperty="Opacity"
                                                    To="1"
                                                    Duration="0"/>
                                  <DoubleAnimation
                                                    Storyboard.TargetName="FocusVisualBlack"
                                                    Storyboard.TargetProperty="Opacity"
                                                    To="1"
                                                    Duration="0"/>
                               </Storyboard>
                            </VisualState>
                            <VisualState x:Name="Unfocused" />
                            <VisualState x:Name="PointerFocused" />
                         </VisualStateGroup>
                         <VisualStateGroup x:Name="CheckStates">
                            <VisualState x:Name="Checked"/>
                            <VisualState x:Name="Unchecked"/>
                            <VisualState x:Name="Indeterminate"/>
                         </VisualStateGroup>
                      </VisualStateManager.VisualStateGroups>
                   </Grid>
                </ControlTemplate>
             </Setter.Value>
          </Setter>
       </Style>


    • Edited by XXXing Monday, March 10, 2014 11:52 AM
    Monday, March 10, 2014 11:50 AM

Answers

  • Derive a new control by inheriting from your button. Add a dependency property is "IsExecuting". Add a member variable isExecuting. Set this flag in the dependency property change event handler. Override the OnXXX methods which cause a visual state change and where you want to change the behaviour. Conditionally call the base method in the overrides chosen, depending on whether you want a state change or not to occur. - You probably don't want a state change while it is in the visual state "Executing" I assume, flagged as isExecuting, and the user moves the mouse off, causing an OnPointerExited for example.

    You may chose not to use a ProgressRing, perhaps a dashed ellipse animated by modifying it's RotationZ or other plane projection - all depending on the style / design of your app and type of button.




    Monday, March 17, 2014 12:10 PM

All replies

  • Hi,

    I create a project to test your codes, I find everything is ok in my project. And the animation can play when I click the button in xaml. See some codes below:

    MainPage.XAML:

    <Page
        x:Class="animations.MainPage"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:local="using:animations"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        mc:Ignorable="d">
    
        <Page.Resources>
            <Style x:Key="BasicTextStyle" TargetType="TextBlock">
                <Setter Property="Foreground" Value="{StaticResource ApplicationForegroundThemeBrush}"/>
                <Setter Property="FontSize" Value="{StaticResource ControlContentThemeFontSize}"/>
                <Setter Property="FontFamily" Value="{StaticResource ContentControlThemeFontFamily}"/>
                <Setter Property="TextTrimming" Value="WordEllipsis"/>
                <Setter Property="TextWrapping" Value="Wrap"/>
                <Setter Property="Typography.StylisticSet20" Value="True"/>
                <Setter Property="Typography.DiscretionaryLigatures" Value="True"/>
                <Setter Property="Typography.CaseSensitiveForms" Value="True"/>
            </Style>
            <SolidColorBrush x:Key="AppBarItemBackgroundThemeBrush" Color="Transparent" />
            <SolidColorBrush x:Key="AppBarItemDisabledForegroundThemeBrush" Color="#66000000" />
            <SolidColorBrush x:Key="AppBarItemForegroundThemeBrush" Color="#FF000000" />
            <SolidColorBrush x:Key="AppBarItemPointerOverBackgroundThemeBrush" Color="#3D000000" />
            <SolidColorBrush x:Key="AppBarItemPointerOverForegroundThemeBrush" Color="#FF000000" />
            <SolidColorBrush x:Key="AppBarItemPressedForegroundThemeBrush" Color="#FFFFFFFF"  />
            <SolidColorBrush x:Key="FlyoutButtonDisabledBackgroundThemeBrush" Color="#3D000000"/>
            <Style x:Key="AppBarButtonStyle" TargetType="ButtonBase">
                <Setter Property="Foreground" Value="#FF000000;"/>
                <Setter Property="VerticalAlignment" Value="Stretch"/>
                <Setter Property="FontFamily" Value="Segoe UI Symbol"/>
                <Setter Property="FontWeight" Value="Normal"/>
                <Setter Property="FontSize" Value="20"/>
                <Setter Property="AutomationProperties.ItemType" Value="App Bar Button"/>
                <Setter Property="Template">
                    <Setter.Value>
                        <ControlTemplate TargetType="ButtonBase">
                            <Grid x:Name="RootGrid" Width="100" Background="Transparent">
                                <StackPanel VerticalAlignment="Top" Margin="0,12,0,11">
                                    <Grid Width="40" Height="40" Margin="0,0,0,5" HorizontalAlignment="Center">
                                        <TextBlock x:Name="BackgroundGlyph" Text="&#xE0A8;" FontFamily="Segoe UI Symbol" FontSize="53.333" Margin="-4,-19,0,0" Foreground="{StaticResource AppBarItemBackgroundThemeBrush}"/>
                                        <TextBlock x:Name="OutlineGlyph" Text="&#xE0A7;" FontFamily="Segoe UI Symbol" FontSize="53.333" Margin="-4,-19,0,0"/>
                                        <ProgressRing x:Name="ProgressRing" IsActive="False" HorizontalAlignment="Center" VerticalAlignment="Center" Width="45" Height="45"/>
                                        <ContentPresenter x:Name="Content" HorizontalAlignment="Center" Margin="-1,-1,0,0" VerticalAlignment="Center"/>
                                    </Grid>
                                    <TextBlock
                                    x:Name="TextLabel"
                                    Text="{TemplateBinding AutomationProperties.Name}"
                                    Foreground="#FF000000"
                                    Margin="0,0,2,0"
                                    FontSize="12"
                                    TextAlignment="Center"
                                    Width="88"
                                    MaxHeight="32"
                                    TextTrimming="WordEllipsis"
                                    Style="{StaticResource BasicTextStyle}"/>
                                </StackPanel>
                                <Rectangle
                                    x:Name="FocusVisualWhite"
                                    IsHitTestVisible="False"
                                    Stroke="{StaticResource FocusVisualWhiteStrokeThemeBrush}"
                                    StrokeEndLineCap="Square"
                                    StrokeDashArray="1,1"
                                    Opacity="0"
                                    StrokeDashOffset="1.5"/>
                                <Rectangle
                                    x:Name="FocusVisualBlack"
                                    IsHitTestVisible="False"
                                    Stroke="{StaticResource FocusVisualBlackStrokeThemeBrush}"
                                    StrokeEndLineCap="Square"
                                    StrokeDashArray="1,1"
                                    Opacity="0"
                                    StrokeDashOffset="0.5"/>
    
                                <VisualStateManager.VisualStateGroups>
                                    <VisualStateGroup x:Name="ApplicationViewStates">
                                        <VisualState x:Name="FullScreenLandscape"/>
                                        <VisualState x:Name="Filled"/>
                                        <VisualState x:Name="FullScreenPortrait">
                                            <Storyboard>
                                                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="TextLabel" Storyboard.TargetProperty="Visibility">
                                                    <DiscreteObjectKeyFrame KeyTime="0" Value="Collapsed"/>
                                                </ObjectAnimationUsingKeyFrames>
                                                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="RootGrid" Storyboard.TargetProperty="Width">
                                                    <DiscreteObjectKeyFrame KeyTime="0" Value="60"/>
                                                </ObjectAnimationUsingKeyFrames>
                                            </Storyboard>
                                        </VisualState>
                                        <VisualState x:Name="Snapped">
                                            <Storyboard>
                                                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="TextLabel" Storyboard.TargetProperty="Visibility">
                                                    <DiscreteObjectKeyFrame KeyTime="0" Value="Collapsed"/>
                                                </ObjectAnimationUsingKeyFrames>
                                                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="RootGrid" Storyboard.TargetProperty="Width">
                                                    <DiscreteObjectKeyFrame KeyTime="0" Value="60"/>
                                                </ObjectAnimationUsingKeyFrames>
                                            </Storyboard>
                                        </VisualState>
                                    </VisualStateGroup>
                                    <VisualStateGroup x:Name="CommonStates">
                                        <VisualState x:Name="Normal"/>
                                        <VisualState x:Name="PointerOver">
                                            <Storyboard>
                                                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="BackgroundGlyph" Storyboard.TargetProperty="Foreground">
                                                    <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource FlyoutButtonDisabledBackgroundThemeBrush}"/>
                                                </ObjectAnimationUsingKeyFrames>
                                                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="Content" Storyboard.TargetProperty="Foreground">
                                                    <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource AppBarForegroundThemeBrush}"/>
                                                </ObjectAnimationUsingKeyFrames>
                                            </Storyboard>
                                        </VisualState>
                                        <VisualState x:Name="Pressed">
                                            <Storyboard>
                                                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="OutlineGlyph" Storyboard.TargetProperty="Foreground">
                                                    <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource AppBarItemForegroundThemeBrush}"/>
                                                </ObjectAnimationUsingKeyFrames>
                                                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="BackgroundGlyph" Storyboard.TargetProperty="Foreground">
                                                    <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource AppBarItemPressedForegroundThemeBrush}"/>
                                                </ObjectAnimationUsingKeyFrames>
                                                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="Content" Storyboard.TargetProperty="Foreground">
                                                    <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource AppBarItemPressedForegroundThemeBrush}"/>
                                                </ObjectAnimationUsingKeyFrames>
                                            </Storyboard>
                                        </VisualState>
                                        <VisualState x:Name="Disabled"/>
                                        <VisualState x:Name="Executing">
                                            <Storyboard>
                                                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ProgressRing" Storyboard.TargetProperty="IsActive">
                                                    <DiscreteObjectKeyFrame KeyTime="0" Value="True"/>
                                                </ObjectAnimationUsingKeyFrames>
                                                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="OutlineGlyph" Storyboard.TargetProperty="Visibility">
                                                    <DiscreteObjectKeyFrame KeyTime="0" Value="Collapsed"/>
                                                </ObjectAnimationUsingKeyFrames>
                                            </Storyboard>
                                        </VisualState>
                                    </VisualStateGroup>
                                    <VisualStateGroup x:Name="FocusStates">
                                        <VisualState x:Name="Focused">
                                            <Storyboard>
                                                <DoubleAnimation
                                                    Storyboard.TargetName="FocusVisualWhite"
                                                    Storyboard.TargetProperty="Opacity"
                                                    To="1"
                                                    Duration="0"/>
                                                <DoubleAnimation
                                                    Storyboard.TargetName="FocusVisualBlack"
                                                    Storyboard.TargetProperty="Opacity"
                                                    To="1"
                                                    Duration="0"/>
                                            </Storyboard>
                                        </VisualState>
                                        <VisualState x:Name="Unfocused" />
                                        <VisualState x:Name="PointerFocused" />
                                    </VisualStateGroup>
                                    <VisualStateGroup x:Name="CheckStates">
                                        <VisualState x:Name="Checked"/>
                                        <VisualState x:Name="Unchecked"/>
                                        <VisualState x:Name="Indeterminate"/>
                                    </VisualStateGroup>
                                </VisualStateManager.VisualStateGroups>
                            </Grid>
                        </ControlTemplate>
                    </Setter.Value>
                </Setter>
            </Style>
        </Page.Resources>
        <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
            <AppBarButton  RenderTransformOrigin="3.866,0.165" Height="116.567" Margin="-1296.299,112.179,0,0" Width="266" UseLayoutRounding="False" d:LayoutRounding="Auto" Style="{StaticResource AppBarButtonStyle}" Name="appbarbutton">
                <AppBarButton.RenderTransform>
                    <CompositeTransform ScaleX="-1" SkewX="0.648" TranslateX="-1.227"/>
                </AppBarButton.RenderTransform>
            </AppBarButton>
            <Button Content="Button" HorizontalAlignment="Left" Margin="1196,252,0,0" VerticalAlignment="Top" Click="Button_Click_1"/>
        </Grid>
    
    </Page>
    

    Button Click event:

    void animations::MainPage::Button_Click_1(Platform::Object^ sender, Windows::UI::Xaml::RoutedEventArgs^ e)
    {
    	bool useTransitions = false;
    	VisualStateManager::GoToState(appbarbutton, "Executing", useTransitions);
    }
    

    what is CopyToClient? Is it your AppBarButton name? You should declare the AppBarButton Name in GoToState method.

    See VisualStateManager.GoToState to get more information.

    Best Wishes!


    We are trying to better understand customer views on social support experience, so your participation in this interview project would be greatly appreciated if you have time. Thanks for helping make community forums a great place.
    Click HERE to participate the survey. Thanks<br/> MSDN Community Support<br/> <br/> Please remember to &quot;Mark as Answer&quot; the responses that resolved your issue. It is a common way to recognize those who have helped you, and makes it easier for other visitors to find the resolution later.

    Tuesday, March 11, 2014 3:15 AM
  • Thanks, Anne!

    I am almost get it, since my button is triggered by itself, after the click, button go to Executing status but all at once the mouse hover itself trigger an "PointerOver" view state! So the button go to another view state with no time.

    That is a issue for me, what I want: when go to this executing state, the button is not clickable, and will not change to other state only I reset it programmatically, but, I still want other view state available for me after reset. How to?

    Tuesday, March 11, 2014 11:31 AM
  • Hi,

    I do not quite understand your problem. What‘s meaning about  button is triggered by itself. You should post some codes relative to that or describe your problem in detail.

    Best Wishes!


    We are trying to better understand customer views on social support experience, so your participation in this interview project would be greatly appreciated if you have time. Thanks for helping make community forums a great place.
    Click HERE to participate the survey. Thanks<br/> MSDN Community Support<br/> <br/> Please remember to &quot;Mark as Answer&quot; the responses that resolved your issue. It is a common way to recognize those who have helped you, and makes it easier for other visitors to find the resolution later.

    Thursday, March 13, 2014 5:39 AM
  • It's really simple. You click a button, then this button itself change to 'executing' status. and not clickable only the action is finished.

    Friday, March 14, 2014 6:37 AM
  • Derive a control in C++ with a new behaviour.
    • Edited by Ben - GGT Saturday, March 15, 2014 10:07 AM clarity
    Saturday, March 15, 2014 10:06 AM
  • Can you elaborate more??  Or just give a sample.

    Monday, March 17, 2014 11:10 AM
  • Derive a new control by inheriting from your button. Add a dependency property is "IsExecuting". Add a member variable isExecuting. Set this flag in the dependency property change event handler. Override the OnXXX methods which cause a visual state change and where you want to change the behaviour. Conditionally call the base method in the overrides chosen, depending on whether you want a state change or not to occur. - You probably don't want a state change while it is in the visual state "Executing" I assume, flagged as isExecuting, and the user moves the mouse off, causing an OnPointerExited for example.

    You may chose not to use a ProgressRing, perhaps a dashed ellipse animated by modifying it's RotationZ or other plane projection - all depending on the style / design of your app and type of button.




    Monday, March 17, 2014 12:10 PM