Как я могу расширить элементы по горизонтали и вертикали в пределах двух столбцов, используя XML? - PullRequest
Новая
       36

Как я могу расширить элементы по горизонтали и вертикали в пределах двух столбцов, используя XML?

0 голосов
/ 18 апреля 2020

Я пытаюсь развернуть элементы на две колонки в таблице. Отображаются только последние две кнопки. Как я могу «разделить» их по колонке?

Я потратил два дня, пытаясь понять это правильно, я новичок в этом, но я не думаю, что это будет так сложно?

Когда я удаляю ScrollViewer т.е. "VertcialAlignment =" Top "Он просто расширяет две кнопки. Вниз по двум столбцам я пытался добавить Ориентацию к Grid.RowDefinition, et c. Это не сработало. Спасибо за любую помощь.

вот код: 

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

Вот изображение того, что я делаю. введите описание изображения здесь

Извините, наверное, я не могу вставлять картинки пока что, тем не менее, он просто показывает столбцы с двумя кнопками, которые остаются сверху ... вместо четырех равномерно распределенных по ширине.

1 Ответ

0 голосов
/ 19 апреля 2020

Можете ли вы что-то нарисовать и опубликовать, какова ваша цель?

Я не уверен в желаемом результате.

Все, что я могу видеть и сказать, это то, что ваши предметы не находятся в сетки. Вы закрываете </Grid> слишком рано: закройте сетку чуть выше </ScrollViewer>. В противном случае они помещаются в первую сетку, которая содержит только 2 столбца и не содержит определений строк (поэтому просто 1). Это приводит к тому, что кнопки расположены друг над другом. Последний является видимым. Ваша вторая таблица не содержит никаких ожидаемых определений столбцов и строк, но имеет 0 дочерних элементов, поэтому она бесполезна.

Вам не нужно устанавливать Grid.Column = 0 или Grid.ColumnSpan = 0, потому что это значение по умолчанию. ценность. Если вы добавите что-то, если второй столбец: Grid.Column = 1 (индекс на основе 0), и есть только 2 столбца, Grid.ColumSpan = 2 не имеет смысла, потому что 1 (индекс столбца) +2 (столбец брать) = 3 столбца необходимо, когда у вас есть только один.

Сказав это, убедитесь, что для ваших кнопок установлены HorizontalAlignment и VerticalAlignment на Stretch, чтобы заполнить пространство.

Вы можете создать неявный стиль или явный для разложите дублированный код на каждую кнопку.

...