Understanding WPF Management Styles and Patterns

Question

I am relatively new to .NET / C # / WPF / XAML. I noticed that sometimes the controls seem to be “missing” the simplest properties that affect the style. As a result, the Style class should be used to change the appearance of the control. This is fine, but I'm on a Google / StackOverflow search to find the name of a specific attribute to change.

I am looking for a canonical and complete source of standard styles and controls for ALL .NET Framework WPF controls.

Before you answer too quickly, read on to understand my confusion.

On this page of the Microsoft DataGrid Styles and Templates document, I see a template for a DataGridCell :

 <!--Style and template for the DataGridCell.--> <Style TargetType="{x:Type DataGridCell}"> <Setter Property="Template"> <Setter.Value> <ControlTemplate TargetType="{x:Type DataGridCell}"> <Border x:Name="border" BorderBrush="Transparent" BorderThickness="1" Background="Transparent" SnapsToDevicePixels="True"> <VisualStateManager.VisualStateGroups> <VisualStateGroup x:Name="FocusStates"> <VisualState x:Name="Unfocused" /> <VisualState x:Name="Focused" /> </VisualStateGroup> <VisualStateGroup x:Name="CurrentStates"> <VisualState x:Name="Regular" /> <VisualState x:Name="Current"> <Storyboard> <ColorAnimationUsingKeyFrames Storyboard.TargetName="border" Storyboard.TargetProperty="(Border.BorderBrush). (SolidColorBrush.Color)"> <EasingColorKeyFrame KeyTime="0" Value="{StaticResource DatagridCurrentCellBorderColor}" /> </ColorAnimationUsingKeyFrames > </Storyboard> </VisualState> </VisualStateGroup> </VisualStateManager.VisualStateGroups> <ContentPresenter SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" /> </Border> </ControlTemplate> </Setter.Value> </Setter> </Style> 

This MSDN forum page shows the following Style / Trigger s / Setter s.

 <SolidColorBrush x:Key="{x:Static DataGrid.FocusBorderBrushKey}" Color="#FF000000"/> <Style TargetType="{x:Type DataGridCell}"> <Setter Property="Background" Value="Transparent"/> <Setter Property="BorderBrush" Value="Transparent"/> <Setter Property="BorderThickness" Value="1"/> <Setter Property="Template"> <Setter.Value> <ControlTemplate TargetType="{x:Type DataGridCell}"> <Border BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" SnapsToDevicePixels="True"> <ContentPresenter SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"/> </Border> </ControlTemplate> </Setter.Value> </Setter> <Style.Triggers> <Trigger Property="IsSelected" Value="True"> <Setter Property="Background" Value="{DynamicResource {x:Static SystemColors.HighlightBrushKey}}"/> <Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.HighlightTextBrushKey}}"/> <Setter Property="BorderBrush" Value="{DynamicResource {x:Static SystemColors.HighlightBrushKey}}"/> </Trigger> <Trigger Property="IsKeyboardFocusWithin" Value="True"> <Setter Property="BorderBrush" Value="{DynamicResource {x:Static DataGrid.FocusBorderBrushKey}}"/> </Trigger> </Style.Triggers> </Style> 

Why can't I see the Background , Foreground , BorderBrush in the first template?

I feel that the VisualState stuff is a link, but I cannot find the source.

Answer 1

Here you can download the default style dictionaries for WPF controls. Default WPF Themes . It can be very useful to know how the default style works if you need to restore a control.

Answer 2

Well, ContentPresenter is a control that displays your content. VisualState material simply holds links to all VisualState that the DataGridCell control may encounter. It puts some animation in the Property Border that wrapped the ContentPresenter.

You can override the whole style, I mean add another control to override the content and use TemplateBinding to get the external dependency property. For example, you can use TemplateBinding Background on the border with VisualState.

  <Style TargetType="{x:Type DataGridCell}"> <Setter Property="Template"> <Setter.Value> <ControlTemplate TargetType="{x:Type DataGridCell}"> <Border x:Name="border" BorderBrush=BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" SnapsToDevicePixels="True"> <VisualStateManager.VisualStateGroups> <VisualStateGroup x:Name="FocusStates"> <VisualState x:Name="Unfocused" /> <VisualState x:Name="Focused" /> </VisualStateGroup> <VisualStateGroup x:Name="CurrentStates"> <VisualState x:Name="Regular" /> <VisualState x:Name="Current"> <Storyboard> <ColorAnimationUsingKeyFrames Storyboard.TargetName="border" Storyboard.TargetProperty="(Border.BorderBrush). (SolidColorBrush.Color)"> <EasingColorKeyFrame KeyTime="0" Value="{StaticResource DatagridCurrentCellBorderColor}" /> </ColorAnimationUsingKeyFrames > </Storyboard> </VisualState> </VisualStateGroup> </VisualStateManager.VisualStateGroups> <ContentPresenter SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" /> </Border> </ControlTemplate> </Setter.Value> </Setter> 

It's fine. But if you do not specify them for the style, it means that it will revert to the default color and background, etc. That were defined for the control.

This is the property of each dependencyProperty property to return to the default value when the new value does not override it.

You can read my WPF tutorials to get more of these concepts: http://www.abhisheksur.com/2010/12/wpf-tutorial.html