Развернуть и свернуть холст с эффектом скольжения - UWP C #

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

Я хочу скрыть холст, когда пользователь нажимает на сетку. И если он снова нажмет на него, я хочу снова показать холст, и наоборот. Это расширение и коллапс должны происходить анимированным / скользящим способом.

Я проверил ваш код 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;
    }

[Обновлено 2019/9/3]

извините, я не это имел ввиду. этот холст показывает некоторые уведомления. поэтому, когда пользователь касается этой NotiifcationGrid, он должен чувствовать, что она скрывается. и еще раз, если он коснется его, он сможет увидеть эти строки уведомлений. Теперь происходит только то, что скрывается текст уведомления. Я хочу спрятать всю строку Grid.Row = "0" (должно медленно скрываться снизу вверх)

Если это так, вам не нужно создавать такие уведомления в пользовательском интерфейсе приложения самостоятельно. У UWP communitytoolkit есть существующий элемент управления InAppNotification . Вы можете использовать его в своем приложении напрямую.

Answer 2

Если вы просто хотите анимировать добавление и удаление контента в вашем Grid, вам следует использовать AddDeleteThemeTransition.

Как это:

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

Кроме того, если вам не нравится вывод и вашей проблеме особенно требуется решение Expander, то вы можете использовать Expander в Community Toolkit .

Надеюсь, это поможет.