A Few WPF Mysteries

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:

 

Stack1

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; }

Advertisements

2 thoughts on “A Few WPF Mysteries

  1. […] Barber unravels A Few WPF Mysteries and How to create Styles in code/and magical […]

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: