Element is already the child of another element.

[Efthymios]

Hello,
I have the following RadLIstPicker in a page of my application:

<telerikInput:RadListPicker x:Name="GPSAccuracyListPicker" Margin="0,15,0,0" VerticalAlignment="Stretch" Header="GPS Accuraccy:" IsExpanded="False">
    <ListBoxItem x:Name="VeryLowListBoxItem" Content="Very Low"/>
    <ListBoxItem x:Name="LowListBoxItem" Content="Low"/>
    <ListBoxItem x:Name="MediumListBoxItem" Content="Medium"/>
    <ListBoxItem x:Name="HighListBoxItem" Content="High"/>
    <ListBoxItem x:Name="VeryHighListBoxItem" Content="Very High"/>
    <ListBoxItem x:Name="ExtremeListBoxItem" Content="Extreme"/>
</telerikInput:RadListPicker>

When I run the application, I get the following message:

System.InvalidOperationException was unhandled
  Message=Element is already the child of another element.
  StackTrace:
       at MS.Internal.XcpImports.CheckHResult(UInt32 hr)
       at MS.Internal.XcpImports.SetValue(IManagedPeerBase obj, DependencyProperty property, DependencyObject doh)
       at MS.Internal.XcpImports.SetValue(IManagedPeerBase doh, DependencyProperty property, Object obj)
       at System.Windows.DependencyObject.SetObjectValueToCore(DependencyProperty dp, Object value)
       at System.Windows.DependencyObject.SetEffectiveValue(DependencyProperty property, EffectiveValueEntry& newEntry, Object newValue)
       at System.Windows.DependencyObject.UpdateEffectiveValue(DependencyProperty property, EffectiveValueEntry oldEntry, EffectiveValueEntry& newEntry, ValueOperation operation)
       at System.Windows.DependencyObject.SetValueInternal(DependencyProperty dp, Object value, Boolean allowReadOnlySet)
       at System.Windows.DependencyObject.SetValueInternal(DependencyProperty dp, Object value)
       at System.Windows.DependencyObject.SetValue(DependencyProperty dp, Object value)
       at System.Windows.Controls.ContentControl.set_Content(Object value)
       at Telerik.Windows.Controls.RadListPicker.SetSingleSelectionModeSummary(Object content)
       at Telerik.Windows.Controls.RadListPicker.SyncPopupLabelContent()
       at Telerik.Windows.Controls.RadListPicker.UpdateExpandCollapseMode()
       at Telerik.Windows.Controls.RadListPicker.UpdateInitialState()
       at Telerik.Windows.Controls.RadListPicker.OnApplyTemplate()
       at System.Windows.FrameworkElement.OnApplyTemplate(IntPtr nativeTarget)
       at MS.Internal.XcpImports.MeasureNative(IntPtr element, Single inWidth, Single inHeight)
       at MS.Internal.XcpImports.UIElement_Measure(UIElement element, Size availableSize)
       at System.Windows.UIElement.Measure(Size availableSize)
       at System.Windows.Controls.ScrollContentPresenter.MeasureOverride(Size constraint)
       at System.Windows.FrameworkElement.MeasureOverride(IntPtr nativeTarget, Double inWidth, Double inHeight, Double& outWidth, Double& outHeight)
       at MS.Internal.XcpImports.MeasureNative(IntPtr element, Single inWidth, Single inHeight)
       at MS.Internal.XcpImports.UIElement_Measure(UIElement element, Size availableSize)
       at System.Windows.UIElement.Measure(Size availableSize)
       at System.Windows.Controls.ScrollViewer.MeasureOverride(Size constraint)
       at System.Windows.FrameworkElement.MeasureOverride(IntPtr nativeTarget, Double inWidth, Double inHeight, Double& outWidth, Double& outHeight)
       at MS.Internal.XcpImports.MeasureOverrideNative(IntPtr element, Single inWidth, Single inHeight, Single& outWidth, Single& outHeight)
       at MS.Internal.XcpImports.FrameworkElement_MeasureOverride(FrameworkElement element, Size availableSize)
       at System.Windows.FrameworkElement.MeasureOverride(Size availableSize)
       at Microsoft.Phone.Controls.PivotItem.MeasureOverride(Size availableSize)
       at System.Windows.FrameworkElement.MeasureOverride(IntPtr nativeTarget, Double inWidth, Double inHeight, Double& outWidth, Double& outHeight)

But when I change the InlineModeThreshold property and enter a value larger that the items of my list box, everything seems working fine.

Is this any kind of a component bug or I do something wrong?

Thank you very much.

Efthymios Kalyviotis

[Lancelot]

Hi Efthymios,

This may be due to the fact that you don't have an ItemTemplate for the popup. Here is an example of a popup template:

<telerikInput:RadListPicker.PopupItemTemplate>
      <DataTemplate>
                 <StackPanel Orientation="Horizontal" Margin="0, 27, 0, 24">
                        <TextBlock Text="Bind your item name here" Margin="16 -8 0 0"/>
                 </StackPanel>
         </DataTemplate>
</telerikInput:RadListPicker.PopupItemTemplate>

You have setup the popup threshold lower than the amount of items. The control will then assume you want it to popup because there are more items than slots in the drop down. If you do not have a template to handle the items, you'll get an exception. Here is a snippet from the documentation.

The Inline mode of the RadListPicker control is only active when the count of the items in it is equal or less than the value of its InlineModeTreshold property. The default value of this property is 5, but you can change it to a desired value. When the count of the item is bigger than the InlineModeTreshold value, the RadListPicker control runs in Popup mode. More about it can be found here. 

You'll need to go to this link and learn about Popup mode.

Good Luck,
Lancelot

[Kiril Stanoev]

Hi Efthymios,

There are couple of ways to workaround the issue you've encountered. One is, as Lance explained, to set a PopupItemTemplate. If you don't require a popup mode, then all you have to do is set the InlineModeTreshold property to a number greater than the number of items you want to display (ex. InlineModeTreshold="10").

Give it a try and let me know how it works.

Regards,
Kiril Stanoev
the Telerik team

[Efthymios]

Hi Kiril & Lancelot,
thank you very much for your prompt replies. The Telerik team has very good support and really enjoy communication with them.

Unfortunately, there was not any luck with these answers.
I send you the full XAML file in case you want to investigate it.

<phone:PhoneApplicationPage
    x:Class="RadControlsWindowsPhoneApp1.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:phone="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone"
    xmlns:shell="clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:telerikInput="clr-namespace:Telerik.Windows.Controls;assembly=Telerik.Windows.Controls.Input"
    mc:Ignorable="d" d:DesignWidth="480" d:DesignHeight="768"
    FontFamily="{StaticResource PhoneFontFamilyNormal}"
    FontSize="{StaticResource PhoneFontSizeNormal}"
    Foreground="{StaticResource PhoneForegroundBrush}"
    SupportedOrientations="Portrait"  Orientation="Portrait"
    shell:SystemTray.IsVisible="True">

    <!--LayoutRoot is the root grid where all page content is placed-->
    <Grid x:Name="LayoutRoot" Background="Transparent">
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="*"/>
        </Grid.RowDefinitions>

        <!--TitlePanel contains the name of the application and page title-->
        <StackPanel x:Name="TitlePanel" Grid.Row="0" Margin="12,17,0,28">
            <TextBlock x:Name="ApplicationTitle" Text="MY APPLICATION" Style="{StaticResource PhoneTextNormalStyle}"/>
            <TextBlock x:Name="PageTitle" Text="page name" Margin="9,-7,0,0" Style="{StaticResource PhoneTextTitle1Style}"/>
        </StackPanel>

        <!--ContentPanel - place additional content here-->
        <Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
            <telerikInput:RadListPicker x:Name="GPSAccuracyListPicker" Margin="0,15,0,0" VerticalAlignment="Stretch" Header="GPS Accuraccy:" IsExpanded="False" InlineModeThreshold="5">
                <telerikInput:RadListPicker.PopupItemTemplate>
                    <DataTemplate>
                        <StackPanel Orientation="Horizontal" Margin="0, 27, 0, 24">
                            <TextBlock Text="Bind your item name here" Margin="16 -8 0 0"/>
                        </StackPanel>
                    </DataTemplate>
                </telerikInput:RadListPicker.PopupItemTemplate>
                <ListBoxItem x:Name="VeryLowListBoxItem" Content="Very Low"/>
                <ListBoxItem x:Name="LowListBoxItem" Content="Low"/>
                <ListBoxItem x:Name="MediumListBoxItem" Content="Medium"/>
                <ListBoxItem x:Name="HighListBoxItem" Content="High"/>
                <ListBoxItem x:Name="VeryHighListBoxItem" Content="Very High"/>
                <ListBoxItem x:Name="ExtremeListBoxItem" Content="Extreme"/>
            </telerikInput:RadListPicker>
        </Grid>
    </Grid>

</phone:PhoneApplicationPage>

I am really a dummy in C# and XAML, so it may be my mistake (not quite sure if PopupItemTemplate should be inside RadListPicker but seems to work).
In case you need, I work with the following version:

RadControls for Windows Phone [phone]

Inline mode works perfectly, but popup mode doesn't (the one I am interested since the list has a lot of elements).

Thank you very much.

Efthymios Kalyviotis

[Lancelot]

hi Efthymios,

You're almost there :) The main problem you're having is you are trying to use the hard coded XAML values in the popup template. If you are going to use the Popup Template you'll need to use a list object. I gone ahead and written you a sample program that demonstrates three different ways to use ListPicker. Each one is in it's own pivot and I've left you comments in the code to follow along with what I did.

If you want to see the entire application, give me a location I can upload the project to for you (for instance DropBox) because we can't add project files here.

Here is the MainPage.xaml.cs

<controls:Pivot Title="MY APPLICATION">
      <controls:PivotItem x:Name="ListPickerOne" Header="Inline">
                <Grid>
                    <telerikInput:RadListPicker x:Name="GPSAccuracyListPicker"
                                                Margin="0"
                                                VerticalAlignment="Top"
                                                Header="GPS Accuraccy:"
                                                IsExpanded="False"
                                                InlineModeThreshold="8">
                        <!-- You can't popluate the popup item template from a hard coded XAML values like this list.
                        See the second ListPicker below.-->
                        <ListBoxItem x:Name="VeryLowListBoxItem" Content="Very Low"/>
                        <ListBoxItem x:Name="LowListBoxItem" Content="Low"/>
                        <ListBoxItem x:Name="MediumListBoxItem" Content="Medium"/>
                        <ListBoxItem x:Name="HighListBoxItem" Content="High"/>
                        <ListBoxItem x:Name="VeryHighListBoxItem" Content="Very High"/>
                        <ListBoxItem x:Name="ExtremeListBoxItem" Content="Extreme"/>
                    </telerikInput:RadListPicker>

                </Grid>
      </controls:PivotItem>
      <controls:PivotItem x:Name="ListPickerTwo" Header="PopUp">
                <Grid>
                    <telerikInput:RadListPicker x:Name="RadPopupListPicker"
                                                InlineModeThreshold="4"
                                                Margin="0" Header="PopUp Listpicker example">
                        <!-- Here is the item template to hold the pop up values. You'll need a list object to
                        hold the string values for the template. I took the same values and placed them into a List
                        in the code behind. See the constructor in MainPage.xaml.cs-->
                        <telerikInput:RadListPicker.PopupItemTemplate>
                            <DataTemplate>
                                <StackPanel Orientation="Horizontal" Margin="0, 27, 0, 24">
                                    <TextBlock Text="{Binding}" Margin="16 -8 0 0"/>
                                </StackPanel>
                            </DataTemplate>
                        </telerikInput:RadListPicker.PopupItemTemplate>
                    </telerikInput:RadListPicker>
                </Grid>
      </controls:PivotItem>
      <controls:PivotItem x:Name="MvvmPicker" Header="VM Binding">
        <Grid>
            <telerikInput:RadListPicker x:Name="MvvMPopupListPicker"
                                        ItemsSource="{Binding Items}"
                                        InlineModeThreshold="4"
                                        Margin="0"
                                        Header="PopUp Listpicker example">
                 <!-- Here I use the ViewModel to provide the ListPicker with values.
                   It's nice and simple, just Bind the ItemsSource and then bind the value to the text property in the textblock-->
                <telerikInput:RadListPicker.PopupItemTemplate>
                    <DataTemplate>
                        <StackPanel Orientation="Horizontal" Margin="0, 27, 0, 24">
                            <TextBlock Text="{Binding LineOne}" Margin="16 -8 0 0"/>
                        </StackPanel>
                    </DataTemplate>
                </telerikInput:RadListPicker.PopupItemTemplate>
            </telerikInput:RadListPicker>
        </Grid>
      </controls:PivotItem>
      <!--Pivot item one-->
      <controls:PivotItem Header="first">
        <!--Double line list with text wrapping-->
        <ListBox x:Name="FirstListBox" Margin="0,0,-12,0" ItemsSource="{Binding Items}">
          <ListBox.ItemTemplate>
            <DataTemplate>
              <StackPanel Margin="0,0,0,17" Width="432">
                <TextBlock Text="{Binding LineOne}" TextWrapping="Wrap" Style="{StaticResource PhoneTextExtraLargeStyle}"/>
                <TextBlock Text="{Binding LineTwo}" TextWrapping="Wrap" Margin="12,-6,12,0" Style="{StaticResource PhoneTextSubtleStyle}"/>
              </StackPanel>
            </DataTemplate>
          </ListBox.ItemTemplate>
        </ListBox>
      </controls:PivotItem>
    </controls:Pivot>

And here is the MainPage.xaml.cs

public partial class MainPage : PhoneApplicationPage
    {
        // Constructor
        public MainPage()
        {
            InitializeComponent();

            // This code is to set the datacontext to the ViewModel
            DataContext = App.ViewModel;
            this.Loaded += new RoutedEventHandler(MainPage_Loaded);

            //Here I create a list of strings that will get set as the ItemsSource of the RadListPicker. See how I've taken the same values you've hard coded in the xaml and hard coded them here.
            List<string> MyListPickerItemsToGetBoundToPopUp = new List<string>() { "VeryLowListBoxItem", "LowListBoxItem", "MediumListBoxItem", "HighListBoxItem", "VeryHighListBoxItem", "ExtremeListBoxItem" };

            //Now I take that list and attach it to the itemssource of the second RadListPicker
            this.RadPopupListPicker.ItemsSource = MyListPickerItemsToGetBoundToPopUp;
        }

        void MainPage_Loaded(object sender, RoutedEventArgs e)
        {
            if (!App.ViewModel.IsDataLoaded)
            {
                App.ViewModel.LoadData();
            }
        }

This should clear things up for you and get you up & running in no time, good luck!
Lancelot