Win10 SplitView Animation

Question

Я пытаюсь реализовать элемент управления FlipView в приложении UWP для Win10, но, похоже, я не могу анимировать переход между открытым и закрытым состояниями, как в приложении для календаря Windows 10. Если я посмотрю на стиль по умолчанию для SplitView, кажется, что размер панели изменяется путем анимации свойства Width для ColumnDefinition. Это свойство нельзя анимировать, используя анимацию по умолчанию, предоставляемую инфраструктурой. Любая помощь будет оценена по достоинству.

Answer 1

В DefaultStyle найдите ClosedCompactLeft визуальное состояние. Затем измените значение Продолжительность для анимации на PaneClipRectangleTransform. Посмотрите на эту анимацию (которая является один будет изменено):

<DoubleAnimation Storyboard.TargetName="PaneClipRectangleTransform" 
             Storyboard.TargetProperty="TranslateX" 
             To="{Binding TemplateSettings.NegativeOpenPaneLengthMinusCompactLength, RelativeSource={RelativeSource Mode=TemplatedParent}}" 
             Duration="0:0:0.0" /> 

Answer 2

Вы можете определить Storyboard внутри VisualState. Если срабатывает триггер, история начнется автоматически.

Пример структуры кода:

<VisualStateManager.VisualStateGroups> 
      <VisualStateGroup> 
       <VisualState> 
        <VisualState.StateTriggers> 
         <AdaptiveTrigger MinWindowWidth="0" /> 
        </VisualState.StateTriggers> 
        <Storyboard> 
         <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateX)" Storyboard.TargetName="Drawer"> 
          <SplineDoubleKeyFrame KeyTime="0" Value="0"/> 
          <EasingDoubleKeyFrame KeyTime="0:0:0.3" Value="-260"> 
           <EasingDoubleKeyFrame.EasingFunction> 
            <CircleEase EasingMode="EaseOut"/> 
           </EasingDoubleKeyFrame.EasingFunction> 
          </EasingDoubleKeyFrame> 
         </DoubleAnimationUsingKeyFrames> 
        </Storyboard> 
       </VisualState> 
       <VisualState> 
        <VisualState.StateTriggers> 
         <AdaptiveTrigger MinWindowWidth="1020" /> 
        </VisualState.StateTriggers> 
        <Storyboard> 
         <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateX)" Storyboard.TargetName="Drawer"> 
          <EasingDoubleKeyFrame KeyTime="0" Value="-260"/> 
          <EasingDoubleKeyFrame KeyTime="0:0:0.3" Value="0"> 
           <EasingDoubleKeyFrame.EasingFunction> 
            <CircleEase EasingMode="EaseOut"/> 
           </EasingDoubleKeyFrame.EasingFunction> 
          </EasingDoubleKeyFrame> 
         </DoubleAnimationUsingKeyFrames> 
        </Storyboard> 
       </VisualState> 
      </VisualStateGroup> 
     </VisualStateManager.VisualStateGroups> 

Если вы используете SplitView, вы можете закодировать класс, который расширяет SplitView и пользовательские это стиль, который делает вас получить Pane и Content в вашем коде и, таким образом, вам может анимировать их самостоятельно.