我怎么能纠正我的代码，使这个AppBarButton stretshes在命令栏

Question

我试图通过拉长AppBarButton我SecondaryCommands这种风格：

<Style x:Key="AppBarButtonStyle1" TargetType="AppBarButton"> 
    <Setter Property="Background" Value="Transparent"/> 
    <Setter Property="Foreground" Value="{ThemeResource SystemControlForegroundBaseHighBrush}"/> 
    <Setter Property="HorizontalAlignment" Value="Left"/> 
    <Setter Property="VerticalAlignment" Value="Top"/> 
    <Setter Property="FontFamily" Value="{ThemeResource ContentControlThemeFontFamily}"/> 
    <Setter Property="FontWeight" Value="Normal"/> 
    <Setter Property="Width" Value="68"/> 
    <Setter Property="UseSystemFocusVisuals" Value="True"/> 
    <Setter Property="Template"> 
     <Setter.Value> 
      <ControlTemplate TargetType="AppBarButton"> 
       <Grid x:Name="Root" Background="{TemplateBinding Background}" MaxWidth="{TemplateBinding MaxWidth}" MinWidth="{TemplateBinding MinWidth}"> 
        <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> 
           </Storyboard> 
          </VisualState> 
          <VisualState x:Name="Overflow"> 
           <Storyboard> 
            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Visibility" Storyboard.TargetName="ContentRoot"> 
             <DiscreteObjectKeyFrame KeyTime="0" Value="Collapsed"/> 
            </ObjectAnimationUsingKeyFrames> 
            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Visibility" Storyboard.TargetName="OverflowTextLabel"> 
             <DiscreteObjectKeyFrame KeyTime="0" Value="Visible"/> 
            </ObjectAnimationUsingKeyFrames> 
           </Storyboard> 
          </VisualState> 
          <VisualState x:Name="OverflowWithToggleButtons"> 
           <Storyboard> 
            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Visibility" Storyboard.TargetName="ContentRoot"> 
             <DiscreteObjectKeyFrame KeyTime="0" Value="Collapsed"/> 
            </ObjectAnimationUsingKeyFrames> 
            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Visibility" Storyboard.TargetName="OverflowTextLabel"> 
             <DiscreteObjectKeyFrame KeyTime="0" Value="Visible"/> 
            </ObjectAnimationUsingKeyFrames> 
            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Margin" Storyboard.TargetName="OverflowTextLabel"> 
             <DiscreteObjectKeyFrame KeyTime="0" Value="38,0,12,0"/> 
            </ObjectAnimationUsingKeyFrames> 
           </Storyboard> 
          </VisualState> 
         </VisualStateGroup> 
         <VisualStateGroup x:Name="CommonStates"> 
          <VisualState x:Name="Normal"> 
           <Storyboard> 
            <PointerUpThemeAnimation Storyboard.TargetName="OverflowTextLabel"/> 
           </Storyboard> 
          </VisualState> 
          <VisualState x:Name="PointerOver"> 
           <Storyboard> 
            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Background" Storyboard.TargetName="Root"> 
             <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlHighlightListLowBrush}"/> 
            </ObjectAnimationUsingKeyFrames> 
            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="Content"> 
             <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlHighlightAltBaseHighBrush}"/> 
            </ObjectAnimationUsingKeyFrames> 
            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="TextLabel"> 
             <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlHighlightAltBaseHighBrush}"/> 
            </ObjectAnimationUsingKeyFrames> 
            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="OverflowTextLabel"> 
             <DiscreteObjectKeyFrame KeyTime="0" Value="Red"/> 
            </ObjectAnimationUsingKeyFrames> 
            <PointerUpThemeAnimation Storyboard.TargetName="OverflowTextLabel"/> 
           </Storyboard> 
          </VisualState> 
          <VisualState x:Name="Pressed"> 
           <Storyboard> 
            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Background" Storyboard.TargetName="Root"> 
             <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlHighlightListMediumBrush}"/> 
            </ObjectAnimationUsingKeyFrames> 
            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="Content"> 
             <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlHighlightAltBaseHighBrush}"/> 
            </ObjectAnimationUsingKeyFrames> 
            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="TextLabel"> 
             <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlHighlightAltBaseHighBrush}"/> 
            </ObjectAnimationUsingKeyFrames> 
            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="OverflowTextLabel"> 
             <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlHighlightAltBaseHighBrush}"/> 
            </ObjectAnimationUsingKeyFrames> 
            <PointerDownThemeAnimation Storyboard.TargetName="OverflowTextLabel"/> 
           </Storyboard> 
          </VisualState> 
          <VisualState x:Name="Disabled"> 
           <Storyboard> 
            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="Content"> 
             <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlDisabledBaseMediumLowBrush}"/> 
            </ObjectAnimationUsingKeyFrames> 
            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="TextLabel"> 
             <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlDisabledBaseMediumLowBrush}"/> 
            </ObjectAnimationUsingKeyFrames> 
            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="OverflowTextLabel"> 
             <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlDisabledBaseMediumLowBrush}"/> 
            </ObjectAnimationUsingKeyFrames> 
           </Storyboard> 
          </VisualState> 
         </VisualStateGroup> 
         <VisualStateGroup x:Name="InputModeStates"> 
          <VisualState x:Name="InputModeDefault"/> 
          <VisualState x:Name="TouchInputMode"> 
           <VisualState.Setters> 
            <Setter Target="OverflowTextLabel.Padding" Value="0,11,0,13"/> 
           </VisualState.Setters> 
          </VisualState> 
         </VisualStateGroup> 
        </VisualStateManager.VisualStateGroups> 
        <StackPanel x:Name="ContentRoot" MinHeight="{ThemeResource AppBarThemeCompactHeight}"> 
         <ContentPresenter x:Name="Content" AutomationProperties.AccessibilityView="Raw" Content="{TemplateBinding Icon}" Foreground="{TemplateBinding Foreground}" HorizontalAlignment="Stretch" Height="20" Margin="0,14,0,4"/> 
         <TextBlock x:Name="TextLabel" Foreground="{TemplateBinding Foreground}" FontSize="12" FontFamily="{TemplateBinding FontFamily}" Margin="0,0,0,6" TextAlignment="Center" TextWrapping="Wrap" Text="{TemplateBinding Label}"/> 
        </StackPanel> 
        <TextBlock x:Name="OverflowTextLabel" Foreground="{TemplateBinding Foreground}" FontSize="15" FontFamily="{TemplateBinding FontFamily}" HorizontalAlignment="Stretch" Margin="12,0,12,0" Padding="0,5,0,7" TextAlignment="Left" TextWrapping="NoWrap" Text="{TemplateBinding Label}" TextTrimming="Clip" Visibility="Collapsed" VerticalAlignment="Center"/> 
       </Grid> 
      </ControlTemplate> 
     </Setter.Value> 
    </Setter> 
</Style> 

，这是我在我的XAML文件所做的：

<Page.BottomAppBar> 
    <CommandBar> 
     <CommandBar.SecondaryCommands> 
      <AppBarButton Label="Forward" Style="{StaticResource AppBarButtonStyle1}"HorizontalAlignment="Stretch" HorizontalContentAlignment="Stretch" /> 
     </CommandBar.SecondaryCommands> 
    </CommandBar> 
</Page.BottomAppBar> 

，这就是我得到：

所以，我怎么能纠正我的代码，使这个AppBarButton海峡蚀刻在CommandBar？

Answer 1

你想对你AppBarButton看起来像以下：

如果是这样，你可以在你Style设置HorizontalAlignment属性，并改变其Value到Stretch，更重要的变化Width价值Auto，如：

<Style x:Key="AppBarButtonStyle1" TargetType="AppBarButton"> 
    ... 
    <Setter Property="HorizontalAlignment" Value="Stretch"/> 
    <Setter Property="Width" Value="Auto" /> 
    ... 
</Style>