Question

我正在开发一款UWP Windows 10手机应用程序，无法让故事板旋转转换按钮controltemplate中定义的路径。

我更愿意在xaml中实现这一点。我是否为storyboard.targetproperty指定了quazi xaml路径？ =＆GT; 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内。根据{{3}}的模板部分中的XAML名称范围：

XAML中的模板提供了以直接方式重用和重新应用内容的功能，但模板也可能包含在模板级别定义名称的元素。可以在页面中多次使用相同的模板。因此，模板定义了自己的XAML名称范围，与应用样式或模板的包含页面无关。

因此ControlTemplate有自己的名称范围，您无法通过Name直接访问其中的控件。您可能需要使用this article类来帮助您访问控件。

但是如果你想让故事板可以访问控件，你可以让故事板与控件放在同一个模板中，它们将在同一个范围内。

此外，Button VisualTreeHelper包含四个默认control template，可以推荐通过一个视觉状态触发故事板。以下代码将故事板放入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>

UWP，故事板访问controltemplate中路径的正确语法是什么？

1 个答案: