CommandBar.Content AppBarButton Label-Position rechts

dies ist mein Code:CommandBar.Content AppBarButton Label-Position rechts

 <CommandBar DefaultLabelPosition="Right" IsOpen="True"> 
      <CommandBar.Content> 
       <AppBarButton Icon="Account" Label="Test 1"></AppBarButton> 
      </CommandBar.Content> 
      <AppBarButton Icon="Accept" Label="Test 2"/> 
     </CommandBar>

und das ist das Ergebnis, was ich habe:

So, jetzt, wie ich auslösen, dass das Etikett auf der rechten Seite? DefaultLabelPosition wirkt sich nicht auf die Inhaltswerte aus.

Ich möchte eine Symbolleiste wie in WPF oder WinForms erstellen.

Greetz

Quelle

2016-12-15 R3Tech

Mögliches Duplikat von [Inhalt der CommandBar in UWP anpassen] (http://StackOverflow.com/questions/39126481/aligning-content-of-commandbar-in-uwp) –

wo ist das ein Duplikat? – R3Tech

Sie möchten nur Ihre Tasten horizontal nach rechts ausrichten, richtig? Kein –

Hier sind einige Dinge zu beachten.

1) DefaultLabelPosition können in App-Targeting Anniversary-Update verwendet werden. Wenn Sie also Apps für frühere Versionen verwenden möchten, funktioniert das nicht.

2) Ungeachtet des obigen Punktes ist CommandBar.Content für sich allein ein separater Presenter mit AppBarButton.

Wie kann ich diese Arbeit bekommen?

Sie können eine Stilvorlage aus der Standardvorlage AppBarButton Vorlage erstellen und Ihre ContentRoot nach Bedarf gestalten.

unten ist das Gitter, die ich geändert, während sie um irgendwann vor dem Spielen.

<Grid x:Name="ContentRoot" MinHeight="{ThemeResource AppBarThemeMinHeight}"> 
    <Grid.ColumnDefinitions> 
     <ColumnDefinition Width="Auto"/> 
     <ColumnDefinition Width="Auto"/> 
    </Grid.ColumnDefinitions> 
    <ContentPresenter x:Name="Content" AutomationProperties.AccessibilityView="Raw" Content="{TemplateBinding Icon}" Foreground="{TemplateBinding Foreground}" HorizontalAlignment="Stretch" Height="20" VerticalAlignment="Center"/> 
    <TextBlock x:Name="TextLabel" Foreground="{TemplateBinding Foreground}" FontSize="12" FontFamily="{TemplateBinding FontFamily}" Margin="5,0" Grid.Row="0" Grid.Column="1" TextAlignment="Center" TextWrapping="Wrap" Text="{TemplateBinding Label}" VerticalAlignment="Center"/> 
</Grid>

Auch Stil hat Visual Compact, die den Beschriftungstext auf AppBar Schließen verbirgt dies so kommentieren Sie

und dann diese Art Ihrem Tasten zuweisen.

<Page.BottomAppBar> 
    <CommandBar IsOpen="True"> 
     <CommandBar.Content> 
      <AppBarButton Icon="Account" Label="Test 1" Style="{StaticResource RightAlignAppBarButton}"/> 
     </CommandBar.Content> 
     <AppBarButton Icon="Accept" Label="Accept" Style="{StaticResource RightAlignAppBarButton}" /> 
    </CommandBar> 
</Page.BottomAppBar>

Dies ist die Ausgabe

ist die volle Stil für Ihre Referenz.

<Style x:Key="RightAlignAppBarButton" TargetType="AppBarButton"> 
    <Setter Property="Background" Value="{ThemeResource AppBarButtonBackground}"/> 
    <Setter Property="Foreground" Value="{ThemeResource AppBarButtonForeground}"/> 
    <Setter Property="BorderBrush" Value="{ThemeResource AppBarButtonBorderBrush}"/> 
    <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="AllowFocusOnInteraction" Value="False"/> 
    <Setter Property="Template"> 
     <Setter.Value> 
      <ControlTemplate TargetType="AppBarButton"> 
       <Grid x:Name="Root" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" MaxWidth="{TemplateBinding MaxWidth}" MinWidth="{TemplateBinding MinWidth}"> 
        <Grid.Resources> 
         <Style x:Name="LabelOnRightStyle" TargetType="AppBarButton"> 
          <Setter Property="Width" Value="NaN"/> 
         </Style> 
        </Grid.Resources> 
        <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="LabelOnRight"> 
           <Storyboard> 
            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Margin" Storyboard.TargetName="Content"> 
             <DiscreteObjectKeyFrame KeyTime="0" Value="12,14,0,14"/> 
            </ObjectAnimationUsingKeyFrames> 
            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="MinHeight" Storyboard.TargetName="ContentRoot"> 
             <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource AppBarThemeCompactHeight}"/> 
            </ObjectAnimationUsingKeyFrames> 
            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(Grid.Row)" Storyboard.TargetName="TextLabel"> 
             <DiscreteObjectKeyFrame KeyTime="0" Value="0"/> 
            </ObjectAnimationUsingKeyFrames> 
            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(Grid.Column)" Storyboard.TargetName="TextLabel"> 
             <DiscreteObjectKeyFrame KeyTime="0" Value="1"/> 
            </ObjectAnimationUsingKeyFrames> 
            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="TextAlignment" Storyboard.TargetName="TextLabel"> 
             <DiscreteObjectKeyFrame KeyTime="0" Value="Left"/> 
            </ObjectAnimationUsingKeyFrames> 
            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Margin" Storyboard.TargetName="TextLabel"> 
             <DiscreteObjectKeyFrame KeyTime="0" Value="8,15,12,17"/> 
            </ObjectAnimationUsingKeyFrames> 
           </Storyboard> 
          </VisualState> 
          <VisualState x:Name="LabelCollapsed"> 
           <Storyboard> 
            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="MinHeight" Storyboard.TargetName="ContentRoot"> 
             <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource AppBarThemeCompactHeight}"/> 
            </ObjectAnimationUsingKeyFrames> 
            <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 AppBarButtonBackgroundPointerOver}"/> 
            </ObjectAnimationUsingKeyFrames> 
            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="BorderBrush" Storyboard.TargetName="Root"> 
             <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource AppBarButtonBorderBrushPointerOver}"/> 
            </ObjectAnimationUsingKeyFrames> 
            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="Content"> 
             <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource AppBarButtonForegroundPointerOver}"/> 
            </ObjectAnimationUsingKeyFrames> 
            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="TextLabel"> 
             <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource AppBarButtonForegroundPointerOver}"/> 
            </ObjectAnimationUsingKeyFrames> 
            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="OverflowTextLabel"> 
             <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource AppBarButtonForegroundPointerOver}"/> 
            </ObjectAnimationUsingKeyFrames> 
            <PointerUpThemeAnimation Storyboard.TargetName="OverflowTextLabel"/> 
           </Storyboard> 
          </VisualState> 
          <VisualState x:Name="Pressed"> 
           <Storyboard> 
            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Background" Storyboard.TargetName="Root"> 
             <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource AppBarButtonBackgroundPressed}"/> 
            </ObjectAnimationUsingKeyFrames> 
            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="BorderBrush" Storyboard.TargetName="Root"> 
             <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource AppBarButtonBorderBrushPressed}"/> 
            </ObjectAnimationUsingKeyFrames> 
            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="Content"> 
             <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource AppBarButtonForegroundPressed}"/> 
            </ObjectAnimationUsingKeyFrames> 
            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="TextLabel"> 
             <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource AppBarButtonForegroundPressed}"/> 
            </ObjectAnimationUsingKeyFrames> 
            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="OverflowTextLabel"> 
             <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource AppBarButtonForegroundPressed}"/> 
            </ObjectAnimationUsingKeyFrames> 
            <PointerDownThemeAnimation Storyboard.TargetName="OverflowTextLabel"/> 
           </Storyboard> 
          </VisualState> 
          <VisualState x:Name="Disabled"> 
           <Storyboard> 
            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Background" Storyboard.TargetName="Root"> 
             <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource AppBarButtonBackgroundDisabled}"/> 
            </ObjectAnimationUsingKeyFrames> 
            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="BorderBrush" Storyboard.TargetName="Root"> 
             <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource AppBarButtonBorderBrushDisabled}"/> 
            </ObjectAnimationUsingKeyFrames> 
            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="Content"> 
             <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource AppBarButtonForegroundDisabled}"/> 
            </ObjectAnimationUsingKeyFrames> 
            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="TextLabel"> 
             <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource AppBarButtonForegroundDisabled}"/> 
            </ObjectAnimationUsingKeyFrames> 
            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="OverflowTextLabel"> 
             <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource AppBarButtonForegroundDisabled}"/> 
            </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> 
          <VisualState x:Name="GameControllerInputMode"> 
           <VisualState.Setters> 
            <Setter Target="OverflowTextLabel.Padding" Value="0,11,0,13"/> 
           </VisualState.Setters> 
          </VisualState> 
         </VisualStateGroup> 
        </VisualStateManager.VisualStateGroups> 
        <Grid x:Name="ContentRoot" MinHeight="{ThemeResource AppBarThemeMinHeight}"> 
         <Grid.ColumnDefinitions> 
          <ColumnDefinition Width="Auto"/> 
          <ColumnDefinition Width="Auto"/> 
         </Grid.ColumnDefinitions> 
         <ContentPresenter x:Name="Content" AutomationProperties.AccessibilityView="Raw" Content="{TemplateBinding Icon}" Foreground="{TemplateBinding Foreground}" HorizontalAlignment="Stretch" Height="20" VerticalAlignment="Center"/> 
         <TextBlock x:Name="TextLabel" Foreground="{TemplateBinding Foreground}" FontSize="12" FontFamily="{TemplateBinding FontFamily}" Margin="5,0" Grid.Row="0" Grid.Column="1" TextAlignment="Center" TextWrapping="Wrap" Text="{TemplateBinding Label}" VerticalAlignment="Center"/> 
        </Grid> 
        <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>

Sie können mit einigen anderen Eigenschaften rumspielen und die Ausgabe erhalten, wie gewünscht.

Quelle

2016-12-15 19:06:07 AVK

so ein großer Stil für so eine einfache Sache? Aber auf dem Screenshot haben Sie das "3-Punkt-Menü". – R3Tech

Das wird von 'CommandBar' selbst gesteuert. Wenn ich mich richtig erinnere, sollte ein 'Button' mit dem Namen' MoreButton' im Standard-Style für 'CommandBar' stehen. Alles, was Sie tun müssen, ist diesen 'Button' in' ContentRoot' zu kommentieren und auch alles, was mit 'MoreButton' in Zusammenhang steht, von' VisualStates' zu deaktivieren. Ich habe jetzt keinen Zugang zu einer Lösung, aber das sollte von Blend aus ziemlich einfach sein – AVK

CommandBar.Content AppBarButton Label-Position rechts

Antwort

Verwandte Themen