重複利用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>