Styling WECPOF applications and ViewModels

This post is about how to get the cool things of WPF to merge with the cool things of ECO.

We need to get the XAML styles into our declarative application

We need to declare and use style names on specific places in our UI where it makes sense to us.

We need to inject FormatStrings into our declarative DataBindings.

We need all of this at a granular level so that we will not be limited by the tool; for example we need to be able to control a single column in a grid separately, and also control its header differently than its cells.

All of this is done with XAML ResourceDictionaries. You can do your own with blend or notepad or any tool you like.

If you add your dictionaries to the Config folder of ECO, we will pick them up in the style Menu:

image

image

When you click a Style in WECPOF-runtime we load that Dictionary and merge it with the Application.

What can you change?

image

Code Snippet
  1. <!– WECPOFWinBackgroundBrush The background of a single window –>
  2. <LinearGradientBrush x:Key="WECPOFWinBackgroundBrush" EndPoint="0,1" StartPoint="0,0">
  3.     <GradientStop Color="#eae" Offset="0.0" />
  4.     <GradientStop Color="#777" Offset="1.0" />
  5. </LinearGradientBrush>
  6.  
  7.  
  8. <!– WECPOFWinContentBackgroundBrush The background of content plate of a single window –>
  9. <LinearGradientBrush x:Key="WECPOFWinContentBackgroundBrush" EndPoint="0,1" StartPoint="0,0">
  10.     <GradientStop Color="#aea" Offset="0.0" />
  11.     <GradientStop Color="#777" Offset="1.0" />
  12. </LinearGradientBrush>
  13.  
  14. <!– WECPOFWindowEnvironmentBackgroundBrush The background of the containing window , the master window –>
  15. <SolidColorBrush x:Key="WECPOFWindowEnvironmentBackgroundBrush"  Color="Coral">
  16. </SolidColorBrush>
  17.  
  18. <!–   WECPOFWinFrameBrush  –>
  19.  
  20.   WECPOFWINHeaderStyle  The style used for the window header–>
  21. <Style x:Key="WECPOFWINHeaderStyle" TargetType="{x:Type TextBlock}">
  22.     <Setter Property="Foreground" Value="Snow"></Setter>
  23.     <Setter Property="Margin" Value="2,0,2,0"></Setter>
  24.     <Setter Property="FontSize" Value="20"/>
  25.     <Setter Property="FontWeight" Value="ExtraBold"></Setter>
  26. </Style>
  27.  
  28.  
  29. <!–  WECPOFMenuStyle  The style used for Main Menu–>
  30. <Style x:Key="WECPOFMenuStyle" TargetType="{x:Type Menu}">
  31.         <Setter Property="Background" Value="{StaticResource MenuBackground}"/>
  32. …CUT FOR CLARITY
  33.         </Setter>
  34.     </Style>
  35.  
  36.  
  37.     <!–  WECPOFMenuItemStyle  The style used for MenuItems–>
  38. <Style x:Key="WECPOFMenuItemStyle" TargetType="{x:Type MenuItem}">
  39.     <Setter Property="Background" Value="Black"></Setter>
  40.     <Setter Property="Foreground" Value="White"></Setter>
  41. </Style>

What can you do more?

When you set the StyleRef on ViewModelColumns you can define a corresponding Style in XAML.

image

Since the ViewModelColumn often spawns two controls; the TextBlock and in this case a TextBox we have defined the naming convention of STYLENAME.COMPONENTTYPE.

This enables you to define Style1 for all control types you use:

Code Snippet
  1. <!– Style for the TextBlock part of a ViewModelCOlumn that has Style1 in the StyleRef–>
  2. <Style x:Key="Style1.TextBlock" >
  3.     <Setter Property="TextBlock.FontSize" Value="36"/>
  4. </Style>
  5.  
  6. <!– Style for the TextBox part of a ViewModelCOlumn that has Style1 in the StyleRef–>
  7. <Style x:Key="Style1.TextBox"  TargetType="{x:Type TextBox}">
  8.     <Setter Property="FontSize" Value="36"/>
  9. </Style>

There is more

In WPF you can set a StringFormat on a Binding to aid in common transformations like “show only 2 decimals”, “present the DateTime in text format”, “This value is really percent” etc.

This need too is addressed with a naming convention in the XAML resource dictionary:

Code Snippet
  1.  
  2. <!– Format string can be defined per Style and is used in the Binding – use this to format dates and doubles etc –>
  3. <sys:String x:Key="StyleNumber2Dec.StringFormat">{0:n}</sys:String>
  4. <sys:String x:Key="FormatDate.StringFormat">ddd d MMM</sys:String>

You use a StyleRef in the ViewModelColumn, and create a string entry in the resource dictionary with a key of STYLENAME.StringFormat. We apply this when setting up the Binding for the components in your view.

And we need Grid precision too

A DataGrid has Styles that apply to the whole Grid, but also you can apply individual styles per GridColumn:

Code Snippet
  1. <!– DataGrid column offers two styles, HeaderStyle and CellStyle –>
  2. <!– This is how you define the HeaderStyle–>
  3. <Style x:Key="StyleOnColumn.HeaderStyle.DataGridTextColumn" TargetType="{x:Type prim:DataGridColumnHeader}">
  4.     <Setter Property="Height" Value="30"/>
  5.     <Setter Property="Background" Value="Green"/>
  6.     <Setter Property="Foreground" Value="Black"/>
  7.     <Setter Property="FontSize" Value="28" />
  8. </Style>
  9.  
  10.  
  11. <!– DataGrid column offers two styles, HeaderStyle and CellStyle –>
  12. <!– This is how you define the CellStyle–>
  13. <Style x:Key="StyleOnColumn.CellStyle.DataGridTextColumn" TargetType="{x:Type tk:DataGridCell}">
  14.     <Setter Property="Height" Value="30"/>
  15.     <Setter Property="Background" Value="Yellow"/>
  16.     <Setter Property="Foreground" Value="Black"/>
  17.     <Setter Property="FontSize" Value="18" />
  18. </Style>
  19.  
  20.  
  21. <!– To tell a grid to use a default style on all ColumnHeaders–>
  22. <Style x:Key="StyleOnColumn.ColumnHeaderStyle.DataGrid" TargetType="{x:Type tkPrimitives:DataGridColumnHeader}">
  23.     <Setter Property="Height" Value="20"/>
  24.     <Setter Property="Background" Value="Yellow"/>
  25.     <Setter Property="Foreground" Value="Green"/>
  26.     <Setter Property="FontSize" Value="16" />
  27. </Style>
  28.  
  29. <!– To tell a grid to use a RowStyle –>
  30. <Style x:Key="StyleOnColumn.RowStyle.DataGrid" TargetType="{x:Type tk:DataGridRow}">
  31.     <Setter Property="Height" Value="20"/>
  32.     <Setter Property="Foreground" Value="Green"/>
  33.     <Setter Property="FontSize" Value="16" />
  34. </Style>
  35.  
  36. <!– To tell a grid to use a Default CellStyle –>
  37. <Style x:Key="StyleOnColumn.CellStyle.DataGrid" TargetType="{x:Type tk:DataGridCell}">
  38.     <Setter Property="Height" Value="20"/>
  39.     <Setter Property="Background" Value="Transparent"/>
  40.     <Setter Property="Foreground" Value="Blue"/>
  41.     <Setter Property="FontSize" Value="12" />
  42. </Style>

And the result

The result is that you can be very flexible in how you want to convey information:

image

image

 

image

Help us out please!

Create your own styles and send them to us. We will use your name on the style so you will be a famous XAML designer before you know it!

This entry was posted in Silverlight, ViewModel, WECPOF, Xaml. Bookmark the permalink.

Leave a Reply

Your email address will not be published. Required fields are marked *

*