Site Sponsors:
WPF Styles and Resource Dictionaries 
While XML might seem far too typeless, when using Visual Studio - by virtue of the XAML Compiler - nothing could be farther from the truth. Whilst we either drag-and-drop, or type, our applications together, Visual Studio validates the XML for us:

<Window x:Class="Assembo01.MainWindow" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="MainWindow" Height="350" Width="525">
<Grid>

</Grid>
</Window>

While we are free to pick-and-choose between the GUI and XML views, not only can hand-written XAML be quickly validated, but even seasoned XAML Developers can come to rely upon those in-context, pop-up helpers.

<Window x:Class="Assembo01.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="MainWindow" Height="350" Width="525">
<Grid Background="#FFFAE400">
<Button Content="Inspect" Height="23" HorizontalAlignment="Left" Margin="148,131,0,0" Name="Inspect" VerticalAlignment="Top" Width="75" />
<Label Content="Assembly:" Height="28" HorizontalAlignment="Left" Margin="27,25,0,0" Name="label1" VerticalAlignment="Top" />
<TextBlock Height="23" HorizontalAlignment="Right" Margin="0,30,112,0" Name="textBlock1" Text="TextBlock" VerticalAlignment="Top" Width="268" />
<Button Content="Button" Height="23" HorizontalAlignment="Left" Margin="428,40,0,0" Name="button1" VerticalAlignment="Top" Width="75" />
</Grid>
</Window>

Sadly, when using the VS Property Editor, folks can get carried away. How? When we choose to define too many proprieties per-element, when it comes time to change massive amount of properties, changing each element once again by hand can become a time consuming nightmare. --In WPF as in HTML then, rather than maintaining each element's properties by hand, why not use a library of styles, instead?

Window.Resources


By now everyone probably knows that adding <Window.Resources> can help us migrate things like the above custom-colors & other style elements over to XAML Styles. Conceptually similar to CSS, referring to self-defined styles (such as {StaticResource AssemboText} (below)) allows us to apply a common style across many visual elements:

<Window x:Class="Assembo01.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="Assembo - Assembly Inspector" Height="350" Width="525">
<Window.Resources>
<Style x:Key="Assembo" TargetType="Window">
<Setter Property="Background" Value="Yellow"></Setter>
<Setter Property="Foreground" Value="Blue"></Setter>
</Style>
<Style x:Key="AssemboControl" TargetType="Control">
<Setter Property="Background" Value="Yellow"></Setter>
<Setter Property="Foreground" Value="Blue"></Setter>
</Style>
<Style x:Key="AssemboText" TargetType="TextBlock">
<Setter Property="Background" Value="Yellow"></Setter>
<Setter Property="Foreground" Value="Blue"></Setter>
</Style>
</Window.Resources>
<Grid>
<Button Style="{StaticResource AssemboControl}" Content="Inspect" Height="23" HorizontalAlignment="Left" Margin="148,131,0,0" Name="Inspect" VerticalAlignment="Top" Width="75" />
<Label Style="{StaticResource AssemboControl}" Content="Assembly:" Height="28" HorizontalAlignment="Left" Margin="27,25,0,0" Name="label1" VerticalAlignment="Top" />
<TextBlock Style="{StaticResource AssemboText}" Height="23" HorizontalAlignment="Right" Margin="0,30,131,0" Name="textBlock1" Text="TextBlock" VerticalAlignment="Top" Width="268" />
<Button Style="{StaticResource AssemboControl}" Content="..." Height="23" HorizontalAlignment="Left" Margin="422,30,0,0" Name="browser" VerticalAlignment="Top" Width="59" />
</Grid>
</Window>


Resource Dictionaries


While adding styles can be done "inline" (as demonstrated above), many find that moving resources to a Resource Dictionary makes for a far easier-to-maintain experience.

<Window.Resources>
<ResourceDictionary x:Key="AssemboK">
<ResourceDictionary.MergedDictionaries>
<ResourceDictionary Source="AssemboDict.xaml"/>
</ResourceDictionary.MergedDictionaries>
</ResourceDictionary>
</Window.Resources>

Not only can Resource Dictionaries be dynamically swapped about much like traditional national-language resources, but many find that opening <Window.Resources> to insert a <ResourceDictionary> helps eliminate a lot of clutter.

Eliminating clutter helps keep an XML based UI easier to maintain:

<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<Style x:Key="AssemboW" TargetType="Window">
<Setter Property="Background" Value="Blue"></Setter>
<Setter Property="Foreground" Value="Yellow"></Setter>
</Style>
<Style x:Key="AssemboControl" TargetType="Control">
<Setter Property="Background" Value="Yellow"></Setter>
<Setter Property="Foreground" Value="Blue"></Setter>
</Style>
<Style x:Key="AssemboText" TargetType="TextBlock">
<Setter Property="Background" Value="Yellow"></Setter>
<Setter Property="Foreground" Value="Blue"></Setter>
</Style>
</ResourceDictionary>

Perhaps the best thing about using Resource Dictionaries is that our static references will remain the same. Indeed, once cut-and-pasted to a Resource Dictionary, no GUI elements need to be changed:

<Window x:Class="Assembo01.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="Assembo - Assembly Inspector" Height="350" Width="525">
<Window.Resources>
<ResourceDictionary x:Key="AssemboK">
<ResourceDictionary.MergedDictionaries>
<ResourceDictionary Source="AssemboDict.xaml"></ResourceDictionary>
</ResourceDictionary.MergedDictionaries>
</ResourceDictionary>
</Window.Resources>
<Grid>
<Button Style="{StaticResource AssemboControl}" Content="Inspect" Height="23" HorizontalAlignment="Left" Margin="148,131,0,0" Name="Inspect" VerticalAlignment="Top" Width="75" />
<Label Style="{StaticResource AssemboControl}" Content="Assembly:" Height="28" HorizontalAlignment="Left" Margin="27,25,0,0" Name="label1" VerticalAlignment="Top" />
<TextBlock Style="{StaticResource AssemboText}" Height="23" HorizontalAlignment="Right" Margin="0,30,131,0" Name="textBlock1" Text="TextBlock" VerticalAlignment="Top" Width="268" />
<Button Style="{StaticResource AssemboControl}" Content="..." Height="23" HorizontalAlignment="Left" Margin="422,30,0,0" Name="browser" VerticalAlignment="Top" Width="59" />
</Grid>
</Window>

The next time we put together an WPF Application, consider using Styles and Resource Dictionaries sooner, rather than later. -Partitioning our design across several well-named Documents not only makes our XAML easier to maintain, but aside from knowing what is going on inside the bowels of the Visual Studio, as long as we name our documents & styles wisely, there honestly is no down side to keeping our XML clutter-free and better organized.



[ view entry ] ( 2526 views )   |  permalink

<<First <Back | 76 | 77 | 78 | 79 | 80 | 81 | 82 | 83 | 84 | 85 | Next> Last>>