重新利用 CommandBar UWP
Reutilize CommandBar UWP
我在多个页面中使用了 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 --
看起来好多了,但不幸的是我仍然遇到一些问题。
- 我添加的新按钮与
more
按钮不对齐(甚至设置属性)
- 新按钮始终显示其标签。
More
按钮在前后导航时隐藏自己。
- 看起来我的
Custom Bar
继承了之前导航栏的一些属性
您可以创建一个新的 TemplatedControl 并创建一个像这样的 class:
[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>
我在多个页面中使用了 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 --
- 我添加的新按钮与
more
按钮不对齐(甚至设置属性) - 新按钮始终显示其标签。
More
按钮在前后导航时隐藏自己。- 看起来我的
Custom Bar
继承了之前导航栏的一些属性
您可以创建一个新的 TemplatedControl 并创建一个像这样的 class:
[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>