I am trying to change style on mouseover.
My Code is:
<Button Name="register" Content="Register" Margin="15,410,20,0" Padding="6" FontSize="18" VerticalAlignment="Top" Background="#FF0090D6" BorderBrush="#FF0090D6" Foreground="White">
<Button.Style>
<Style TargetType="Button">
<Style.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Background" Value="Red"></Setter>
</Trigger>
</Style.Triggers>
</Style>
</Button.Style>
</Button>
But the Background is the same default thing. But when i change property to BorderThickness then it works.
What am i doing wrong?
In the default template of button, there is trigger in ControlTemplate which set Background of button to #FFBEE6FD and since control template triggers have higher precedence compared to Style triggers that's why your trigger never works.
For that to achieve you have to override default template of button and remove that trigger from it so that your style trigger gets applied.
Here is the default template with that specific trigger commented out. In case you want to override BorderBrush as well, get rid of it as well from the template.
<ControlTemplate x:Key="DefaultTemplateOfButton" TargetType="ButtonBase">
<Border BorderThickness="{TemplateBinding Border.BorderThickness}"
BorderBrush="{TemplateBinding Border.BorderBrush}"
Background="{TemplateBinding Panel.Background}"
Name="border"
SnapsToDevicePixels="True">
<ContentPresenter RecognizesAccessKey="True"
Content="{TemplateBinding ContentControl.Content}"
ContentTemplate="{TemplateBinding ContentControl.ContentTemplate}"
ContentStringFormat="{TemplateBinding ContentControl.ContentStringFormat}"
Name="contentPresenter"
Margin="{TemplateBinding Control.Padding}"
HorizontalAlignment="{TemplateBinding Control.HorizontalContentAlignment}"
VerticalAlignment="{TemplateBinding Control.VerticalContentAlignment}"
SnapsToDevicePixels="{TemplateBinding UIElement.SnapsToDevicePixels}"
Focusable="False" />
</Border>
<ControlTemplate.Triggers>
<Trigger Property="Button.IsDefaulted" Value="True">
<Setter Property="Border.BorderBrush" TargetName="border">
<Setter.Value>
<DynamicResource ResourceKey="{x:Static SystemColors.HighlightBrushKey}" />
</Setter.Value>
</Setter>
</Trigger>
<Trigger Property="UIElement.IsMouseOver" Value="True">
<!--<Setter Property="Panel.Background" TargetName="border">
<Setter.Value>
<SolidColorBrush>#FFBEE6FD</SolidColorBrush>
</Setter.Value>
</Setter>-->
<Setter Property="Border.BorderBrush" TargetName="border">
<Setter.Value>
<SolidColorBrush>#FF3C7FB1</SolidColorBrush>
</Setter.Value>
</Setter>
</Trigger>
<Trigger Property="ButtonBase.IsPressed" Value="True">
<Setter Property="Panel.Background" TargetName="border">
<Setter.Value>
<SolidColorBrush>#FFC4E5F6</SolidColorBrush>
</Setter.Value>
</Setter>
<Setter Property="Border.BorderBrush" TargetName="border">
<Setter.Value>
<SolidColorBrush>#FF2C628B</SolidColorBrush>
</Setter.Value>
</Setter>
</Trigger>
<Trigger Property="ToggleButton.IsChecked" Value="True">
<Setter Property="Panel.Background" TargetName="border">
<Setter.Value>
<SolidColorBrush>#FFBCDDEE</SolidColorBrush>
</Setter.Value>
</Setter>
<Setter Property="Border.BorderBrush" TargetName="border">
<Setter.Value>
<SolidColorBrush>#FF245A83</SolidColorBrush>
</Setter.Value>
</Setter>
</Trigger>
<Trigger Property="UIElement.IsEnabled" Value="False">
<Setter Property="Panel.Background" TargetName="border">
<Setter.Value>
<SolidColorBrush>#FFF4F4F4</SolidColorBrush>
</Setter.Value>
</Setter>
<Setter Property="Border.BorderBrush" TargetName="border">
<Setter.Value>
<SolidColorBrush>#FFADB2B5</SolidColorBrush>
</Setter.Value>
</Setter>
<Setter Property="TextElement.Foreground" TargetName="contentPresenter">
<Setter.Value>
<SolidColorBrush>#FF838383</SolidColorBrush>
</Setter.Value>
</Setter>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
How to set the control template to button?
Define the template somewhere under resource section of parent panel or UserControl and can be applied via StaticResource:
<Grid>
<Grid.Resources>
<ControlTemplate x:Key="MyTemplate"
TargetType="ButtonBase">
.......
</Grid.Resources>
<Button Name="register" Template="{StaticResource MyTemplate}"...>
</Grid>
Edit: As Rohit pointed out in the comments,
This won't work on Windows 8 because of some changes in PresentationFramework where default template of button is declared. ... In Windows 7 default template of button doesn't have that ControlTemplate trigger. That's why your posted code works fine on Windows7 but it won't work on Windows 8 and higher.
Rohit's answer about DependencyProperty Precedence being the cause is correct, but there's a much simpler way of fixing it than overwriting the Button's Template.
If you review the DependencyProperty Precedence List, you'll notice that properties set in the <Tag> have a higher precedence than Triggered properties, which is why your button will always use the background you have defined in your <Button> tag.
If you move the Background property to the <Style> itself, then triggered property will work since Triggered properties take precedence over properties defined in a Style.
<Button Name="register" Content="Register" ...>
<Button.Style>
<Style TargetType="Button">
<Setter Property="Background" Value="#FF0090D6" />
<Style.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Background" Value="Red" />
</Trigger>
</Style.Triggers>
</Style>
</Button.Style>
</Button>
You have to override the default template for achieve this.
<Button Content="Button" HorizontalAlignment="Left" VerticalAlignment="Bottom" Width="50" Height="50" HorizontalContentAlignment="Left" BorderBrush="{x:Null}" Foreground="{x:Null}" Margin="50,0,0,0">
<Button.Style>
<Style TargetType="{x:Type Button}">
<Setter Property="Background" Value="Green"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Button}">
<Border Background="{TemplateBinding Background}">
<ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center"/>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
<Style.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Background" Value="DarkGoldenrod"/>
</Trigger>
</Style.Triggers>
</Style>
</Button.Style>
</Button>
Hope this helps.
<Button Content="Button" HorizontalAlignment="Left" VerticalAlignment="Bottom" Width="50" Height="50" HorizontalContentAlignment="Left" BorderBrush="{x:Null}" Foreground="{x:Null}" Margin="50,0,0,0">
<Button.Style>
<Style TargetType="{x:Type Button}">
<Setter Property="Background" Value="Green"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Button}">
<Border Background="{TemplateBinding Background}">
<ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center"/>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
<Style.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Background" Value="DarkGoldenrod"/>
</Trigger>
</Style.Triggers>
</Style>
</Button.Style>
</Button>
Above code perfectly works,
Even with this user can change the background color of button in runtime/codebehind
I am currently using the XAML below to change the image on a toggle button for each state. How can I define a template or style that will allow me to define the images that are to be used in the button definition such that I don't have to repeat everything below for each button. Is this even possible ?
Ideally I would like to define a template with properties such as 'checkedImage', 'uncheckedImage' and then set these properties in the button definition in Designer.
I would also like the button to prevent the display of any other states or animations but I can't seem to prevent the background changing when the button is selected or when there is a mouseover. Are there some additional states that I don't have defined below?
Sample code (XAML, C#) for the style or template and for the actual toggle button definition would be appreciated. Also any references to 'simple' samples and explanations would be appreciated.
Thanks
EDIT: Update with my latest attempt...
This almost works - the correct image never gets displayed when the button is Checked. Any ideas what I am missing here?
<Style x:Key="ImgToggleButton" TargetType="ToggleButton">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ToggleButton">
<Grid x:Name="GD" Background="White">
<ContentPresenter x:Name="CP" Content="{TemplateBinding Content}"></ContentPresenter>
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="IsChecked" Value="True">
<Setter Property="Content">
<Setter.Value>
<Image Source="{Binding Path=Tag, RelativeSource={RelativeSource AncestorType=ToggleButton}}" Stretch="Uniform"/>
</Setter.Value>
</Setter>
<Setter TargetName="GD" Property="Background" Value="{DynamicResource ThemeSolidColorBrushBlue}"/>
</Trigger>
<Trigger Property="IsChecked" Value="False">
<Setter TargetName="GD" Property="Background" Value="White"/>
</Trigger>
<Trigger Property="IsMouseOver" Value="True">
<!-- Nothing so we have no change-->
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
And here is the button definition
<ToggleButton x:Name="allTestsToggleButton" Tag="Asset/AllTestsButton_1.png" Style="{DynamicResource ImgToggleButton}" ClickMode="Press" Checked="allTestsToggleButton_Checked" Unchecked="allTestsToggleButton_Unchecked" Grid.Row="2" Grid.Column="3" Grid.ColumnSpan="5">
<ToggleButton.Content>
<Image Source="Assets/AllTestsButton_0.png" Stretch="Uniform"/>
</ToggleButton.Content>
</ToggleButton>
Setting TargetName="CP" does not work either
<ControlTemplate.Triggers>
<Trigger Property="IsChecked" Value="True">
<Setter TargetName="CP" Property="Content">
<Setter.Value>
<Image Source="{Binding Path=Tag, RelativeSource={RelativeSource AncestorType=ToggleButton}}" Stretch="Uniform"/>
</Setter.Value>
</Setter>
<Setter TargetName="GD" Property="Background" Value="{DynamicResource ThemeSolidColorBrushBlue}"/>
</Trigger>
<Trigger Property="IsChecked" Value="False">
<Setter TargetName="GD" Property="Background" Value="White"/>
</Trigger>
<Trigger Property="IsMouseOver" Value="True">
<!-- Nothing so we have no change-->
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
Update1
You can use this style for multiple button with different images and I have used tag for storing image for checked state true and use templatebinding for default look i.e state=false
<Window.Resources>
<BitmapImage x:Key="imag1" UriSource="image1.jpg"></BitmapImage>
<BitmapImage x:Key="imag2" UriSource="path.jpg"></BitmapImage>
<Style TargetType="ToggleButton">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ToggleButton">
<Grid x:Name="GD" Background="{TemplateBinding Background}">
<ContentPresenter></ContentPresenter>
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="IsChecked" Value="True">
<Setter TargetName="GD" Property="Background">
<Setter.Value>
<ImageBrush ImageSource="{Binding Path=Tag, RelativeSource={RelativeSource AncestorType=ToggleButton}}"></ImageBrush>
</Setter.Value>
</Setter>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Window.Resources>
<ToggleButton x:Name="sampleTestToggleButton" Tag="{StaticResource imag2}" ClickMode="Press" Grid.Row="4" Grid.Column="3" BorderBrush="Transparent" Foreground="Transparent">
<ToggleButton.Background>
<ImageBrush ImageSource="{StaticResource imag1}"></ImageBrush>
</ToggleButton.Background>
</ToggleButton>
Update2:
Hope this helps.Run this code separately.It is working fine here.
<Window.Resources>
<Style x:Key="ImgToggleButton" TargetType="ToggleButton">
<Setter Property="ContentTemplate">
<Setter.Value>
<DataTemplate>
<Image Stretch="Uniform" Source="{Binding Content,RelativeSource={RelativeSource TemplatedParent}}"></Image>
</DataTemplate>
</Setter.Value>
</Setter>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ToggleButton">
<Grid x:Name="GD" Background="White">
<ContentPresenter></ContentPresenter>
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="IsChecked" Value="True">
<Setter Property="ContentTemplate">
<Setter.Value>
<DataTemplate>
<Image Stretch="Uniform" Source="{Binding Path=Tag, RelativeSource={RelativeSource AncestorType=ToggleButton}}"></Image>
</DataTemplate>
</Setter.Value>
</Setter>
</Trigger>
<Trigger Property="IsChecked" Value="False">
<Setter TargetName="GD" Property="Background" Value="White"/>
</Trigger>
<Trigger Property="IsMouseOver" Value="True">
<!-- Nothing so we have no change-->
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Window.Resources>
<ToggleButton x:Name="allTestsToggleButton" Content="imag2.jpg" Tag="imag1.jpg" Style="{DynamicResource ImgToggleButton}" ClickMode="Press" Grid.Row="2" Grid.Column="3" Grid.ColumnSpan="5"/>
I think, you need for the ability to use vector graphics in WPF. In this case, to use the Path, where in Data to the specified coordinates on which the object is drawn MSDN.
Advantages:
Do not store it in the files, smaller size
Do not store this files in Resources
Dynamically changing color, size and the whole shape
The Minuses, in my opinion:
You can not always find the right Data for the Path
About minus: There are special sites, like www.modernuiicons.com and utilities for converting the image to Data. For converting Image to Vector graphics (Path) use Inkscape, him free and very useful. For more information see this link:
Vectorize Bitmaps to XAML using Potrace and Inkscape
Example
<Window.Resources>
<Style x:Key="styleCustomCheckBox" TargetType="{x:Type CheckBox}">
<Setter Property="FontFamily" Value="Verdana" />
<Setter Property="FontSize" Value="14" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type CheckBox}">
<StackPanel Orientation="Horizontal">
<Path x:Name="MyPin" Width="18" Height="18" Stretch="Fill" Fill="#FF000000"
Data="F1 M 56.1355,32.5475L 43.4466,19.8526C 42.7886,20.4988 42.298,21.2123 41.9749,21.9932C 41.6519,22.7741 41.4903,23.5729 41.4903,24.3895C 41.4903,25.1942 41.6529,25.987 41.9779,26.7679L 34.0577,34.6821C 33.3918,34.3372 32.6991,34.0776 31.9796,33.9032C 31.2601,33.7288 30.5298,33.6415 29.7885,33.6415C 28.623,33.6415 27.4953,33.8526 26.4052,34.2748C 25.315,34.697 24.3419,35.3342 23.4856,36.1865L 30.2344,42.9174L 25.9027,47.9032L 22.6532,51.8425L 20.5988,54.5836C 20.1212,55.2892 19.8823,55.753 19.8823,55.975L 19.8645,56.0701L 19.9002,56.088L 19.9002,56.1474L 19.9358,56.1058L 20.0131,56.1236C 20.2351,56.1236 20.6989,55.8888 21.4045,55.419L 24.1457,53.3765L 28.0849,50.1151L 33.0945,45.7775L 39.8016,52.5025C 40.6579,51.6462 41.2961,50.6731 41.7163,49.5829C 42.1365,48.4928 42.3466,47.367 42.3466,46.2056C 42.3466,45.4603 42.2603,44.729 42.0879,44.0115C 41.9155,43.294 41.6548,42.6003 41.3069,41.9304L 49.2202,34.0161C 50.0011,34.3372 50.7939,34.4978 51.5986,34.4978C 52.4192,34.4978 53.2189,34.3362 53.9979,34.0132C 54.7768,33.6901 55.4894,33.2015 56.1355,32.5475 Z "/>
<ContentPresenter VerticalAlignment="Center" Margin="10,0,0,0" />
</StackPanel>
<ControlTemplate.Triggers>
<Trigger Property="IsChecked" Value="False">
<Setter TargetName="MyPin" Property="Data" Value="F1 M 32.3691,30.2225L 33.2253,29.3901L 15.361,11.5258C 13.9814,12.7067 12.6951,13.9936 11.5148,15.3738L 26.6252,30.4842C 27.743,30.1631 28.8767,30.0025 30.0263,30.0025C 30.8191,30.0025 31.6,30.0759 32.3691,30.2225 Z M 45.5039,49.3629L 60.6292,64.4826C 62.0123,63.2996 63.3017,62.0101 64.4846,60.6268L 46.6218,42.7866L 45.7834,43.619L 45.9439,44.7726L 45.9915,45.9261L 45.8785,47.6713L 45.5039,49.3629 Z M 56.1355,32.5475L 43.4466,19.8526C 42.7886,20.4987 42.298,21.2123 41.9749,21.9932C 41.6519,22.7741 41.4903,23.5729 41.4903,24.3895C 41.4903,25.1942 41.6529,25.987 41.9779,26.7679L 34.0577,34.6821C 33.3918,34.3372 32.6991,34.0776 31.9796,33.9032C 31.2601,33.7288 30.5298,33.6415 29.7885,33.6415C 28.623,33.6415 27.4953,33.8526 26.4052,34.2748C 25.315,34.697 24.3419,35.3342 23.4856,36.1865L 30.2344,42.9174L 25.9027,47.9032L 22.6532,51.8425L 20.5988,54.5836C 20.1212,55.2892 19.8823,55.753 19.8823,55.975L 19.8645,56.0701L 19.9002,56.0879L 19.9002,56.1474L 19.9358,56.1058L 20.0131,56.1236C 20.2351,56.1236 20.6989,55.8888 21.4045,55.419L 24.1457,53.3765L 28.0849,50.1151L 33.0945,45.7775L 39.8016,52.5025C 40.6579,51.6462 41.2961,50.6731 41.7163,49.5829C 42.1365,48.4928 42.3466,47.367 42.3466,46.2056C 42.3466,45.4603 42.2603,44.729 42.0879,44.0115C 41.9155,43.294 41.6548,42.6003 41.306,41.9304L 49.2202,34.0161C 50.0011,34.3372 50.7939,34.4978 51.5986,34.4978C 52.4192,34.4978 53.219,34.3362 53.9979,34.0132C 54.7768,33.6901 55.4894,33.2015 56.1355,32.5475 Z " />
<Setter TargetName="MyPin" Property="Fill" Value="Gray" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Window.Resources>
<StackPanel Orientation="Vertical" HorizontalAlignment="Center">
<CheckBox Height="35"
Style="{StaticResource styleCustomCheckBox}"
Content="MySolution1" />
<CheckBox Height="35"
Style="{StaticResource styleCustomCheckBox}"
Content="MySolution2" />
</StackPanel>
Output
I am new to WPF. I want to show custom tool tip when a error occurs in TextBox. So I have used Style as shown below:
<Style x:Key="textBoxInError" TargetType="{x:Type TextBox}">
<Style.Triggers>
<Trigger Property="Validation.HasError" Value="true">
<Setter Property="ToolTip">
<Setter.Value>
<ToolTip Placement="Top">
<Border Margin="-4,0,-4,-3" Padding="2" Background="Red">
<Border.BitmapEffect>
<OuterGlowBitmapEffect></OuterGlowBitmapEffect>
</Border.BitmapEffect>
<Label Foreground="White" FontWeight="Bold" Content="{Binding RelativeSource={RelativeSource AncestorType={x:Type TextBox}}, Path=(Validation.Errors)[0].ErrorContent}"></Label>
</Border>
</ToolTip>
</Setter.Value>
</Setter>
</Trigger>
</Style.Triggers>
</Style>
Above code is not showing error message in ToolTip. Could you please help m ein this regard? Any help would be highly appreciable.
You should change your current style with the following style (msdn):
<Style x:Key="textBoxInError" TargetType="{x:Type TextBox}">
<Style.Triggers>
<Trigger Property="Validation.HasError" Value="true">
<Setter Property="ToolTip" Value="{Binding RelativeSource={RelativeSource Self}, Path=(Validation.Errors)[0].ErrorContent}"/>
</Trigger>
</Style.Triggers>
</Style>
And you should create style for ToolTip:
<Style TargetType="ToolTip">
<Setter Property="OverridesDefaultStyle" Value="true"/>
<Setter Property="HasDropShadow" Value="True"/>
<Setter Property="Placement" Value="Top" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ToolTip">
<Border Name="Border" Margin="-4,0,-4,-3" Padding="2" Background="Red">
<Border.BitmapEffect>
<OuterGlowBitmapEffect></OuterGlowBitmapEffect>
</Border.BitmapEffect>
<ContentPresenter
Margin="4"
HorizontalAlignment="Left"
VerticalAlignment="Top"
TextElement.Foreground="White" TextElement.FontWeight="Bold"
/>
</Border>
<ControlTemplate.Triggers>
<Trigger Property="HasDropShadow" Value="true">
<Setter TargetName="Border" Property="CornerRadius" Value="4"/>
<Setter TargetName="Border" Property="SnapsToDevicePixels" Value="true"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
Example of usage:
<TextBox Text="{Binding MyText, ValidatesOnDataErrors=True, NotifyOnValidationError=True, UpdateSourceTrigger=PropertyChanged}"
Style="{StaticResource textBoxInError}"
/>
You should also replace
Path=(Validation.Errors)[0].ErrorContent
with
Path=(Validation.Errors).CurrentItem.ErrorContent}
because in your case you'll get an silent ArgumentOutOfRangeException when there are no validation errors. Don't forget to implement IDataErrorInfo or INotifyDataErrorInfo.
I'm trying to add OuterGlowBitmapEffect effect to TextBox when Mouse hovers it.
I use triggers. Here is some code:
<TextBox Height="23" HorizontalAlignment="Left" Style="{DynamicResource TextBoxStyle}" Margin="12,283,0,0" Name="textBox1" VerticalAlignment="Top" Width="147" Text="" />
<Style x:Key="TextBoxStyle" TargetType="{x:Type TextBox}">
<Setter Property="FontSize" Value="14" />
<Style.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="BitmapEffect">
<Setter.Value>
<OuterGlowBitmapEffect GlowColor="Red" GlowSize="10"/>
</Setter.Value>
</Setter>
</Trigger>
</Style.Triggers>
</Style>
But it's not working. What i missed?
From the documentation of BitmapEffect:
[ObsoleteAttribute("BitmapEffects are deprecated and no longer function. Consider using Effects where appropriate instead.")]
You can simulate a glow using the Effect property with an instance of DropShadowEffect.
try this
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Effect">
<Setter.Value>
<DropShadowEffect BlurRadius="10" Color="Red" ShadowDepth="0"/>
</Setter.Value>
</Setter>
</Trigger>