I have been working with WPF for a little while now, and have written a few articles on WPF (my articles) and have from time to time been asked various questions relating to WPF development.
One of the most common questions is how the heck does something like the following work:
<Window x:Class="WPF_Mysteries.Window2" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Title="Window2" Height="300" Width="300"> <StackPanel Orientation="Vertical"> <Button Background="Aqua" Margin="10" Width="Auto" Content="1" /> <Button Background="Green" Margin="10" Width="Auto" Content="2" /> <Button Background="Pink" Margin="10" Width="Auto" Content="3" /> </StackPanel> </Window>
People do understand that there is some sort of Panel with 3 buttons in that will look something like the following:
That’s not normally what people struggle with. Its the actual idea of where the StackPanel is put. Is it some sort of magic, how does the Window class know what to do with the StackPanel. For those of that have worked with WPF, we would know that Window.Content property is what would be used.
But this is a real issue for people trying to get up to speed to WPF, they honestly get lost.
Another areas seems to be how to create Styles/Templates in code (should you be unlucky enough to have to do that at all). Lets take a very small DataTemplate such as the following:
<!-- Lets have a DataTemplate for a Person--> <DataTemplate DataType="{x:Type local:Person}"> <StackPanel x:Name="spOuter" Orientation="Horizontal" Margin="10"> <Path Name="pathSelected" Fill="Orange" Stretch="Fill" Stroke="Orange" Width="15" Height="20" Data="M0,0 L 0,10 L 5,5" Visibility="Hidden"/> <StackPanel x:Name="spInner" Orientation="Horizontal"> <Label Content="{Binding FirstName}" Foreground="Black"/> <Ellipse Fill="Black" Height="5" Width="5" HorizontalAlignment="Center" VerticalAlignment="Center"/> <Label Content="{Binding LastName}" Foreground="Black"/> </StackPanel> </StackPanel> <DataTemplate.Triggers> <DataTrigger Binding= "{Binding RelativeSource= {RelativeSource Mode=FindAncestor, AncestorType={x:Type ListBoxItem}, AncestorLevel=1}, Path=IsSelected}" Value="True"> <Setter TargetName="pathSelected" Property="Visibility" Value="Visible" /> </DataTrigger> </DataTemplate.Triggers> </DataTemplate>
.csharpcode, .csharpcode pre
{
font-size: small;
color: black;
font-family: consolas, “Courier New”, courier, monospace;
background-color: #ffffff;
/*white-space: pre;*/
}
.csharpcode pre { margin: 0em; }
.csharpcode .rem { color: #008000; }
.csharpcode .kwrd { color: #0000ff; }
.csharpcode .str { color: #006080; }
.csharpcode .op { color: #0000c0; }
.csharpcode .preproc { color: #cc6633; }
.csharpcode .asp { background-color: #ffff00; }
.csharpcode .html { color: #800000; }
.csharpcode .attr { color: #ff0000; }
.csharpcode .alt
{
background-color: #f4f4f4;
width: 100%;
margin: 0em;
}
.csharpcode .lnum { color: #606060; }
Would you know how to do this in code. Perhaps? Perhaps not. Its not quite as simple as one might think.
To this end I have created a small article over at codeproject which talk about these 2 details in much more depth.
Here is the link to this article, should you find that you want to know more
http://www.codeproject.com/KB/WPF/codeVsXAML.aspx
.csharpcode, .csharpcode pre
{
font-size: small;
color: black;
font-family: consolas, “Courier New”, courier, monospace;
background-color: #ffffff;
/*white-space: pre;*/
}
.csharpcode pre { margin: 0em; }
.csharpcode .rem { color: #008000; }
.csharpcode .kwrd { color: #0000ff; }
.csharpcode .str { color: #006080; }
.csharpcode .op { color: #0000c0; }
.csharpcode .preproc { color: #cc6633; }
.csharpcode .asp { background-color: #ffff00; }
.csharpcode .html { color: #800000; }
.csharpcode .attr { color: #ff0000; }
.csharpcode .alt
{
background-color: #f4f4f4;
width: 100%;
margin: 0em;
}
.csharpcode .lnum { color: #606060; }
Sacha's Blog 