Xaml Windows应用商店应用程序8.1-创建接受路径的AppBarButton样式

我正在尝试为AppBarButton创建一个样式。我想做的是在按下状态下更改一些颜色，并使用路径作为内容。 因为我对染色没问题。我想把重点放在使用路径作为内容部分上。而不是像这样做：

<AppBarButton Label="PathIcon">
    <AppBarButton.Icon>
        <PathIcon Data="F1 M 20,20L 24,10L 24,24L 5,24"/>
    </AppBarButton.Icon>
</AppBarButton>

<AppBarButton Label="PathIcon" Style="{StaticResource MyAppBarButtonStyle1}"/>

我想做一些类似的事情：

<AppBarButton Label="PathIcon">
    <AppBarButton.Icon>
        <PathIcon Data="F1 M 20,20L 24,10L 24,24L 5,24"/>
    </AppBarButton.Icon>
</AppBarButton>

<AppBarButton Label="PathIcon" Style="{StaticResource MyAppBarButtonStyle1}"/>

所以我编辑了一个AppBarButton的副本，它让我得到了这样的东西：

  <Style x:Key="MyAppBarButtonStyle" TargetType="AppBarButton">
        <Setter Property="Foreground" Value="{ThemeResource AppBarItemForegroundThemeBrush}"/>
        <Setter Property="VerticalAlignment" Value="Top"/>
        <Setter Property="HorizontalAlignment" Value="Left"/>
        <Setter Property="FontFamily" Value="{ThemeResource ContentControlThemeFontFamily}"/>
        <Setter Property="FontWeight" Value="Normal"/>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="AppBarButton">
                    <Grid x:Name="RootGrid" Background="Transparent" Width="100">
                        <VisualStateManager.VisualStateGroups>
                            <VisualStateGroup x:Name="ApplicationViewStates">
                                <VisualState x:Name="FullSize"/>
                                <VisualState x:Name="Compact">
                                    <Storyboard>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Visibility" Storyboard.TargetName="TextLabel">
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="Collapsed"/>
                                        </ObjectAnimationUsingKeyFrames>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Width" Storyboard.TargetName="RootGrid">
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="60"/>
                                        </ObjectAnimationUsingKeyFrames>
                                    </Storyboard>
                                </VisualState>
                            </VisualStateGroup>
                            <VisualStateGroup x:Name="CommonStates">
                                <VisualState x:Name="Normal"/>
                                <VisualState x:Name="PointerOver">
                                    <Storyboard>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Fill" Storyboard.TargetName="BackgroundEllipse">
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource AppBarItemPointerOverBackgroundThemeBrush}"/>
                                        </ObjectAnimationUsingKeyFrames>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="Content">
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource AppBarItemPointerOverForegroundThemeBrush}"/>
                                        </ObjectAnimationUsingKeyFrames>
                                    </Storyboard>
                                </VisualState>
                                <VisualState x:Name="Pressed">
                                    <Storyboard>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Stroke" Storyboard.TargetName="OutlineEllipse">
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource AppBarItemForegroundThemeBrush}"/>
                                        </ObjectAnimationUsingKeyFrames>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Fill" Storyboard.TargetName="BackgroundEllipse">
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource AppBarItemForegroundThemeBrush}"/>
                                        </ObjectAnimationUsingKeyFrames>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="Content">
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource AppBarItemPressedForegroundThemeBrush}"/>
                                        </ObjectAnimationUsingKeyFrames>
                                    </Storyboard>
                                </VisualState>
                                <VisualState x:Name="Disabled">
                                    <Storyboard>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Stroke" Storyboard.TargetName="OutlineEllipse">
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource AppBarItemDisabledForegroundThemeBrush}"/>
                                        </ObjectAnimationUsingKeyFrames>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="Content">
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource AppBarItemDisabledForegroundThemeBrush}"/>
                                        </ObjectAnimationUsingKeyFrames>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="TextLabel">
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource AppBarItemDisabledForegroundThemeBrush}"/>
                                        </ObjectAnimationUsingKeyFrames>
                                    </Storyboard>
                                </VisualState>
                            </VisualStateGroup>
                            <VisualStateGroup x:Name="FocusStates">
                                <VisualState x:Name="Focused">
                                    <Storyboard>
                                        <DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="FocusVisualWhite"/>
                                        <DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="FocusVisualBlack"/>
                                    </Storyboard>
                                </VisualState>
                                <VisualState x:Name="Unfocused"/>
                                <VisualState x:Name="PointerFocused"/>
                            </VisualStateGroup>
                        </VisualStateManager.VisualStateGroups>
                        <StackPanel Margin="0,14,0,13" VerticalAlignment="Top">
                            <Grid HorizontalAlignment="Center" Height="40" Margin="0,0,0,5" Width="40">
                                <Ellipse x:Name="BackgroundEllipse" Fill="{ThemeResource AppBarItemBackgroundThemeBrush}" Height="40" UseLayoutRounding="False" Width="40"/>
                                <Ellipse x:Name="OutlineEllipse" Height="40" Stroke="{ThemeResource AppBarItemForegroundThemeBrush}" StrokeThickness="2" UseLayoutRounding="False" Width="40"/>
                                <ContentPresenter x:Name="Content" AutomationProperties.AccessibilityView="Raw" Content="{TemplateBinding Icon}" Foreground="{TemplateBinding Foreground}" HorizontalAlignment="Stretch" VerticalAlignment="Stretch"/>                            
                            </Grid>
                            <TextBlock x:Name="TextLabel" Foreground="{ThemeResource AppBarItemForegroundThemeBrush}" FontSize="12" FontFamily="{TemplateBinding FontFamily}" TextAlignment="Center" TextWrapping="Wrap" Text="{TemplateBinding Label}" Width="88"/>
                        </StackPanel>
                        <Rectangle x:Name="FocusVisualWhite" IsHitTestVisible="False" Opacity="0" StrokeDashOffset="1.5" StrokeEndLineCap="Square" Stroke="{ThemeResource FocusVisualWhiteStrokeThemeBrush}" StrokeDashArray="1,1"/>
                        <Rectangle x:Name="FocusVisualBlack" IsHitTestVisible="False" Opacity="0" StrokeDashOffset="0.5" StrokeEndLineCap="Square" Stroke="{ThemeResource FocusVisualBlackStrokeThemeBrush}" StrokeDashArray="1,1"/>
                    </Grid>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

然后，我更改了上述模板中的所有颜色（本例中没有这样做），并执行了以下操作：

<Style x:Key="MyAppBarButtonStyle1" TargetType="AppBarButton" BasedOn="{StaticResource LogInAppBarButtonStyle}">
    <Setter Property="Content">
        <Setter.Value>
            <PathIcon Data="F1 M 20,20L 24,10L 24,24L 5,24"/>
        </Setter.Value>
    </Setter>
</Style>

然而，这并没有起作用。AppBarButton的内容中没有显示任何内容。此外，您可能已经注意到MyAppBarButtonStyle1正在设置Content属性而不是Icon属性。这是因为如果我尝试设置Icon属性，当我打开包含AppBarButton的页面时，会出现一个奇怪的异常：

调用COM组件时返回错误HRESULT E_FAIL。（？？？…）

还请注意，将Icon属性设置为PathIcon的第一段代码工作得很好，尝试将其移动到样式是我失败的地方

有人能给我指出正确的方向吗？如何使用路径作为其内容创建AppBarButton样式

---

谢谢。

我很幸运地弄明白了这一点。 我在摆弄地铁演播室。切换到xaml视图时，有一个名为“winrt appbar”的选项，显示以下内容：

<Style x:Key="PathBasedAppBarButtonStyle" BasedOn="{StaticResource AppBarButtonStyle}" TargetType="ButtonBase">
     <Setter Property="ContentTemplate">
         <Setter.Value>
             <DataTemplate>
                 <Path Width="18" Height="18" 
             Stretch="Uniform" HorizontalAlignment="Center" VerticalAlignment="Center"
                       Margin="0 0 2 0" RenderTransformOrigin="0.5,0.5" 
             Fill="{Binding Path=Foreground, RelativeSource={RelativeSource Mode=TemplatedParent}}" 
             Data="{Binding Path=Content, RelativeSource={RelativeSource Mode=TemplatedParent}}"/>
             </DataTemplate>
         </Setter.Value>
     </Setter>
</Style>


<Style x:Key="Add-NewAppBarButtonStyle" BasedOn="{StaticResource PathBasedAppBarButtonStyle}" TargetType="ButtonBase">
      <Setter Property="AutomationProperties.Name" Value="Add-New"/>
      <Setter Property="AutomationProperties.AutomationId" Value="Add-NewAppBarButton"/>
      <Setter Property="Content" Value="M19.833,0L32.5,0 32.5,19.833999 52.334,19.833999 52.334,32.500999 32.5,32.500999 32.5,52.333 19.833,52.333 19.833,32.500999 0,32.500999 0,19.833999 19.833,19.833999z"/>
</Style>

这正是我想做的。PathBasedAppBarButtonStyle允许我在更改路径数据的同时基于它创建样式

我确实稍微更改了上面的代码：

1） 我将TargetType更改为AppBarButton

2） 为了获取AppBarButtonStyle，我从C:\ProgramFiles（x86）\Windows Kits\8.1\Include\winrt\xaml\design\generic.xaml（在下面）复制了它

所以现在我可以做了

<AppBarButton Label="PathIcon" Style="{StaticResource MyAppBarButtonStyle1}"/>

只要MyAppBarButtonStyle1是基于PathBasedAppBarButtonStyle的样式（如Add-NewAppBarButtonStyle）

希望这能帮助像我这样的新人

问候