Question

我正在通过阅读其模板来学习SplitView控件。在模板中，有一个名为PaneClipRectangleTransform的变换，用于变换窗格区域的Grid.Clip。 XAML下面是状态从“已关闭”变为“OpenOverlayLeft”的一部分。

<DoubleAnimationUsingKeyFrames Storyboard.TargetName="PaneClipRectangleTransform" Storyboard.TargetProperty="TranslateX">
  <DiscreteDoubleKeyFrame KeyTime="0:0:0" Value="{Binding TemplateSettings.OpenPaneLength, RelativeSource={RelativeSource Mode=TemplatedParent}}"/>
  <SplineDoubleKeyFrame KeyTime="0:0:0.35" KeySpline="0.1,0.9 0.2,1.0" Value="0"/>
</DoubleAnimationUsingKeyFrames>

我如何理解这部分代码？什么是动画？什么是可见/不可见的效果？

Answer 1

考虑SplitView控件的部分XAML模板：

<Grid x:Name="Root" Background="{TemplateBinding Background}">
..
..
   <Grid.ColumnDefinitions>
      <ColumnDefinition x:Name="ColumnDefinition1" Width="{Binding TemplateSettings.OpenPaneGridLength, FallbackValue=0, RelativeSource={RelativeSource Mode=TemplatedParent}}"/>
      <ColumnDefinition x:Name="ColumnDefinition2" Width="*"/>
   </Grid.ColumnDefinitions>

   <!-- Content Area -->
   <Grid x:Name="ContentRoot" Grid.ColumnSpan="2">
      <Border Child="{TemplateBinding Content}"/>
      <Rectangle x:Name="LightDismissLayer" Fill="Transparent" Visibility="Collapsed"/>
   </Grid>

   <!-- Pane Content Area-->
   <Grid x:Name="PaneRoot"
         Grid.ColumnSpan="2"
         HorizontalAlignment="Left"
         Visibility="Collapsed"
         Background="{TemplateBinding PaneBackground}"
         Width="{Binding TemplateSettings.OpenPaneLength, RelativeSource={RelativeSource Mode=TemplatedParent}}">
        <Grid.Clip>
           <RectangleGeometry x:Name="PaneClipRectangle">
              <RectangleGeometry.Transform>
                 <CompositeTransform x:Name="PaneClipRectangleTransform"/>
              </RectangleGeometry.Transform>
           </RectangleGeometry>
        </Grid.Clip>
        <Grid.RenderTransform>
            <CompositeTransform x:Name="PaneTransform"/>
        </Grid.RenderTransform>
..
..
</Grid>

＆＃34; ContentRoot＆＃34;网格和＆＃34; PaneRoot＆＃34;网格放在同一个＆＃34; Root＆＃34;网格。如您所见，PaneRoot的Grid.Row属性设置为default（0），Grid.ColumnSpan设置为＆＃34; 2＆＃34;。这意味着内容和窗格都放在同一个单元格中。这是Overlay模式的默认设置。

打开窗格

因此，当窗格打开时，不需要对窗格进行窗格剪切或变换。这就是你从州和＃34;关闭＆＃34;到＆＃34; OpenOverlayLeft＆＃34;：

<DoubleAnimationUsingKeyFrames Storyboard.TargetName="PaneClipRectangleTransform" Storyboard.TargetProperty="TranslateX">
    <DiscreteDoubleKeyFrame KeyTime="0:0:0" Value="{Binding TemplateSettings.OpenPaneLength, RelativeSource={RelativeSource Mode=TemplatedParent}}"/>
    <SplineDoubleKeyFrame KeyTime="0:0:0.35" KeySpline="0.1,0.9 0.2,1.0" Value="0"/>
</DoubleAnimationUsingKeyFrames>

以及

<DoubleAnimationUsingKeyFrames Storyboard.TargetName="PaneClipRectangleTransform" Storyboard.TargetProperty="TranslateX">
   <DiscreteDoubleKeyFrame KeyTime="0:0:0" Value="{Binding TemplateSettings.OpenPaneLength, RelativeSource={RelativeSource Mode=TemplatedParent}}"/>
   <SplineDoubleKeyFrame KeyTime="0:0:0.35" KeySpline="0.1,0.9 0.2,1.0" Value="0"/>
</DoubleAnimationUsingKeyFrames>

如您所见，对于Clipping和Transform，值将设置为＆＃34; 0＆＃34; 0.35秒后，窗格变得完全打开。初始值是应该关闭窗格时设置的值。它们将在下面讨论。

关闭窗格

默认情况下，需要在“覆盖”模式下隐藏窗格。以下是OpenOverlayRight到Closed转换中的PaneTranform和PaneClipRectangleTransform的值：

<DoubleAnimationUsingKeyFrames Storyboard.TargetName="PaneTransform" Storyboard.TargetProperty="TranslateX">
   <SplineDoubleKeyFrame KeyTime="0:0:0.12" KeySpline="0.1,0.9 0.2,1.0" Value="{Binding TemplateSettings.OpenPaneLength, RelativeSource={RelativeSource Mode=TemplatedParent}}"/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetName="PaneClipRectangleTransform" Storyboard.TargetProperty="TranslateX">
   <SplineDoubleKeyFrame KeyTime="0:0:0.12" KeySpline="0.1,0.9 0.2,1.0" Value="{Binding TemplateSettings.NegativeOpenPaneLength, RelativeSource={RelativeSource Mode=TemplatedParent}}"/>
</DoubleAnimationUsingKeyFrames>

为了隐藏窗格（在RTL方向上），它的长度向左移动，它也被完全剪裁，因此它不会出现在UI中。随着窗格打开，变换和裁剪值将接近并接近0：

剪切和变换的工作方式应解释为什么裁剪值设置为负窗格长度，并且变换值在关闭模式下设置为正窗格长度。

如何理解这个Grid.Clip转换？

1 个答案: