I would like to create a button template in order to display an image and a label in the button. I thiking about use an horizontal stackpanel on the button.
I don't succeed to display the label.
Here is my template :
<ControlTemplate TargetType="{x:Type Button}" x:Key="BoutonImageEtTexte">
<Button Grid.Column="2" BorderBrush="Transparent" HorizontalContentAlignment="Center" VerticalContentAlignment="Center" HorizontalAlignment="Center" VerticalAlignment="Center" Width="90" Height="27" >
<Button.Content>
<StackPanel Orientation="Horizontal">
<Border CornerRadius="3">
<ContentPresenter/>
<Border.Style>
<Style TargetType="{x:Type Border}">
<Setter Property="Background" Value="#58585a" />
<Style.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Background" Value="{StaticResource DegradeCouleurTheme}" />
</Trigger>
</Style.Triggers>
</Style>
</Border.Style>
</Border>
<Label>
<Label.Content>Fichiers joints</Label.Content>
<Label.Foreground>white</Label.Foreground>
<Label.VerticalAlignment>center</Label.VerticalAlignment>
<Label.HorizontalAlignment>center</Label.HorizontalAlignment>
</Label>
</StackPanel>
</Button.Content>
<Button.Style>
<Style TargetType="{x:Type Button}" >
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Button}" >
<ContentPresenter />
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Button.Style>
</Button>
Here is my call of this template :
<Grid Margin ="10,180,10,14">
<Button Template="{StaticResource BoutonImageEtTexte}" HorizontalAlignment="Left" Margin="13,0,0,0">
<Image Source="ToolBar_FicJoints.png" />
</Button>
</Grid>
Here is another method with a Textbox instead a Label
<ControlTemplate TargetType="{x:Type Button}" x:Key="BoutonImageEtTexte">
<Button Grid.Column="2" BorderBrush="Transparent" HorizontalContentAlignment="Center" VerticalContentAlignment="Center" HorizontalAlignment="Center" VerticalAlignment="Center" Width="90" Height="27" >
<Button.Content>
<StackPanel Orientation="Horizontal">
<Border CornerRadius="3">
<ContentPresenter/>
<Border.Style>
<Style TargetType="{x:Type Border}">
<Setter Property="Background" Value="#58585a" />
<Style.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Background" Value="{StaticResource DegradeCouleurTheme}" />
</Trigger>
</Style.Triggers>
</Style>
</Border.Style>
</Border>
<TextBlock Text="LabelText" />
</StackPanel>
</Button.Content>
<Button.Style>
<Style TargetType="{x:Type Button}" >
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Button}" >
<ContentPresenter />
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Button.Style>
</Button>
</ControlTemplate>
My problem is i see onl my image, and not my label specified in the template. Anyone could help me please ?
Thanks a lot :)
A TextBlock fits your needs better than a label. If you don't use the extra label functionality (such as target, object content), stick with a good 'ole TextBlock.
If you want to disable all button styling and only have an image and label in the button (note, this nullifies mouseover/mousedown effects, but you can provide the logic in triggers):
<ControlTemplate TargetType="{x:Type Button}" x:Key="SimpleButton">
<ContentPresenter/>
</ControlTemplate>
Usage:
<Button Template="{StaticResource SimpleButton}">
<StackPanel Orientation="Horizontal">
<Image Source="ToolBar_FicJoints.png" />
<TextBlock Text="LabelText" />
</StackPanel>
</Button>
If you just want the Image/TextBlock in a normal styled button, it is even easier:
<Button>
<StackPanel Orientation="Horizontal">
<Image Source="ToolBar_FicJoints.png" />
<TextBlock Text="Fichiers joints" />
</StackPanel>
</Button>
Use canvas as follows.
<Button Height="50" Width="150" >
<Button.Template>
<ControlTemplate>
<Canvas>
<Image Source="./Images/Cancel.png"/>
<TextBlock Canvas.Left="22" Canvas.Top="8" Text="Cancel" FontFamily="Arial" FontSize="18"/>
</Canvas>
</ControlTemplate>
</Button.Template>
</Button>
You can adjust Canvas.Left
and Canvas.Top
as per your requirements. I hope this one will help you as it will display Textblock on top of the image.
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