如何使用 XML 在两列中水平和垂直扩展项目？

Question

我正在尝试将网格中的项目向下展开两列。仅显示最后两个按钮。我怎样才能 "seperate" 他们在专栏中？

我花了两天时间试图解决这个问题，我是新手，但我不认为会是这样难吗？

当我删除 ScrollViewer 即； "VertcialAlignment="Top" 它只是将两个按钮一直扩展到两列，我尝试将方向添加到 Grid.RowDefinition，等等。它没有奏效。感谢您的任何帮助。

代码如下：

<telerik:GroupBox Header="{x:Static res:UXResources.Panel_CustomPanel_Title}">
        <ScrollViewer VerticalScrollBarVisibility="Auto"
                      HorizontalScrollBarVisibility="Disabled"
                      CanContentScroll="True"
                      VerticalAlignment="Top">
<Grid>
<Grid.ColumnDefinitions>
    <ColumnDefinition />
     <ColumnDefinition />
</Grid.ColumnDefinitions>

<Grid Grid.Column="1">
    <Grid.ColumnDefinitions>
        <ColumnDefinition />
         <ColumnDefinition />
    </Grid.ColumnDefinitions>


    <Grid.RowDefinitions>
        <RowDefinition  Height="Auto"/>
        <RowDefinition  Height="Auto"/>
        <RowDefinition  Height="Auto"/>
        <RowDefinition  Height="Auto"/>
    </Grid.RowDefinitions>
</Grid>

            <telerik:RadButton     FontWeight="800"      
                                   Background="LightGreen"
                                   Grid.Row="0" 
                                   Grid.Column="0" 
                                   Grid.ColumnSpan="1"
                                   Command="{Binding Item_AddCommand}"
                                   CommandParameter="PB">
                    Button One
            </telerik:RadButton> 

            <telerik:RadButton     FontWeight="400"    
                                   Background="Orange"
                                   Grid.Row="0" 
                                   Grid.Column="1" 
                                   Grid.ColumnSpan="2"
                                   Command="{Binding Item_AddCommand}"
                                   CommandParameter="1LP">
                    Button Two
             </telerik:RadButton>

             <telerik:RadButton FontWeight="400"    
                                   Background="Orange"
                                   Grid.Row="1"
                                   Grid.Column="0"
                                   Grid.ColumnSpan="1"
                                   Command="{Binding Item_AddCommand}"
                                   CommandParameter="2LP">
                    Button Three
              </telerik:RadButton>

              <telerik:RadButton   FontWeight="400"    
                                   Background="Orange"
                                   Grid.Row="1"
                                   Grid.Column="1"
                                   Grid.ColumnSpan="2" 
                                   Command="{Binding Item_AddCommand}"
                                   CommandParameter="3LP">
                    Button Four
              </telerik:RadButton>


    </ScrollViewer>
</telerik:GroupBox>

这是我正在做的事情的图片。 enter image description here

抱歉，我想我还不能嵌入图片。尽管如此，它只显示带有两个位于顶部的按钮的列。而不是四个均匀分布的按钮。

Answer 1

你能画点什么吗post你的目标是什么？

我不确定你想要的结果。

我只能说你的项目不在网格中。您关闭 </Grid> 太早了：关闭 </ScrollViewer> 正上方的网格。否则，它们将放在第一个网格中，该网格仅包含 2 列且没有行定义（因此只有 1 个）。结果按钮堆叠在一起。最后一个是可见的。您的第二个 Grid 不包含任何期望的列和行定义，但它有 0 个子项，所以它没用。

您不需要设置 Grid.Column=0 或 Grid.ColumnSpan=0，因为它是默认值。如果你在第二列中放置一些东西：Grid.Column=1（基于 0 的索引）并且只有 2 列，则 Grid.ColumSpan=2 是没有意义的，因为 1（col 索引）+2（col to take ) = 当只有一列时需要 3 列。

话虽如此，请确保您的按钮将 HorizontalAlignment 和 VerticalAlignment 设置为 Stretch 以填充 space。

您可以创建隐式样式或显式样式来分解每个按钮上的重复代码。

如何使用 XML 在两列中水平和垂直扩展项目？

How can I Expand Items Horizontally & Verticially within two Colums using an XML?

xml

xaml

vertical-alignment

multiple-columns