用兩個圖像創建按鈕樣式

我想創建一個包含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用戶控件：

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

    </Button>

來源

2013-10-24 Viva

你試圖設置Image.Source到模板父（這是Brush類型）的Background財產，所以這是行不通的。通常情況下，你可以在這個格式文本輸入到Image.Source屬性：

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

爲了從外面ControlTemplate進入Image.Source，你可以需要延長Button控制並添加ImageSource DependencyProperty它。

來源

2013-10-24 12:43:36 Sheridan

謝謝！我的按鈕樣式有3張圖片。但是，當我創建另一個按鈕時，我只需要一張圖像即可從xaml代碼中進行更改。 – Viva

正如我所說，要做到這一點，你需要擴展'Button'控件並添加一個'ImageSource DependencyProperty'。 – Sheridan

謝謝！我是wpf的初學者，所以我設法做到這一點並不好。我在我的按鈕上放了另一個矩形，並將背景設置爲它。 – Viva

用兩個圖像創建按鈕樣式

回答

相關問題