Bu Grid.Clip dönüşümü nasıl anlarım?

Question

Şablonunu okuyarak SplitView denetimini öğreniyorum. Şablonda, bölme alanının Grid.Clip'ini dönüştürmek için PaneClipRectangleTransform adlı bir dönüşüm var. XAML'nin altında "Kapalı" dan "OpenOverlayLeft" e geçişin durumunun bir parçasıdır.

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

Kodun bu bölümünü nasıl anlarım? Animasyon nedir ve görünür/görünmez etki nedir? SplitView kontrol XAML şablonun

Answer 1

göz önüne alındığında bir parçası:

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

"ContentRoot" ızgara

ikisi ve "PaneRoot" ızgaralar aynı "Kök" ızgara yerleştirilir. Gördüğünüz gibi, Grid.Row özelliği PaneRoot varsayılan olarak (0) ve Grid.ColumnSpan "2" olarak ayarlanır. Bu, İçeriğin ve Bölmenin her ikisinin de aynı hücreye yerleştirildiği anlamına gelir. Bu, Overlay modu ile varsayılan ayarlardır. bölmesi açıkken

Bölmesi Açıldı

Yani, bölme kırpma varsa veya bölmesinde için dönüştürmeye gerek yoktur. Yani "Kapalı" den "OpenOverlayLeft" durumuna geçişte gelen söz budur: Her iki kırpma için, görmek ve Transform gibi

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

ve ayrıca

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

, değerler 0" olarak ayarlanır "0.35 saniyeden sonra panel tamamen açılsın. İlk değerler, panelin kapatılması gerektiğinde ayarlanan değerlerdir. Aşağıda tartışılmaktadır.

Kapalı Bölmesi

bölmesi varsayılan olarak Yerleşimi modunda gizli gerekmektedir. Burada kapalı geçiş OpenOverlayRight olarak PaneTranform ve PaneClipRectangleTransform için değerindedir:

bölmesini (RTL yönünde) gizlemek için

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

, kendi uzunluğu ile ayrıldı, bu da tamamen şekilde kırpılır taşınır bu kullanıcı arayüzünde görünmez. bölmesi açık oluyor gibi, dönüşümü ve kırpma değeri yakın alacak ve daha yakın 0:

yolu kırpma ve kırpma değeri negatif bölmesi uzunluğu ayarlanır neden açıklamalıdır eserlerini dönüşümü ve değer olarak ayarlanır dönüşümü yakın modda pozitif bölme uzunluğu.