搜索
搜索

数据模板 UWP 中的动画

iam.Carrot 发表于 Dev
17
胡萝卜

我正在开发基于 MVVM 的 UWP 应用程序。我有一个 GridView，我为这些项目提供了一个 DataTemplate。现在我想做的是：

当我按下数据模板中的按钮时，同一数据模板中元素的不透明度必须从 100 变为 0，同一数据模板中另一个元素的不透明度必须从 0 变为 100。这可能吗？我的代码：

我的数据模板

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

我的故事板：

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

请注意：以上所有内容均在 Page.Resources

更新：

在提供的答案和评论中的建议之后，更新了代码：

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

现在没有错误，但单击按钮时，情节提要不会运行。

贾斯汀 XL

其实自从你Buttons到触发动画和动画中都内相同DataTemplate，这将成为非常简单-所有你需要做的就是把你Storyboard里面的SResources你的RootTemplate Grid。

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

更新

您还需要Storyboard按照评论部分中的讨论修复所有s。例如，改变

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

更新 2

因此，在查看您的示例项目后，我发现问题在于，尽管BackIcon隐藏 ( Opacityof 0)，它仍然会接受命中测试，并且由于它覆盖了另一个按钮，因此不会触发您想要的动画。

修复很简单，首先添加IsHitTestVisible="False"到您的BackIcon. 其次，您需要在Storyboard. 所以只需使用以下代码更新您的动画。

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

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章

UWP - 在 GridVIew 中的样式内使用数据模板

UWP-如何在“ MasterDetailsView”模板中实现数据输入表单？

在 UWP 中，在列表视图数据模板中使用组合框时， selectedItem 丢失

UWP中的矩形到Thumb模板

在 UWP 模板中取消导航10

UWP 中几个 ui 元素的动画

UWP 中 CommandBar 的动画背景颜色崩溃

[UWP / MVVM] RadDataGrid数据模板列中的启用/禁用按钮，这些按钮根据条件绑定有命令

UWP - 我可以将数据模板中的文本块绑定到它外部的网格列的宽度吗？

在UWP中从数据库检索数据

UWP XAML 在数据模板外添加数据绑定

模板中的动态数据

在模板中显示数据

在UWP的ListView中删除sqlite数据

在UWP的gridview中检索JSON数据

UWP中的数据绑定不会刷新

列表中的数据绑定列表，uwp + xaml

UWP 按钮的边框动画

UWP页面过渡动画

UWP动画汉堡图标

简单的UWP按钮动画

具有标题和数据模板的uwp xaml listview

流星：动画（淡入/淡出）动态模板数据

如何使文本在UWP中从下至上移动动画

在odoo数据模板中调用qweb模板

在ejs模板中显示数据

在模板中显示延迟的数据

在Laravel中，数据的布局/模板

模板中的Kendo数据绑定

TOP 榜单

  1. 1

    Qt Creator Windows 10 - “使用 jom 而不是 nmake”不起作用

  2. 2

    使用next.js时出现服务器错误，错误：找不到react-redux上下文值；请确保组件包装在<Provider>中

  3. 3

    SQL Server中的非确定性数据类型

  4. 4

    Swift 2.1-对单个单元格使用UITableView

  5. 5

    如何避免每次重新编译所有文件？

  6. 6

    在同一Pushwoosh应用程序上Pushwoosh多个捆绑ID

  7. 7

    Hashchange事件侦听器在将事件处理程序附加到事件之前进行侦听

  8. 8

    应用发明者仅从列表中选择一个随机项一次

  9. 9

    在 Avalonia 中是否有带有柱子的 TreeView 或类似的东西？

  10. 10

    HttpClient中的角度变化检测

  11. 11

    在Wagtail管理员中，如何禁用图像和文档的摘要项？

  12. 12

    如何了解DFT结果

  13. 13

    Camunda-根据分配的组过滤任务列表

  14. 14

    错误：找不到存根。请确保已调用spring-cloud-contract：convert

  15. 15

    为什么此后台线程中未处理的异常不会终止我的进程？

  16. 16

    构建类似于Jarvis的本地语言应用程序

  17. 17

    使用分隔符将成对相邻的数组元素相互连接

  18. 18

    您如何通过 Nativescript 中的 Fetch 发出发布请求？

  19. 19

    通过iwd从Linux系统上的命令行连接到wifi（适用于Linux的无线守护程序）

  20. 20

    使用React / Javascript在Wordpress API中通过ID获取选择的多个帖子/页面

  21. 21

    使用 text() 獲取特定文本節點的 XPath

热门标签

归档