Wp8 xaml design

Question

I have a problem with the first element in a listbox, the arranging is being changed in it. This is the code:

<Grid x:Name="ContentPanel" Margin="12,10,0,0" Grid.RowSpan="2" Grid.ColumnSpan="2">
        <ListBox Margin="10,233,10,0" BorderBrush="White" Hold="ListBox1_Hold" SelectionChanged="ListBox1_SelectionChanged" Height="516"  x:Name="ListBox1" VerticalAlignment="Top">
            <ListBox.ItemTemplate>
                <DataTemplate>
                    <StackPanel Width="500" Orientation="Vertical" >
                        <Image Margin="10,30,0,0"  HorizontalAlignment="Left" Height="100" Width="150" Source="{Binding Img}" ></Image> 

                        <TextBlock Visibility="Collapsed" Text="ID: "/>
                        <TextBlock Visibility="Collapsed" Text="{Binding Id}"/>

                        <TextBlock Visibility="Collapsed" FontSize="30" Text="Place Name: "/>
                        <TextBlock Margin="160,-110,0,0"  HorizontalAlignment="Left" Foreground="Blue" FontSize="30" Text="{Binding PlaceName}"/>

                        <TextBlock Visibility="Collapsed" Text="Description: "/>
                        <TextBlock Margin="160,-80,0,0"  HorizontalAlignment="Left" TextWrapping="Wrap" Text="{Binding Description}" />

                        <TextBlock Visibility="Collapsed" Text="Keyword: "/>
                        <TextBlock Visibility="Collapsed" Text="{Binding Keyword}"/>

                        <TextBlock Visibility="Collapsed" Text="Longitude: "/>
                        <TextBlock Visibility="Collapsed" Text="{Binding Long}"/>

                        <TextBlock Visibility="Collapsed" Text="Latitude: "/>
                        <TextBlock Visibility="Collapsed" Text="{Binding Latit}"/>
                    </StackPanel>
                </DataTemplate>
            </ListBox.ItemTemplate>
        </ListBox>

And here the result of this code:

The Picture

Delete horrible margin : "160,-110,0,0" and "160,-80,0,0" and you need to use grid in your template for understand what you design. Grid.ColumnDefinition / Grid.RowDefintion — MatDev8

MatDev8 MatDev8 · Accepted Answer · 2013-09-23T18:22:01

<Grid>
    <Grid.RowDefinitions>
        <RowDefinition Height="Auto" />
        <RowDefinition Height="Auto" />
        <RowDefinition Height="Auto" />
        <RowDefinition Height="Auto" />
        <RowDefinition Height="Auto" />
        <RowDefinition Height="Auto" />
    </Grid.RowDefinitions>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="Auto" />
        <ColumnDefinition Width="200" />
    </Grid.ColumnDefinitions>

    // First block
   <grid grid.colum="0" grid.row="0" grid.rowspan="2"><image></grid>
   <grid grid.colum="1" grid.row="0" ><textblock></grid>
   <grid grid.colum="1" grid.row="1" ><textblock></grid>

    // Seconde block
   <grid grid.colum="0" grid.row="1" grid.rowspan="2"><image></grid>
   <grid grid.colum="1" grid.row="2" ><textblock></grid>
   <grid grid.colum="1" grid.row="3" ><textblock></grid>

   // third block
   <grid grid.colum="0" grid.row="2" grid.rowspan="2"><image></grid>
   <grid grid.colum="1" grid.row="4" ><textblock></grid>
   <grid grid.colum="1" grid.row="5" ><textblock></grid>

</Grid>

Wp8 xaml design

1 Answers