WPF Label Design - wpf

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>

Related

How to disable IsMouseOver trigger from WPF GridViewColumnHeader but have e.g. resize?

I can do this with ControlTemplate that does not have trigger for IsMouseOver. However ability to resize columns and the actual space between the columns disappears with the definition below. So how to disable IsMouseOver trigger but keep all other functionality?
<Style TargetType="{x:Type GridViewColumnHeader}" >
<Setter Property="FontWeight" Value="{StaticResource Theme.DataGrid.ColumnHeader.FontWeight}"></Setter>
<Setter Property="BorderBrush" Value="Transparent"></Setter>
<Setter Property="BorderThickness" Value="0"></Setter>
<Setter Property="Background" Value="{StaticResource Theme.DataGrid.ColumnHeader.Background}"></Setter>
<Setter Property="Foreground" Value="{StaticResource Theme.DataGrid.ColumnHeader.Foreground}"></Setter>
<Setter Property="HorizontalContentAlignment" Value="Left"></Setter>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type GridViewColumnHeader}">
<Border x:Name="Border"
BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}"
Background="{TemplateBinding Background}">
<ContentPresenter Margin="{TemplateBinding Padding}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
VerticalAlignment="{TemplateBinding VerticalContentAlignment}" />
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
EDIT: In Suppress mouse hover effect on GridViewColumn the accepted answer seems to address this problem.
Even though there was similar questions with answers, i post a version that solves my problem. It probably has some issues but it might give somebody an idea how to solve their problems.
<Style TargetType="{x:Type GridViewColumnHeader}" >
<Setter Property="FontWeight" Value="{StaticResource Theme.DataGrid.ColumnHeader.FontWeight}"></Setter>
<Setter Property="BorderBrush" Value="Transparent"></Setter>
<Setter Property="BorderThickness" Value="0"></Setter>
<Setter Property="Background" Value="{StaticResource Theme.DataGrid.ColumnHeader.Background}"></Setter>
<Setter Property="Foreground" Value="{StaticResource Theme.DataGrid.ColumnHeader.Foreground}"></Setter>
<Setter Property="HorizontalContentAlignment" Value="Left"></Setter>
<Setter Property="Padding" Value="{StaticResource Theme.DataGrid.Cell.Padding}"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type GridViewColumnHeader}">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="1" />
</Grid.ColumnDefinitions>
<Border Grid.Column="0" x:Name="Border" BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}"
Background="{TemplateBinding Background}">
<ContentPresenter Margin="{TemplateBinding Padding}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
VerticalAlignment="{TemplateBinding VerticalContentAlignment}" />
</Border>
<Thumb Grid.Column="1" x:Name="PART_HeaderGripper" HorizontalAlignment="Right" Margin="-8,0,0,0"
Style="{DynamicResource GridView.ColumnHeader.Gripper.Style}" />
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>

Resize Columns of Styled WPF DataGrid

I have DataGrid with custom style, I'm having trouble in re-sizing columns because it only works when the cursor is EXACTLY between the two columns
Here's the part of style that sets the DataGridColumnHeader
<Style TargetType="{x:Type DataGridColumnHeader}">
<Setter Property="VerticalContentAlignment" Value="Center"/>
<Setter Property="HorizontalContentAlignment" Value="Center"/>
<Setter Property="Foreground" Value="White"/>
<Setter Property="FontFamily" Value="Segoue UI"/>
<Setter Property="FontSize" Value="14"/>
<Setter Property="Height" Value="40"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type DataGridColumnHeader}">
<Grid>
<Border BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="#6b6b6b">
<ContentPresenter HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" RecognizesAccessKey="True" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
</Border>
<Thumb x:Name="PART_RightHeaderGripper" HorizontalAlignment="Right" Style="{StaticResource ColumnHeaderGripperStyle}"/>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
increase the Thumb's Width like this :
<Thumb x:Name="PART_RightHeaderGripper" Width="100" HorizontalAlignment="Right" Style="{StaticResource ColumnHeaderGripperStyle}"/>
You could change it in run time too. here is the example
grd.Columns[1].Width =new DataGridLength(60);
mention the index

Remove strange behaviour from wpf button mouse-over

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>

Change binding value in custom template trigger

How I can change binded property in custom template?
Button with Path Fill which is binded to Foreground of button:
<Button Style="{DynamicResource CustomButtonStyle}"Foreground="White" >
<Path Data="PATH_DATA" Stretch="Uniform" Fill="{Binding Foreground, RelativeSource={RelativeSource Mode=FindAncestor, AncestorType=Button}}" ></Path>
</Button>
Here is custom style with override template:
<Style x:Key="CustomButtonStyle" TargetType="{x:Type Button}">
<Setter Property="Background" Value="{x:Null}"/>
<Setter Property="BorderBrush" Value="White"/>
<Setter Property="BorderThickness" Value="0"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Button}">
<Border x:Name="border" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" SnapsToDevicePixels="True">
<ContentPresenter x:Name="contentPresenter" ContentTemplate="{TemplateBinding ContentTemplate}" Content="{TemplateBinding Content}" ContentStringFormat="{TemplateBinding ContentStringFormat}" Focusable="False" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" RecognizesAccessKey="True" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}" />
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Foreground" Value="#d5113f"/>
</Trigger>
<Trigger Property="IsPressed" Value="True">
<Setter Property="Foreground" Value="#d5113f"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
But changing Foregroud in trigger
<Setter Property="Foreground" Value="#d5113f"/>
will do nothing
Because you set Foreground to a fixed value, according to Dependency Property Setting Precedence List, your style trigger will not override this value. You need to bring Foreground set into Style as another setter like this:
<Style x:Key="CustomButtonStyle" TargetType="{x:Type Button}">
<Setter Property="Foreground" Value="White"/>
...
</Style>

Why does my customized WPF RadioButton not look right?

I am replacing the style of a radio button with that of a check box. I know you are going to say that is a bad idea, but it really needs to work this way. Anyway, using Expression Blend I was able to extract the style of the CheckBox and apply it to a RadioButton. My only problem is now that when it draws there is no border. Can anyone tell me why? Here is the code (THIS HAS BEEN UPDATED SINCE THE ORIGINAL POST):
<Window x:Class="WpfApplication1.Window1"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:Microsoft_Windows_Themes="clr-namespace:Microsoft.Windows.Themes;assembly=PresentationFramework.Royale"
Title="Customized RadioButton" Width="496" ShowInTaskbar="True" ResizeMode="NoResize" Height="105">
<Window.Resources>
<SolidColorBrush x:Key="CheckBoxStroke" Color="#8E8F8F"/>
<Style x:Key="RadioButtonCheckBoxStyle" TargetType="{x:Type RadioButton}">
<Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}"/>
<Setter Property="Background" Value="#F4F4F4"/>
<Setter Property="BorderBrush" Value="{StaticResource CheckBoxStroke}"/>
<Setter Property="BorderThickness" Value="1"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type RadioButton}">
<Border BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}">
<BulletDecorator Background="Transparent">
<BulletDecorator.Bullet>
<Microsoft_Windows_Themes:BulletChrome Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}" IsChecked="{TemplateBinding IsChecked}" IsRound="false" RenderMouseOver="{TemplateBinding IsMouseOver}" RenderPressed="{TemplateBinding IsPressed}"/>
</BulletDecorator.Bullet>
<ContentPresenter HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}" RecognizesAccessKey="True"/>
</BulletDecorator>
</Border>
<ControlTemplate.Triggers>
<Trigger Property="HasContent" Value="true">
<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>
</Window.Resources>
<StackPanel>
<CheckBox Height="16" Name="checkBox1" Width="120">CheckBox</CheckBox>
<RadioButton Height="16" Name="radioButton1" Width="120">RadioButton</RadioButton>
<RadioButton Content="RadioButton with CheckBox Style" Margin="4" Style="{DynamicResource RadioButtonCheckBoxStyle}" FocusVisualStyle="{x:Null}" GroupName="Header" IsChecked="False" IsEnabled="True" HorizontalAlignment="Center" />
</StackPanel>
alt text http://img260.imageshack.us/img260/65/33733770.jpg
To see how this displays, please paste it into Visual Studio. You will see that the Customized RadioButton doesn't look correct. It is missing the regular 3D effects that a CheckBox normally has. I don't care about any content (I won't be having any) I just want it to look like a normal CheckBox.
Since you're overriding the template, you need to attach to the class's properties yourself.
Declare a border in the template in the following fashion:
<Border BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}"/>
Also, you've got a small bug. You've defined the setter for "BorderBrush" multiple times in your style.
Edit: After seeing your image, here's your real issue:
<Microsoft_Windows_Themes:BulletChrome Background="{TemplateBinding Background}" BorderThickness="{TemplateBinding BorderThickness}" BorderBrush="{TemplateBinding BorderBrush}" IsChecked="{TemplateBinding IsChecked}" IsRound="false" RenderMouseOver="{TemplateBinding IsMouseOver}" RenderPressed="{TemplateBinding IsPressed}"/>
You were missing the BorderThickness in your bullet. It was effectively setting your thickness to 0, which is why you didn't see anything.
An image might help here, but where do you expect the border to be? Are you expecting a border around the entire content?? The only border there should be according to the template you're using is around where the check mark will be. If you want a border around all the content then you need to add a Border into the ControlTemplate like so:
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type RadioButton}">
<Border BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}">
<BulletDecorator Background="Transparent">
<BulletDecorator.Bullet>
<Microsoft_Windows_Themes:BulletChrome Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}" IsChecked="{TemplateBinding IsChecked}" IsRound="false" RenderMouseOver="{TemplateBinding IsMouseOver}" RenderPressed="{TemplateBinding IsPressed}"/>
</BulletDecorator.Bullet>
<ContentPresenter HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" VerticalAlignment="{TemplateBinding VerticalContentAlignme nt}" RecognizesAccessKey="True"/>
</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>
Side note: You have set FocusVisualStyle="{x:Null}" on the Checkbox itself, but your template changes this property in its HasContent property trigger. If you really don't want a FocusVisualStyle you should remove that setter.

Resources