WPF

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
WPF

A Tree’y Spidery Type WPF Diagram Control

I recently started a new job where I am employed as a WPF developer. When I arrived the guys there gave me a brief that was to make a cool app, and they really liked the look and feel of the FamilyShow exemplar by Vertigo. Which I also love, that and Tangerine by Infragistics are my favourite WPF demos.

What I liked in both where the fluid movements and the diagramming approach used in the FamilyShow exemplar particularly. The guys where I just started working asked me how hard it would be to create something like the diagramming component seen in the FamilyShow exemplar.

So without further ado I contacted my favourite partner in weird WPF briefs, Mr Fredrik Bornander, who I love working with on these stranger ideas. We seem to manage to do a reasonable job together, at least I think anyway.

Here is a screenshot of what we managed to achieve just to wet your appetite:

 

SpiderControl

I have created a full codeproject article to detail the full implementation of this control, which is available using the codeproject article link, A Spider type control tree thingy for WPF

But here is brief list of what it does, hope it helps someone out:

  • Uses a specialized ScrollViewer which allows the user to use the mouse to create a friction enabled drag operation (this is pretty cool actually)
  • Only shows 3 layers of the tree Maximum to keep it clean
  • Current node selected is centered within available area
  • Node collapse expand buttons automatically enabled dependant on number of children the current node has

Enjoy

WPF

Binding And Using Localized Enums In WPF

The other day I had to use some enums in WPF, where I wanted them to appear in a ComboBox to allow the user to select one of them.

Imagine that I had enum values like PizzaWithPepperoni, BaconDoubleCheeseBurger etc etc. I managed to get this bound in WPF fairly easily, but I wanted a way of showing some friendly values whilst still maintaining the correct value behind the scenes when a new selection was made.

So I set about doing this, and came up with a solution that used the EnumMemberAttribute, and then submitted this article to codeproject.

The original article was up for about 2 minutes and Josh Smith, said "ah what about Localization". Damn….luckily another codeproject great, Uwe Keim, posted some code to fix this. I also got a fabulous email from Infragistics great, Andrew Smith, who outlined an alternative approach, which makes use of a MarkupExtension.

I will not post any code/further explanation here as its all talked about in quite a bit of detail within the article.

Here are the relevant links

My article

http://www.codeproject.com/KB/WPF/FriendlyEnums.aspx

Andrews Smith alternative approach, which  is also a good (great) read

http://agsmith.wordpress.com/2008/09/19/accessing-enum-members-in-xaml/