重新利用 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 并创建一个像这样的类：

[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);
    }
}

在您的 generic.xaml 中定义与此类似的控件（根据您的需要添加边距等）：

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

快速构建后，您可以以非常简单的方式使用您的新控件：

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