создать стиль кнопки с двумя изображениями

Я хочу создать кнопку, содержащую 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>

источник

2013-10-24 Viva

Вы пытаетесь установить Image.Source к Background свойства шаблона родителя (который имеет тип Brush) , так что это не сработает. Как правило, вы можете ввести текст в Image.Source собственности в этом формате:

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

Для того, чтобы войти в Image.Source снаружи ControlTemplate, вы может необходимость расширить контроль Button и добавить ImageSource DependencyProperty к нему.

источник

2013-10-24 12:43:36 Sheridan

Спасибо! У меня 3 изображения в стиле кнопок. Но я хочу, чтобы только одно изображение всегда могло изменить его из кода xaml, когда я создаю еще одну кнопку. – Viva

Как я уже сказал, для этого вам нужно расширить элемент управления Button и добавить к нему свойство ImageSource DependencyProperty. – Sheridan

Спасибо! Я новичок в wpf, поэтому способ, которым мне удалось это сделать, совсем не приятно. Я надел еще один прямоугольник на моей кнопке, и я установил для него фон. – Viva

создать стиль кнопки с двумя изображениями

ответ

Смежные вопросы