Reputation: 5276

Animations in Data Template UWP

I am working on a MVVM based UWP application. I have a GridView and i've provided a DataTemplate for the Items. Now what I want to do is:

When I press a button in a data template the Opacity of an element in the same Data Template must animate from 100 to 0 and the Opacity of another element in the same Data Template must animate from 0 to 100. Is this possible? My code:

My DataTemplate

<DataTemplate x:Key="ReportsDataTemplate" x:DataType="ReportDataOutlets:ChartSkeletonDataOutlet">
        <Grid x:Name="RootTemplate" MinHeight="200" MaxWidth="330" CornerRadius="10" Grid.Row="1">
            <Grid.Background>
                <SolidColorBrush Color="White" Opacity="0.7"/>
            </Grid.Background>
            <Grid.RowDefinitions>
                <RowDefinition Height="Auto"/>
                <RowDefinition Height="*"/>
                <RowDefinition Height="Auto"/>
            </Grid.RowDefinitions>

            <Grid x:Name="LabelGrid">
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="*"/>
                    <ColumnDefinition Width="Auto"/>
                </Grid.ColumnDefinitions>
                <TextBlock x:Name="ChartLabel" Text="{x:Bind ChartLabel, Mode=OneWay}" Foreground="Black" FontSize="17" VerticalAlignment="Center" Margin="5,0" TextWrapping="WrapWholeWords" MaxLines="2"/>

                <AppBarButton x:Name="MoreInfoIcon" Grid.Column="1" VerticalContentAlignment="Center" IsCompact="True" HorizontalContentAlignment="Center">
                    <AppBarButton.RenderTransform>
                        <CompositeTransform x:Name="infoIconTransform"/>
                    </AppBarButton.RenderTransform>
                    <AppBarButton.Icon>
                        <PathIcon HorizontalAlignment="Center" Data="M10.4375,7 L11.125,7.1875 L11.375,7.8125 L11.3652,7.94726 L11.2969,8.28125 L11.1113,8.99023 L10.75,10.25 L10.251,11.9287 L9.94533,13.0859 L9.79201,13.8096 L9.75002,14.1875 L10.0938,13.9141 L11,13.125 L11.25,12.9375 L12.0625,13.75 L11.8125,14 L10.6563,15.0234 L9.87503,15.625 L8.75,16 L8.00003,15.6875 L7.68753,14.875 L7.7803,14.0527 L8.05471,12.7969 L8.50491,11.0957 L9.12502,8.9375 L8.8047,9.11719 L8.06252,9.8125 L7.8125,10 L6.875,9.3125 L7.12502,9.0625 L8.93753,7.5 L10.4375,7 z M10.4375,3.4375 L11.375,3.8125 L11.75,4.75 L11.375,5.6875 L10.4375,6.0625 L9.50001,5.6875 L9.12502,4.75 L9.50001,3.83594 L10.4375,3.4375 z M10,1.9375 L6.86817,2.57324 L4.3047,4.30469 L2.57326,6.86816 L1.93752,10 L2.57326,13.1318 L4.3047,15.6953 L6.86817,17.4268 L10,18.0625 L13.1318,17.4268 L15.6953,15.6953 L17.4268,13.1318 L18.0625,10 L17.4268,6.86816 L15.6953,4.30469 L13.1318,2.57324 L10,1.9375 z M10,0 L12.0088,0.204101 L13.8828,0.789062 L17.0625,2.9375 L19.2109,6.11719 L19.7959,7.99121 L20,10 L19.7959,12.0088 L19.2109,13.8828 L17.0625,17.0625 L13.8828,19.2109 L12.0088,19.7959 L10,20 L7.99121,19.7959 L6.11719,19.2109 L2.9375,17.0625 L0.789064,13.8828 L0.204102,12.0088 L0,10 L0.204102,7.99121 L0.789064,6.11719 L2.9375,2.9375 L6.11719,0.789062 L7.99121,0.204101 L10,0 z"/>
                    </AppBarButton.Icon>
                    <Interactivity:Interaction.Behaviors>
                        <Core:EventTriggerBehavior EventName="Click">
                            <Media:ControlStoryboardAction ControlStoryboardOption="Play" Storyboard="{StaticResource ShowChartDetailsAnimation}"/>
                        </Core:EventTriggerBehavior>
                    </Interactivity:Interaction.Behaviors>
                </AppBarButton>

                <AppBarButton x:Name="BackIcon" Opacity="0" Grid.Column="1" VerticalContentAlignment="Center" IsCompact="True" HorizontalContentAlignment="Center">
                    <AppBarButton.RenderTransform>
                        <CompositeTransform x:Name="backIconTransform"/>
                    </AppBarButton.RenderTransform>
                    <AppBarButton.Icon>
                        <PathIcon HorizontalAlignment="Center" Data="M8.57812595367432,5.1368613243103L9.56875228881836,5.89811277389526 6.89487361907959,9.37500381469727 15.6250114440918,9.37500381469727 15.6250114440918,10.6250038146973 6.89399528503418,10.6250038146973 9.56875228881836,14.1025066375732 8.57812595367432,14.8643827438354 4.83686780929565,10.0006217956543 8.57812595367432,5.1368613243103z M10,1.25L6.59725713729858,1.93867444992065 3.81561756134033,3.81563186645508 1.93866908550262,6.59727334976196 1.25,10 1.93866908550262,13.4027585983276 3.81561756134033,16.1843967437744 6.59725713729858,18.061336517334 10,18.75 13.4027271270752,18.061336517334 16.1843681335449,16.1843967437744 18.0613250732422,13.4027585983276 18.75,10 18.0613250732422,6.59727334976196 16.1843681335449,3.81563186645508 13.4027271270752,1.93867444992065 10,1.25z M10,0L12.0154237747192,0.203155279159546 13.8925619125366,0.785818099975586 17.0711669921875,2.92884826660156 19.2141876220703,6.10745429992676 19.7968463897705,7.98458671569824 20,10 19.7968463897705,12.015435218811 19.2141876220703,13.892578125 17.0711669921875,17.0711803436279 13.8925619125366,19.2141933441162 12.0154237747192,19.7968482971191 10,20 7.98456525802612,19.7968482971191 6.107421875,19.2141933441162 2.92881965637207,17.0711803436279 0.785807371139526,13.892578125 0.203152149915695,12.015435218811 0,10 0.203152149915695,7.98458671569824 0.785807371139526,6.10745429992676 2.92881965637207,2.92884826660156 6.107421875,0.785818099975586 7.98456525802612,0.203155279159546 10,0z"/>
                    </AppBarButton.Icon>
                    <Interactivity:Interaction.Behaviors>
                        <Core:EventTriggerBehavior EventName="Click">
                            <Media:ControlStoryboardAction ControlStoryboardOption="Play" Storyboard="{StaticResource HideChartDetailsAnimation}"/>
                        </Core:EventTriggerBehavior>
                    </Interactivity:Interaction.Behaviors>
                </AppBarButton>
            </Grid>

            <HummingBirdCharts:RadPieChart x:Name="ChartData" Grid.Row="1" Foreground="Black"  PaletteName="None"  Visibility="{x:Bind IsProcessingData, Converter={StaticResource BoolToInverseVisibilityConverter}, Mode=OneWay}">
                <HummingBirdCharts:RadPieChart.Palette>
                    <HummingBirdCharts:ChartPalette>
                        <HummingBirdCharts:ChartPalette.FillEntries>
                            <HummingBirdCharts:PaletteEntryCollection>
                                <SolidColorBrush Color="{x:Bind PrimaryColor}"/>
                                <SolidColorBrush Color="{x:Bind SecondaryColor}"/>
                                <SolidColorBrush Color="{x:Bind TertiaryColor}"/>
                            </HummingBirdCharts:PaletteEntryCollection>
                        </HummingBirdCharts:ChartPalette.FillEntries>
                        <HummingBirdCharts:ChartPalette.StrokeEntries>
                            <HummingBirdCharts:PaletteEntryCollection>
                                <SolidColorBrush Color="LightGray"/>
                            </HummingBirdCharts:PaletteEntryCollection>
                        </HummingBirdCharts:ChartPalette.StrokeEntries>
                    </HummingBirdCharts:ChartPalette>
                </HummingBirdCharts:RadPieChart.Palette>
                <HummingBirdCharts:DoughnutSeries ItemsSource="{x:Bind PlottingArea, Mode=OneWay}" RadiusFactor="0.8">
                    <HummingBirdCharts:DoughnutSeries.ValueBinding>
                        <HummingBirdCharts:PropertyNameDataPointBinding PropertyName="Value"/>
                    </HummingBirdCharts:DoughnutSeries.ValueBinding>
                    <HummingBirdCharts:DoughnutSeries.LegendTitleBinding >
                        <HummingBirdCharts:PropertyNameDataPointBinding PropertyName="Label"/>
                    </HummingBirdCharts:DoughnutSeries.LegendTitleBinding>
                </HummingBirdCharts:DoughnutSeries>
            </HummingBirdCharts:RadPieChart>

            <HummingBirdPrimitives:RadLegendControl x:Name="ChartLegend" Grid.Row="2" LegendProvider="{Binding ElementName=ChartData}" Visibility="{x:Bind IsProcessingData, Converter={StaticResource BoolToInverseVisibilityConverter}, Mode=OneWay}">
                <HummingBirdPrimitives:RadLegendControl.RenderTransform>
                    <CompositeTransform x:Name="chartLegendTransform"/>
                </HummingBirdPrimitives:RadLegendControl.RenderTransform>
                <HummingBirdPrimitives:RadLegendControl.ItemsPanel>
                    <ItemsPanelTemplate>
                        <StackPanel Orientation="Vertical"/>
                    </ItemsPanelTemplate>
                </HummingBirdPrimitives:RadLegendControl.ItemsPanel>
                <HummingBirdPrimitives:RadLegendControl.ItemTemplate>
                    <DataTemplate>
                        <StackPanel Orientation="Horizontal">
                            <Ellipse Fill="{Binding Fill}" Stroke="{Binding Stroke}"
                                                             StrokeThickness="1" Width="15" Height="15"/>
                            <TextBlock Text="{Binding Title}" Foreground="Black"
                                                              Margin="10" FontStyle="Normal" TextWrapping="WrapWholeWords"/>
                        </StackPanel>
                    </DataTemplate>
                </HummingBirdPrimitives:RadLegendControl.ItemTemplate>
            </HummingBirdPrimitives:RadLegendControl>

            <StackPanel x:Name="AboutTheChart" Grid.Row="2" Margin="10" Opacity="0">
                <StackPanel.RenderTransform>
                    <CompositeTransform x:Name="aboutTheChartTransform"/>
                </StackPanel.RenderTransform>
                <TextBlock Text="{x:Bind Description, Mode=OneWay}" Foreground="Black" FontSize="15" TextWrapping="WrapWholeWords"/>
                <TextBlock Text="{x:Bind Declarations, Mode=OneWay}" FontWeight="Light" FontStyle="Italic" Foreground="Black" FontSize="12" TextWrapping="WrapWholeWords"/>
            </StackPanel>

            <Grid x:Name="ProcessingDataGrid" Grid.RowSpan="3" Visibility="{x:Bind IsProcessingData, Converter={StaticResource BoolToVisibilityConverter}, Mode=OneWay}">
                <Grid.Background>
                    <SolidColorBrush Color="Black" Opacity="0.5"/>
                </Grid.Background>
                <StackPanel HorizontalAlignment="Center" VerticalAlignment="Center">
                    <ProgressRing IsActive="True"/>
                    <TextBlock Text="Processing report, this won't be long." FontSize="18" Foreground="White" TextWrapping="WrapWholeWords" TextAlignment="Center"/>
                </StackPanel>
            </Grid>
        </Grid>
    </DataTemplate>

MyStoryBoards:

<Storyboard x:Name="ShowChartDetailsAnimation">
        <DoubleAnimation Duration="0:0:2" To="0" Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="chartLegendTransform" d:IsOptimized="True">
            <DoubleAnimation.EasingFunction>
                <CircleEase EasingMode="EaseOut"/>
            </DoubleAnimation.EasingFunction>
        </DoubleAnimation>
        <DoubleAnimation Duration="0:0:2" To="0" Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="infoIconTransform" d:IsOptimized="True">
            <DoubleAnimation.EasingFunction>
                <CircleEase EasingMode="EaseOut"/>
            </DoubleAnimation.EasingFunction>
        </DoubleAnimation>
        <DoubleAnimation Duration="0:0:2" To="1" Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="aboutTheChartTransform" d:IsOptimized="True">
            <DoubleAnimation.EasingFunction>
                <CircleEase EasingMode="EaseIn"/>
            </DoubleAnimation.EasingFunction>
        </DoubleAnimation>
        <DoubleAnimation Duration="0:0:2" To="1" Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="backIconTransform" d:IsOptimized="True">
            <DoubleAnimation.EasingFunction>
                <CircleEase EasingMode="EaseIn"/>
            </DoubleAnimation.EasingFunction>
        </DoubleAnimation>
    </Storyboard>

    <Storyboard x:Name="HideChartDetailsAnimation">
        <DoubleAnimation Duration="0:0:2" To="1" Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="chartLegendTransform" d:IsOptimized="True">
            <DoubleAnimation.EasingFunction>
                <CircleEase EasingMode="EaseIn"/>
            </DoubleAnimation.EasingFunction>
        </DoubleAnimation>
        <DoubleAnimation Duration="0:0:2" To="1" Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="infoIconTransform" d:IsOptimized="True">
            <DoubleAnimation.EasingFunction>
                <CircleEase EasingMode="EaseIn"/>
            </DoubleAnimation.EasingFunction>
        </DoubleAnimation>
        <DoubleAnimation Duration="0:0:2" To="0" Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="aboutTheChartTransform" d:IsOptimized="True">
            <DoubleAnimation.EasingFunction>
                <CircleEase EasingMode="EaseOut"/>
            </DoubleAnimation.EasingFunction>
        </DoubleAnimation>
        <DoubleAnimation Duration="0:0:2" To="0" Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="backIconTransform" d:IsOptimized="True">
            <DoubleAnimation.EasingFunction>
                <CircleEase EasingMode="EaseOut"/>
            </DoubleAnimation.EasingFunction>
        </DoubleAnimation>
    </Storyboard>

Please note: All the above are defined in the Page.Resources

UPDATE:

after the answer provided and the suggestions in the comments the updated code:

<DataTemplate x:Key="ReportsDataTemplate" x:DataType="ReportDataOutlets:ChartSkeletonDataOutlet">
        <Grid x:Name="RootTemplate" MinHeight="200" MaxWidth="330" CornerRadius="10" Grid.Row="1">

            <Grid.Resources>
                <Storyboard x:Name="ShowChartDetailsAnimation">
                    <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="ChartLegend">
                        <EasingDoubleKeyFrame KeyTime="0:0:0.2" Value="0"/>
                    </DoubleAnimationUsingKeyFrames>

                    <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="MoreInfoIcon">
                        <EasingDoubleKeyFrame KeyTime="0:0:0.2" Value="0"/>
                    </DoubleAnimationUsingKeyFrames>

                    <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="AboutTheChart">
                        <EasingDoubleKeyFrame KeyTime="0:0:0.2" Value="1"/>
                    </DoubleAnimationUsingKeyFrames>

                    <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="BackIcon">
                        <EasingDoubleKeyFrame KeyTime="0:0:0.2" Value="1"/>
                    </DoubleAnimationUsingKeyFrames>
                </Storyboard>

                <Storyboard x:Name="HideChartDetailsAnimation">
                        <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="ChartLegend">
                            <EasingDoubleKeyFrame KeyTime="0:0:0.2" Value="1"/>
                        </DoubleAnimationUsingKeyFrames>

                        <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="MoreInfoIcon">
                            <EasingDoubleKeyFrame KeyTime="0:0:0.2" Value="1"/>
                        </DoubleAnimationUsingKeyFrames>

                        <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="AboutTheChart">
                            <EasingDoubleKeyFrame KeyTime="0:0:0.2" Value="0"/>
                        </DoubleAnimationUsingKeyFrames>

                        <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="BackIcon">
                            <EasingDoubleKeyFrame KeyTime="0:0:0.2" Value="0"/>
                        </DoubleAnimationUsingKeyFrames>
                </Storyboard>
            </Grid.Resources>

            <Grid.Background>
                <SolidColorBrush Color="White" Opacity="0.7"/>
            </Grid.Background>
            <Grid.RowDefinitions>
                <RowDefinition Height="Auto"/>
                <RowDefinition Height="*"/>
                <RowDefinition Height="Auto"/>
            </Grid.RowDefinitions>

            <Grid x:Name="LabelGrid">
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="*"/>
                    <ColumnDefinition Width="Auto"/>
                </Grid.ColumnDefinitions>
                <TextBlock x:Name="ChartLabel" Text="{x:Bind ChartLabel, Mode=OneWay}" Foreground="Black" FontSize="17" VerticalAlignment="Center" Margin="5,0" TextWrapping="WrapWholeWords" MaxLines="2"/>

                <AppBarButton x:Name="MoreInfoIcon" Grid.Column="1" VerticalContentAlignment="Center" IsCompact="True" HorizontalContentAlignment="Center">
                    <Interactivity:Interaction.Behaviors>
                        <Core:EventTriggerBehavior EventName="Click">
                            <Media:ControlStoryboardAction ControlStoryboardOption="Play" Storyboard="{StaticResource ShowChartDetailsAnimation}"/>
                        </Core:EventTriggerBehavior>
                    </Interactivity:Interaction.Behaviors>
                    <AppBarButton.Icon>
                        <PathIcon HorizontalAlignment="Center" Data="M10.4375,7 L11.125,7.1875 L11.375,7.8125 L11.3652,7.94726 L11.2969,8.28125 L11.1113,8.99023 L10.75,10.25 L10.251,11.9287 L9.94533,13.0859 L9.79201,13.8096 L9.75002,14.1875 L10.0938,13.9141 L11,13.125 L11.25,12.9375 L12.0625,13.75 L11.8125,14 L10.6563,15.0234 L9.87503,15.625 L8.75,16 L8.00003,15.6875 L7.68753,14.875 L7.7803,14.0527 L8.05471,12.7969 L8.50491,11.0957 L9.12502,8.9375 L8.8047,9.11719 L8.06252,9.8125 L7.8125,10 L6.875,9.3125 L7.12502,9.0625 L8.93753,7.5 L10.4375,7 z M10.4375,3.4375 L11.375,3.8125 L11.75,4.75 L11.375,5.6875 L10.4375,6.0625 L9.50001,5.6875 L9.12502,4.75 L9.50001,3.83594 L10.4375,3.4375 z M10,1.9375 L6.86817,2.57324 L4.3047,4.30469 L2.57326,6.86816 L1.93752,10 L2.57326,13.1318 L4.3047,15.6953 L6.86817,17.4268 L10,18.0625 L13.1318,17.4268 L15.6953,15.6953 L17.4268,13.1318 L18.0625,10 L17.4268,6.86816 L15.6953,4.30469 L13.1318,2.57324 L10,1.9375 z M10,0 L12.0088,0.204101 L13.8828,0.789062 L17.0625,2.9375 L19.2109,6.11719 L19.7959,7.99121 L20,10 L19.7959,12.0088 L19.2109,13.8828 L17.0625,17.0625 L13.8828,19.2109 L12.0088,19.7959 L10,20 L7.99121,19.7959 L6.11719,19.2109 L2.9375,17.0625 L0.789064,13.8828 L0.204102,12.0088 L0,10 L0.204102,7.99121 L0.789064,6.11719 L2.9375,2.9375 L6.11719,0.789062 L7.99121,0.204101 L10,0 z"/>
                    </AppBarButton.Icon>

                </AppBarButton>

                <AppBarButton x:Name="BackIcon" Opacity="0" Grid.Column="1" VerticalContentAlignment="Center" IsCompact="True" HorizontalContentAlignment="Center">
                    <Interactivity:Interaction.Behaviors>
                        <Core:EventTriggerBehavior EventName="Click">
                            <Media:ControlStoryboardAction ControlStoryboardOption="Play" Storyboard="{StaticResource HideChartDetailsAnimation}"/>
                        </Core:EventTriggerBehavior>
                    </Interactivity:Interaction.Behaviors>
                    <AppBarButton.Icon>
                        <PathIcon HorizontalAlignment="Center" Data="M8.57812595367432,5.1368613243103L9.56875228881836,5.89811277389526 6.89487361907959,9.37500381469727 15.6250114440918,9.37500381469727 15.6250114440918,10.6250038146973 6.89399528503418,10.6250038146973 9.56875228881836,14.1025066375732 8.57812595367432,14.8643827438354 4.83686780929565,10.0006217956543 8.57812595367432,5.1368613243103z M10,1.25L6.59725713729858,1.93867444992065 3.81561756134033,3.81563186645508 1.93866908550262,6.59727334976196 1.25,10 1.93866908550262,13.4027585983276 3.81561756134033,16.1843967437744 6.59725713729858,18.061336517334 10,18.75 13.4027271270752,18.061336517334 16.1843681335449,16.1843967437744 18.0613250732422,13.4027585983276 18.75,10 18.0613250732422,6.59727334976196 16.1843681335449,3.81563186645508 13.4027271270752,1.93867444992065 10,1.25z M10,0L12.0154237747192,0.203155279159546 13.8925619125366,0.785818099975586 17.0711669921875,2.92884826660156 19.2141876220703,6.10745429992676 19.7968463897705,7.98458671569824 20,10 19.7968463897705,12.015435218811 19.2141876220703,13.892578125 17.0711669921875,17.0711803436279 13.8925619125366,19.2141933441162 12.0154237747192,19.7968482971191 10,20 7.98456525802612,19.7968482971191 6.107421875,19.2141933441162 2.92881965637207,17.0711803436279 0.785807371139526,13.892578125 0.203152149915695,12.015435218811 0,10 0.203152149915695,7.98458671569824 0.785807371139526,6.10745429992676 2.92881965637207,2.92884826660156 6.107421875,0.785818099975586 7.98456525802612,0.203155279159546 10,0z"/>
                    </AppBarButton.Icon>

                </AppBarButton>
            </Grid>

            <HummingBirdCharts:RadPieChart x:Name="ChartData" Grid.Row="1" Foreground="Black"  PaletteName="None"  Visibility="{x:Bind IsProcessingData, Converter={StaticResource BoolToInverseVisibilityConverter}, Mode=OneWay}">
                <HummingBirdCharts:RadPieChart.Palette>
                    <HummingBirdCharts:ChartPalette>
                        <HummingBirdCharts:ChartPalette.FillEntries>
                            <HummingBirdCharts:PaletteEntryCollection>
                                <SolidColorBrush Color="{x:Bind PrimaryColor}"/>
                                <SolidColorBrush Color="{x:Bind SecondaryColor}"/>
                                <SolidColorBrush Color="{x:Bind TertiaryColor}"/>
                            </HummingBirdCharts:PaletteEntryCollection>
                        </HummingBirdCharts:ChartPalette.FillEntries>
                        <HummingBirdCharts:ChartPalette.StrokeEntries>
                            <HummingBirdCharts:PaletteEntryCollection>
                                <SolidColorBrush Color="LightGray"/>
                            </HummingBirdCharts:PaletteEntryCollection>
                        </HummingBirdCharts:ChartPalette.StrokeEntries>
                    </HummingBirdCharts:ChartPalette>
                </HummingBirdCharts:RadPieChart.Palette>
                <HummingBirdCharts:DoughnutSeries ItemsSource="{x:Bind PlottingArea, Mode=OneWay}" RadiusFactor="0.8">
                    <HummingBirdCharts:DoughnutSeries.ValueBinding>
                        <HummingBirdCharts:PropertyNameDataPointBinding PropertyName="Value"/>
                    </HummingBirdCharts:DoughnutSeries.ValueBinding>
                    <HummingBirdCharts:DoughnutSeries.LegendTitleBinding >
                        <HummingBirdCharts:PropertyNameDataPointBinding PropertyName="Label"/>
                    </HummingBirdCharts:DoughnutSeries.LegendTitleBinding>
                </HummingBirdCharts:DoughnutSeries>
            </HummingBirdCharts:RadPieChart>

            <HummingBirdPrimitives:RadLegendControl x:Name="ChartLegend" Grid.Row="2" LegendProvider="{Binding ElementName=ChartData}" Visibility="{x:Bind IsProcessingData, Converter={StaticResource BoolToInverseVisibilityConverter}, Mode=OneWay}">
                <HummingBirdPrimitives:RadLegendControl.ItemsPanel>
                    <ItemsPanelTemplate>
                        <StackPanel Orientation="Vertical"/>
                    </ItemsPanelTemplate>
                </HummingBirdPrimitives:RadLegendControl.ItemsPanel>
                <HummingBirdPrimitives:RadLegendControl.ItemTemplate>
                    <DataTemplate>
                        <StackPanel Orientation="Horizontal">
                            <Ellipse Fill="{Binding Fill}" Stroke="{Binding Stroke}"
                                                             StrokeThickness="1" Width="15" Height="15"/>
                            <TextBlock Text="{Binding Title}" Foreground="Black"
                                                              Margin="10" FontStyle="Normal" TextWrapping="WrapWholeWords"/>
                        </StackPanel>
                    </DataTemplate>
                </HummingBirdPrimitives:RadLegendControl.ItemTemplate>
            </HummingBirdPrimitives:RadLegendControl>

            <StackPanel x:Name="AboutTheChart" Grid.Row="2" Margin="10" Opacity="0">
                <TextBlock Text="{x:Bind Description, Mode=OneWay}" Foreground="Black" FontSize="15" TextWrapping="WrapWholeWords"/>
                <TextBlock Text="{x:Bind Declarations, Mode=OneWay}" FontWeight="Light" FontStyle="Italic" Foreground="Black" FontSize="12" TextWrapping="WrapWholeWords"/>
            </StackPanel>

            <Grid x:Name="ProcessingDataGrid" Grid.RowSpan="3" Visibility="{x:Bind IsProcessingData, Converter={StaticResource BoolToVisibilityConverter}, Mode=OneWay}">
                <Grid.Background>
                    <SolidColorBrush Color="Black" Opacity="0.5"/>
                </Grid.Background>
                <StackPanel HorizontalAlignment="Center" VerticalAlignment="Center">
                    <ProgressRing IsActive="True"/>
                    <TextBlock Text="Processing report, this won't be long." FontSize="18" Foreground="White" TextWrapping="WrapWholeWords" TextAlignment="Center"/>
                </StackPanel>
            </Grid>
        </Grid>
    </DataTemplate>

Now there is no error but on button click the storyboard won't run.

Upvotes: 1

Answers (1)

Justin XL

Reputation: 39006

Actually since your Buttons to trigger animations and your animations are all inside the same DataTemplate, this becomes really simple - all you need to do is to place your Storyboards inside the Resources of your RootTemplate Grid.

<Grid x:Name="RootTemplate"
      MinHeight="200"
      MaxWidth="330"
      CornerRadius="10"
      Grid.Row="1">
    <Grid.Resources>
        <Storyboard x:Name="ShowChartDetailsAnimation">
...

Update

You will also need to fix all your Storyboards as discussed in the comment section. For example, change

    <DoubleAnimation Duration="0:0:2" To="0" Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="chartLegendTransform" d:IsOptimized="True">
        <DoubleAnimation.EasingFunction>
            <CircleEase EasingMode="EaseOut"/>
        </DoubleAnimation.EasingFunction>
    </DoubleAnimation>

    <DoubleAnimation Duration="0:0:2" To="0" Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="ChartLegend" d:IsOptimized="True">
        <DoubleAnimation.EasingFunction>
            <CircleEase EasingMode="EaseOut"/>
        </DoubleAnimation.EasingFunction>
    </DoubleAnimation>

Update 2

So after looking into your sample project, I found that the issue is that although the BackIcon is hidden (Opacity of 0), it will still receive hit testing, and because it's overlaying the other button, so the animation you want is not triggered.

The fix is simple, first add IsHitTestVisible="False" to your BackIcon. Second, you will want to re-enable this inside your Storyboard. So just update your animations with the following code.

<Grid.Resources>
    <Storyboard x:Name="ShowChartDetailsAnimation">
        <DoubleAnimation Duration="0:0:0.2"
                         To="0"
                         Storyboard.TargetProperty="(UIElement.Opacity)"
                         Storyboard.TargetName="MoreInfoIcon"
                         d:IsOptimized="True" />
        <DoubleAnimation Duration="0:0:0.2"
                         To="1"
                         Storyboard.TargetProperty="(UIElement.Opacity)"
                         Storyboard.TargetName="BackIcon"
                         d:IsOptimized="True" />
        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.IsHitTestVisible)"
                                       Storyboard.TargetName="BackIcon">
            <DiscreteObjectKeyFrame KeyTime="0:0:0.2">
                <DiscreteObjectKeyFrame.Value>
                    <x:Boolean>True</x:Boolean>
                </DiscreteObjectKeyFrame.Value>
            </DiscreteObjectKeyFrame>
        </ObjectAnimationUsingKeyFrames>
    </Storyboard>

    <Storyboard x:Name="HideChartDetailsAnimation">
        <DoubleAnimation Duration="0:0:0.2"
                         To="1"
                         Storyboard.TargetProperty="(UIElement.Opacity)"
                         Storyboard.TargetName="MoreInfoIcon"
                         d:IsOptimized="True" />
        <DoubleAnimation Duration="0:0:0.2"
                         To="0"
                         Storyboard.TargetProperty="(UIElement.Opacity)"
                         Storyboard.TargetName="BackIcon"
                         d:IsOptimized="True" />
        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.IsHitTestVisible)"
                                       Storyboard.TargetName="BackIcon">
            <DiscreteObjectKeyFrame KeyTime="0">
                <DiscreteObjectKeyFrame.Value>
                    <x:Boolean>False</x:Boolean>
                </DiscreteObjectKeyFrame.Value>
            </DiscreteObjectKeyFrame>
        </ObjectAnimationUsingKeyFrames>
    </Storyboard>
</Grid.Resources>

Upvotes: 2

Animations in Data Template UWP

UPDATE:

Answers (1)

Update

Update 2

Related Questions