#706 – Dragging User Interface Elements Between Applications

You can drag user interface elements between WPF applications using drag-and-drop.  To do this, you read the XAML for the portion of the logical tree that you want to drag and specify XAML as your data format.

The example below shows how to drag a StackPanel and everything in it from one application to another.

On the drag side, we use a XamlWriter object to store all of the XAML into a string.

        private void StackPanel_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)
        {
            string xaml = XamlWriter.Save(e.Source);
            DataObject data = new DataObject(DataFormats.Xaml, xaml);

            DragDrop.DoDragDrop((DependencyObject)e.Source, data, DragDropEffects.Copy);
        }

On the drop side, we use a XamlReader to load the data back into the application.  In this example, we set the StackPanel as the main content for the Window that we’re dragging it to.

        private void Window_Drop(object sender, DragEventArgs e)
        {
            string xaml = (string)e.Data.GetData(DataFormats.Xaml);
            this.Content = XamlReader.Load(new XmlTextReader(new StringReader(xaml)));
        }

706-001
706-002
706-003

#538 – XAML End Tags Are Automatically Added as Needed in Blend

When you first add an element to your user interface in Blend using one of the buttons on the tools panel, the corresponding XAML element does not typically hand an end tag.

For example, in the image below, we have a StackPanel element without an end tag (<StackPanel/>), rather than paired with an end tag (<StackPanel></StackPanel>).

If you now add a child element to the StackPanel using one of the buttons on the tools panel, Blend will automatically add the required end tag.

If you later delete the Button using the Objects and Timeline panel, removing all child elements from the StackPanel, the end tag is automatically removed.

#287 – Adding Controls to a Window in Blend by Editing XAML

You can add a WPF control to a window by using the design view editor in Blend.  You add the control by dragging and dropping it onto a design surface.

You can also add a control by editing the XAML directly while in the design view editor in Blend.

To open the design view editor for a particular window, double-click the associated .xaml file in the Projects window.

The design view editor will open, with the design surface showing and the XAML hidden.

Change the editor to be XAML-only or split screen by clicking on the appropriate icon in the upper right corner of the tab that shows the design surface.

 

If you choose Split, the XAML editor will appear in the lower half of the screen.

You can then enter or edit XAML directly in the XAML editor.

#286 – Adding Controls to a Window in Visual Studio by Editing XAML

You can add a WPF control to a window by using the design view editor in Visual Studio.  You add the control by dragging and dropping it onto a design surface.

You can also add a control by editing the XAML directly while in the design view editor in Visual Studio.

To open the design view editor for a particular window, double-click the associated .xaml file in the Solution Explorer.

The editor will show up as a split screen, with the design surface on the top and the XAML that defines the window contents below.

You can add a control by manually entering XAML in the lower window.  Here’s the XAML for a simple button.

As you enter XAML in the lower half of the editor, the design surface in the top half of the window will update to reflect the changes to the XAML.

#157 – You Can Set Standard CLR Properties from XAML

If you create a custom class, you can instantiate instances of that class from XAML by adding the object to a resource dictionary.

    <Window.Resources>
        <m:Person x:Key="perBill" FirstName="William" LastName="Shakespeare" />
    </Window.Resources>

You might wonder whether your properties have to be WPF dependency properties in order to set their values from XAML.  It turns out that the properties on the custom class do not have to be dependency properties in order to be set from XAML.  They can be standard CLR properties.

    public class Person
    {
        public string FirstName { get; set; }
        public string LastName { get; set; }

        public Person()
        {
        }
    }

#110 – An Application for Viewing a WPF Logical Tree

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.

#108 – The Logical Tree

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: