CODEWITHSUNDEEP
wpfstyles
Oleg Sh
Oleg Sh

Reputation: 9013

WPF Button style with Image

I want to create a style for button with different images inside. I try to do following:

<Style TargetType="Button"
       x:Key="PaintButton">
  <Setter Property="Width"
          Value="40"></Setter>
  <Setter Property="Height"
          Value="40"></Setter>
  <Setter Property="Template">
    <Setter.Value>
      <ControlTemplate>
        <Grid>
          <Border CornerRadius="3"
                  BorderThickness="2"
                  BorderBrush="Green">
            <Image Source="{TemplateBinding Button.Content}" />
          </Border>
        </Grid>
      </ControlTemplate>
    </Setter.Value>
  </Setter>
</Style>

and try to use:

<Button Content="images/pen.png"
        HorizontalAlignment="Left"
        Style="{DynamicResource PaintButton}" />

but images is not shown. Why and how to do it correctly?

Upvotes: 0

Views: 24093

Answers (2)

Ali Alkhumairi
Ali Alkhumairi

Reputation: 37

Please try this

<Style TargetType="Button">
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type Button}">
                    <StackPanel Orientation="Horizontal">
                        <Grid Height="30" Width="30" Background="{TemplateBinding Background}"/>
                        <TextBlock Text="{TemplateBinding Content}"  TextAlignment="Center" VerticalAlignment="Center"/>
                    </StackPanel>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
        <Style.Triggers>
            <Trigger Property="IsMouseOver" Value="True">
                <Setter Property="Cursor" Value="Hand"/>
            </Trigger>
        </Style.Triggers>
    </Style>

<Button Name="btnPrintCard" Margin="2" Content="Print Card">
                <Button.Background>
                    <ImageBrush ImageSource="images/ic_print_black_48dp.png"/>
                </Button.Background>
            </Button>

Upvotes: 2

morincer
morincer

Reputation: 954

The "Image" is not a correct source for another Image. Either use BitmapImage as Button's contents or use ContentPresenter in the template.

Option 1.

    <Button Style="{StaticResource PaintButton}">
        <BitmapImage UriSource="Back_Forward.png"/>
    </Button>

Option 2.

<Setter Property="Template">
  <Setter.Value>
    <ControlTemplate>
      <Grid>
        <Border CornerRadius="3"
                BorderThickness="2"
                BorderBrush="Green">
          <ContentPresenter Content="{TemplateBinding Button.Content}" />
        </Border>
      </Grid>
    </ControlTemplate>
  </Setter.Value>
</Setter>

Upvotes: 5

Related Questions