I would like to create a template for a button. I would like to place an image (on the left) and text on this button.
I tried to make a thing like that:
<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>
<Label>
<Label.Content>Fichiers joints</Label.Content>
<Label.Foreground>white</Label.Foreground>
<Label.VerticalAlignment>center</Label.VerticalAlignment>
<Label.HorizontalAlignment>center</Label.HorizontalAlignment>
</Label>
<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>
</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>
Here is my code with a stackpanel added:
<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 the 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>
Unfortunately, i only see the image, and , not the text ?
Anyone have an idea please ?
Thanks
Maybe you can try something easier:
<Button>
<StackPanel Orientation="Horizontal">
<Image Source="yourimage.jpg" />
<TextBlock>Button content</TextBlock>
</StackPanel>
</Button>
You can just wrap the 2 elements in a single element like StackPanel
Example:
<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>
</ControlTemplate>
You'll find that creating a button with an image inside, will give you an ugly border, that should be avoided. A workaround is to create an event for an image.
For instance, you can create an OnMouseOver event that switches the button to, either a new image, text, or an image with text, or really anything you choose.
You can also create an OnClick event that could trigger the image to do a task as if it was a button.
What I have done in a situation like this, was create an image that looks like a custom button, then create the same image, and modify it so that a border appeared around it.
I made an OnMouseOver to switch the images (so the bordered image appears), and an OnClick to do the function I required.
You can then use this template for any other situation you have with custom buttons.
Hope this helps!
Related
The problem is IsMouseOver is not working when I hover the button, though I have customized the button and it is not working.
Can you say where is the error?
<cc:CustomFlatButton Grid.Column="1"
Margin="1,0,5,4"
Command="{Binding ElementName=me, Path=Command疑い}"
CommandParameter="{Binding}"
IsEnabled="{Binding Path=疑いIsEnableFlag}">
<Run FontWeight="Bold">
疑い病名
</Run>
<Button.Style>
<Style TargetType="cc:CustomFlatButton">
<Setter Property="MinWidth" Value="80" />
<Setter Property="FontFamily" Value="メイリオ" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type cc:CustomFlatButton}">
<Border Height="22"
Margin="1"
VerticalAlignment="Center"
Background="White"
BorderBrush="#FFFF5656"
BorderThickness="2"
CornerRadius="6"
RenderOptions.BitmapScalingMode="NearestNeighbor"
TextOptions.TextFormattingMode="Display"
UseLayoutRounding="True">
<Label Padding="0,1,0,0"
HorizontalAlignment="Center"
VerticalAlignment="Center"
Content="{TemplateBinding Content}"
Foreground="Black" />
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
<Style.Triggers>
<Trigger Property="cc:CustomFlatButton.IsMouseOver" Value="True">
<Setter Property="Background" Value="DarkGoldenrod"/>
</Trigger>
</Style.Triggers>
</Style>
</Button.Style>
</cc:CustomFlatButton>
I have also checked if I use trigger Property="IsMouseOver". It is also not working. Where is the problem?
You have changed the Button Template and in this Template no property is bound to the Backgroud of the button.
In the trigger, you change the value of this property, but since no one uses this property, nothing changes in the display.
There are two main options to solve.
Set the Border's background binding to the Backgroud property of the button:
<cc:CustomFlatButton Grid.Column="1"
Margin="1,0,5,4"
Command="{Binding ElementName=me, Path=Command疑い}"
CommandParameter="{Binding}"
IsEnabled="{Binding Path=疑いIsEnableFlag}">
<Run FontWeight="Bold">
疑い病名
</Run>
<Button.Style>
<Style TargetType="cc:CustomFlatButton">
<Setter Property="MinWidth" Value="80" />
<Setter Property="FontFamily" Value="メイリオ" />
<Setter Property="Background" Value="White"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type cc:CustomFlatButton}">
<Border Height="22"
Margin="1"
VerticalAlignment="Center"
Background="{TemplateBinding Background}"
BorderBrush="#FFFF5656"
BorderThickness="2"
CornerRadius="6"
RenderOptions.BitmapScalingMode="NearestNeighbor"
TextOptions.TextFormattingMode="Display"
UseLayoutRounding="True">
<Label Padding="0,1,0,0"
HorizontalAlignment="Center"
VerticalAlignment="Center"
Content="{TemplateBinding Content}"
Foreground="Black" />
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
<Style.Triggers>
<Trigger Property="cc:CustomFlatButton.IsMouseOver" Value="True">
<Setter Property="Background" Value="DarkGoldenrod"/>
</Trigger>
</Style.Triggers>
</Style>
</Button.Style>
</cc:CustomFlatButton>
Or change the Border background with ControlTemplate triggers.
But this is applicable if CustomFlatButton is a Custom Control and not a UserControl.
That is, the CustomFlatButton should not have any predefined XAML.
<cc:CustomFlatButton Grid.Column="1"
Margin="1,0,5,4"
Command="{Binding ElementName=me, Path=Command疑い}"
CommandParameter="{Binding}"
IsEnabled="{Binding Path=疑いIsEnableFlag}">
<Run FontWeight="Bold">
疑い病名
</Run>
<Button.Style>
<Style TargetType="cc:CustomFlatButton">
<Setter Property="MinWidth" Value="80" />
<Setter Property="FontFamily" Value="メイリオ" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type cc:CustomFlatButton}">
<Border x:Name="PART_Border"
Height="22"
Margin="1"
VerticalAlignment="Center"
Background="White"
BorderBrush="#FFFF5656"
BorderThickness="2"
CornerRadius="6"
RenderOptions.BitmapScalingMode="NearestNeighbor"
TextOptions.TextFormattingMode="Display"
UseLayoutRounding="True">
<Label Padding="0,1,0,0"
HorizontalAlignment="Center"
VerticalAlignment="Center"
Content="{TemplateBinding Content}"
Foreground="Black" />
</Border>
<ControlTemplate.Triggers>
<Trigger Property="cc:CustomFlatButton.IsMouseOver" Value="True">
<Setter Property="Background" Value="DarkGoldenrod" TargetName="PART_Border"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Button.Style>
</cc:CustomFlatButton>
So I decided to try to give a button a custom style.
Yet when I assign it the Style it wont use it, why is this?
I tried creatinga button with a textbox, image and a ellipse with a label on that too.
I want the button to change color when I hover over it but its making my button disappear.
Window resources
<Window.Resources>
<Style x:Key="MenuButton" TargetType="{x:Type Button}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Button">
<ControlTemplate.Triggers>
<Trigger Property="Background" Value="#272727">
</Trigger>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Foreground" Value="Gray"></Setter>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Window.Resources>
And then the button
<Button Background="Transparent"
Style="{StaticResource MenuButton}"
Height="25"
BorderThickness="0">
<StackPanel Orientation="Horizontal">
<Image Source="Resources/earth-globe.png"
Height="20"
Width="20"
HorizontalAlignment="Left"
Margin="0,0,5,0"
UseLayoutRounding="True"
RenderOptions.BitmapScalingMode="Fant"/>
<Label Content="Websites"
Foreground="White"
VerticalAlignment="Center"
Width="100"
Height="24"/>
<Grid HorizontalAlignment="Right" Height="20" Width="20">
<Ellipse Width="20"
Height="20"
Fill="#555555"
Margin="0,0,0,0">
</Ellipse>
<TextBlock Text="10"
HorizontalAlignment="Center"
VerticalAlignment="Center"
FontSize="12"
TextAlignment="Center"
Foreground="White"/>
</Grid>
</StackPanel>
</Button>
You do not want to put that style in the template portion of the style because a template is used for customizing the full control look (i.e. making a button a circle) and a way of giving the developer more flexibility over styling. What you could do is make a style that is applied to the button. Instead try this:
<Window.Resources>
<Style x:Key="MenuButton" TargetType="{x:Type Button}">
<Setter Property="Background" Value="#272727" />
<Style.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Foreground" Value="Gray" />
</Trigger>
</Style.Triggers>
</Style>
</Window.Resources>
If you did want to modify the template property though, also a valid approach you need to add a <ContentPresenter />. See the below example:
<Window.Resources>
<Style x:Key="MenuButton" TargetType="{x:Type Button}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Button">
<ContentPresenter />
<ControlTemplate.Triggers>
<Trigger Property="Background" Value="#272727">
</Trigger>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Foreground" Value="Gray"></Setter>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Window.Resources>
However, with the minimal styling you have it seems like a poor use case to modify the template and I would recommend the first approach.
Add missing ContentPresenter to your DataTemplate.
<Style x:Key="MenuButton" TargetType="{x:Type Button}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Button">
<ContentPresenter /> <!--This thing was missing-->
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Background" Value="RED" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
I've got a WrapPanel containing multiple Buttons.
All buttons have the same base style to define their basic appearance.
Every button has a visible border at the right side. But I want to use styles to remove the border of the last button.
I think its quite simple. WPF is new to me, so I want to understand it.
The solutions I find on the internet are for different cases. That solutions are all concerning ListBox or ItemContainer to style some list items by index.
I don't want to just add another style key to the last Button, because that's not dynamic, and the WrapPanel is dynamically populated with Buttons depending on the state of the application.
This is my code:
<Window.Resources>
<Style x:Key="lastTabStyle" TargetType="Button">
<Setter Property="BorderThickness" Value="0" />
</Style>
<Style x:Key="tabButton" TargetType="Button">
<Setter Property="Background" Value="#FF21588B" />
<Setter Property="BorderThickness" Value="0 0 1 0" />
<Setter Property="Foreground" Value="#fff" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Button">
<Border Background="{TemplateBinding Background}" Padding="20 10 20 10">
<ContentPresenter HorizontalAlignment="left" VerticalAlignment="Center" />
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
<Style.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Background" Value="#FF266095" />
</Trigger>
</Style.Triggers>
</Style>
<Style x:Key="tabButtonSelected" TargetType="Button">
<Setter Property="Background" Value="#FF3474B0" />
<Setter Property="BorderThickness" Value="0" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Button">
<Border Background="{TemplateBinding Background}" Padding="10 8">
<ContentPresenter HorizontalAlignment="left" VerticalAlignment="Center" />
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Window.Resources>
And the WrapPanel:
<WrapPanel VerticalAlignment="Bottom" x:Name="topTabs">
<Button Style="{StaticResource tabButton}">Button 1</Button>
<Button Style="{StaticResource tabButton}">Button 2</Button>
<Button Style="{StaticResource tabButton}">Button 3</Button>
</WrapPanel>
...But I want to use styles to remove the border of the last button.
Then the define another style and apply this to the last Button or simply set ("override") the BorderThickness property of the last Button:
<WrapPanel VerticalAlignment="Bottom" x:Name="topTabs">
<Button Style="{StaticResource tabButton}">Button 1</Button>
<Button Style="{StaticResource tabButton}">Button 2</Button>
<Button Style="{StaticResource tabButton}" BorderThickness="0">Button 3</Button>
</WrapPanel>
Local values take precedence over values set by styles: https://learn.microsoft.com/en-us/dotnet/framework/wpf/advanced/dependency-property-value-precedence
I have the following style
<Style x:Key="RoundedBtn" TargetType="{x:Type Button}">
<Setter Property="Background" Value="White"/>
<Setter Property="BorderThickness" Value="1"/>
<Setter Property="BorderBrush" Value="{x:Null}"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Button}">
<Border x:Name="button" CornerRadius="5" Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}">
<Grid>
<Image x:Name="image" Source="{Binding ButtonImage, RelativeSource={RelativeSource AncestorType=Button}}" Margin="0,2,0,3" HorizontalAlignment="Left" Width="40" />
<Border BorderBrush="{x:Null}" Height="16" Margin="45,15,0,14" Width="123" HorizontalAlignment="Left">
<TextBlock x:Name="textBlock" Margin="-1" TextWrapping="Wrap" Text="{Binding ButtonText, RelativeSource={RelativeSource AncestorType=Button} }"
FontSize="13"
FontFamily="{DynamicResource Helvetica}" VerticalAlignment="Center" TextDecorations="{x:Null}">
</TextBlock>
</Border>
</Grid>
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="BorderBrush" Value="#8da0aa"></Setter>
<Setter Property="Foreground" Value="#318EE4"></Setter>
<Setter TargetName="textBlock" Property="TextBlock.TextDecorations" Value="Underline">
<!--That Text decoration part doesnt work--></Setter>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
I apply this style to my "usercontrol" (which is actually a button):
<Button x:Name="btn" x:Class="MyStock.MyButton"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
mc:Ignorable="d" Height="45" Width="183" Style="{DynamicResource RoundedBtn}" />
When I generate the project, the "MyButton" appears in my custom controls. But if I drag it on my form and test it, the Text Underline doesnt work.
But If i put a normal button on my form and then apply the RoundedBtn style, it works, why ?
By the way, what I am trying to achieve is to have a button that looks like the left menu buttons on this page
Use TargetName in the Setter:
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="True" >
<Setter TargetName="textBlock" Property="TextBlock.TextDecorations" Value="Underline" />
</Trigger>
</ControlTemplate.Triggers>
The whole style looks like this (I remove irrelevant part for readability)
<Style x:Key="RoundedBtn" TargetType="{x:Type Button}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Button}">
<Border x:Name="button">
<Grid>
<Border>
<TextBlock x:Name="textBlock" Margin="-1" TextWrapping="Wrap" Text="ABC"
FontSize="13" TextDecorations="{x:Null}">
</TextBlock>
</Border>
</Grid>
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="True" >
<Setter TargetName="textBlock" Property="TextBlock.TextDecorations" Value="Underline" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
My button looks like this:
<Button ToolTip="Pending" Height="33" HorizontalAlignment="Right" Margin="0,5,379,0" Name="radButton2" VerticalAlignment="Top" Width="64" Background="#FF515151" BorderBrush="#FF515151" FontSize="14" Foreground="#FF5F5C5C" FontFamily="Mangal" Command="{Binding SetToPendingCommand}" IsEnabled="{Binding IsSetToPendingButtonEnabled}" Grid.Column="1" Grid.ColumnSpan="2">
<Button.Style>
<Style TargetType="{x:Type Button}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate>
<Border BorderBrush="White" BorderThickness="1.5" CornerRadius="0">
<TextBlock Text="Pending" Foreground="White" TextAlignment="Center" FontSize="13" Margin="0,4, 0, 0" />
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
<Style.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Background" Value="Red"/>
</Trigger>
</Style.Triggers>
</Style>
</Button.Style>
</Button>
How do I get the mouseover to work correctly. I have tried not using a style and setting the template directly but that didnt't work either.
One way to do it is to move Triggers into ControlTemplate, give Border some name, for example x:Name="PART_Border", and then in the Setter you can specify TargetName="PART_Border":
<Button ...>
<Button.Style>
<Style TargetType="{x:Type Button}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate>
<Border BorderBrush="White" BorderThickness="1.5" CornerRadius="0" x:Name="PART_Border">
<TextBlock Text="Pending" Foreground="White" TextAlignment="Center" FontSize="13" Margin="0,4, 0, 0" />
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Background" Value="Red" TargetName="PART_Border"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Button.Style>
</Button>
Move the trigger to ControlTemplate instead:
<ControlTemplate>
<Border BorderThickness="1.5" CornerRadius="0">
<TextBlock x:Name="txtBlock" Text="Pending" Foreground="White"
TextAlignment="Center" FontSize="13" Margin="0,4,0,0" />
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter TargetName="txtBlock" Property="Background" Value="Red"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
All you need to do is add a template binding to the background property of the Border:
<Border Background="{TemplateBinding Background}" BorderBrush="White" BorderThickness="1.5" CornerRadius="0">
<TextBlock Text="Pending" Foreground="White" TextAlignment="Center" FontSize="13" Margin="0,4, 0, 0" />
</Border>
The important part is:
Background="{TemplateBinding Background}"
As it stands in the question the trigger is changing the template Background property, but that property is not being used within the control template.