Programatically place TextBox in Grid in Windows Phone 8

Question

How do I place programatically a TextBlock in a Grid. This is my XAML code: I need to add the TextBlock which is commenented out programatically. There is a SetRow method but it does not exist for the ContentPanel or the LayoutRoot only for the Grid control (which Grid is this referring to ?) Also it seems I can not access the Items grid, is this because it is inside a stackpanel ? How can this be solved ? What I need to do is to place the textblock inside a specific row inside a grid and the grid is inside a stackpanel and datatemplate. Any ideas how to do this ?

Thanks, Jani

    <Grid x:Name="LayoutRoot" Background="Transparent">
        <Grid.RowDefinitions>
            <RowDefinition Height="*"/>
       </Grid.RowDefinitions>
    <Grid x:Name="ContentPanel" Grid.Row="0" Margin="12,0,12,0">
        <phone:LongListSelector x:Name="MainLongListSelector" Margin="0,0,-12,0" ItemsSource="{Binding Items}" SelectionChanged="MainLongListSelector_SelectionChanged">
            <phone:LongListSelector.ItemTemplate>
                <DataTemplate>
                  <StackPanel x:Name="stack" Margin="0,0,0,17">
                        <Grid x:Name="Items" Background="Transparent">
                            <Grid.RowDefinitions>
                                <RowDefinition Height="50"/>
                                <RowDefinition Height="50"/>
                                <RowDefinition Height="50"/>
                            </Grid.RowDefinitions>
                            <TextBlock Text="{Binding LineOne}" Grid.Row="0" TextWrapping="Wrap" Style="{StaticResource PhoneTextExtraLargeStyle}"/>
                            <TextBlock Text="{Binding LineTwo}" Grid.Row="1" TextWrapping="Wrap" Margin="12,-6,12,0" Style="{StaticResource PhoneTextSubtleStyle}"/>
                            <!--<TextBlock Text="Hello" Grid.Row="3" TextWrapping="Wrap" Margin="12,-6,12,0" Style="{StaticResource PhoneTextSubtleStyle}"/> -->
                        </Grid>
                    </StackPanel>
                </DataTemplate>
            </phone:LongListSelector.ItemTemplate>
        </phone:LongListSelector>
    </Grid>
</Grid>

Answer 1

Not sure if it suits your scenario, but you can leave TextBlock uncommented but with Visibility set to Visibility.Collapsed like this:

<TextBlock Text="Hello" Name="MyTextBlock" Visibility="Collapsed" Grid.Row="3" TextWrapping="Wrap" Margin="12,-6,12,0" Style="{StaticResource PhoneTextSubtleStyle}"/>

And then in code just type MyTextBlock.Visibility = Visibility.Visible;

As you are using MVVM pattern you can alternatively bind Visibility dependency property to a property of your View Model.

Answer 2

So the Textblock you want to add is in a grid which is within a stackpanel which is part of your LongListSelector's DataTemplate. so what we are talking about here is the ability to modify the DataTemplate on the fly

One solution could be using a custom DataTempleSelector and then based on some field in your Model/ViewModel you could select the appropriate DataTemplate for the respective content, something along these lines

public abstract class DataTemplateSelector : ContentControl
{
    public virtual DataTemplate SelectTemplate(object item, DependencyObject container)
    {
        return null;
    }

    protected override void OnContentChanged(object oldContent, object newContent)
    {
        base.OnContentChanged(oldContent, newContent);

        ContentTemplate = SelectTemplate(newContent, this);
    }
}

public class CustomTemplateSelector : DataTemplateSelector
{
    public DataTemplate First
    {
        get;
        set;
    }

    public DataTemplate Second
    {
        get;
        set;
    }

    public override DataTemplate SelectTemplate(object item, DependencyObject container)
    {
        Data data = item as Data;
        if (data != null)
        {
            if (data.ShowLineThree)
            {
                return this.Second;
            }
            else
            {
                return this.First;
            }
        }

        return base.SelectTemplate(item, container);
    }
}

public class Data
{
    public string LineOne
    {
        get;
        set;
    }

    public string LineTwo
    {
        get;
        set;
    }

    public string LineThree
    {
        get;
        set;
    }

    public bool ShowLineThree
    {
        get;
        set;
    }
}

your xaml will look like this

<!--ContentPanel contains LongListSelector and LongListSelector ItemTemplate. Place additional content here-->
    <Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
        <phone:LongListSelector x:Name="MainLongListSelector" Margin="0,0,-12,0" >
            <phone:LongListSelector.ItemTemplate>
                <DataTemplate>
                    <local:CustomTemplateSelector Content="{Binding}">
                        <local:CustomTemplateSelector.First>
                            <DataTemplate>
                                <StackPanel Orientation="Vertical"  Width="400" Margin="10">
                                    <TextBlock Text="{Binding LineOne}" />
                                    <TextBlock Text="{Binding LineTwo}" />
                                </StackPanel>
                            </DataTemplate>
                        </local:CustomTemplateSelector.First>
                        <local:CustomTemplateSelector.Second>
                            <DataTemplate>
                                    <StackPanel Orientation="Vertical">
                                        <TextBlock Text="{Binding LineOne}"/>
                                        <TextBlock Text="{Binding LineTwo}" />
                                        <TextBlock Text="{Binding LineThree}" />
                                    </StackPanel>
                            </DataTemplate>
                        </local:CustomTemplateSelector.Second>
                    </local:CustomTemplateSelector>
                </DataTemplate>
            </phone:LongListSelector.ItemTemplate>
        </phone:LongListSelector>
    </Grid>

and here goes the code behind

this.MainLongListSelector.ItemsSource = new List<Data>
                              {
                                  new Data{ LineOne = "1", LineTwo = "2", LineThree = "3", ShowLineThree = true },
                                  new Data{ LineOne = "4", LineTwo = "5", LineThree = "6", ShowLineThree = false }
                              };

Hope this helps