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 the Image
.
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 the TextBlock
is centered and the Image
is centered and made smaller.
How do I re-write the Style
to correct the look of my buttons?
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.
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.
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>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With