#111 – The Visual Tree

October 31, 2010 3 Comments

A visual tree in WPF breaks down the logical tree into lower-level visual elements.  Where elements in a logical tree are typically controls, the visual tree contains all of the underlying visual elements that make up the control.  All elements in a visual tree derive from Visual or Visual3D.

As an example, the visual tree for the following XAML:

 <Window x:Class="WpfApplication4.MainWindow"
      xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml>
     <StackPanel>
         <Button Content="Click Me" />
         <TextBox />
         <ListBox>
             <ListBoxItem Content="Barley"/>
             <ListBoxItem Content="Oats"/>
         </ListBox>
     </StackPanel>
 </Window>

looks like this:

Window
    Border
        AdornerDecorator
            ContentPresenter
                StackPanel
                    Button
                        ButtonChrome
                            ContentPresenter
                                TextBlock
                    TextBox
                        ListBoxChrome
                            ScrollViewer
                                Grid
                                    Rectangle
                                    ScrollContentPresenter
                                        TextBoxView
                                            TextBoxLineDrawingVisual
                                        AdornerLayer
                                    Scrollbar
                                    Scrollbar
                    ListBox
                        Border
                            ScrollViewer
                                Grid
                                    Rectangle
                                    ScrollContentPresenter
                                        ItemsPresenter
                                            VirtualizingStackPanel
                                                ListBoxItem
                                                    Border
                                                        ContentPresenter
                                                            TextBlock
                                                ListBoxItem
                                                    Border
                                                        ContentPresenter
                                                            TextBlock
                                        AdornerLayer
                                    ScrollBar
                                    Scrollbar
            AdornerLayer
Advertisement

Filed under Basics Tagged with ,

#110 – An Application for Viewing a WPF Logical Tree

October 30, 2010 1 Comment

Here’s a little WPF application that can load .xaml files and then display the underlying logical tree.  It uses the LogicalTreeHelper.GetChildren method to recursively descend through the logical tree and display it in a TreeView control.

You can download an executable version of the application from: DisplayWpfTrees.zip

You can find a more detailed explanation of the application at: An Application to Let You View WPF Logical Trees

You can find full source code at the WPFLogicalTree project on Codeplex.

Filed under Basics Tagged with , ,

#109 – Navigating the Logical Tree in Code

October 29, 2010 2 Comments

You can use the LogicalTreeHelper.GetChildren method to traverse a logical tree and enumerate all of the objects in the tree.

Every element in a logical tree is a DependencyObject, so you pass a top-level object that derives from DependencyObject into the GetChildren method.  The method returns a collection of children of that object.

 // Enumerate each immediate child of main window.  (Does NOT descend down tree)
 foreach (Object obj in LogicalTreeHelper.GetChildren(mainWindow as DependencyObject))
     Debug.WriteLine(obj.ToString());

You could extend this example and descend down the logical tree by calling GetChildren on the children returned from the first call.

Filed under Basics Tagged with , ,

#108 – The Logical Tree

October 28, 2010 4 Comments

In WPF, the logical tree is the hierarchy of elements that make up your user interface.  If your user interface is defined in XAML, the logical tree is the set of elements from the XAML, organized into a tree based on their parent/child relationships.

The logical tree can also be thought of as a model that describes the relationships between objects at runtime.  Knowing the logical tree can be helpful in understanding:

  • Resource lookup
  • Property inheritance
  • Event routing

As an example, the logical tree for the following XAML:

 <Window x:Class="WpfApplication4.MainWindow"
      xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
     Title="A window.." Height="350" Width="525">
     <StackPanel>
         <Button Content="Click Me" Height="23" HorizontalAlignment="Left" Width="75" Click="button1_Click" />
         <TextBox />
         <ListBox>
             <ListBoxItem Content="Barley"/>
             <ListBoxItem Content="Oats"/>
         </ListBox>
     </StackPanel>
 </Window>

looks like this:

Filed under Basics Tagged with , ,

#107 – Markup Extensions in the XAML Namespace

October 27, 2010 1 Comment

Some markup extensions are part of the extensions to XAML added for WPF (e.g. StaticResource).  But some markup extensions are part of the XAML vocabulary itself, typically prefixed with x:.  They are listed below:

  • x:Array – Allows including an array of objects in XAML
  • x:Null – A null value
  • x:Reference – A reference to another element defined in XAML  (XAML 2009)
  • x:Static – References a static element in code, e.g. value of a static property
  • x:Type – Specifies a .NET type

Filed under XAML Tagged with , ,

#106 – Set Property Value to Point to Another Object

October 26, 2010 Leave a comment

There are times when you’d like to set a property value on one element to point to an instance of another element and do this in XAML, rather than in code.

An example of this is the CommandTarget property, which is used to indicate the control that should be the target of the command being initiated from a control.

For example, if you have a Button that executes a Paste command and you want the contents pasted in a TextBox, you’d set the button’s CommandTarget property to point to the TextBox.

This is done in XAML using the Binding markup extension, setting its ElementName property to point to the desired control.

 <Button Content="Paste" Command="ApplicationCommands.Paste"
     CommandTarget="{Binding ElementName=myTextBox}" />
 <TextBox Name="myTextBox"/>

XAML 2009 allows using the x:Reference markup extension, but this is not supported in compiled XAML in WPF.

 <Button Content="Paste" Command="ApplicationCommands.Paste"
     CommandTarget="{x:Reference myTextBox}" />
 <TextBox Name="myTextBox"/>

Filed under XAML Tagged with , , ,

#105 – Viewing BAML as XAML

October 25, 2010 1 Comment

BAML is simply a compiled binary version of a XAML fragment.  The XAML elements are converted into equivalent binary objects.  This means that translating back from BAML to XAML is straightforward.

The simplest way to view a particular .baml file as XAML is to use the .NET Reflector tool.  After you download the tool, download the BamlViewer add-in for Reflector.  You’ll have to install the add-in (View | Add-Ins | Add).

Once installed, you just open the executable that contains the BAML, stored as a resource.  Then open the BAML Viewer from the Tools menu.

The BAML Viewer window will open and you can then navigate to the .baml that you want to examine (found embedded as a resource).  When you select the .baml file in the upper pane, the equivalent XAML will be displayed in the lower pane.

Filed under XAML Tagged with , , ,

#104 – Using FindName to Find Named Children of a Control

October 24, 2010 1 Comment

When you create a XAML file for WPF in the normal Visual Studio environment, any control for which you provide a Name property will automatically get a backing variable defined that will let you reference the instance of that control directly from your code-behind.

But there are times when you don’t already have a reference variable pointing to a particular control, but only to the root element that exists at the top of the XAML file.  Instead of trying to navigate all the way down from the root element to the child that you’re looking for, you can use the FindName method.

In the example below, our root element is a Window and we want to get a reference to a child Label control that exists as a descendent of the window instance.

 Label myLabel = (Label)this.FindName("label1");

We pass in the name of the control, which we set in the XAML with the Name property.

Filed under XAML Tagged with ,

#103 – XAML 2009

October 23, 2010 1 Comment

.NET 4.0 introduced an update to the supported XAML vocabulary–the latest version supported is now XAML 2009.  WPF and Silverlight do not yet support XAML 2009 (.NET 4 / Visual Studio 2010), but still support XAML 2006.

With respect to Visual Studio 2010, therefore, the features introduced in XAML 2009 can only be used in loose XAML files.

XAML 2009 introduces the following new features, beyond what was present in XAML 2006:

  • x:Arguments allows calling non-default constructor (one with parameters)
  • x:FactoryMethod allows calling a static method to construct an object rather than using a constructor
  • x:Reference markup extension makes it easier to set a property value to point to an instance of another object
  • x:TypeArguments allows use of generics
  • Built-in support in x: namespace for standard CLR primitive data types (e.g. string, int, float, etc).  Avoids adding a separate XML namespace.

See also: XAML 2009 Language Features

Filed under XAML Tagged with ,

#102 – Using XamlReader to Load a Loose XAML File

October 22, 2010 3 Comments

When you use Visual Studio to create the main Window, App and Page XAML files that make up a WPF application, code is automatically generated to cause the XAML (BAML) files to be read at runtime.

You can also use the XamlReader class to read loose XAML files–ones that have not be converted to BAML and stored as a resource in your application.

The static XamlReader.Load method will read a XAML file, instantiate all objects defined in the file, and return a reference to the top-level (root) element from the file.  (XamlReader is in the System.Windows.Markup namespace).

Assuming that you have a XAML filed named Stuff.xaml and it has a root element that is a StackPanel, you could load the file as follows:

 StackPanel sp1;
 using (FileStream fs = new FileStream("Stuff.xaml", FileMode.Open))
 {
     sp1 = (StackPanel)XamlReader.Load(fs);
 }

Filed under XAML Tagged with ,

← Older posts