Issue when adding user controls programmatically

[Stephan]

Hi Telerik Team,

I found an issue with the RadWrapPanel that occurs when adding a bunch of user control instances. The exception that is thrown is System.ArgumentException: Value does not fall within the expected range. I googled a little bit and found one other stackoverflow post where the same issue occurs. The suggestion is to remove all x:Name attributes from the user control. Unfortunately, I can't do this in my project because of dependencies to properties (or at least I don't know how ;) ).

Here is my code that adds some items to the wrap panel:

var rnd = new Random();

for (int i = 0; i < 100; i++)
{
    var tag = new Tag()
    {
        TagName = rnd.Next(0, 1000).ToString(),
        HorizontalAlignment = HorizontalAlignment.Left
    };
    System.Diagnostics.Debug.WriteLine("Creating tag: " + tag.TagName);
    RadWrapPanelIssue.Children.Add(tag);
    System.Diagnostics.Debug.WriteLine("Tag successful created");
}

The class Tag is a user control

<UserControl x:Name="UserControlTag"
    x:Class="WrapPanelIssue.Tag"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d"
    FontFamily="{StaticResource PhoneFontFamilyNormal}"
    FontSize="{StaticResource PhoneFontSizeNormal}"
    Foreground="{StaticResource PhoneForegroundBrush}"
    HorizontalAlignment="Left"
    VerticalAlignment="Top"
    d:DesignHeight="60" d:DesignWidth="140" Width="{Binding Width, ElementName=LayoutRoot}" Height="60">

    <UserControl.Resources>
        <Style x:Key="ButtonInfoBoxStyle" TargetType="Button">
            <Setter Property="Background" Value="Transparent"/>
            <Setter Property="BorderBrush" Value="{StaticResource PhoneForegroundBrush}"/>
            <Setter Property="Foreground" Value="Black"/>
            <Setter Property="BorderThickness" Value="{StaticResource PhoneBorderThickness}"/>
            <Setter Property="FontFamily" Value="{StaticResource PhoneFontFamilySemiBold}"/>
            <Setter Property="FontSize" Value="{StaticResource PhoneFontSizeMediumLarge}"/>
            <Setter Property="Padding" Value="3,3,3,3"/>
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="Button">
                        <Grid Background="Transparent">
                            <VisualStateManager.VisualStateGroups>
                                <VisualStateGroup x:Name="CommonStates">
                                    <VisualState x:Name="Normal"/>
                                    <VisualState x:Name="MouseOver"/>
                                    <VisualState x:Name="Pressed">
                                        <Storyboard>
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="ContentContainer">
                                                <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource PhoneBackgroundBrush}"/>
                                            </ObjectAnimationUsingKeyFrames>
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Background" Storyboard.TargetName="ButtonBackground">
                                                <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource PhoneForegroundBrush}"/>
                                            </ObjectAnimationUsingKeyFrames>
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="BorderBrush" Storyboard.TargetName="ButtonBackground">
                                                <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource PhoneForegroundBrush}"/>
                                            </ObjectAnimationUsingKeyFrames>
                                        </Storyboard>
                                    </VisualState>
                                    <VisualState x:Name="Disabled">
                                        <Storyboard>
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="ContentContainer">
                                                <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource PhoneDisabledBrush}"/>
                                            </ObjectAnimationUsingKeyFrames>
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="BorderBrush" Storyboard.TargetName="ButtonBackground">
                                                <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource PhoneDisabledBrush}"/>
                                            </ObjectAnimationUsingKeyFrames>
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Background" Storyboard.TargetName="ButtonBackground">
                                                <DiscreteObjectKeyFrame KeyTime="0" Value="Transparent"/>
                                            </ObjectAnimationUsingKeyFrames>
                                        </Storyboard>
                                    </VisualState>
                                </VisualStateGroup>
                            </VisualStateManager.VisualStateGroups>
                            <Border x:Name="ButtonBackground" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" CornerRadius="0">
                                <ContentControl x:Name="ContentContainer" ContentTemplate="{TemplateBinding ContentTemplate}" Content="{TemplateBinding Content}" Foreground="{TemplateBinding Foreground}" HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}" Padding="{TemplateBinding Padding}" VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"/>
                            </Border>
                        </Grid>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>

    </UserControl.Resources>

    <Grid x:Name="LayoutRoot" Margin="10" HorizontalAlignment="Center">
        <Grid.Background>
            <SolidColorBrush Color="Transparent"/>
        </Grid.Background>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="Auto"/>
            <ColumnDefinition Width="Auto"/>
            <ColumnDefinition Width="Auto"/>
        </Grid.ColumnDefinitions>

        <!-- grid column 0 -->
        <Polygon x:Name="PolygonLeft" Points="20,0 0,20 20,40" StrokeThickness="0" Fill="#959595" Grid.Column="0"/>

        <!-- grid column 1 -->
        <Rectangle x:Name="RectangleMiddle" Grid.Column="1" Fill="#959595"/>
        <TextBlock x:Name="TextBlockTagName" HorizontalAlignment="Center" Grid.Column="1" Text="{Binding TagName, ElementName=UserControlTag}" FontSize="26" Foreground="Black" TextAlignment="Center" Margin="5,0,5,0"/>

        <!-- grid column 2 -->
        <Rectangle x:Name="RectangleRight" Grid.Column="2" Fill="#959595"/>
        <Button x:Name="ButtonTagRemove" BorderThickness="0" Style="{StaticResource ButtonInfoBoxStyle}" Width="32" Height="32" Grid.Column="2" Margin="5" Visibility="{Binding RemoveButtonVisibility, ElementName=UserControlTag}">
            <Button.Background>
                <ImageBrush ImageSource="/Icons/appbar.cancel.rest.black.png" Stretch="None"></ImageBrush>
            </Button.Background>
            <Button.Foreground>
                <ImageBrush ImageSource="/Icons/appbar.cancel.rest.black.png" Stretch="None"></ImageBrush>
            </Button.Foreground>
        </Button>
        <Button x:Name="ButtonTagDelete" BorderThickness="0" Style="{StaticResource ButtonInfoBoxStyle}" Width="32" Height="32" Grid.Column="2" Margin="5" Visibility="{Binding DeleteButtonVisibility, ElementName=UserControlTag}">
            <Button.Background>
                <ImageBrush ImageSource="/Icons/appbar.delete.rest.black.png" Stretch="None"></ImageBrush>
            </Button.Background>
            <Button.Foreground>
                <ImageBrush ImageSource="/Icons/appbar.delete.rest.black.png" Stretch="None"></ImageBrush>
            </Button.Foreground>
        </Button>
    </Grid>
</UserControl>

As you can see I need the x:Name for the user control in order to bind the properties to the controls.

BTW: I'm using the Q1 2013 (trial) release of the WP controls.

Any help is highly appreciated.

Kind Regards,
Stephan

[Stephan]

I just opened up a support ticket. I'll update the post accordingly.

[Victor]

Hello Stephan,

Can you please attach your app so that I can debug it (you can attach files in the support ticket)? Copy/pasting the xaml and C# that you provided did not cause an exception to be thrown (see screenshot).

Regards,
Victor
Telerik

[Stephan]

Hi Victor,

thanks for your reply. I opened up a support ticket about 2 hours ago. The ID is 704445. A sample project that shows this behavior is attached.

[Victor]

Hello Stephan,

Yes, I noticed after I replied here. Sorry for the confusion :)

Regards,
Victor
Telerik