Why define a Template inside a Style in xaml, WPF? - wpf

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.

Related

Button Style problems

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>

How to remove hover style for ListView rows?

I'm using Modern UI, and I have a ListView containing a Gridview. When I hover over or select a row, there is a background color applied to the row. How can I remove this style?
<ListView ... >
<ListView.Resources>
<SolidColorBrush x:Key="ItemBackgroundHover" Color="Transparent" />
<Style TargetType="ListViewItem">
<Style.Triggers>
<Trigger Property="Validation.HasError" Value="True">
<Setter Property="Background" Value="Red" />
</Trigger>
</Style.Triggers>
</Style>
</ListView.Resources>
<ListView.View>
<GridView>
<GridViewColumn Header="Action">
<GridViewColumn.CellTemplate>
<DataTemplate>
...
In your ListView.Resources, override the ItemBackgroundHover brush resource:
<SolidColorBrush x:Key="ItemBackgroundHover" Color="Transparent" />
Do the same for ItemBackgroundSelected if you don't want the selected item to be highlighted.
You may also need to override the foreground brushes if you support the Modern Light theme. You can see the brushes that get applied here.
This won't work if you replace Modern UI's ListViewItem style with your own, but you could base yours off of theirs, and it should work:
<Style TargetType="ListViewItem"
BasedOn="{StaticResource {x:Type ListViewItem}}">
Also, based on your screenshot, you probably don't need to be using a ListView, as you appaerntly don't care about selecting items. You could use a simple ItemsControl.
To remove the button chrome, you can create a style like this:
<Style x:Key="GlyphButton" TargetType="Button">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Button">
<Border>
<ContentPresenter x:Name="ContentSite" />
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsPressed" Value="True">
<Setter TargetName="ContentSite"
Property="Margin"
Value="1,1,-1,-1" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
The older answers here didn't work for me. I was forced to override the ListView.ItemContainerStyle:
<Style TargetType="{x:Type ListViewItem}">
<Setter Property="Background" Value="Transparent" />
<Setter Property="BorderBrush" Value="Transparent"/>
<Setter Property="VerticalContentAlignment" Value="Center"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type ListViewItem}">
<Grid Background="{TemplateBinding Background}">
<Border Name="Selection" Visibility="Collapsed" />
<!-- This is used when GridView is put inside the ListView -->
<GridViewRowPresenter Grid.RowSpan="2"
Margin="{TemplateBinding Padding}"
HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"/>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
I found and modified the code from here which was mentioned in the other answer by Mike Strobel. The majority of changes I made was removing the trigger section.

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>

How can I apply the same style for textbox and combobox in WPF?

I have made a BaseStyle, which looks like this:
<Style x:Key="BaseStyle" TargetType="{x:Type Control}">
<Setter Property="KeyboardNavigation.TabNavigation" Value="None" />
<Setter Property="AllowDrop" Value="true" />
<Setter Property="Background" Value="Transparent"></Setter>
<Setter Property="HorizontalContentAlignment" Value="Stretch" />
<Setter Property="VerticalContentAlignment" Value="Stretch" />
<Setter Property="FontFamily" Value="Segoe UI" />
<Setter Property="FontSize" Value="12" />
<Setter Property="Padding" Value="8,5,3,3" />
<Setter Property="BorderThickness" Value="0" />
<Setter Property="SnapsToDevicePixels" Value="True" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Control}">
<Grid>
<Border x:Name="BorderBase" Background="White" BorderThickness="1,1,1.4,1.4" BorderBrush="Silver" CornerRadius="4" />
<Label x:Name="TextPrompt" Content="{TemplateBinding Tag}" Visibility="Collapsed" Focusable="False" Foreground="Silver"></Label>
<ScrollViewer Margin="0" x:Name="PART_ContentHost" Foreground="{DynamicResource OutsideFontColor}" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"/>
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="IsFocused" Value="True">
<Setter Property="BorderThickness" TargetName="BorderBase" Value="1,1,2.4,2.4"></Setter>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
<Setter Property="Validation.ErrorTemplate">
<Setter.Value>
<ControlTemplate x:Name="InspectorErrorTemplate">
<StackPanel Orientation="Vertical">
<Border BorderBrush="Red" BorderThickness="1" CornerRadius="4">
<AdornedElementPlaceholder Name="adornerPlaceholder"/>
</Border>
</StackPanel>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
And have used it this way to apply it to a textbox, which works fine:
<Style TargetType="{x:Type TextBox}" BasedOn="{StaticResource BaseStyle}" />
Now I thought I can simply use the same style at a textbox of a combobox. So I thought I have to add something in this part:
<ControlTemplate x:Key="ComboBoxTextBox" TargetType="{x:Type TextBox}">
<Border x:Name="PART_ContentHost" Focusable="False" Background="{TemplateBinding Background}" />
<ControlTemplate.Triggers>
</ControlTemplate.Triggers>
</ControlTemplate>
However, I cannot add something like BasedOn="{StaticResource BaseStyle}" in the ControlTemplate to make e.g. the textbox to get a different border when it receives the focus (see IsFocused Trigger in the BaseStyle), or a red curved corner in case the validation is triggered... What am I doing wrong?
Hi you are working with different border color for different text-box that is the only problem here. There are several other options but I feel the following option is good to go.
You can create your own UserControl keeping a TextBox inside it. You can add a new DependencyProperty- BorderColor property in your UserControl. So that according to the BorderColor property value internally you can change the color of the border. So here you don't have to worry about multiple Style or any inheritance.
Isn't it?
The template for a TextBox is fundamentally different than the the template for a ComboBox. So you'll have to have different templates.
You can have one base style to define the shared properties (like Padding, FontFamily, etc.) without defining the Template property. Then make two more styles: one with TargetType set to TextBox; and the other with TargetType set to ComboBox. Each of these styles will be based on your base style and have additional definition for the template (and other properties that are not shared between the two controls).

Naming Control Contained Within Custom WPF GroupBox

I've got a custom GroupBox control that essentially does nothing more than apply a style
<GroupBox x:Class="SharedResources.Controls.StyledGroupBox"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<GroupBox.Style>
<Style TargetType="{x:Type GroupBox}">
<Setter Property="BorderBrush" Value="#D5DFE5"/>
<Setter Property="BorderThickness" Value="1"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type GroupBox}">
...
<ContentPresenter Grid.ColumnSpan="2" Grid.Column="1" Grid.Row="2"
Margin="{TemplateBinding Padding}"
SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"/>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</GroupBox.Style>
</GroupBox>
The problem is that when I come to use this, if I set x:Name property of the content of the StyledGroupBox, then I get the following error:
Cannot set Name attribute value 'name' on element ''. '' is under the scope of element 'StyledGroupBox', which already had a name registered when it was defined in another scope
Any ideas how I can resolve this?
Don't use a UserControl just to define a Style (I'd love to know where this practice comes from because I've seen an explosion of it recently). Instead, create the Style as a resource in its own right and apply it to GroupBoxes as desired:
<Style TargetType="{x:Type GroupBox}">
<Setter Property="BorderBrush" Value="#D5DFE5"/>
<Setter Property="BorderThickness" Value="1"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type GroupBox}">...
<ContentPresenter Grid.ColumnSpan="2" Grid.Column="1" Grid.Row="2" Margin="{TemplateBinding Padding}" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"/>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
...
<GroupBox>
Will inherit the above style.
</GroupBox>
If anyone is trying to make this work (for something more/other than styles), see: How to create a WPF UserControl with NAMED content

Resources