How to use ContentTemplate to avoid "Specified element is already the logical child of another element. Disconnect it first" error

Question

I know this question has been asked countless number of times, but I don't understand half of what their problem is or how to follow their example. The one I did find her name Rachel, posted a blog about it but her explanation was too brief..

http://rachel53461.wordpress.com/2011/07/17/wpf-error-specified-element-is-already-the-logical-child-of-another-element-disconnect-it-first/

Here was what I had before trying to follow here example:

<Window x:Class="Graph.View.MainView.Main"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:lc="http://schemas.devexpress.com/winfx/2008/xaml/layoutcontrol"
    Title="Main" Height="350" Width="525" 

    xmlns:dxdo="http://schemas.devexpress.com/winfx/2008/xaml/docking">

<DockPanel LastChildFill="True">
       <DockPanel>
        <Label  Content="{Binding ScreenContent}" Grid.Row="1" HorizontalContentAlignment="Stretch" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" VerticalContentAlignment="Stretch"/>
        </DockPanel>
    </DockPanel>

Because ScreenContent is having a logical parent I can't reuse it. After trying to follow Rachel's example:

<Window x:Class="Graph.View.MainView.Main"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:lc="http://schemas.devexpress.com/winfx/2008/xaml/layoutcontrol"
        Title="Main" Height="350" Width="525" 
       >
    <Window.Resources>
        <Style     TargetType="{x:Type ContentControl}">
            <Setter Property="ContentTemplate"> 
                <Setter.Value>
                    <DataTemplate>
                        <DockPanel>
                            <Label   Content="{Binding ScreenContent}" Grid.Row="1" HorizontalContentAlignment="Stretch" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" VerticalContentAlignment="Stretch"/>
                        </DockPanel>
                    </DataTemplate>
                </Setter.Value>
            </Setter>
        </Style>
    </Window.Resources>

    <DockPanel LastChildFill="True">            
        <Label Style="{StaticResource MyCustomContentControl}"/>
    </DockPanel>
</Window>

How can I fix it? It isn't showing anything at all... Thanks.

Answer 1

Please answer me what is ScreenContent property ... is it string? or some GUI element?

If it is a String then the follow the soltuion below ...

Also there are a few concepts that you must understand...

1. Label inside Label is a bad UI design.
2. ContentControls such as Label, Button etc. follow a particular XAML pattern when we want to set their ControlTemplate and DataTemplate.
3. In your case you want to assign a data context based property ScreenContent. So the DataTemplate way is correct.

However this will not flow to the Label inside your DataTemplate as the outer Label (to which you have applied the Style to) isnt set on its own Content property.

So basically a ContentControl.ContentTemplate works ONLY if a not null Content is set on that ContentControl and inside that DataTemplate (ContentTemplate) the Content works as the DataContext for all the items!

Notice the {Binding} expression below... It is self explanatory!!

    <DockPanel LastChildFill="True">
        <DockPanel.Resources>
            <Style x:Key="MyCustomContentControl"
                   TargetType="{x:Type ContentControl}">
                    <Setter Property="ContentTemplate">
                        <Setter.Value>
                            <DataTemplate>
                                <DockPanel>
                                    <ContentPresenter
                                             Content="{Binding}"
                                             HorizontalAlignment="Stretch"
                                             VerticalAlignment="Stretch"/>
                                </DockPanel>
                            </DataTemplate>
                        </Setter.Value>
                    </Setter>
                </Style>
            </DockPanel.Resources>
        <Label Style="{StaticResource MyCustomContentControl}"
               Content="{Binding ScreenContent}" 
               HorizontalContentAlignment="Stretch"
               VerticalContentAlignment="Stretch">
        </Label>
    </DockPanel>

If it is a UserControl follow the solution below...

Are you assigning it only once (to the given Label)? or you are attempting to assign it as content of such various elements?

If its assigned ONLY once, then the solution above should work.

But if you are planing to assign it as a Content of multiple target elements then you need to follow the Model / ViewModel approach.

1. All your GUI elements should be hosted in XAML.
2. Code Behind should not deal with GUI elements.
3. Code behind works only on the soft copy of the GUI elements i.e. a data specific to fields that GUI (UserControl) represents.

E.g.

Example 1...

Suppose you have a TitleControl which is like a bold, italic WPF Label showing the text of a title. Your DataContext has such TitleControl object held which has some title text set to it.

Then in the ViewModel approach, you should create an instance of TitleControlViewModel as part of your DataContext... something like this...

YourDataContext.MyTitleControlViewModel = new TitleControlViewModel();

Inside the TitleControlViewModel class we should have a public property called MyTitle of type string.

YourDataContext.MyTitleControlViewModel.MyTitle = "My Title";

Now your template specific XAML should look like this...

    <DataTemplate x:Key="MyTitleControlDataTemplate">
         <local:TitleControl Title="{Binding MyTitle}"/>
    </DataTemplate>

and your host panel should look like this...

    <ContentControl ToolTip="Title is shown here..." 
                    Content="{Binding MyTitleControlViewModel}"
                    Contenttemplate="{StatiocResource MyTitleControlDataTemplate}"/>

    <ContentControl ToolTip="Same title control is shown here also !!!"
                    Content="{Binding MyTitleControlViewModel}"
                    Contenttemplate="{StatiocResource MyTitleControlDataTemplate}"/>

So this way same title control seems to be hosted on the tow content controls above. But if you think really, there are two different instances of TitleControl who are merely representing same MyTitleControlViewModel thus looking like a same control!

Google for how Data Templates, MVVM fit together.

Answer 2

In case you want to reuse ScreenContent (although its already a child of some other element) then you will have to first clone it and use the cloned control.

You can clone a control by first serializing it using XamlWriter and then create a new control by deserializing it using XamlReader, something like this -

string screenContentXml = XamlWriter.Save(ScreenContent );

//Load it into a new object:
StringReader stringReader = new StringReader(screenContentXml );
XmlReader xmlReader = XmlReader.Create(stringReader);
UIElement screenContentClone = (UIElement)XamlReader.Load(xmlReader);

use this screenContentClone in your window.

But, you may find yourself applying workarounds to make it work as there are some limitations in using XamlWriter.Save (like with bindings) - Serialization Limitations of XamlWriter.Save

Here are some other approaches for serialization -

An XAML Serializer Preserving Bindings

XamlWriter and Bindings Serialization

Although your design doesn't look correct as AngelWPF mentiond and you should try and re-design your window, and you might not require doing all this.

Answer 3

UserControls (or any other type of UI control) do not belong in the ViewModel

It would be far better to have an object that you are binding to, and to use a DataTemplate to tell WPF how to draw that object using your UserControl

For example, if you had

ScreenModel ScreenContent { get; set; }

where ScreenModel is a custom class that looked something like this

public class ScreenModel
{
    public string Name { get; set; }
    ...
}

Then you would bind to it using something like this:

<DockPanel LastChildFill="True">
    <DockPanel>
        <ContentControl Content="{Binding ScreenContent}" Grid.Row="1" HorizontalContentAlignment="Stretch" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" VerticalContentAlignment="Stretch"/>
    </DockPanel>
</DockPanel>

And use a DataTemplate to tell WPF how to draw the ScreenModel class

<DataTemplate DataType="{x:Type models:ScreenModel}">
    <views:ScreenContentUserControl />
</DataTemplate>

or

<DataTemplate DataType="{x:Type models:ScreenModel}">
    <Label Content="{Binding Name}" />
</DataTemplate>

Because you are using a Template, WPF will create a new copy of the UserControl whenever its needed, and won't try to use the same UserControl in multiple spots.

Your error is occurring because you are adding the same UserControl (ScreenContent) to the VisualTree more than once through the Content="{Binding ScreenContent}" binding.

Even doing something like switching tabs will probably cause this error because you will be unloading all the UI objects by switching away from the tab, then loading new UI objects by switching back, however your ScreenContent user control already has it's parent set to an old object that no longer exists.