[WPF] 自建Toolbar Icon

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>