Member 13395917 Ответов: 2

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

У меня есть колонка, которая разделена на 3 части. первая часть имеет форму, а остальные 2 части имеют расширитель.

Я хочу, чтобы по умолчанию расширитель располагался в нижней части экрана, и когда он расширяется, он должен начинаться с конечной точки формы и занимать левое пространство, а когда второй расширитель открывается, пространство шолуд делится на оба расширителя.

Что я уже пробовал:

Я пробовал через элемент StackPanel, док-станции и решетка, но вмятина есть успех

2 Ответов

Рейтинг:
2

Graeme_Grant

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

Но в двух словах, вы сетка должна быть шаг вверх, как:

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

   <!-- Form goes here with VerticalAlignment="Stretch" and no height set -->

   <Expander Grid.Row="1"> <!-- again, no height set -->
   </Expander>

</Grid>

Теперь, когда расширитель открыт, сетка автоматически отрегулирует размер содержимого.

Рейтинг:
0

PureNsanity

Во - первых, вы должны сохранить высоту первой части. Если вы автоматически определяете размер области расширителя, вы можете просто раздавить первый элемент управления, поэтому вам нужно установить первый ряд в Auto и/или MinHeight

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

Расширители-это бесконечные элементы управления высотой, такие как StackPanel, то есть они не ограничены пределами своего контейнера. Таким образом, это означает, что если у вас есть большой контент, и вы не устанавливаете его максимальную высоту, то первый расширитель может взорвать Нижний расширитель с экрана.

Хитрость в этом случае заключается в использовании элемента управления с ограниченным размером в качестве заполнителя для получения оставшегося размера. На самом деле есть несколько ситуаций, которые делают жизнь немного проще...

Ниже приведен пример, с которым вы можете поиграть, который должен работать для вас:

<Grid>
    <Grid.RowDefinitions>
        <RowDefinition Height="Auto" />
        <RowDefinition Height="*" />
    </Grid.RowDefinitions>
    <TextBlock Text="Fixed Line"/>
    <Rectangle x:Name="RectangleSizeHolder"
               Grid.Row="1"
               SizeChanged="RectangleSizeHolder_SizeChanged"/>
    <Grid Grid.Row="1">
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto" />
            <RowDefinition Height="Auto" />
        </Grid.RowDefinitions>
        <Expander x:Name="FirstExpander"
                  Grid.Row="0"
                  Height="Auto"
                  MinHeight="30"
                  Header="First Header"
                  Expanded="ExpanderChanged"
                  Collapsed="ExpanderChanged">
            <Expander.Content>
                <ScrollViewer VerticalScrollBarVisibility="Auto">
                    <DockPanel Height="1000"
                               LastChildFill="False">
                        <TextBlock DockPanel.Dock="Top" Text="Top First"/>
                        <TextBlock DockPanel.Dock="Bottom" Text="Bottom First"/>
                    </DockPanel>
                </ScrollViewer>
            </Expander.Content>
        </Expander>
        <Expander x:Name="SecondExpander"
                  Grid.Row="1"
                  Height="Auto"
                  MinHeight="30"
                  Header="Second Header"
                  Expanded="ExpanderChanged"
                  Collapsed="ExpanderChanged">
            <Expander.Content>
                <ScrollViewer VerticalScrollBarVisibility="Auto">
                    <DockPanel Height="1000"
                           LastChildFill="False">
                        <TextBlock DockPanel.Dock="Top" Text="Top Second"/>
                        <TextBlock DockPanel.Dock="Bottom" Text="Bottom Second"/>
                    </DockPanel>
                </ScrollViewer>
            </Expander.Content>
        </Expander>
    </Grid>


С кодом:
private void ExpanderChanged(object sender, RoutedEventArgs e)
{
    SetHeights();
}

private void RectangleSizeHolder_SizeChanged(object sender, SizeChangedEventArgs e)
{
    SetHeights();
}

private void SetHeights()
{
    FirstExpander.MaxHeight = !SecondExpander.IsExpanded ? RectangleSizeHolder.ActualHeight - SecondExpander.MinHeight :
        RectangleSizeHolder.ActualHeight / 2;

    SecondExpander.MaxHeight = !FirstExpander.IsExpanded ? RectangleSizeHolder.ActualHeight - FirstExpander.MinHeight :
        RectangleSizeHolder.ActualHeight / 2;
}