Макет в серебряном свете

Question

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

<Grid>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="*" />
        <ColumnDefinition Width="*" />
    </Grid.ColumnDefinitions>

    <Grid x:Name="abc" Grid.Row="0" Grid.Column="0">
        <Grid>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="40" />
                <ColumnDefinition Width="*" />
            </Grid.ColumnDefinitions>

            <Button Grid.Row="0" Grid.Column="0"></Button>
            <TextBox Grid.Row="0" Grid.Column="1"></TextBox>
        </Grid>
    </Grid>

    <Grid Grid.Row="0" Grid.Column="1">
        <Grid>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="40" />
                <ColumnDefinition Width="*" />
            </Grid.ColumnDefinitions>

            <Button Grid.Row="0" Grid.Column="0"></Button>
            <TextBox Grid.Row="0" Grid.Column="1"></TextBox>
        </Grid>
    </Grid>
</Grid>

Теперь макет вышеупомянутого xaml точно такой, какой я хочу. Однако у меня есть еще одно требование. Во время выполнения мне нужно сделать сетку "abc" разборной. А другая сетка должна заполнить всю ширину. Если я использую ширину размеров звезды, то если «abc» свернут, он ведет себя скорее как скрытый, чем свернутый. Свернуть, кажется, работает с шириной Авто размер, но это не дает мне пропорционального размера по мере необходимости. Есть ли способ сделать это. Обратите внимание, что у меня есть доступ только к сеткам, StackPanels и Canvas для макета моих элементов (без DockPanel). Пожалуйста, дайте мне знать о любых идеях вместе с любыми фрагментами кода. Спасибо.

Answer 1

Трудно сказать ваше намерение в макете, но вот пример, чтобы вы начали.
Я изменил ширину ColumnDefintion с * на Авто в событии Click и установил видимость Collasped для сетки «abc». Я использовал вторую кнопку, чтобы изменить эти значения в целях тестирования, и удалил дополнительный уровень сетки, который не нужен.

<Grid>
    <Grid.ColumnDefinitions>
        <ColumnDefinition x:Name="ColumnToCollapse" Width="*" />
        <ColumnDefinition Width="*" />
    </Grid.ColumnDefinitions>

    <Grid x:Name="abc" Grid.Row="0" Grid.Column="0">
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="40" />
            <ColumnDefinition Width="*" />
        </Grid.ColumnDefinitions>

        <Button Grid.Row="0" Grid.Column="0"></Button>
        <TextBox Grid.Row="0" Grid.Column="1"></TextBox>
    </Grid>

    <Grid Grid.Row="0" Grid.Column="1">
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="40" />
            <ColumnDefinition Width="*" />
        </Grid.ColumnDefinitions>

        <Button Grid.Row="0" Grid.Column="0" Click="Button_Click"  />
        <TextBox Grid.Row="0" Grid.Column="1"></TextBox>
    </Grid>
</Grid>

Вот событие нажатия кнопки:

private bool _toggle = true;

private void Button_Click(object sender, RoutedEventArgs e)
{
  if (_toggle)
  {
    ColumnToCollapse.Width = GridLength.Auto;
    abc.Visibility = Visibility.Collapsed;
    _toggle = false;
  }
  else
  {
    ColumnToCollapse.Width = new GridLength(1, GridUnitType.Star); 
    abc.Visibility = Visibility.Visible;
    _toggle = true;
  }
}

Answer 2

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

По сути, я установил привязку ширины столбцов (каждого из них) к свойствам, которые автоматически возвращают в одном режиме, а звездочку - в другом.Убедитесь, что вы реализуете INotifyPropertyChange для свойств и вызываете помощник onchange для обоих имен свойств столбца, когда вы изменяете флаг, управляющий макетом.