I'm trying to change the style of this button but I have a problem. Before adding this code to my solution, when I put the mouse over the button, the background changed not to my style but to the default color. I look for information and I found this Setter Template. With this, I've got to remove that default background but now, when I put over the mouse, the background simply disappears. I guess it's getting its parent's background (Window), but I don't know how to use its own background, as I write in the Style code. It seems that StackOverFlow doesn't allow me to paste the entire code but I think you can understand it.
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Button}">
<ContentPresenter
Margin="{TemplateBinding Control.Padding}"
HorizontalAlignment="{TemplateBinding Control.HorizontalContentAlignment}"
VerticalAlignment="{TemplateBinding Control.VerticalContentAlignment}"
SnapsToDevicePixels="{TemplateBinding UIElement.SnapsToDevicePixels}"
ContentTemplate="{TemplateBinding ContentControl.ContentTemplate}"
RecognizesAccessKey="True"
Content="{TemplateBinding ContentControl.Content}" />
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Background" Value="White"/>
<Setter Property="Foreground" Value="DarkRed"/>
<Setter Property="Cursor" Value="Hand"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
<Setter Property="VerticalContentAlignment" Value="Center"/>
</Style>
Please move your style triggers to ControlTemplate:
<ControlTemplate.Triggers>
your triggers here
</ControlTemplate.Triggers>
Related
scenario:
When using default implementation of button the below functionality works:
When canExeucte command is true -> the button is enabled and button background is not changed.
When CanExecute command is false -> the button is disabled and background is "grayed".
But When using Button ControlTemplate style and CanExecute is false -> the button is disabled as expected but background is not changed.
How can I change the background of the Control Template button ?
image :
https://onedrive.live.com/redir?resid=3A8F69A0FB413FA4!125&authkey=!ALh_kjfxMMNzhSY&v=3&ithint=photo%2cpng
Control Template:
<!--button-->
<ControlTemplate x:Key="ButtonTemplate" TargetType="{x:Type Button}">
<Border x:Name="border" CornerRadius="0" Background="Green" BorderBrush="#FF06A6F0" BorderThickness="1" Opacity="1" Width="147" Height="50" >
<ContentPresenter x:Name="contentPresenter"
ContentTemplate="{TemplateBinding ContentTemplate}"
Content="{TemplateBinding Content}"
HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
Margin="{TemplateBinding Padding}"
VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
/>
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Opacity" Value="0.8" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
<Style x:Key="StyleButtonTemplate" TargetType="{x:Type Button}">
<Setter Property="Template" Value="{DynamicResource ButtonTemplate}" />
<Setter Property="FontSize" Value="18pt" />
<Setter Property="Foreground" Value="White" />
<Setter Property="Cursor" Value="Hand" />
<Setter Property="Button.Effect">
<Setter.Value>
<DropShadowEffect Color="Black" Direction="140" ShadowDepth="5" BlurRadius="5" Opacity="0.1" />
</Setter.Value>
</Setter>
</Style>
When you re-template a control, all the visual states should be managed by yourself. In this case the disabled state is ignored. For a simple way using Trigger to change the Background if IsEnabled is false:
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Opacity" Value="0.8" />
</Trigger>
<Trigger Property="IsEnabled" Value="False">
<Setter TargetName="border" Property="Background" Value="Gray"/>
</Trigger>
</ControlTemplate.Triggers>
I don't understand. I am going crazy - no matter what I do, the text in my WPF application is blurry. Well, some of it - one of the text elements is focused, and so are the close/minimize buttons. I have applied the TextOptions.TextRenderingMode="ClearType" and TextOptions.TextFormattingMode="Display" to the elements directly, and I have also tried applying it to the MainWindow.xaml, which is created by default using the ModernUI for WPF framework.
I'm going nuts - all the literature I find says this was fixed, but I'm still dealing with the issue. (I've changed the font to Calibri/Consolas and also played with the size and weight - still blurry.)
How can I fix this?
Edit: If I use the monitor I have at work (resolution 1920x1200) with standard DPI settings, I'm not so sure I have the issue. On the laptop display I am using I have a very high resolution (2880x1620) with the text scaling set to larger. On this display is where I'm currently seeing the text as "not crisp". I should also note that in the designer, the text appears fine. It is when the application runs that the text looks terrible.
So, I found out my issue is specifically with the Modern UI Framework. I'm not sure why. I switched over to using MahApps.Metro and I have no issues with font clarity.
to start with you can try with
<TextBlock Text="Am I Still Blurry." RenderOptions.ClearTypeHint="Enabled"/>
you might wanna have a look at this post for clearer understanding
It is by Design. Those different set of controls and they have different styles of font color. For Example Settings and Help in the Top right of the window they are using the style SystemButtonLink which is defined below
<Style x:Key="SystemButtonLink" TargetType="ButtonBase" BasedOn="{StaticResource SystemButtonBase}" >
<Setter Property="Foreground" Value="{DynamicResource LinkButtonText}"/>
<Setter Property="Width" Value="NaN" />
<Setter Property="Height" Value="NaN" />
<Setter Property="FontFamily" Value="Segoe UI" />
<Setter Property="FontSize" Value="11" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type ButtonBase}">
<Border Name="Chrome"
Background="{TemplateBinding Background}"
BorderThickness="{TemplateBinding BorderThickness}"
BorderBrush="{TemplateBinding BorderBrush}"
SnapsToDevicePixels="true">
<TextBlock DataContext="{TemplateBinding Content}"
Text="{Binding Converter={StaticResource ToUpperConverter}}"
Margin="{TemplateBinding Padding}"
VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"/>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
<Style.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Foreground" Value="{DynamicResource LinkButtonTextHover}"/>
</Trigger>
<Trigger Property="IsPressed" Value="True">
<Setter Property="Foreground" Value="{DynamicResource LinkButtonTextPressed}" />
</Trigger>
<Trigger Property="IsEnabled" Value="false">
<Setter Property="Foreground" Value="{DynamicResource LinkButtonTextDisabled}" />
</Trigger>
</Style.Triggers>
</Style>
If you refer the three colors used in the style for Mouse hover, Pressed and IsEnabled.
More code can be refered in the site. https://mui.codeplex.com/SourceControl/latest
I'm fighting with a dummy issue for hours.
In wpf I want to override the behaviour of a Button, and at the moment the basic behaviour I want is reached (a certain color).
But I'm not able to say simply: on mouseover add underline style!
I'm able to add underline but I'm not able to remove the square around the text!
The style I'm using is:
<Style TargetType="Button">
<Setter Property="Foreground" Value="{DynamicResource {x:Static vs_shell:EnvironmentColors.CommandBarMenuLinkTextBrushKey}}"></Setter>
<Setter Property="Cursor" Value="Hand"></Setter>
<Setter Property="Background" Value="Transparent"></Setter>
<Setter Property="BorderThickness" Value="0"></Setter>
<Style.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Background" Value="Transparent"/>
<Setter Property="ContentTemplate">
<Setter.Value>
<DataTemplate>
<TextBlock TextDecorations="Underline" Text="{TemplateBinding Content}" Background="Transparent"/>
</DataTemplate>
</Setter.Value>
</Setter>
</Trigger>
</Style.Triggers>
</Style>
Any idea/suggestion?
Thanks!
Maybe this will help you :
Disable Control's Selection Background Effect in WPF
It concerns the ListViewItems, but you can apply this mechanism on buttons or any other WPF Controls.
Good luck
Add this setter to the style:
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Button}">
<Border Background="{TemplateBinding Background}"
BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}">
<ContentPresenter Margin="{TemplateBinding Padding}"
HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
VerticalAlignment="{TemplateBinding VerticalContentAlignment}" />
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
I've been wondering this ever since I started using MS's control templates examples as basis to build custom controls.
take the Label example for instance: http://msdn.microsoft.com/en-us/library/ms752327.aspx
why on earth is it defined like this:
<Style x:Key="{x:Type Label}" TargetType="Label">
<Setter Property="HorizontalContentAlignment" Value="Left" />
<Setter Property="VerticalContentAlignment" Value="Top" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Label">
<Border>
<ContentPresenter HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
RecognizesAccessKey="True" />
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsEnabled" Value="false">
<Setter Property="Foreground">
<Setter.Value>
<SolidColorBrush Color="{DynamicResource DisabledForegroundColor}" />
</Setter.Value>
</Setter>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
and not like this directly:
<ControlTemplate x:Key="{x:Type Label}" TargetType="Label">
<Border>
<ContentPresenter HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
RecognizesAccessKey="True" />
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsEnabled" Value="false">
<Setter Property="Foreground">
<Setter.Value>
<SolidColorBrush Color="{DynamicResource DisabledForegroundColor}" />
</Setter.Value>
</Setter>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
and then called as a template directly and not through the style property?
is there a hidden reason I do not see for doing things like this? or is it just one way of doing things and that's it?
(NB: don't tell me this is because of the horizontal and vertical alignment setters! we all know those are the default values for a label and this is basically useless if you keep those values)
Without using a Style it's not possible to automatically assign the template to all instances of a specific control type. Setting x:Key="{x:Type Label}" for the control template does not automatically apply this template to all controls of type Label.
You can make a style apply to all buttons below the declaration in the visual tree by setting the TargetType to Button, but you can't do the same with a template, if you do not wrap it inside a Style that have a Setter for the template.
Also, note that in your example you can exchange
<Style x:Key="{x:Type Label}" TargetType="Label">
With
<Style TargetType="Label">
As the x:Key is set to the TargetType if the x:Key definition is omitted.
I have a coloured circle in a .png, the rest is transparent.
I am able to place that image on a button but the rest of the button's style is visible on the transparent are of the image. How can I hide it, in normal, mouse over and pressed mode?
Try this style
<Style x:Key="EmptyButtonStyle" TargetType="{x:Type Button}">
<Setter Property="Background" Value="#00000000"/>
<Setter Property="BorderBrush" Value="#00000000"/>
<Setter Property="BorderThickness" Value="0"/>
<Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}"/>
<Setter Property="HorizontalContentAlignment" Value="Center"/>
<Setter Property="VerticalContentAlignment" Value="Center"/>
<Setter Property="Padding" Value="1"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Button}">
<ContentPresenter
HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
Margin="{TemplateBinding Padding}"
RecognizesAccessKey="True"
SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"
VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
And the use it as follows
<Button Style="{DynamicResource EmptyButtonStyle}">
<Image Source="/Assets/circle.png" />
</Button>
It sounds like you are currently using the existing button's Template and just adding an Image to it. What you need to do is modify the button's <Template> itself so it uses your image instead of the default template.
If you do a google search on something like "WPF Template" or "WPF Round Button" you'll probably come up with some good examples.
I ended up using the most simple solution for me (probably not the most elegant).
<Image x:Name="nextImage" MouseDown="nextButton_Click"></Image>