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

时间:2013-12-17 22:21:45

标签: xaml button windows-store-apps winrt-xaml

我正在尝试为AppBarButton创建一个样式。我想要做的是改变按下状态下的一些颜色,并使用Path作为内容。 因为我对着色没有任何问题。我想专注于使用Path作为内容部分。而不是做类似的事情:

<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的页面时,我会得到一个奇怪的异常:

  

错误HRESULT E_FAIL已从调用COM组件返回。 (??? ...)

另请注意,将Icon属性设置为PathIcon的第一段代码工作正常,尝试将其移动到样式是我失败的地方。

那么有人能指出我正确的方向吗?如何使用Path作为其内容创建AppBarButton样式?

谢谢。

1 个答案:

答案 0 :(得分:2)

我很幸运能搞清楚这个。 我正在摆弄地铁工作室。当切换到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使我能够在更改Path的数据的同时基于它创建样式。

我确实略微更改了上面的代码:

1)我将TargetType更改为AppBarButton

2)要获取AppBarButtonStyle,我从C:\ Program Files(x86)\ Windows Kits \ 8.1 \ Include \ winrt \ xaml \ design \ generic.xaml(under)

复制了它

所以现在我可以做到

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

只要MyAppBarButtonStyle1是基于PathBasedAppBarButtonStyle的样式(如Add-NewAppBarButtonStyle)

希望这有助于像我这样的新人,

此致