WPF(XAML)で画像のボタンを実装したい

Question

このようなボタンをXAMLで実装したいのですが、全く見当もつきません。
指定したキーワードによって青色の部分の色を変更したいです。
どうやれば実装できるでしょうか。
また、スタイルのみの指定で行けますかね？

Answer 1

こんな感じに作る。配置するボタンの数が少ないならコピペで、大量なら、DataTempleteにしてリソースに入れて使う。

  <Button Width="150">
     <Grid>
        <Grid.ColumnDefinitions>
          <ColumnDefinition Width="20"></ColumnDefinition>
          <ColumnDefinition Width="auto"></ColumnDefinition>
        </Grid.ColumnDefinitions>
        <Border Margin="2" Background="AliceBlue" Grid.Column="0"></Border>
        <TextBlock Text="ぼたん" Grid.Column="1"></TextBlock>
       </Grid>
   </Button>

Answer 2

Style で使えるようにしてみました。
青色の部分の色は Background プロパティで変更できます。

<Window x:Class="WpfApplication1.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow" Height="350" Width="525">
    <Window.Resources>
        <Style x:Key="buttonStyle" TargetType="{x:Type Button}">
            <Setter Property="Padding" Value="2,2,6,2" />
            <Setter Property="Background" Value="SkyBlue" />
            <Setter Property="BorderBrush" Value="Lime" />
            <Setter Property="BorderThickness" Value="2" />
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type Button}">
                        <Border x:Name="border"
                                BorderBrush="{TemplateBinding BorderBrush}"
                                BorderThickness="{TemplateBinding BorderThickness}"
                                Background="Transparent"
                                Padding="{TemplateBinding Padding}">
                            <DockPanel>
                                <Rectangle DockPanel.Dock="Left" Fill="{TemplateBinding Background}" Width="6" Margin="6,2" />
                                <ContentPresenter />
                            </DockPanel>
                        </Border>
                        <ControlTemplate.Triggers>
                            <Trigger Property="IsMouseOver" Value="True">
                                <Setter TargetName="border" Property="Background" Value="Lime" />
                            </Trigger>
                            <Trigger Property="IsPressed" Value="True">
                                <Setter TargetName="border" Property="Background" Value="Green" />
                            </Trigger>
                            <Trigger Property="IsEnabled" Value="False">
                                <Setter Property="Background" Value="LightGray" />
                                <Setter Property="Foreground" Value="LightGray" />
                                <Setter Property="BorderBrush" Value="LightGray" />
                            </Trigger>
                        </ControlTemplate.Triggers>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
    </Window.Resources>

    <StackPanel VerticalAlignment="Center">
        <Button Style="{StaticResource buttonStyle}" Content="Click me." HorizontalAlignment="Center" Margin="20" />
        <Button Style="{StaticResource buttonStyle}" Content="Click me." HorizontalAlignment="Center" Background="Red" Margin="20" />
        <Button Style="{StaticResource buttonStyle}" Content="Click me." HorizontalAlignment="Center" IsEnabled="False" />
    </StackPanel>
</Window>

Answer 3

Buttonの中にGridか何かおいて、
その中にRectangleとLabel(かなにかテキスト書けるもの)おいて
Rectangleの色を適当にバインドか何かで変えられるようにしてスタイル整えればできそうです。