c# - 使用两个图像创建按钮样式

Question

我想创建一个包含 2 个图像和一个文本 block 的按钮。我制作了一种样式，我绑定(bind)了图像和文本 block 的值，但只有文本 block 有效。图像不出现。

我的代码:

<Style x:Key="ButtonStyle1" TargetType="{x:Type Button}">

        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type Button}">
                    <Grid Margin="-0.817,13,142.078,0" RenderTransformOrigin="0.5,0.5" Height="58" VerticalAlignment="Top">
                        <Grid.RenderTransform>
                            <TransformGroup>
                                <ScaleTransform/>
                                <SkewTransform AngleX="0.909"/>
                                <RotateTransform/>
                                <TranslateTransform X="1.484"/>
                            </TransformGroup>
                        </Grid.RenderTransform>
                        <Rectangle Stroke="Gainsboro" >
                            <Rectangle.Fill>
                                <LinearGradientBrush EndPoint="0.5,1" MappingMode="RelativeToBoundingBox" StartPoint="0.5,0">
                                    <LinearGradientBrush.RelativeTransform>
                                        <TransformGroup>
                                            <ScaleTransform CenterY="0.5" CenterX="0.5"/>
                                            <SkewTransform CenterY="0.5" CenterX="0.5"/>
                                            <RotateTransform Angle="90" CenterY="0.5" CenterX="0.5"/>
                                            <TranslateTransform/>
                                        </TransformGroup>
                                    </LinearGradientBrush.RelativeTransform>
                                    <GradientStop Color="#FFEFE9E9"/>
                                    <GradientStop Color="White" Offset="1"/>
                                    <GradientStop Color="White" Offset="0.9"/>
                                </LinearGradientBrush>
                            </Rectangle.Fill>
                        </Rectangle>
<!--the line below is not correct, I guess-->
                        <Image Height="Auto" Margin="0,18.333,19.465,17.167" Source="{TemplateBinding Background}" Stretch="Fill" VerticalAlignment="Stretch" HorizontalAlignment="Right" Width="23.841" RenderTransformOrigin="0.669,0.659" >
                            <Image.RenderTransform>
                                <TransformGroup>
                                    <ScaleTransform ScaleY="-1"/>
                                    <SkewTransform/>
                                    <RotateTransform/>
                                    <TranslateTransform Y="-7.155"/>
                                </TransformGroup>
                            </Image.RenderTransform>
                        </Image>
                        <Image HorizontalAlignment="Right" Height="55" Margin="0,0,60.254,1" Source="/Images/Untitled-6.png" Stretch="Fill" VerticalAlignment="Stretch" Width="3.497"/>
                        <Image HorizontalAlignment="Right" Margin="0,14,87.232,14" Source="/Images/Untitled-4.png" Stretch="Fill" Width="28.603"/>
                        <TextBlock Text="{TemplateBinding Content}" Margin="8,14,131.623,14" TextAlignment="Center" FontFamily="Open Sans" FontSize="22"/>
                    </Grid>
                    <ControlTemplate.Triggers>
                        <Trigger Property="IsFocused" Value="True"/>
                        <Trigger Property="IsDefaulted" Value="True"/>
                        <Trigger Property="IsMouseOver" Value="True"/>
                        <Trigger Property="IsPressed" Value="True"/>
                        <Trigger Property="IsEnabled" Value="False"/>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

在我的 XAML 用户控件中:

 <Button Name="bbb" Style="{StaticResource ButtonStyle1}" Content="Sterge"  >
        <Button.Background>
            <ImageBrush ImageSource="/Images/Untitled-5.png"/>
        </Button.Background>

    </Button>

Answer 1

您正在尝试将 Image.Source 设置为模板父级(类型为 Brush)的 Background 属性，所以那是行不通的。通常，您可以按以下格式将文本输入到 Image.Source 属性中:

<Image Source="/ApplicationName;component/Images/ImageName.png" />

为了从 ControlTemplate 外部输入 Image.Source，您可能需要扩展 Button 控制并向其添加 ImageSource DependencyProperty。