Tool bar 在以往的UI 開發上, 通常都是將表格功能放在一堆中方便使用. 在WPF 中, 繼續沿用此功能. 然而, 若要將其抽離作User Control, 則會真的變了一個button, 所以須要作若干手動修正.
Resource Dictionary style.xaml
<Style TargetType="fa:ImageAwesome" x:Key="ToolBarIcon"> <Setter Property="Width" Value="12" /> <Setter Property="Margin" Value="6" /> </Style>
因為Visual Studio 的XAML design 的root tag 預設只支援<Window>, <Page> 和<UserControl>, 故沒有用<Button> 作Root tag, 而為了令按鈕變得更似Toolbar Button, 故將其border 及background 都透明化.
ToolbarButton.xaml
<UserControl x:Class="Test.UserControls.ToolBarButton" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:local="clr-namespace:Test.UserControls" xmlns:fa="http://schemas.fontawesome.io/icons/" mc:Ignorable="d" d:DesignHeight="30" d:DesignWidth="70"> <UserControl.Resources> <ResourceDictionary> <ResourceDictionary.MergedDictionaries> <ResourceDictionary Source="../style.xaml" /> </ResourceDictionary.MergedDictionaries> </ResourceDictionary> </UserControl.Resources> <Button Command="{Binding Command, RelativeSource={RelativeSource Mode=FindAncestor, AncestorType=UserControl}, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}" Background="Transparent" BorderBrush="Transparent"> <StackPanel Orientation="Horizontal"> <fa:ImageAwesome Icon="{Binding Icon, RelativeSource={RelativeSource Mode=FindAncestor, AncestorType=UserControl}, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}" Style="{StaticResource ToolBarIcon}" /> <TextBlock Text="{Binding Text, RelativeSource={RelativeSource Mode=FindAncestor, AncestorType=UserControl}, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}" /> </StackPanel> </Button> </UserControl>
ToolbarButton.xaml.cs
using System.Windows; using System.Windows.Controls; using System.Windows.Input; namespace Test.UserControls { /// <summary> /// Interaction logic for ToolBarButton.xaml /// </summary> public partial class ToolBarButton : UserControl { public object Text { get { return GetValue(TextProperty) as object; } set { SetValue(TextProperty, value); } } public static readonly DependencyProperty TextProperty = DependencyProperty.Register("Text", typeof(object), typeof(ToolBarButton)); public object Icon { get { return GetValue(IconProperty) as object; } set { SetValue(IconProperty, value); } } public static readonly DependencyProperty IconProperty = DependencyProperty.Register("Icon", typeof(object), typeof(ToolBarButton)); public ICommand Command { get { return GetValue(CommandProperty) as ICommand; } set { SetValue(CommandProperty, value); } } public static readonly DependencyProperty CommandProperty = DependencyProperty.Register("Command", typeof(ICommand), typeof(ToolBarButton)); public ToolBarButton() { InitializeComponent(); } } }
叫用時與正常手法如下:
<ToolBarTray> <ToolBar> <Button> <StackPanel Orientation="Horizontal"> <fa:ImageAwesome Icon="FileOutline" Style="{StaticResource ToolBarIcon}" /> <TextBlock Text="Import" /> </StackPanel> </Button> <userControls:ToolBarButton Icon="FileOutline" Text="Import" /> </ToolBar> </ToolBarTray>
Leave a Reply