WinRT-XAML Alternative to a grid of TextBox

Question

I have a grid of TextBox inside a Border with the content binded like so

<Border BorderBrush="White" BorderThickness="1" Margin="0">
    <TextBlock TextWrapping="Wrap" FontSize="29.333" Text="{Binding TextArray[0][0], Mode=OneWay}" HorizontalAlignment="Center" VerticalAlignment="Center" Margin="0"/>
</Border>
<Border BorderBrush="White" BorderThickness="1" Margin="0" Grid.Column="1">
    <TextBlock TextWrapping="Wrap" FontSize="29.333" Text="{Binding TextArray[0][1], Mode=OneWay}" HorizontalAlignment="Center" VerticalAlignment="Center" Margin="0"/>
</Border>
<Border BorderBrush="White" BorderThickness="1" Margin="0" Grid.Column="2">
    <TextBlock TextWrapping="Wrap" FontSize="29.333" Text="{Binding TextArray[0][2], Mode=OneWay}" HorizontalAlignment="Center" VerticalAlignment="Center" Margin="0"/>
</Border>
<Border BorderBrush="White" BorderThickness="1" Margin="0" Grid.Row="1" Grid.Column="0">
    <TextBlock TextWrapping="Wrap" FontSize="29.333" Text="{Binding TextArray[1][0], Mode=OneWay}" HorizontalAlignment="Center" VerticalAlignment="Center" Margin="0"/>
</Border>
<Border BorderBrush="White" BorderThickness="1" Margin="0" Grid.Row="1" Grid.Column="1">
    <TextBlock TextWrapping="Wrap" FontSize="29.333" Text="{Binding TextArray[1][1], Mode=OneWay}" HorizontalAlignment="Center" VerticalAlignment="Center" Margin="0"/>
</Border>
<Border BorderBrush="White" BorderThickness="1" Margin="0" Grid.Row="1" Grid.Column="2">
    <TextBlock TextWrapping="Wrap" FontSize="29.333" Text="{Binding TextArray[1][2], Mode=OneWay}" HorizontalAlignment="Center" VerticalAlignment="Center" Margin="0"/>
</Border>
<Border BorderBrush="White" BorderThickness="1" Margin="0" Grid.Row="2" Grid.Column="0">
    <TextBlock TextWrapping="Wrap" FontSize="29.333" Text="{Binding TextArray[2][0], Mode=OneWay}" HorizontalAlignment="Center" VerticalAlignment="Center" Margin="0"/>
</Border>
<Border BorderBrush="White" BorderThickness="1" Margin="0" Grid.Row="2" Grid.Column="1">
    <TextBlock TextWrapping="Wrap" FontSize="29.333" Text="{Binding TextArray[2][1], Mode=OneWay}" HorizontalAlignment="Center" VerticalAlignment="Center" Margin="0"/>
</Border>
<Border BorderBrush="White" BorderThickness="1" Margin="0" Grid.Row="2" Grid.Column="2">
    <TextBlock TextWrapping="Wrap" FontSize="29.333" Text="{Binding TextArray[2][2], Mode=OneWay}" HorizontalAlignment="Center" VerticalAlignment="Center" Margin="0"/>
</Border>

This is fine for a small grid, but there would a lot of copy pasting and replacing values for a big grid. Is there a better way to do this?

Answer 1

Why not use, DataGrid for WinRT - there are alot of datagrid's available for WinRT from Third Party something like Syncfusion Offers you can check here.

http://darkcore.in/getting-started-in-syncfusions-datagrid-sfdatagrid-for-winrt/

Answer 2

Easy solution, stop using those crazy TextArrays. Let's pretend you really do have an array like you are showing. Why not make your life easier?

Start with simplifying your data!

string[][] _Data = new[] 
    { 
        new string[] { "A", "B", "C" }, 
        new string[] { "1", "2", "3" } 
    };
var _NewData =
    from d in _Data
    select new
    {
        One = d[0],
        Two = d[1],
        Three = d[2]
    };
this.DataContext = _NewData;

Then you can simplify your XAML:

<Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}">
    <ItemsControl ItemsSource="{Binding}">
        <ItemsControl.ItemTemplate>
            <DataTemplate>
                <Grid Width="600">

                    <Grid.Resources>
                        <Style TargetType="Border">
                            <Setter Property="BorderBrush" Value="White" />
                            <Setter Property="BorderThickness" Value="1" />
                            <Setter Property="Margin" Value="0" />
                        </Style>
                        <Style TargetType="TextBlock">
                            <Setter Property="TextWrapping" Value="Wrap" />
                            <Setter Property="FontSize" Value="29.333" />
                            <Setter Property="HorizontalAlignment" Value="Center" />
                            <Setter Property="VerticalAlignment" Value="Center" />
                            <Setter Property="Margin" Value="0" />
                        </Style>
                    </Grid.Resources>

                    <Grid.ColumnDefinitions>
                        <ColumnDefinition />
                        <ColumnDefinition />
                        <ColumnDefinition />
                    </Grid.ColumnDefinitions>

                    <!-- first record -->
                    <Border Grid.Column="0">
                        <TextBlock Text="{Binding One}" />
                    </Border>

                    <!-- second record -->
                    <Border Grid.Column="1">
                        <TextBlock Text="{Binding Two}" />
                    </Border>

                    <!-- third record -->
                    <Border Grid.Column="2">
                        <TextBlock Text="{Binding Three}" />
                    </Border>

                </Grid>
            </DataTemplate>
        </ItemsControl.ItemTemplate>
    </ItemsControl>
</Grid>

Now there is ZERO redundancy. The XAML was meant to be used.

Best of luck!