Question

我想创建一个包含2个图像和一个文本块的按钮。我已经创建了一种样式，我将图像和文本块的值绑定在一起，但只是文本块可以工作。图像不会出现。

我的代码：

<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 UserControl中：

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

    </Button>

Answer 1

您正尝试将Image.Source设置为模板父级的Background属性（类型为Brush），因此无效。通常，您可以使用以下格式在Image.Source属性中输入文本：

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

要从Image.Source外部输入ControlTemplate，可能需要扩展Button控件并添加ImageSource DependencyProperty它

用两个图像创建按钮样式

1 个答案: