【C#】【XAML】定義したスタイルを反映しつつ一部のプロパティを呼び出し側から設定したい

Question

■やろうとしていること
オリジナルのボタンのデザインをリソースディクショナリに定義しようとしています。
そのボタンは四角い枠線があり、その中に画像ファイルとテキストを包含しています。
枠線の色とテキストを、MouseOverとクリック時に色を変えたいです。

現在作ったXAMLは以下です。sampleという名前でスタイルを定義し、ボタンに適用ています。

<Window x:Class="ResourceDic.MainWindow"
        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"
        xmlns:local="clr-namespace:ResourceDic"
        mc:Ignorable="d"
        Title="MainWindow" Height="450" Width="800">
    <Window.Resources>
        <Style TargetType="Button" x:Key="sample">
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="Button">
                        <Border Name="border" BorderThickness="4" BorderBrush="Green">
                            <StackPanel Orientation="Horizontal" Background="Transparent">
                                <Image Name="image" Source="Resources/aaa.png" />
                                <TextBlock Name="text" FontSize="72" VerticalAlignment="Center">あいうえお</TextBlock>
                            </StackPanel>
                        </Border>
                        <ControlTemplate.Triggers>
                            <Trigger Property="IsMouseOver" Value="true">
                                <Setter TargetName="border" Property="BorderBrush" Value="blue" />
                                <Setter TargetName="text" Property="Foreground" Value="blue" />
                            </Trigger>
                            <Trigger Property="IsPressed" Value="true">
                                <Setter TargetName="border" Property="BorderBrush" Value="red" />
                                <Setter TargetName="text" Property="Foreground" Value="red" />
                            </Trigger>
                        </ControlTemplate.Triggers>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
    </Window.Resources>
    
    <Grid>
        <Viewbox Height="100" Width="100" HorizontalAlignment="Center">
            <Button Style="{StaticResource sample}" />
        </Viewbox>
    </Grid>
    
</Window>

■困っていること
上記コードでは画像が「aaa.png」、テキストが「あいうえお」に固定になってしまいます。
リソースディクショナリの呼び出し側から、画像ファイルとテキストは指定できるようにしたいです。
どのようにすればできますでしょうか。

Answer 1

添付プロパティで実現できます。

XAML Tricks – C#じゃできなくてXAMLだからできる事

Comments

[galmacher]

ご回答ありがとうございます。
添付プロパティ、DockPanelやGridの配置場所ぐらいでしか使ったことありませんでしたが、これを機会にもう少し勉強してみます。

Answer 2

ここが参考になるのではないかと思います。

WPF で ボタン に 画像 を 使用する 方法

Comments

[galmacher]

ご回答ありがとうございます。
そちらのサイトを参考にして上記XAMLを書きましたが、画像ファイルとテキストの内容を呼び出し側で指定する方法が分からず質問させていただいた次第です。

[Zuishin]

<Button HorizontalAlignment="Center" VerticalAlignment="Center" Width="120" Height="40" Grid.Column="1">
<StackPanel Orientation="Horizontal" Margin="4,2">
<Image Source="{StaticResource ImageSource1}" VerticalAlignment="Center" />
<Label Content="ユーザー" VerticalAlignment="Center" Margin="10,0,0,0"/>
</StackPanel>
</Button>

[Zuishin]

このようにボタンの中に入れてください。

[Zuishin]

ボタンには画像とテキストを保持するプロパティがありませんから、それをどこかで保持しなければなりません。
データコンテクストに入れるのでは使い勝手が悪くなりますので、コンテンツに入れるのが最善ではないかと思います。

[Zuishin]

またボタンのコンテンツには複数のタグを入れられないので、スタックパネル等でまとめる必要があります。

[Zuishin]

スタックパネルを取り去りたいのであれば、ボタンを継承して画像とテキストを保持するプロパティを持つユーザーコントロールを作ればいいのではないでしょうか。

[galmacher]

ご回答ありがとうございました。
Style側をどうにかすることばかりに気を取られていましたが、ButtonにStackPanelを子、ImageとLabelを孫にすればよいのですね…。