Recreating Simple Windows Forms in WPF and XAML (Part 2)
Submitted by smartyP on Fri, 07/11/2008 - 20:45One of the more obvious issues with the initial post of the dialog XAML code last night was all the hardcoded colors, so this post will be a quick example of how to use defined colors and gradients instead so that when you want to change the colors you don't have to go looking through all the XAML to find where the colors are to modify.
Here is a snippet of the original XAML, specifically the blue gradient header across the top of the dialog and the white text on it:
<!-- Top Panel (icon, description, help, etc.) -->
<StackPanel Orientation="Horizontal" Width="500" DockPanel.Dock="Top">
<StackPanel.Background>
<LinearGradientBrush StartPoint="0,0" EndPoint="0,1">
<GradientStop Color="Navy" Offset="0" />
<GradientStop Color="MidnightBlue" Offset="1" />
</LinearGradientBrush>
</StackPanel.Background>
..
<TextBlock Width="358" VerticalAlignment="Stretch" Padding="4,4,4,0"
TextWrapping="Wrap" Foreground="White">
..
</StackPanel>
The easiest thing to do right off the bat is to just take the LinearGradientBrush definition and move it up to a Resources section you create for the Page (or Window, etc.) - since we are working with a Page we will create a Page.Resources section right under the main Page definition:
<Page.Resources>
..
<!-- header panel styles -->
<LinearGradientBrush x:Key="headerPanelFillBrush" StartPoint="0,0" EndPoint="0,1">
<GradientStop Color="Navy" Offset="0" />
<GradientStop Color="MidnightBlue" Offset="1" />
</LinearGradientBrush>
<SolidColorBrush x:Key="headerTextColor" Color="White" />
..
</Page.Resources>
There are two brushes defined in that snippet - the 'headerPanelFillBrush' which is the blue gradient fill in the header, and the 'headerTextColor' which is the white color used for the text - these brushes will be referenced by the value we set for their 'x:Key' tag.
(click 'read more' to read the full article..)