SecondaryCommands（UWP）にアイコンを表示

Question

アイコンをCommandBarのSecondaryCommandに設定しましたが、表示されません。どうして？

<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

デフォルトのAppBarButtonテンプレートのため表示されません。あなたはそれを変更する必要があります。

ただ、次の手順を実行します。

1. は一時的にCommandBar.PrimaryCommandsコレクションにAppBarButtonを置きます。
2. 右あなたのスタイルの名前を入力して開いたダイアログ、例えばデザイナーのボタンをクリックし、テンプレートの編集]をクリックします> [コピーを編集...
3. MyAppBarButtonStyle

4. は、セカンダリボタンにこのスタイルを設定します。

   <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. お好みに合わせてスタイルを変更します。デフォルトでは

次elemntは、オーバーフローメニューで使用されます。

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

あなたはそのような何かに置き換えることをお勧めします：

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

また、修正する必要があります新しいテンプレートを表示するオーバーフロービジュアル状態：

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

とボタンの幅増やす：もちろん

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

を、あなたはさらに、あなたの好みに合わせてテンプレートを変更したいと思うが、これは、少なくともあなたが軌道に乗る必要があります。

Answer 2

Damirの答えはどういうわけか私を正しい軌道に乗せ、これに愚かな時間を費やした後、私は結局簡単な解決法を見つけ出しました。あなたのマウスを使って上にマウスを移動するときのボタンが強調表示されませんが、それは私がUWPソリューション

でそれを行う方法に考え出した最も近いと最も簡単な方法だとして、それは誰もが合わないことが

注意最初のようなあなたのStyles.xamlたりPage.ResourcesでControlTemplateを定義します。

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

そして、単にTemplateあなた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> 

これは簡単です！私が得られないことは、Damirの提案に従い、ボタンのために生成されたXAMLスタイルを調べた後、すべての視覚状態を取り除いてしまい、アイコンとテキストの両方が表示されたことです。なぜ？？ MicrosoftがSecondaryCommandsのアイコンを隠したいのはなぜか分かりません。正直言って、実際にそれを行った特定のコードは見つからなかったのです。すべてのVisualStateを削除したら、テンプレートが残っていて、グリッドを追加してVerticalAlignment、HorizontalAlignmentと 'Margin'を使って遊んでいるだけのケースでした。

希望すると便利です。

Answer 3

これよりもかなり簡単です。あなたのproyectにリファレンスmicrosoft.midiGmDlsを使用すれば完了です。

Answer 4

これははるかに単純で、あまりエレガントでない方法です。これは、ほとんどのUWPアイコンがWindowsに含まれるSegoe MDL2 Assetsフォントのグリフであるために機能します。

1. あなたはMicrosoft's Segoe MDL2 Assets Guide （共有アイコンのBluetoothアイコン用など。E702、E72D）から必要なシンボルのUnicodeポイントを検索します。
2. UnicodeMap〜 のようなものをスクリーン上に表示します。空白のように見えることを心配しないでください。 は、あなたのアプリで動作します。
3. 文字を以下のようにXAMLにコピーし、AppBarButtonのFontFamilyをSegoe MDL2 Assetsに設定します。

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

そして、これはあなたが買ってあげるものです。

私は何の問題もなく、ロシアと中国にローカライズのAppで、この技術を使用しています。