Styling a WPF Button with Image+Text
Solution 1
The solution to your problem may be to move your Image and TextBlock styles to the ControlTemplate's Resource section. I'm not sure why, but I believe the styles aren't in scope if they are part of the content presenter's resources.
Solution 2
Try something like this:
The Button
:
<Button Style="{StaticResource BigButton}" Content="save">
<Button.Tag>
<ImageSource>../GreenLamp.png</ImageSource>
</Button.Tag>
</Button>
The Style
:
<Style TargetType="Button" x:Key="BigButton">
<Setter Property="Cursor" Value="Hand" />
<Setter Property="Height" Value="80" />
<Setter Property="Width" Value="80" />
<Setter Property="Foreground" Value="White" />
<Setter Property="FontWeight" Value="Bold" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Button">
<Border x:Name="border"
CornerRadius="5"
Background="#FF415360">
<StackPanel>
<Image Source="{TemplateBinding Tag}"
VerticalAlignment="Top"
HorizontalAlignment="Center"
Height="50"
Margin="5" />
<ContentPresenter x:Name="ButtonContentPresenter"
VerticalAlignment="Center"
HorizontalAlignment="Center">
</ContentPresenter>
</StackPanel>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
You might have to change the Height
/Margin
for the Image
in the Style
to fit your needs.
Solution 3
I think, it will work if you set Button's ContentTemplate instead of Content.
<Button Style="{StaticResource BigButton}">
<Button.ContentTemplate>
<DataTemplate>
<StackPanel>
<Image Source="Resources/icon_cancel.png" />
<TextBlock>save</TextBlock>
</StackPanel>
</DataTemplate>
</Button.ContentTemplate>
</Button>
mbaytas
Updated on July 31, 2022Comments
-
mbaytas almost 2 years
In my C#/WPF/.NET 4.5 application I have buttons with images that I implemented in the following fashion:
<Button Style="{StaticResource BigButton}"> <StackPanel> <Image Source="Images/Buttons/bt_big_save.png" /> <TextBlock>save</TextBlock> </StackPanel> </Button>
I have a resource dictionary UIStyles.xaml in which I declare the following:
<Style TargetType="Button" x:Key="BigButton"> <Setter Property="Cursor" Value="Hand" /> <Setter Property="Height" Value="80" /> <Setter Property="Width" Value="80" /> <Setter Property="Foreground" Value="White" /> <Setter Property="FontWeight" Value="Bold" /> <Setter Property="Template"> <Setter.Value> <ControlTemplate TargetType="Button"> <Border x:Name="border" CornerRadius="5" Background="#FF415360"> <ContentPresenter x:Name="ButtonContentPresenter" VerticalAlignment="Center" HorizontalAlignment="Center"> <ContentPresenter.Resources> <Style TargetType="TextBlock"> <Setter Property="TextAlignment" Value="Center" /> </Style> <Style TargetType="Image"> <Setter Property="Width" Value="10" /> <Setter Property="Margin" Value="10" /> </Style> </ContentPresenter.Resources> </ContentPresenter> </Border> </ControlTemplate> </Setter.Value> </Setter> </Style>
The cursor, height, border etc. properties work fine, but I can't style the
TextBlock
and theImage
.Specifically, what needs to look like this:
Ends up looking like this (disregarding the color difference):
I've seen similar questions asked before but the solutions used different approaches (I don't want to create a custom User Control, all of my needs except this one are covered in the present code and re-writing will be a nuisance). I merely need to fix my
Style
so that theTextBlock
is centered and theImage
is centered and made smaller.How do I re-write the
Style
to correct the look of my buttons? -
mbaytas about 11 yearsUnfortunately, it does not.
-
Rachel about 11 yearsThis is correct, the styles in the
<ContentPresenter.Resources>
are not getting applied. Moving them to<ControlTemplate.Resources>
makes the UI look as expected.