Zeige Symbol auf SecondaryCommands (UWP)

Question

Ich setze die Icons in meinem SecondaryCommand von CommandBar, aber sie werden nicht angezeigt. Warum?

<CommandBar RelativePanel.AlignRightWithPanel="True" RelativePanel.AlignVerticalCenterWithPanel="True" Margin="0"> 
    <CommandBar.SecondaryCommands> 
    <AppBarButton Name="shareButton" Label="Condividi" x:Uid="condividi" Click="shareButton_Click" Icon="ReShare" /> 
    <AppBarButton Name="contactButton" Icon="Contact" x:Uid="contatti" Label="Contatti" Click="contactButton_Click" /> 
    </CommandBar.SecondaryCommands> 
</CommandBar> 

Answer 1

Sie werden wegen der Standardvorlage AppBarButton nicht angezeigt. Sie müssen es ändern.

Folgen Sie einfach diesen Schritten:

1. Vorübergehend ein AppBarButton in der CommandBar.PrimaryCommands Sammlung setzen.
2. rechts auf die Schaltfläche im Designer klicken und klicken Sie auf Vorlage bearbeitet> Kopie bearbeiten ...
3. im angezeigten Dialogfenster einen Namen für die Art eingeben öffnet, zum Beispiel MyAppBarButtonStyle

4. Sets diese Art Ihrer sekundäre Taste:

   <CommandBar.SecondaryCommands> 
       <AppBarButton Name="shareButton" Label="Condividi" x:Uid="condividi" Icon="ReShare" Style="{StaticResource MyAppBarButtonStyle}" /> 
       <AppBarButton Name="contactButton" Icon="Contact" x:Uid="contatti" Label="Contatti" Style="{StaticResource MyAppBarButtonStyle}" /> 
   </CommandBar.SecondaryCommands> 
   

5. den Stil nach Ihren Wünschen ändern.

standardmäßig die folgende elemnt im Überlaufmenü verwendet wird:

<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"/> 

Vielleicht möchten Sie es ersetzen mit etwas wie folgt aus:

<StackPanel x:Name="OverflowContentRoot" Orientation="Horizontal" Visibility="Collapsed" MinHeight="{ThemeResource AppBarThemeCompactHeight}"> 
    <ContentPresenter x:Name="OverflowContent" AutomationProperties.AccessibilityView="Raw" Content="{TemplateBinding Icon}" Foreground="{TemplateBinding Foreground}" HorizontalAlignment="Stretch" Height="20" Margin="0,14,0,4"/> 
    <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" VerticalAlignment="Center"/> 
</StackPanel> 

Sie auch ändern müssen Der visuelle Überlaufzustand, um Ihre neue Vorlage anzuzeigen:

<VisualState x:Name="Overflow"> 
    <Storyboard> 
     <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Visibility" Storyboard.TargetName="ContentRoot"> 
      <DiscreteObjectKeyFrame KeyTime="0" Value="Collapsed"/> 
     </ObjectAnimationUsingKeyFrames> 
     <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Visibility" Storyboard.TargetName="OverflowContentRoot"> 
      <DiscreteObjectKeyFrame KeyTime="0" Value="Visible"/> 
     </ObjectAnimationUsingKeyFrames> 
    </Storyboard> 
</VisualState> 

Und die Schaltfläche Breite erhöhen:

<Setter Property="Width" Value="150"/> 

Natürlich, werden Sie wollen die Vorlage nach Ihren Wünschen ändern, aber zumindest bekommen sollte gehen Sie.

Answer 2

Damirs Antwort brachte mich irgendwie auf den richtigen Weg und nachdem ich eine dumme Zeit damit verbracht hatte, fand ich schließlich eine Lösung, die einfach ist.

Beachten Sie, dass es nicht jedermanns Geschmack als die Tasten nicht hervorgehoben tun bekommen, wenn Sie die Maus über, aber es ist die nächste und einfachste Weg, ich dachte, ich heraus, wie es auf einer UWP-Lösung zu tun

Zunächst wird ein definieren ControlTemplate in Ihrem Styles.xaml oder Ihre Page.Resources als solche:

<ControlTemplate x:Key="SecondaryCommandTemplate" TargetType="AppBarButton"> 
    <Grid x:Name="Root" Background="{TemplateBinding Background}"> 
     <Grid x:Name="ContentRoot" HorizontalAlignment="Stretch" Margin="5"> 
      <Grid.ColumnDefinitions> 
       <ColumnDefinition Width="Auto" /> 
       <ColumnDefinition Width="*" /> 
      </Grid.ColumnDefinitions> 
      <ContentPresenter Grid.Column="0" VerticalContentAlignment="Center" 
      VerticalAlignment="Stretch" x:Name="Content" 
      AutomationProperties.AccessibilityView="Raw" Content="{TemplateBinding Icon}" 
      Foreground="{TemplateBinding Foreground}" HorizontalAlignment="Stretch" 
      Height="20" Margin="7,0,7,0"/> 
      <TextBlock Grid.Column="1" VerticalAlignment="Center" x:Name="TextLabel" 
      Foreground="{TemplateBinding Foreground}" FontSize="12" 
      FontFamily="{TemplateBinding FontFamily}" TextAlignment="Left" 
      TextWrapping="Wrap" Text="{TemplateBinding Label}"/> 
     </Grid> 
    </Grid> 
</ControlTemplate> 

Dann einfach definieren die Template Ihre SecondaryCommands:

<CommandBar.SecondaryCommands> 
    <AppBarButton Label="Settings" 
        Icon="Setting" 
        Command="{Binding CommandBarViewModel.SettingsCommand}" 
        Template="{StaticResource SecondaryCommandTemplate}"/> 
    <AppBarButton Label="Admin" 
        Icon="Admin" 
        Command="{Binding CommandBarViewModel.SettingsCommand}" 
        Template="{StaticResource SecondaryCommandTemplate}"/> 
</CommandBar.SecondaryCommands> 

Es ist so einfach! Was ich nicht verstehe, ist, dass ich, nachdem ich Damirs Vorschlag gefolgt und den XAML-Stil, der für den Button erzeugt wurde, untersucht habe, alle visuellen Zustände entfernt habe und bemerkt habe, dass sowohl mein Icon als auch mein Text angezeigt wurde !! Warum?? Ich verstehe nicht, warum würde Microsoft das Symbol in der SecondaryCommands verstecken wollen und ich werde ehrlich sein, habe ich nicht den spezifischen Code, der es tatsächlich tat.Sobald ich alle VisualStates entfernt hatte, bemerkte ich, dass ich eine Vorlage übrig hatte und dann ging es nur darum, ein Gitter hinzuzufügen und mit VerticalAlignment, HorizontalAlignment und 'Margin' herumzuspielen.

Hoffe, das hilft!

Answer 3

Nun, es ist einfacher als das, verwenden Sie die Referenz microsoft.midiGmDls in Ihrem Projekt und es ist fertig.

Answer 4

Hier ist eine viel einfachere, weniger elegante Art, es zu tun. Es funktioniert, weil die meisten UWP-Symbole Glyphen der in Windows enthaltenen Segoe MDL2 Assets Font sind.

1. den Unicode-Punkt für das Symbol Suchen Sie Microsoft's Segoe MDL2 Assets Guide wollen (z. B. E702 für das Bluetooth-Symbol, E72D für das Aktiensymbol).
2. Verwenden Sie etwas wie UnicodeMap bis zeigen Sie diesen Buchstaben auf dem Bildschirm. Mach dir keine Sorgen, dass es wie ein leeres Quadrat aussieht, es wird in deiner App funktionieren.
3. Kopieren Sie das Zeichen wie unten beschrieben in Ihr XAML, und stellen Sie sicher, dass Sie die FontFamily Ihres AppBarButton auf Segoe MDL2-Assets setzen.

<CommandBar.SecondaryCommands> <AppBarButton FontFamily="Segoe MDL2 Assets" Label=" Help"/> <AppBarButton FontFamily="Segoe MDL2 Assets" Label=" Update database"/> </CommandBar.SecondaryCommands>

Und das ist, was Sie erhalten.

Ich verwende diese Technik in einer Anwendung, die ohne Probleme auf Russisch und Chinesisch lokalisiert ist.