XAML 网格可见性转换？

Question

我有一个 Grid，它的 Visibility 绑定(bind)到我的 viewmodel 中的一个属性。这一切都很好——网格正确出现/消失。我的问题是，我怎样才能应用过渡，而不是立即从屏幕上消失，网格内容会滑入 UI 的边缘？当可见时，它应该再次滑出。

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

...

Answer 1

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

<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”值才能根据自己的喜好将其从屏幕上移开。您可以将其反转为另一个方向。

希望这对您有所帮助。