locked
create an customized animation appbar button

    Question

  • Hi

    I would add a appbar button to trigger an async action in backend, and I would like this button reflecting the action on-going status by adding a spinner like behavior of this button.

    Could any one can point out how to add a animating effect with this button? Add a gif picture or other?

    Sunday, March 09, 2014 12:20 PM

Answers

  • Hi,

    Do not post duplicate thread in the same forum. I create the project below you can refer to:

    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);
    }

    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.

    • Marked as answer by XXXing Tuesday, March 11, 2014 12:37 PM
    Tuesday, March 11, 2014 3:19 AM

All replies

  • Hi,

    I do not know what exact animation do you want to achieve? But I recommend you can use Storyboarded animations and Theme animations to you appbarButton. You can refer to the links below:

    http://msdn.microsoft.com/en-us/library/windows/apps/hh452703.aspx

    http://msdn.microsoft.com/en-us/library/windows/apps/jj819807.aspx

    http://msdn.microsoft.com/en-us/library/windows/apps/jj819806.aspx

    And refer to the sample:

    XAML animation library sample

    XAML personality animations sample

    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.

    Monday, March 10, 2014 2:12 AM
  • What I wanna to do is make the circle around the glyph have some effect like it is rotating, it is more like a spinner in the waiting dialog.

    I know I need do some animation with defined object "OutlineGlyph", but not sure which property and what effect can be applied to make this happen.

    Monday, March 10, 2014 8:52 AM
  • Hi,

    Do not post duplicate thread in the same forum. I create the project below you can refer to:

    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);
    }

    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.

    • Marked as answer by XXXing Tuesday, March 11, 2014 12:37 PM
    Tuesday, March 11, 2014 3:19 AM
  • Then close this one.
    Tuesday, March 11, 2014 12:37 PM