c# - 色でマークされた画像の上にテキストがある写真のようなボタンでスタイルを作成できますか?

Question

下の図に示すように、WPF で、テキスト、画像、および画像の上に (画像の上に) テキストがあり、カラー マークが付いたボタン スタイルを作成できるかどうか疑問に思っています。

今までこれしか持ってなかった

<Style TargetType="{x:Type Button}" x:Key="CatProBtn">
        <Setter Property="Background" Value="#373737" />
        <Setter Property="Foreground" Value="White" />
        <Setter Property="FontSize" Value="15" />
        <Setter Property="SnapsToDevicePixels" Value="True" />
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type Button}">
                    <Border CornerRadius="4" Background="{TemplateBinding Background}">
                        <Grid>
                            <!--<Path x:Name="PathIcon" Width="15" Height="25" Stretch="Fill" Fill="#4C87B3" HorizontalAlignment="Left" Margin="17,0,0,0" Data="F1 M 30.0833,22.1667L 50.6665,37.6043L 50.6665,38.7918L 30.0833,53.8333L 30.0833,22.1667 Z "/>-->
                            <ContentPresenter x:Name="MyContentPresenter" Content="{TemplateBinding Content}" 
                                              HorizontalAlignment="Right" VerticalAlignment="Center" 
                                              />
                        </Grid>
                    </Border>
                    <ControlTemplate.Triggers>
                        <EventTrigger RoutedEvent="PreviewMouseDown">
                            <SoundPlayerAction Source="C:\Users\shaban\Downloads\Cash_register_beep_sound_.wav" />
                        </EventTrigger>
                        <Trigger Property="Button.IsPressed" Value="True">
                            <Setter Property="BorderBrush" Value="Transparent" />
                        </Trigger>
                        <Trigger Property="IsMouseOver" Value="True">
                            <Setter Property="Background" Value="#E59400" />
                            <Setter Property="Foreground" Value="White" />
                            <!--<Setter TargetName="PathIcon" Property="Fill" Value="Black" />-->
                        </Trigger>
                        <Trigger Property="IsPressed" Value="True">
                            <Setter Property="Background" Value="OrangeRed" />
                            <Setter Property="Foreground" Value="White"/>
                        </Trigger>
                        <Trigger Property="IsEnabled" Value="False">

                            <Setter Property="Background" Value="White"/>
                            <Setter Property="BorderBrush" Value="Wheat"/>
                        </Trigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

....

     <Button 
        Style="{StaticResource CatProBtn}"
        Margin="1,1,0,3" 
            Name="Shaban"
            Height="Auto" 
            Width="Auto"
            Grid.Row="1" 
            Grid.Column="1"
            Click="Button_Click">
        <StackPanel VerticalAlignment="Bottom" HorizontalAlignment="Center">
            <TextBlock Text="Ispinde"></TextBlock>
            <Image Source="C:\Users\shaban\Pictures\Picture5.png" Stretch="Uniform"></Image>
            <TextBlock Text="Ispinde" HorizontalAlignment="Right"/>
        </StackPanel>
    </Button>

Answer 1

グリッドを使用して、コントロールを別のコントロールに重ねることができます。次のようになります。

<Button>
    <Grid>
        <StackPanel VerticalAlignment="Bottom" HorizontalAlignment="Center">
            <TextBlock Text="Ispinde"/>
            <Image Source="C:\Users\shaban\Pictures\Picture5.png"" Stretch="Uniform"/>
        </StackPanel>
        <Grid Width="100" Height="40" HorizontalAlignment="Right">
            <Grid Background="Red" Opacity="0.6"/>
            <TextBlock Foreground="White" Text="Overlay"/>
        </Grid>
    </Grid>
</Button>

Answer 2

ボタンのこのようなコードからインスピレーションを得て、値を変更して目的の結果を達成します。

グリッドを使用してコンテンツをレイアウトします。画像に価格を重ねます。

<Button MinHeight="50" HorizontalAlignment="Center">
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition/>
            <RowDefinition/>
            <RowDefinition/>
        </Grid.RowDefinitions>
        <TextBlock Grid.Row="0" Text="Title" TextAlignment="Center"/>
        <!-- This is where your image is in your code -->
        <TextBlock Grid.Row="1" Text="Your&#x0a;image&#x0a;here..." FontSize="14" Background="Gray" TextAlignment="Center"/>
        <TextBlock Grid.Row="2" Text="Description Description Description" TextAlignment="Center" TextWrapping="Wrap" FontSize="8" MaxWidth="100"/>

        <!-- Superimpose price on top of image with some opacity -->
        <TextBlock Grid.Row="1" Text="20,00 kr." Background="Yellow" Foreground="Red" HorizontalAlignment="Right" VerticalAlignment="Bottom" Margin="0,0,0,12" Opacity="0.6" FontSize="8"/>
    </Grid>
</Button>

結果