c# - 你可以用按钮制作一个样式，就像图片中的按钮一样，在图像上标有颜色的文本？

Question

我想知道它是否可以在 WPF 中制作一个 Button 样式，其中您有一个文本、一个图像和图像上的文本（在图像上），并带有如下图所示的颜色标记？

直到现在我才得到这个

<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 中的此类代码中获得灵感，并修改这些值以实现您想要的结果。

使用网格来布局您的内容。将价格叠加在图像上。

<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>

结果

Answer 2

您可以使用网格将一个控件覆盖在另一个控件上。它会是这样的：

<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>