Remove strange behaviour from wpf button mouse-over - wpf

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>

Related

Setting border size on button on mouse over in WPF

I am trying to set the border colour property on a button when user hovers on it. Currently I am using following XAML.
<Button.Style>
<Style TargetType="{x:Type Button}">
<Setter Property="Background" Value="#FF0081a7"/>
<Setter Property="BorderBrush" Value="White"/>
<Setter Property="BorderThickness" Value="2,2,2,2"/>
<Setter Property="Foreground" Value="#FFffffff"/>
<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="#ccCCCCCC"/>
<Setter Property="BorderBrush" Value="Gold"/>
<Setter Property="BorderThickness" Value="2,2,2,2"/>
</Trigger>
</Style.Triggers>
</Style>
</Button.Style>
This works fine only for colour changes. Border on the other hand is not displayed at all. I am sure, I am missing something very simple, only thing is I can't find what it is.
You're not actually utilising the BorderBrush and BorderThickness properties... you need to actually do something with them from inside your ControlTemplate. Try this:
<ControlTemplate TargetType="{x:Type Button}">
<Border Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding
BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}">
<ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center"/>
</Border>
</ControlTemplate>

Change WPF control's ControlTemplate to not be disabled

I have a Devexpress DateEdit and added a trigger for when IsEnabled=False to change the ControlTemplate to be a Label. This all works fine, but my problem is, that the Text of the Label is still Grayed out(Disabled).
My style:
<Style x:Key="DateTimeDropDownStyle" TargetType="{x:Type dxe:DateEdit}">
<Setter Property="Mask" Value="dd MMM yyyy"/>
<Setter Property="MaskUseAsDisplayFormat" Value="True"/>
<Style.Triggers>
<Trigger Property="dxe:DateEdit.IsEnabled" Value="False">
<Setter Property="dxe:DateEdit.Template">
<Setter.Value>
<ControlTemplate>
<Label Content="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=Text, StringFormat={}{0:dd MMM yyyyy}}"/>
</ControlTemplate>
</Setter.Value>
</Setter>
</Trigger>
</Style.Triggers>
</Style>
So, my question is, how do i change the Style so that the Label is not disabled?
Try setting Foreground on the Label in your template.
If it doesn't help, you'd have to edit the control template for the label. A basic one is:
<ControlTemplate TargetType="{x:Type Label}">
<Border Background="{TemplateBinding Background}"
BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}">
<ContentPresenter Margin="{TemplateBinding Padding}"/>
</Border>
<ControlTemplate.Triggers>
<!--This is the trigger to remove-->
<Tirgger Property="IsEnabled"
Value="False">
<Setter Property="Foreground"
Value="{DynamicResource {x:Static SystemColors.GrayTextBrushKey}}" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>

Default ControlTemplate for CheckBox

I can't find the default WPF ControlTemplate for a CheckBox. Does anyone know how to locate it? All I can find is the SilverLight default checkbox template on MSDN.
MSDN has a custom control template for the WPF checkbox example which uses X's instead of check marks. I'm specifically looking for the default check mark style that comes standard with WPF - I just can't locate the XAML for it.
I've also tried saving the template using XamlWriter to no avail. Downloading the Simple Styles template from WPF Control Templates sample also just uses the X's instead of classic check marks.
I haven's seen the default styles for any other theme but Classic available online but if you happend to find them, please post back here :) I think the templates over at MSDN are usually the Classic theme.
You can use Expression Blend to get it, you can download a trial here.
Select the CheckBox, go to Object -> Edit Style -> Edit a Copy.
Assuming you are after the windows 7 (aero) style, here it is
<SolidColorBrush x:Key="CheckBoxFillNormal" Color="#F4F4F4"/>
<SolidColorBrush x:Key="CheckBoxStroke" Color="#8E8F8F"/>
<Style x:Key="EmptyCheckBoxFocusVisual">
<Setter Property="Control.Template">
<Setter.Value>
<ControlTemplate>
<Rectangle Margin="1" SnapsToDevicePixels="true" Stroke="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}" StrokeThickness="1" StrokeDashArray="1 2"/>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<Style x:Key="CheckRadioFocusVisual">
<Setter Property="Control.Template">
<Setter.Value>
<ControlTemplate>
<Rectangle Margin="14,0,0,0" SnapsToDevicePixels="true" Stroke="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}" StrokeThickness="1" StrokeDashArray="1 2"/>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<Style x:Key="CheckBoxStyle1" TargetType="{x:Type CheckBox}">
<Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}"/>
<Setter Property="Background" Value="{StaticResource CheckBoxFillNormal}"/>
<Setter Property="BorderBrush" Value="{StaticResource CheckBoxStroke}"/>
<Setter Property="BorderThickness" Value="1"/>
<Setter Property="FocusVisualStyle" Value="{StaticResource EmptyCheckBoxFocusVisual}"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type CheckBox}">
<BulletDecorator Background="Transparent" SnapsToDevicePixels="true">
<BulletDecorator.Bullet>
<Microsoft_Windows_Themes:BulletChrome BorderBrush="{TemplateBinding BorderBrush}" Background="{TemplateBinding Background}" IsChecked="{TemplateBinding IsChecked}" RenderMouseOver="{TemplateBinding IsMouseOver}" RenderPressed="{TemplateBinding IsPressed}"/>
</BulletDecorator.Bullet>
<ContentPresenter HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" RecognizesAccessKey="True" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
</BulletDecorator>
<ControlTemplate.Triggers>
<Trigger Property="HasContent" Value="true">
<Setter Property="FocusVisualStyle" Value="{StaticResource CheckRadioFocusVisual}"/>
<Setter Property="Padding" Value="4,0,0,0"/>
</Trigger>
<Trigger Property="IsEnabled" Value="false">
<Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.GrayTextBrushKey}}"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
Another way to get all WPF controls control templates is to use this fantastic application : http://www.sellsbrothers.com/posts/details/2091

WPF Label Design

I have a label in WPF which I want to restyle so it has rounded corners.
I have the below code already:
<Style TargetType="{x:Type Label}">
<Setter Property="Background" Value="Red"/>
<Setter Property="Margin" Value="2,2,2,2"/>
<Setter Property="BorderThickness" Value="2"/>
<Setter Property="BorderBrush" Value="Blue"/>
</Style>
Can anyone please assist with how I would add a corner Radius to this label
many thanks
You'll need to change the ControlTemplate for the Label in order to get rounded corners. The Label control itself doesn't expose a CornerRadius property.
Add the following to your Style and you'll get rounded edges on your Label. I arbitrarily set it to "3" below, but you can set it to whatever your needs dictate.
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Label}">
<Border BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}"
Background="{TemplateBinding Background}"
Padding="{TemplateBinding Padding}"
SnapsToDevicePixels="true"
CornerRadius="3">
<ContentPresenter HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" RecognizesAccessKey="True" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsEnabled" Value="false">
<Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.GrayTextBrushKey}}"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
Using the Border element would be simpler.
<Border CornerRadius="10" BorderThickness="2" BorderBrush="Blue" Background="Red" Margin="2">
<Label Content="Lorem ipsum" />
</Border>

WPF SystemColors: color of TextBox border

I am trying to make a search TextBox with an embedded magnifying glass icon. I have the following markup so far:
<Border DockPanel.Dock="Bottom" Margin="2,4,0,4"
BorderThickness="1" SnapsToDevicePixels="True"
BorderBrush="{DynamicResource {x:Static SystemColors.ControlDarkBrushKey}}">
<DockPanel>
<StackPanel Orientation="Horizontal" DockPanel.Dock="Right">
<Image Source="/Resources/search-13x13.png" Width="13"/>
</StackPanel>
<TextBox Name="searchTextBox" DockPanel.Dock="Bottom" BorderThickness="0"
Text="{Binding FilterText, UpdateSourceTrigger=PropertyChanged}"/>
</DockPanel>
</Border>
However, I can't find the entry in SystemColors which will give me the same color as the standard TextBox border. This is a blueish color by default. Am I being really stupid here?!?
EDIT: btw, the image is contained in a stackpanel because I'm planning to put a dropdown arrow in there as well.
You might try using Microsoft.Windows.Themes.ListBoxChrome instead of the Border; that's what the default template for TextBox uses:
<ControlTemplate TargetType="TextBoxBase"
xmlns:mwt="clr-namespace:Microsoft.Windows.Themes;assembly=PresentationFramework.Aero">
<mwt:ListBoxChrome Name="Bd" SnapsToDevicePixels="True">
<ScrollViewer Name="PART_ContentHost"
SnapsToDevicePixels="{TemplateBinding UIElement.SnapsToDevicePixels}" />
</mwt:ListBoxChrome>
<ControlTemplate.Triggers>
<Trigger Property="UIElement.IsEnabled" Value="False">
<Setter TargetName="Bd" Property="Panel.Background"
Value="{DynamicResource {x:Static SystemColors.ControlBrushKey}}" />
<Setter Property="TextElement.Foreground"
Value="{DynamicResource {x:Static SystemColors.ControlBrushKey}}"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
You should be able to use just ListBoxChrome instead of Border rather than re-templating TextBox to match the code you presented.
I was able to get it programatically with:
TextBox.BorderBrush = SystemColors.ControlDarkBrush;
Based on Nicholas Armstrong's answer, that solution is working for me:
<Style TargetType="{x:Type local:CustomTextBox}" BasedOn="{StaticResource {x:Type TextBox}}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type local:CustomTextBox}">
<mwt:ListBoxChrome x:Name="Bd" SnapsToDevicePixels="true" Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" RenderFocused="{TemplateBinding IsKeyboardFocusWithin}" RenderMouseOver="{TemplateBinding IsMouseOver}">
<ScrollViewer x:Name="PART_ContentHost" />
</mwt:ListBoxChrome>
<ControlTemplate.Triggers>
<Trigger Property="IsEnabled" Value="false">
<Setter Property="Background" TargetName="Bd" Value="{DynamicResource {x:Static SystemColors.ControlBrushKey}}"/>
<Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.GrayTextBrushKey}}"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
To anyone that is looking for a list of Brushes and what their colors will look like with different themes/OS:
Originally posted: http://blogs.msdn.com/b/wpf/archive/2010/11/30/systemcolors-reference.aspx.
It seems hackish, but I've had the best luck by creating a textbox (perhaps collapsed) and binding to its border brush.

Resources