Search code examples
xamlwindows-phone-7binding

How to display windows phone 7 bound controls inside columns


I was wondering if you can help me fix this small problem, I have a textblocks with data bound representing a table but the problem is all my data looks similar to this:

Test                 0000000    
Test1                0000000 
Test2                0000000 

So I was wondering how could I get the controls to line up similarly to this:

Test    0    0    0    0
Test1   0    0    0    0
Test2   0    0    0    0

Every help is really appreciated

<Grid x:Name="LayoutRoot" Background="Transparent">
    <!--<Grid.RowDefinitions>
        <RowDefinition Height="*"/>
    </Grid.RowDefinitions>-->
    <!--ContentPanel - place additional content here-->
    <Grid x:Name="ContentPanel" ShowGridLines="True" Margin="12,0,12,0"> 
        <Grid.ColumnDefinitions>
            <ColumnDefinition/>
            <ColumnDefinition/>
            <ColumnDefinition/>
            <ColumnDefinition/>
            <ColumnDefinition/>
            <ColumnDefinition/>
            <ColumnDefinition/>
            <ColumnDefinition/>
        </Grid.ColumnDefinitions>
        <ListBox Height="650" HorizontalAlignment="Left" Margin="11,17,0,0" Name="listBox1" VerticalAlignment="Top" Width="434" >
            <ListBox.ItemTemplate>
                <DataTemplate>
                    <StackPanel Orientation="Horizontal"> 
                        <TextBlock Grid.Column="0" Text="{Binding test}"/>
                        <TextBlock Grid.Column="1" Text="{Binding test1}"/>
                        <TextBlock Grid.Column="2" Text="{Binding test2}"/>
                        <TextBlock Grid.Column="3" Text="{Binding test3}"/>
                        <TextBlock Grid.Column="4" Text="{Binding test4}"/>
                        <TextBlock Grid.Column="5" Text="{Binding test5}"/>
                        <TextBlock Grid.Column="6" Text="{Binding test6}"/>
                        <TextBlock Grid.Column="7" Text="{Binding 7}"/>
                    </StackPanel>
                </DataTemplate>
            </ListBox.ItemTemplate>
        </ListBox>
    </Grid>
</Grid>

Solution

  • you need to move column definition inside the template:

        <ListBox Height="650" HorizontalAlignment="Left" Margin="11,17,0,0" Name="listBox1" VerticalAlignment="Top" Width="434" >
            <ListBox.ItemTemplate>
                <DataTemplate>
                    <Grid> 
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition/>
                            <ColumnDefinition/>
                            <ColumnDefinition/>
                            <ColumnDefinition/>
                            <ColumnDefinition/>
                            <ColumnDefinition/>
                            <ColumnDefinition/>
                            <ColumnDefinition/>
                        </Grid.ColumnDefinitions>
                        <TextBlock Grid.Column="0" Text="{Binding test}"/>
                        <TextBlock Grid.Column="1" Text="{Binding test1}"/>
                        <TextBlock Grid.Column="2" Text="{Binding test2}"/>
                        <TextBlock Grid.Column="3" Text="{Binding test3}"/>
                        <TextBlock Grid.Column="4" Text="{Binding test4}"/>
                        <TextBlock Grid.Column="5" Text="{Binding test5}"/>
                        <TextBlock Grid.Column="6" Text="{Binding test6}"/>
                        <TextBlock Grid.Column="7" Text="{Binding 7}"/>
                    </Grid>
                </DataTemplate>
            </ListBox.ItemTemplate>
        </ListBox>