2016-07-09 11 views
0

コマンドバーのSecondaryCommandsにアイコンを追加する方法:アイコン 私はこのようになりますのCommandBar構築しようとしています

を持ってSecondaryCommandsと

理想のコマンドバーをしかし、私はへの道を見つけることができませんIconOverflowPresenterの既定のスタイルを編集して、アイコンが左側に、テキストラベルが右側にあるMail Windows 10ユニバーサルアプリケーションに表示されるように、SecondaryCommandsを表示します。

CommandOverflowPresenterには、コントロールテンプレートを構築してコンテンツ要素をAppBarButtonのIconプロパティとLabelプロパティにバインドするためのContentプロパティはありません。

このarticleが見つかりましたが、AppBarButtonのスタイルは表示されません。

スタックオーバーフローに関するもう1つの質問がありました。結論として、カスタムCommandOverflowPresenterスタイルを作成することです。あなたはどうやってそれをしますか?

デフォルトCommandOverflowPresenterスタイル:

<!-- Default style for Windows.UI.Xaml.Controls.CommandBarOverflowPresenter --> 
<Style TargetType="CommandBarOverflowPresenter"> 
    <Setter Property="Background" Value="{ThemeResource SystemControlBackgroundChromeMediumLowBrush}" /> 
    <Setter Property="BorderBrush" Value="{ThemeResource SystemControlForegroundChromeHighBrush}" /> 
    <Setter Property="MaxWidth" Value="{ThemeResource CommandBarOverflowMaxWidth}"/> 
    <Setter Property="ScrollViewer.HorizontalScrollMode" Value="Disabled" /> 
    <Setter Property="ScrollViewer.HorizontalScrollBarVisibility" Value="Disabled" /> 
    <Setter Property="ScrollViewer.VerticalScrollMode" Value="Auto" /> 
    <Setter Property="ScrollViewer.VerticalScrollBarVisibility" Value="Auto" /> 
    <Setter Property="ScrollViewer.ZoomMode" Value="Disabled" /> 
    <Setter Property="Template"> 
     <Setter.Value> 
      <ControlTemplate TargetType="CommandBarOverflowPresenter"> 
       <Grid x:Name="LayoutRoot" Background="{TemplateBinding Background}" Padding="{TemplateBinding Padding}" 
         BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="1,1,1,1" > 
        <VisualStateManager.VisualStateGroups> 
         <VisualStateGroup x:Name="DisplayModeStates"> 
          <VisualState x:Name="DisplayModeDefault" /> 
          <VisualState x:Name="FullWidthOpenDown" > 
           <VisualState.Setters> 
            <Setter Target="LayoutRoot.BorderThickness" Value="0,0,0,1" /> 
           </VisualState.Setters> 
          </VisualState> 
          <VisualState x:Name="FullWidthOpenUp" > 
           <VisualState.Setters> 
            <Setter Target="LayoutRoot.BorderThickness" Value="0,1,0,0" /> 
           </VisualState.Setters> 
          </VisualState> 
         </VisualStateGroup> 
        </VisualStateManager.VisualStateGroups> 
        <ScrollViewer 
         HorizontalScrollMode="{TemplateBinding ScrollViewer.HorizontalScrollMode}" 
         HorizontalScrollBarVisibility="{TemplateBinding ScrollViewer.HorizontalScrollBarVisibility}" 
         VerticalScrollMode="{TemplateBinding ScrollViewer.VerticalScrollMode}" 
         VerticalScrollBarVisibility="{TemplateBinding ScrollViewer.VerticalScrollBarVisibility}" 
         ZoomMode="{TemplateBinding ScrollViewer.ZoomMode}" 
         AutomationProperties.AccessibilityView="Raw"> 
         <ItemsPresenter x:Name="ItemsPresenter" Margin="0,7,0,7"/> 
        </ScrollViewer> 
       </Grid> 
      </ControlTemplate> 
     </Setter.Value> 
    </Setter> 
</Style> 

これは私が試したものです。

CommandOverflowPresenterはItemsControlであり、ItemTemplateのSetterをCommandOverflowPresenterスタイルで追加し、Contentテンプレートを既定のスタイルにしました。

実行時には、セカンダリコマンドはデフォルトのスタイルに従って表示され、テキストラベルのみが表示されますが、アイコンは表示されません。

おそらく、バインディングはItemTemplateのDataTemplateで正しく設定されていませんか?

<CommandBar.CommandBarOverflowPresenterStyle> 
    <Style TargetType="CommandBarOverflowPresenter"> 
     <Setter Property="Template"> 
      <Setter.Value> 
       <ControlTemplate TargetType="CommandBarOverflowPresenter"> 
        <Grid x:Name="LayoutRoot" Background="{TemplateBinding Background}" Padding="{TemplateBinding Padding}" 
          BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="1,1,1,1" > 

         <!--<Grid.Resources> 
          <DataTemplate x:Key="SecondaryMenu"> 
           <StackPanel Orientation="Horizontal"> 
            <SymbolIcon Symbol="{TemplateBinding AppBarButton.Icon}"/> 
            <TextBlock Text="{TemplateBinding AppBarButton.Label}" /> 
           </StackPanel> 
          </DataTemplate> 
         </Grid.Resources>--> 

         <VisualStateManager.VisualStateGroups> 
          <VisualStateGroup x:Name="DisplayModeStates"> 
           <VisualState x:Name="DisplayModeDefault" /> 
           <VisualState x:Name="FullWidthOpenDown" > 
            <VisualState.Setters> 
             <Setter Target="LayoutRoot.BorderThickness" Value="0,0,0,1" /> 
            </VisualState.Setters> 
           </VisualState> 
           <VisualState x:Name="FullWidthOpenUp" > 
            <VisualState.Setters> 
             <Setter Target="LayoutRoot.BorderThickness" Value="0,1,0,0" /> 
            </VisualState.Setters> 
           </VisualState> 
          </VisualStateGroup> 
         </VisualStateManager.VisualStateGroups> 

         <ScrollViewer 
          HorizontalScrollMode="{TemplateBinding ScrollViewer.HorizontalScrollMode}" 
          HorizontalScrollBarVisibility="{TemplateBinding ScrollViewer.HorizontalScrollBarVisibility}" 
          VerticalScrollMode="{TemplateBinding ScrollViewer.VerticalScrollMode}" 
          VerticalScrollBarVisibility="{TemplateBinding ScrollViewer.VerticalScrollBarVisibility}" 
          ZoomMode="{TemplateBinding ScrollViewer.ZoomMode}" 
          AutomationProperties.AccessibilityView="Raw"> 
          <ItemsPresenter x:Name="ItemsPresenter" Margin="0,7,0,7"> 
          </ItemsPresenter> 
         </ScrollViewer> 
        </Grid> 
       </ControlTemplate> 
      </Setter.Value> 
     </Setter> 

     <Setter Property="ItemTemplate"> 
      <Setter.Value> 
       <DataTemplate x:DataType="AppBarButton"> 
        <StackPanel Orientation="Horizontal"> 
         <SymbolIcon Symbol="{Binding Icon}" /> 
         <TextBlock Text="{Binding Label}" /> 
        </StackPanel> 
       </DataTemplate> 
      </Setter.Value> 
     </Setter> 
    </Style> 
</CommandBar.CommandBarOverflowPresenterStyle> 

私もSymbolIconとのTextBlockでAppBarButtonタグ内のStackPanelを追加しようとしましたが、それはどちらか動作しませんでした。

答えて

0

これを実現するために、デフォルトのスタイルとテンプレートAppBarButtonを編集できます。そして、私はカスタムCommandOverflowPresenterスタイルを構築する必要はないと思う。

マイクロソフトでは、デフォルトテンプレートとしてXAMLコードを提供しています。AppBarButton styles and templatesにあります。このスタイルをPage.Resourcesにコピーし、このスタイルにx:Key="MyAppBarButtonStyle"のようなキーを付けることができます。

デフォルトでは、アイコンとテキストは、「ContentRoot」StackPanelに垂直に配置されています。私たちはそれを水平にするように次のように変更することができます。

この後、我々はあなたがアイコンは、二次メニューに表示できることを確認するために言及した記事のような「オーバーフロー」VisualStateを変更する必要があります。これら以外にも

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

、我々はまた、StackPanelCommandOverflowPresenterの全幅を取ることができるように、次のようなAppBarButtonHorizontalAlignmentWidthプロパティを変更する必要があるかもしれません。

<Setter Property="HorizontalAlignment" Value="Stretch" /> 
<Setter Property="Width" Value="Auto" /> 

最後に、このスタイルはSecondaryCommandsで使用できます。

<CommandBar.SecondaryCommands> 
    <AppBarButton Style="{StaticResource MyAppBarButtonStyle}" 
        Click="AppBarButton_Click" 
        Icon="Like" 
        Label="Like" /> 
    <AppBarButton Style="{StaticResource MyAppBarButtonStyle}" 
        Click="AppBarButton_Click" 
        Icon="Dislike" 
        Label="Dislike" /> 
</CommandBar.SecondaryCommands> 

完全なスタイルが好きかもしれません:

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

    <Setter Property="Template"> 
     <Setter.Value> 
      <ControlTemplate TargetType="AppBarButton"> 
       <Grid x:Name="Root" 
         MinWidth="{TemplateBinding MinWidth}" 
         MaxWidth="{TemplateBinding MaxWidth}" 
         Background="{TemplateBinding Background}"> 
        <VisualStateManager.VisualStateGroups> 
         <VisualStateGroup x:Name="ApplicationViewStates"> 
          <VisualState x:Name="FullSize" /> 
          <VisualState x:Name="Compact"> 
           <Storyboard> 
            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="TextLabel" Storyboard.TargetProperty="Visibility"> 
             <DiscreteObjectKeyFrame KeyTime="0" Value="Collapsed" /> 
            </ObjectAnimationUsingKeyFrames> 
           </Storyboard> 
          </VisualState> 
          <VisualState x:Name="Overflow"> 
           <Storyboard> 
            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentRoot" Storyboard.TargetProperty="Visibility"> 
             <DiscreteObjectKeyFrame KeyTime="0" Value="Visible" /> 
            </ObjectAnimationUsingKeyFrames> 
            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="OverflowTextLabel" Storyboard.TargetProperty="Visibility"> 
             <DiscreteObjectKeyFrame KeyTime="0" Value="Collapsed" /> 
            </ObjectAnimationUsingKeyFrames> 
           </Storyboard> 
          </VisualState> 
          <VisualState x:Name="OverflowWithToggleButtons"> 
           <Storyboard> 
            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentRoot" Storyboard.TargetProperty="Visibility"> 
             <DiscreteObjectKeyFrame KeyTime="0" Value="Collapsed" /> 
            </ObjectAnimationUsingKeyFrames> 
            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="OverflowTextLabel" Storyboard.TargetProperty="Visibility"> 
             <DiscreteObjectKeyFrame KeyTime="0" Value="Visible" /> 
            </ObjectAnimationUsingKeyFrames> 
            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="OverflowTextLabel" Storyboard.TargetProperty="Margin"> 
             <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.TargetName="Root" Storyboard.TargetProperty="Background"> 
             <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlHighlightListLowBrush}" /> 
            </ObjectAnimationUsingKeyFrames> 
            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="Content" Storyboard.TargetProperty="Foreground"> 
             <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlHighlightAltBaseHighBrush}" /> 
            </ObjectAnimationUsingKeyFrames> 
            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="TextLabel" Storyboard.TargetProperty="Foreground"> 
             <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlHighlightAltBaseHighBrush}" /> 
            </ObjectAnimationUsingKeyFrames> 
            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="OverflowTextLabel" Storyboard.TargetProperty="Foreground"> 
             <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlHighlightAltBaseHighBrush}" /> 
            </ObjectAnimationUsingKeyFrames> 
            <PointerUpThemeAnimation Storyboard.TargetName="OverflowTextLabel" /> 
           </Storyboard> 
          </VisualState> 
          <VisualState x:Name="Pressed"> 
           <Storyboard> 
            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="Root" Storyboard.TargetProperty="Background"> 
             <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlHighlightListMediumBrush}" /> 
            </ObjectAnimationUsingKeyFrames> 
            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="Content" Storyboard.TargetProperty="Foreground"> 
             <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlHighlightAltBaseHighBrush}" /> 
            </ObjectAnimationUsingKeyFrames> 
            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="TextLabel" Storyboard.TargetProperty="Foreground"> 
             <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlHighlightAltBaseHighBrush}" /> 
            </ObjectAnimationUsingKeyFrames> 
            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="OverflowTextLabel" Storyboard.TargetProperty="Foreground"> 
             <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlHighlightAltBaseHighBrush}" /> 
            </ObjectAnimationUsingKeyFrames> 
            <PointerDownThemeAnimation Storyboard.TargetName="OverflowTextLabel" /> 
           </Storyboard> 
          </VisualState> 
          <VisualState x:Name="Disabled"> 
           <Storyboard> 
            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="Content" Storyboard.TargetProperty="Foreground"> 
             <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlDisabledBaseMediumLowBrush}" /> 
            </ObjectAnimationUsingKeyFrames> 
            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="TextLabel" Storyboard.TargetProperty="Foreground"> 
             <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlDisabledBaseMediumLowBrush}" /> 
            </ObjectAnimationUsingKeyFrames> 
            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="OverflowTextLabel" Storyboard.TargetProperty="Foreground"> 
             <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}" Orientation="Horizontal"> 
         <ContentPresenter x:Name="Content" 
              Margin="12,0,0,0" 
              HorizontalAlignment="Stretch" 
              VerticalAlignment="Center" 
              AutomationProperties.AccessibilityView="Raw" 
              Content="{TemplateBinding Icon}" 
              Foreground="{TemplateBinding Foreground}" /> 
         <TextBlock x:Name="TextLabel" 
            Margin="12,0,12,0" 
            VerticalAlignment="Center" 
            FontFamily="{TemplateBinding FontFamily}" 
            FontSize="15" 
            Foreground="{TemplateBinding Foreground}" 
            Text="{TemplateBinding Label}" 
            TextAlignment="Center" 
            TextWrapping="Wrap" /> 
        </StackPanel> 

        <TextBlock x:Name="OverflowTextLabel" 
           Margin="12,0,12,0" 
           HorizontalAlignment="Stretch" 
           VerticalAlignment="Center" 
           FontFamily="{TemplateBinding FontFamily}" 
           FontSize="15" 
           Foreground="{TemplateBinding Foreground}" 
           Padding="0,5,0,7" 
           Text="{TemplateBinding Label}" 
           TextAlignment="Left" 
           TextTrimming="Clip" 
           TextWrapping="NoWrap" 
           Visibility="Collapsed" /> 
       </Grid> 
      </ControlTemplate> 
     </Setter.Value> 
    </Setter> 
</Style> 
+0

アメージングを!できます。ありがとうございます! –

関連する問題