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

Issue

I am trying to expand items down two columns within a Grid. Only the Last Two Buttons show. How can I "seperate" them down the column?

I have spent two days trying to get this right, I am new to this, but i don't think it would be that difficult?

When i remove the ScrollViewer ie; "VertcialAlignment="Top" It just Expands the Two Buttons All the way down the two columns, I have tried adding Orientation to the Grid.RowDefinition, etc. It has not worked. Thank you for any help.

here is code:

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

Here is an image of what i am doing. enter image description here

Sorry, i guess i can't embed pics yet. nonetheless, it just shows the columns with two buttons that stay at top.. instead of the four spread across evenly.

Solution

Can you draw something and post what your goal is ?

I'm not sure of the result you want.

All I can see and say is that your items are not in the grid. You close the </Grid> too soon: close the grid just above the </ScrollViewer>. Otherwise, they are put inside the first grid which only contains 2 columns and no rows definitions (so just 1). It result that where buttons are stacked above each other. The last one being the visible one. Your second Grid contains nothing expect definitions of columns and rows, but it has 0 child so it is useless.

You don't need to set Grid.Column=0 or Grid.ColumnSpan=0 because its the default value. If you put something if the second column: Grid.Column=1 (0 based index) and there is only 2 columns, the Grid.ColumSpan=2 is pointless because 1 (col index)+2 (col to take) = 3 columns needed when you only have one.

Having said that, make sure your buttons have an HorizontalAlignment and VerticalAlignment set to Stretch to fill the space.

You can create an implicit style or explicit one to factorize the duplicated code on each button.

Answered By - Nk54

Answer Checked By - Mildred Charles (PHPFixing Admin)