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

快速构建后，您可以非常轻松地使用新的cotrol：

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