Question

我有一个网格。它包含一个文本块的画布和下面的图像。我想在用户单击网格时隐藏画布。如果他再次单击它，我想再次显示画布，反之亦然。这种扩展和折叠应以动画/滑动的方式发生。这意味着我想让一个Expander用“滑动”动作来动画打开和关闭。我该如何实现？

<Grid x:Name="NotiifcationGrid"  Background="#002F43" Height="50" Grid.Row="0" VerticalAlignment="Top">
        <Grid.RowDefinitions>
            <RowDefinition></RowDefinition>
            <RowDefinition></RowDefinition>
        </Grid.RowDefinitions>
            <Canvas Grid.Row="0">
                <Canvas.Clip>
                    <RectangleGeometry Rect="0, 0, 1700, 100" />
                </Canvas.Clip>
                <TextBlock Name="txtScrollingNotification" Foreground="White" 
                   Text="This textblock is getting marquee effect." />
            </Canvas>
            <Image x:Name="img_greenline" Grid.Row="1"  Height="40" Width="80"  Source="Assets/green_line.png"  />
            <Grid.Resources>
                <Storyboard x:Name="Storyboard1">
                    <DoubleAnimation
                Storyboard.TargetName="txtScrollingNotification"
                Storyboard.TargetProperty="(Canvas.Left)"
                Duration="0:0:20" From="1700"
                To="-500"  
                RepeatBehavior="Forever"  />
                </Storyboard>
            </Grid.Resources>
        </Grid>

Answer 1

如果只想制作Grid中内容的添加和删除动画，则应使用AddDeleteThemeTransition。

赞：

<Grid>
  <Grid.ChildrenTransition>
     <AddDeleteThemeTransition/>
  </Grid.ChildrenTransition>
  <Canvas..../>
  <Image...../>
</Grid>

此外，如果您不喜欢输出，并且您的问题特别需要扩展器解决方案，那么可以使用Expander in Community Toolkit。

希望有帮助。

Answer 2

我想在用户单击网格时隐藏画布。如果他再次单击它，我想再次显示画布，反之亦然。这种扩展和折叠应以动画/滑动的方式发生。

我已经检查过您的XAML代码，使用Storyboard是一个不错的选择，但是您需要添加另一个情节提要以实现目标。

我制作了一个代码示例供您参考。请检查以下代码示例：

<Grid x:Name="NotiifcationGrid"  Background="#002F43" Height="50" Grid.Row="0" VerticalAlignment="Top" Tapped="NotiifcationGrid_Tapped">
        <Grid.RowDefinitions>
            <RowDefinition></RowDefinition>
            <RowDefinition></RowDefinition>
        </Grid.RowDefinitions>
        <Canvas Grid.Row="0" x:Name="canvas">
            <Canvas.Clip>
                <RectangleGeometry Rect="0, 0, 1700, 100" />
            </Canvas.Clip>
            <TextBlock Name="txtScrollingNotification" Foreground="White" 
               Text="This textblock is getting marquee effect."/>
        </Canvas>
        <Image x:Name="img_greenline" Grid.Row="1"  Height="40" Width="80"  Source="Assets/green_line.png"  />
        <Grid.Resources>
            <Storyboard x:Name="Storyboard1" Completed="Storyboard1_Completed">
                <DoubleAnimation
            Storyboard.TargetName="txtScrollingNotification"
            Storyboard.TargetProperty="(Canvas.Left)"
            Duration="0:0:2" From="0"
            To="-500"  
            />
            </Storyboard>

            <Storyboard x:Name="Storyboard2">
                <DoubleAnimation
            Storyboard.TargetName="txtScrollingNotification"
            Storyboard.TargetProperty="(Canvas.Left)"
            Duration="0:0:2" From="-500"
            To="0"  
            />
            </Storyboard>
        </Grid.Resources>
</Grid>

private void NotiifcationGrid_Tapped(object sender, TappedRoutedEventArgs e)
    {

        if (canvas.Visibility == Visibility)
        {
            Storyboard1.Begin();
        }
        else
        {
            canvas.Visibility = Visibility;
            Storyboard2.Begin();
        }
    }

    private void Storyboard1_Completed(object sender, object e)
    {
        canvas.Visibility = Visibility.Collapsed;
    }

[已于2018/9/3更新]

抱歉，这不是我的意思。该画布显示一些通知。因此，当用户触摸该NotiifcationGrid时，他应该感觉到它正在隐藏。再一次，如果他触摸它，他应该能够看到那些通知行。现在发生的只是通知文本被隐藏。我想隐藏整行Grid.Row =“ 0”（应该感觉像是从底部到顶部以慢动作隐藏）

如果是这样，则无需自己在应用程序UI中进行此类通知控件。 UWP communitytoolkit有一个现有的InAppNotification控件。您可以直接在您的应用中使用它。

具有滑动效果的画布展开和折叠-UWP C＃

2 个答案: