Windows應用商店應用8.1 - 創建接受路徑的AppBarButton樣式

我正在嘗試爲AppBarButton創建樣式。我想要做的是改變按下狀態的一些顏色，並使用路徑作爲內容。因爲我沒有着色的問題。我想專注於使用Path作爲內容部分。而不是做類似的：Windows應用商店應用8.1 - 創建接受路徑的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的副本讓我這樣的事情：

<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屬性。這是因爲，如果我嘗試當我打開包含AppBarButton頁面設置圖標屬性我得到一個奇怪的例外：

錯誤HRESULT E_FAIL已經從COM組件的調用返回。（??? ...）

另外請注意，將Icon屬性設置爲PathIcon的第一段代碼工作得很好，試圖將它移動到一個樣式是我失敗的地方。

所以任何人都可以指出我正確的方向嗎？如何使用Path作爲其內容創建AppBarButton樣式？

謝謝。

來源

2013-12-17 Eduardo Serrano

我已經很幸運了算出這一個。我在擺弄地鐵工作室。當切換到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複製它：\程序文件（x86）\的Windows套件\ 8.1 \包含（下）

所以\ WinRT的\ XAML \設計\ generic.xaml現在我能做的

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

只要MyAppBarButtonStyle1是基於PathBas風格edAppBarButtonStyle（如外接NewAppBarButtonStyle）

希望這有助於新人和我一樣，

問候

來源

2013-12-23 03:34:51

Windows應用商店應用8.1 - 創建接受路徑的AppBarButton樣式

回答

相關問題