XAML Grid layout

Question

I am developing a XAML based app and I have a spacing/layout issue. I currently have my main page as a 1 column grid. I have a ListBox though in which I need my data template to be displayed over 2 columns. The first data element should take up 75% of the screen and the second data element should take up the rest. When I run my app, the data from my listbox items are bunched on the left hand side of the screen. How can I change this behavior?

<Grid x:Name="LayoutRoot">
    <Grid.RowDefinitions>
        <RowDefinition Height="Auto"></RowDefinition>
        <RowDefinition Height="2*"></RowDefinition>
        <RowDefinition Height="Auto"></RowDefinition>
        <RowDefinition Height="Auto"></RowDefinition>
        <RowDefinition Height="9*"></RowDefinition>
    </Grid.RowDefinitions>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="12"/>
        <ColumnDefinition Width="*" />
        <ColumnDefinition Width="12"/>
    </Grid.ColumnDefinitions>
    <!--My Section-->
    <Grid Grid.Row="3" Grid.Column="1">
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto" />
            <RowDefinition Height="Auto" />
            <RowDefinition Height="Auto" />
        </Grid.RowDefinitions>
        <TextBlock Grid.Row="0" Grid.Column="0" Text="Selected Location" FontWeight="Bold" Style="{StaticResource grayTextBox}"/>
        <Line Grid.Row="1" Grid.Column="0" Stroke="White" StrokeThickness="1" />
        <ListBox Grid.Row="2" ItemsSource="{Binding Path=SelectedLocations, Mode=TwoWay}" HorizontalContentAlignment="Stretch" Visibility="{Binding Path=IsSelectedLocationAvailable, Converter={StaticResource visibilityConverter}}">
            <ListBox.ItemTemplate>
                <DataTemplate>
                    <Grid ShowGridLines="True">
                        <Grid.RowDefinitions>
                            <RowDefinition Height="*" />
                            <RowDefinition Height="*" />
                            <RowDefinition Height="*" />
                        </Grid.RowDefinitions>
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="*" />
                            <ColumnDefinition Width="Auto" />
                        </Grid.ColumnDefinitions>
                        <TextBlock Grid.Row="0" Grid.Column="0" Foreground="#ffb107" Text="{Binding Path=Name}" />
                        <TextBlock Grid.Row="1" Grid.Column="0" Foreground="#ffb107" Text="{Binding Path=Address}" />
                        <TextBlock Grid.Row="2" Grid.Column="0" Foreground="#ffb107" Text="{Binding Path=CityStateZip}" />
                        <StackPanel Grid.Row="0" Grid.Column="1" Grid.RowSpan="3" Orientation="Horizontal" HorizontalAlignment="Right">
                            <Rectangle Fill="Orange" />
                             <Rectangle Fill="Blue" />
                        </StackPanel>
                    </Grid>

JP Hellemons JP Hellemons · Accepted Answer · 2015-09-03T13:35:10

Why use a Grid to center the content?

I currently have my main page as a 1 column grid

Why use a grid if it has just 1 column? Use margin on the stackpanel items.

<Grid x:Name="LayoutRoot">
   <StackPanel Orientation="Vertical">
       <TextBlock Text="Selected Location" FontWeight="Bold" Style="{StaticResource grayTextBox}"/>
       <Line Stroke="White" StrokeThickness="1" />
       <ListBox ItemsSource="{Binding Path=SelectedLocations, Mode=TwoWay}" HorizontalContentAlignment="Stretch" Visibility="{Binding Path=IsSelectedLocationAvailable, Converter={StaticResource visibilityConverter}}">
       <ListBox.ItemTemplate>
           <DataTemplate>
               <Grid ShowGridLines="True">
                   <Grid.RowDefinitions>
                       <RowDefinition Height="*" />
                       <RowDefinition Height="*" />
                       <RowDefinition Height="*" />
                   </Grid.RowDefinitions>
                   <Grid.ColumnDefinitions>
                       <ColumnDefinition Width="*" />
                       <ColumnDefinition Width="Auto" />
                   </Grid.ColumnDefinitions>
                   <TextBlock Grid.Row="0" Grid.Column="0" Foreground="#ffb107" Text="{Binding Path=Name}" />
                   <TextBlock Grid.Row="1" Grid.Column="0" Foreground="#ffb107" Text="{Binding Path=Address}" />
                   <TextBlock Grid.Row="2" Grid.Column="0" Foreground="#ffb107" Text="{Binding Path=CityStateZip}" />
                   <StackPanel Grid.Row="0" Grid.Column="1" Grid.RowSpan="3" Orientation="Horizontal" HorizontalAlignment="Right">
                        <Rectangle Fill="Orange" />
                        <Rectangle Fill="Blue" />
                   </StackPanel>
               </Grid>
            </DataTemplate>
        </ListBox.ItemTemplate>
        </ListBox>
    </StackPanel>
</Grid>

XAML Grid layout

1 Answers