アイコンとテキスト付きのボタンを作る（C# WPF）

Image Buttonという単語でそこそこヒットします。
かなり多用するのでStyleを定義に留まらず、カスタムコントロールを作ってしまった方が良い気がします。

ということでカスタムコントロールを作成します。

Generic.xaml

<ResourceDictionary
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="clr-namespace:WpfApp3">


    <Style TargetType="{x:Type local:ImageButton}">
        <Setter Property="Height" Value="{Binding Path=Height, RelativeSource={RelativeSource TemplatedParent}}"/>
        <Setter Property="Width" Value="{Binding Path=Width, RelativeSource={RelativeSource TemplatedParent}}"/>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type local:ImageButton}">
                    <Border Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}">
                        <StackPanel Orientation="Horizontal">
                            <Image x:Name="_Image" HorizontalAlignment="Center" VerticalAlignment="Center" Width="{TemplateBinding Width}" Source="{Binding Path=Source, RelativeSource={RelativeSource TemplatedParent}}" Height="{TemplateBinding Height}"/>
                            <!--<ContentPresenter/>-->
                            <TextBlock Text="{TemplateBinding Content}"/>
                        </StackPanel>
                    </Border>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

</ResourceDictionary>

ContentPresenterを使うか、TextBlockを使うかは排他で制御してください。
個人的にはTextBlockで十分だと思います。

    public class ImageButton : Button
    {
        public static DependencyProperty SourceProperty =
            DependencyProperty.Register(
                "Source",
                typeof(Uri),
                typeof(ImageButton));

        static ImageButton()
        {
            DefaultStyleKeyProperty.OverrideMetadata(typeof(ImageButton), new FrameworkPropertyMetadata(typeof(ImageButton)));
        }
        public Uri Source
        {
            get { return (Uri)GetValue(SourceProperty); }
            set { SetValue(SourceProperty, value); }
        }
    }

コードはこんな感じ。TextBlockにはContentプロパティを渡しますが、画像にはUriを渡したいので、DependencyPropertyを追加しておきます。
これで下のような感じでカスタムコントロールとしてImageButtonが使えます。

xmlns:local="clr-namespace:WpfApp3"

<local:ImageButton Content="hoge" Source="C:/hoge.jpg" />

カスタムコントロールに関してはこちらも参考にしてください。

アイコンとテキスト付きのボタンを作る（C# WPF）

関連記事

コメント