Question

So I am trying to impliment a simple Kerning UserControl to use with DataBound text in a ListBoxTemplate and I am getting the error that is in the title of this question.

I am using Design Time data to populate data while I am developing in VS or Expression Blend but I am not sure if this is the cause as it builds and only crashes when I populate the data.

<ListBox
            x:Name="MainList"
            ItemsSource="{Binding FeedItems}"
            SelectionChanged="ListBox_SelectionChanged"
            >
            <ListBox.ItemTemplate>

                <DataTemplate>
                    <StackPanel Orientation="Horizontal" x:Uid="{Binding ItemLink}" Margin="10">
                        <Controls:KerningTextBlock
                        Spacing="2"
                        Font="Verdana"
                        VerticalAlignment="Center"
                        HorizontalAlignment="Left"
                        FontSize="32"
                        InputText="{Binding ItemTitle}"/>

                ....

---

    private StackPanel Stack = new StackPanel()
    {
        FlowDirection = System.Windows.FlowDirection.LeftToRight,
        Orientation = System.Windows.Controls.Orientation.Horizontal
    };

    private void KernIt()
    {
        // Clear the contents
        this.LayoutRoot.Children.Clear();

        // Convert input string to character array
        char[] Letters = !string.IsNullOrEmpty(this.InputText)? this.InputText.ToCharArray() : " ".ToCharArray();

        // For each item create a new text block with the following test
        foreach (var letter in Letters)
        {
            // Set up the formatted text block
            TextBlock TempText = new TextBlock();
            TempText.FontFamily = new FontFamily(this.Font);
            TempText.FontSize = 30;
            TempText.Padding = new Thickness(0, 0, this.Spacing, 0);
            TempText.Text = letter.ToString();

            // Add to the stack
            Stack.Children.Add(TempText);
        }
        // Add to the grid
        if (Stack.Children.Count() > 0)
            this.LayoutRoot.Children.Add(Stack);
    }

    public string InputText { get; set; }
    public double Spacing { get; set;}
    public string Font { get; set; }

Answer 1

Got it…In the user control you have to add

DataContext="{Binding}"

Then set the Layout root as follows since I am clearing out the LayoutRoot (which needs to now be changed to SubRoot.Children.Clear():

<Grid x:Name="LayoutRoot" >
    <TextBlock x:Name="Title" Text="{Binding ItemTitle}"/>
    <Grid x:Name="SubRoot">
    </Grid>
</Grid>

Next in the code behind add an on loaded event:

public KerningTextBlock()
{
    UpdateLayout();
    InitializeComponent();
    this.Loaded += new RoutedEventHandler(KerningTextBlock_Loaded);
}
 void KerningTextBlock_Loaded(object sender, RoutedEventArgs e)
{
     if (string.IsNullOrEmpty(Title.Text))
        this.InputText = "why am I empty?";
    else
        this.InputText = Title.Text;
    KernIt();
}

Then where you are calling the User Control change it to this:

<Controls:KerningTextBlock
    DataContext="{Binding}"
    Spacing="5"
    Font="Verdana"
    x:Name="Button_Name"
    Margin="135,5,15,0"
    VerticalAlignment="Center"
    HorizontalAlignment="Left"
    FontSize="32"/>