重复利用CommandBar UWP

Question

我在几个页面中使用CommandBar。 我注意到，我重复自己在这部分代码：

<CommandBar x:Name="MyCommandBar"> 
    <CommandBar.Content> 
     <TextBlock Text="{Binding MyTitle}"/> 
    </CommandBar.Content> 
</CommandBar> 

我试图创建这样一个自定义的控制，只是添加新buttons根据页面：

<UserControl 
    x:Class="TutorialManager.UWP.Views.Controls.MainCommandBarControl" 
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
    mc:Ignorable="d" 
    d:DesignHeight="300" 
    d:DesignWidth="400"> 


    <CommandBar > 
     <CommandBar.Content> 
      <TextBlock Text="{Binding MyTitle}"/> 
     </CommandBar.Content> 
    </CommandBar> 
</UserControl> 

问题是，当我在这个自定义控件中添加新按钮时，它会重叠第一个按钮。

有一些解决方案呢？

- 编辑1 -
首先解决方案看起来不错，但是当我添加一个按钮，它进入底部：

<controls:CustomCommandBarControl Title="{Binding TituloPagina}" Foreground="WhiteSmoke"> 

    <AppBarButton Icon="Accept" Label="Save" Foreground="White" /> 

</controls:CustomCommandBarControl> 

- 编辑2 -
看起来更好，但不幸的是我仍然有一些问题。

1. 我加不对齐more按钮（甚至设置属性）新的按钮
2. 新的按钮始终显示其标签。
3. More按钮在前后导航时隐藏自身。
4. 看起来像我的Custom Bar继承先前已导航栏

Answer 1

一些属性你可以创建一个新的TemplatedControl，创建这样一个类：在你的generic.xaml

[ContentProperty(Name = "Content")] 
public sealed class CustomUserControl : Control 
{ 
    public string Title 
    { 
     get { return (string)GetValue(TitleProperty); } 
     set { SetValue(TitleProperty, value); } 
    } 

    public static readonly DependencyProperty TitleProperty = 
     DependencyProperty.Register(nameof(Title), typeof(string), typeof(CustomUserControl), new PropertyMetadata(string.Empty)); 


    public ObservableCollection<UIElement> Content 
    { 
     get { return (ObservableCollection<UIElement>)GetValue(ContentProperty); } 
     set { SetValue(ContentProperty, value); } 
    } 

    public static readonly DependencyProperty ContentProperty = 
     DependencyProperty.Register(nameof(Content), typeof(ObservableCollection<UIElement>), typeof(CustomUserControl), new PropertyMetadata(null)); 

    public CustomUserControl() 
    { 
     Content=new ObservableCollection<UIElement>(); 
     this.DefaultStyleKey = typeof(CustomUserControl); 
    } 
} 

你比定义控制类似于此（根据您的需要neet添加边距等）：

<Style TargetType="local:CustomUserControl" > 
    <Setter Property="Template"> 
     <Setter.Value> 
      <ControlTemplate TargetType="local:CustomUserControl"> 
       <CommandBar VerticalAlignment="Bottom" > 
        <CommandBar.Content> 
         <StackPanel Orientation="Horizontal" 
            Margin="4,6,4,4"> 
          <TextBlock Text="{TemplateBinding Title}" 
             HorizontalAlignment="Center" 
             VerticalAlignment="Top" 
             Margin="4,12,0,0" /> 
          <ItemsControl ItemsSource="{TemplateBinding Content}"> 
           <ItemsControl.ItemsPanel> 
            <ItemsPanelTemplate> 
             <StackPanel Orientation="Horizontal"/> 
            </ItemsPanelTemplate> 
           </ItemsControl.ItemsPanel> 
          </ItemsControl> 
         </StackPanel> 
        </CommandBar.Content> 
       </CommandBar> 
      </ControlTemplate> 
     </Setter.Value> 
    </Setter> 
</Style> 

快速构建后可以使用新的cotrol在一个非常简单的方法：

<yourNamespace:CustomUserControl Title="{Binding MyTitle}"> 
    <Button Content="Command1"/> 
    <Button Content="Command2" /> 
</yourNamespace:CustomUserControl>