XAML网格布局

时间:2013-06-04 00:36:14

标签: xaml layout listbox grid

我正在开发基于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>

1 个答案:

答案 0 :(得分:0)

为什么要使用网格来集中内容?

  

我目前将主页作为1列网格

为什么使用网格只有1列?在stackpanel项目上使用margin。

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