XAML 网格布局答案

【问题标题】：XAML Grid layoutXAML 网格布局
【发布时间】：2013-06-04 00:36:14
【问题描述】：

我正在开发一个基于 XAML 的应用程序，但我遇到了间距/布局问题。我目前的主页是 1 列网格。我有一个 ListBox，但我需要将我的数据模板显示在 2 列中。第一个数据元素应占屏幕的 75%，第二个数据元素应占其余部分。当我运行我的应用程序时，来自我的列表框项目的数据集中在屏幕的左侧。我该如何改变这种行为？

<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>

【问题讨论】：

标签： xaml layout listbox grid

【解决方案1】：

为什么要使用 Grid 来使内容居中？

我目前的主页是 1 列网格

如果网格只有 1 列，为什么还要使用它？在堆栈面板项目上使用边距。

<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>

【讨论】：