UWP、ストーリーボードがコントロールテンプレートのパスにアクセスするための正しい構文は何ですか？

Question

私はUWP Windows 10の電話アプリで作業しており、ストーリーボードを取得して、ボタンのコントロールテンプレート内で定義されたパスを回転して変換するのに問題があります。

私はxamlでこれを達成することをお勧めします。私はstoryboard.targetpropertyにquazi xamlパスを指定しますか？ => viewer.navbutton.PART_Arrow？

<Grid x:Name="layoutRoot" Background="{ThemeResource ApplicationPageBackgroundThemeBrush}"> 
    <VisualStateManager.VisualStateGroups> 
     <VisualStateGroup x:Name="VisualStateGroup"> 
      <VisualStateGroup.Transitions> 
       <VisualTransition GeneratedDuration="0:0:0.1"/> 
      </VisualStateGroup.Transitions> 
      <VisualState x:Name="ShowNav"> 
       <VisualState.Setters> 
        <Setter Target="navigation.(FrameworkElement.Height)" Value="Auto"/> 
       </VisualState.Setters> 
      </VisualState> 
      <VisualState x:Name="HideNav"> 
       <VisualState.Setters> 
        <Setter Target="navigation.(FrameworkElement.Height)" Value="0"/> 
       </VisualState.Setters> 
      </VisualState> 
     </VisualStateGroup> 
    </VisualStateManager.VisualStateGroups> 
    <Grid.Resources> 
     <Storyboard x:Name="rotateStoryBoard"> 
      <DoubleAnimation Storyboard.TargetName="rotateDownArrow" 
          Storyboard.TargetProperty="Angle" 
          From="0" 
          To="90" 
          Duration="0:0:2"/> 
     </Storyboard> 
    </Grid.Resources> 
    <Grid.RowDefinitions> 
     <RowDefinition Height="Auto" /> 
     <RowDefinition /> 
    </Grid.RowDefinitions> 
    <Grid Grid.Row="0" x:Name="navigation"> 
     <Grid.ColumnDefinitions> 
      <ColumnDefinition Width="Auto"/> 
      <ColumnDefinition/> 
     </Grid.ColumnDefinitions> 
     <TextBox Grid.Column="1" x:Name="navbar" Margin="0,0,0,0"/> 
     <Button Grid.Column="0" x:Name="refresh_Copy" 
      VerticalAlignment="Top" 
      Content="Refresh" 
      Click="refresh_Click" 
      RenderTransformOrigin="1.457,0.562" /> 
    </Grid> 
    <Grid Grid.Row="1" x:Name="viewer"> 
     <Button x:Name="navButton" 
       HorizontalAlignment="Center" 
       VerticalAlignment="Top" 
       Canvas.ZIndex="1" 
       Click="navButton_Click"> 
      <Button.Style> 
       <Style TargetType="Button"> 
        <Setter Property="Template"> 
         <Setter.Value> 
          <ControlTemplate> 
           <Grid HorizontalAlignment="Center"> 
            <Path x:Name="PART_Circle" 
              Fill="{ThemeResource ButtonBackgroundThemeBrush}" 
              Stroke="{ThemeResource ButtonBackgroundThemeBrush}" 
              StrokeThickness="1.5" 
              Data="M0,0 A30,30 0 0 0 60,0"/> 
            <Path x:Name="PART_Arrow" 
              Stroke="GreenYellow" 
              StrokeThickness="1.5" 
              Data="M12,6 L30,18 L48,6"> 
             <Path.RenderTransform> 
              <RotateTransform x:Name="rotateDownArrow" 
                  Angle="0" 
                  CenterX="30" 
                  CenterY="12"/> 
             </Path.RenderTransform> 
            </Path> 
           </Grid> 
          </ControlTemplate> 

         </Setter.Value> 
        </Setter> 
       </Style> 
      </Button.Style> 
     </Button> 
     <WebView x:Name="Web" 
       Grid.Row="1" 
       Grid.Column="0" 
       Grid.ColumnSpan="2" 
       NavigationCompleted="Web_NavigationCompleted" 
       ScriptNotify="Web_OnScriptNotify" 
       Canvas.ZIndex="0"/> 
    </Grid> 

</Grid> 

Answer 1

のControlTemplateでパスにアクセスするためのストーリーボードの正しい構文は何ですか？

Pathコントロールは、ControlTemplateの内部にあります。 this articleのテンプレートセクションのXAML名前スコープによると：

XAMLでのテンプレートは、簡単な方法でコンテンツを再利用し、再適用する機能を提供しますが、テンプレートは、テンプレート・レベルで定義された名前を持つ要素が含まれる場合があります。同じテンプレートがページ内で複数回使用される可能性があります。このため、テンプレートは、スタイルまたはテンプレートが適用されているページとは関係なく、独自のXAML名前スコープを定義します。

したがって、ControlTemplateには独自のネームスコープがあり、その中のコントロールに直接アクセスすることはできませんName。コントロールにアクセスするには、VisualTreeHelperクラスを使用する必要があります。

しかし、ストーリーボードがコントロールにアクセスできるようにするには、ストーリーボードをコントロールと同じテンプレートに入れて、同じスコープにすることができます。

さらに、Buttoncontrol templateにはデフォルトの​​が4つ含まれており、ストーリーボードを1つの視覚的状態でトリガーすることをお勧めします。次のコードは、ストーリーボードをControlTemplateに挿入し、参照できるボタンが押されたときにトリガーされます。

<Grid 
    x:Name="layoutRoot" 
    Padding="50" 
    Background="{ThemeResource ApplicationPageBackgroundThemeBrush}"> 
    ... 
    <Grid x:Name="viewer" Grid.Row="1"> 
     <Button 
      x:Name="navButton" 
      HorizontalAlignment="Center" 
      VerticalAlignment="Top" 
      Canvas.ZIndex="1" 
      Click="navButton_Click"> 
      <Button.Style> 
       <Style TargetType="Button"> 
        <Setter Property="Template"> 
         <Setter.Value> 
          <ControlTemplate> 
           <Grid HorizontalAlignment="Center"> 
            <Grid.Resources> 
             <Storyboard x:Name="rotateStoryBoard"> 
              <DoubleAnimation 
               BeginTime="0:0:0" 
               Duration="0:0:2" 
               From="0" 
               Storyboard.TargetName="rotateDownArrow" 
               Storyboard.TargetProperty="Angle" 
               To="90" /> 
             </Storyboard> 
            </Grid.Resources> 
            <Path 
             x:Name="PART_Circle" 
             Fill="{ThemeResource ButtonBackgroundThemeBrush}" 
             Stroke="{ThemeResource ButtonBackgroundThemeBrush}" 
             StrokeThickness="1.5" 
             Data="M0,0 A30,30 0 0 0 60,0" /> 
            <Path 
             x:Name="PART_Arrow" 
             Stroke="GreenYellow" 
             StrokeThickness="1.5" 
             Data="M12,6 L30,18 L48,6"> 
             <Path.RenderTransform> 
              <RotateTransform x:Name="rotateDownArrow" Angle="0" CenterX="30" CenterY="12" /> 
             </Path.RenderTransform> 
            </Path> 
            <VisualStateManager.VisualStateGroups> 
             <VisualStateGroup x:Name="CommonStates"> 
              <VisualState x:Name="Pressed"> 
               <Storyboard> 
                <DoubleAnimation 
                 BeginTime="0:0:0" 
                 Duration="0:0:2" 
                 From="0" 
                 Storyboard.TargetName="rotateDownArrow" 
                 Storyboard.TargetProperty="Angle" 
                 To="90" /> 
               </Storyboard> 
              </VisualState> 
             </VisualStateGroup> 
            </VisualStateManager.VisualStateGroups> 
           </Grid> 
          </ControlTemplate> 
         </Setter.Value> 
        </Setter> 
       </Style> 
      </Button.Style> 
     </Button> 
... 
</Grid>