XAML 网格可见性转换? [英] XAML Grid Visibility Transition?

问题描述

我有一个网格，它的可见性绑定到我的视图模型中的一个属性.这一切正常——网格正确出现/消失.我的问题是，如何应用过渡，以便网格内容不会立即从屏幕上消失，而是滑入 UI 的边缘?当它可见时，它应该再次滑出.

I have a Grid that has Visibility bound to a property in my viewmodel. This all works fine -- the Grid appears/disappears correctly. My question is, how can I apply a transition so that instead of just instantly disappearing from the screen, the grid content slides into the edge of the UI? When made visible it should slide back out again.

 <Grid Grid.Row="0" Grid.RowSpan="2"
              Grid.Column="0"
              Margin="30,30,0,30"
              Visibility="{Binding IsSearchEnabled, Converter={StaticResource visibilityConverter}}">
            <Grid.RowDefinitions>
                <RowDefinition Height="60"></RowDefinition>
                <RowDefinition Height="*"></RowDefinition>
            </Grid.RowDefinitions>

...

推荐答案

举个简单的例子，一种方法；

So as a quick example, one way of doing this;

<Grid Grid.RowSpan="2" x:Name="TheGrid"
      Margin="30,30,0,30"
      Visibility="{Binding IsSearchEnabled, Converter={StaticResource visibilityConverter}}">
      <Grid.RowDefinitions>
           <RowDefinition Height="60"/>
           <RowDefinition Height="*"/>
      </Grid.RowDefinitions>
      <!-- Start the magic -->
      <Grid.RenderTransform>
           <TranslateTransform x:Name="SlideIn" X="750" />
      </Grid.RenderTransform>
      <Grid.Triggers>
           <EventTrigger RoutedEvent="Grid.Loaded">
                 <BeginStoryboard>
                       <Storyboard>
                            <DoubleAnimationUsingKeyFrames Storyboard.TargetName="SlideIn" Storyboard.TargetProperty="X">
                                 <SplineDoubleKeyFrame KeyTime="0:0:1.25" Value="0" />
                            </DoubleAnimationUsingKeyFrames>
                            <DoubleAnimationUsingKeyFrames Storyboard.TargetName="TheGrid" Storyboard.TargetProperty="Opacity">
                                  <SplineDoubleKeyFrame KeyTime="0:0:1.55" Value="1" />
                            </DoubleAnimationUsingKeyFrames>
                       </Storyboard>
                  </BeginStoryboard>
            </EventTrigger>
        </Grid.Triggers>
</Grid>

这将在加载时将其滑入，甚至在它移动时淡入.您可能需要在 SlideIn 上使用X"值才能根据自己的喜好将其从屏幕上移开.您可以将其反转到另一个方向.

This will slide it in when it's loaded and even fade in as it goes. You might have to play with the "X" value on SlideIn to get it off the screen to your liking. You could reverse it for the other direction.

希望这会有所帮助.

这篇关于XAML 网格可见性转换?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！