Не могу понять, как работает Высота и Видимость

Question

Я создал образец приложения:

<Window x:Class="WpfApplication1.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:WpfApplication1"
        mc:Ignorable="d"
        Title="MainWindow" Height="250" Width="525">
  <Window.Resources>
    <local:BooleanToVisibilityConverter x:Key="BooleanToVisibilityConverter" />
  </Window.Resources>
    <Grid>
    <Grid.RowDefinitions>
      <RowDefinition Height="Auto"/>
      <RowDefinition /> <!-- Height="Auto" -->
      <RowDefinition Height="Auto"/>
    </Grid.RowDefinitions>
    <TextBox Grid.Row="0" Text="Some Header Text" />
    <Grid Grid.Row="1">
      <Grid.RowDefinitions>
        <RowDefinition Height="Auto" />
        <RowDefinition Height="*" />
        <RowDefinition Height="*" />
      </Grid.RowDefinitions>
      <CheckBox Grid.Row="0" x:Name="switch" Content="Switch" IsChecked="True" />
      <ListView Grid.Row="1" Visibility="{Binding Path=IsChecked, ElementName=switch, Converter={StaticResource BooleanToVisibilityConverter}}" >
        <ListViewItem Content="11111111"/>
        <ListViewItem Content="22222222"/>
        <ListViewItem Content="33333333"/>
        <ListViewItem Content="44444444"/>
        <ListViewItem Content="55555555"/>
        <ListViewItem Content="66666666"/>
      </ListView>
      <ListView Grid.Row="2">
        <ListViewItem Content="aaaaaaaa"/>
        <ListViewItem Content="bbbbbbbb"/>
        <ListViewItem Content="cccccccc"/>
        <ListViewItem Content="dddddddd"/>
        <ListViewItem Content="eeeeeeee"/>
        <ListViewItem Content="ffffffff"/>
      </ListView>
    </Grid>
    <TextBox Grid.Row="2" Text="Some Footer Text" />
  </Grid>
</Window>

BooleanToVisibilityConverter преобразует true в Visible и false в Collapsed.

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

Когда я добавлю Height="Auto" (в строке 15), тогда поведение верхнего списка будет таким, как ожидалось - оно исчезнет, ​​а второе окно «уйдет» вверх. Но когда флажок установлен, все элементы управления отображаются в полном размере. Нижняя часть второго списка находится за пределами окна, полос прокрутки нет, нижний колонтитул больше не виден (так как находится за пределами области окна).

Моя цель - сделать так, чтобы оба списка были видны с полосами прокрутки, и чтобы верхний список был свернут флажком. Что я делаю не так?

Answer 1

есть еще один фактор в этой ситуации: RowDefinition с Height="*" занимает место, даже если внутри этой строки нет видимых элементов (или вообще нет элементов). Вот как работает Grid.

представить еще одну панель: UniformGrid с 1 столбцом. UniformGrid даст одинаковую высоту для ListViews, когда оба видны, и всю высоту для второго ListView, когда первый ListView скрыт.

<Grid Grid.Row="1">
  <Grid.RowDefinitions>
    <RowDefinition Height="Auto" />
    <RowDefinition Height="*" />
  </Grid.RowDefinitions>
  <CheckBox Grid.Row="0" x:Name="switch" Content="Switch" IsChecked="True" />
  <UniformGrid Columns="1" Grid.Row="1" >
   <ListView Visibility="{Binding Path=IsChecked, ElementName=switch, Converter={StaticResource BooleanToVisibilityConverter}}" >
    <ListViewItem Content="11111111"/>
    <ListViewItem Content="22222222"/>
    <ListViewItem Content="33333333"/>
    <ListViewItem Content="44444444"/>
    <ListViewItem Content="55555555"/>
    <ListViewItem Content="66666666"/>
   </ListView>
   <ListView>
    <ListViewItem Content="aaaaaaaa"/>
    <ListViewItem Content="bbbbbbbb"/>
    <ListViewItem Content="cccccccc"/>
    <ListViewItem Content="dddddddd"/>
    <ListViewItem Content="eeeeeeee"/>
    <ListViewItem Content="ffffffff"/>
   </ListView>
  </UniformGrid>
</Grid>

другой альтернативой является изменение второй строки ListView и строки Rowspan при падении первого ListView:

<Grid Grid.Row="1">
  <Grid.RowDefinitions>
    <RowDefinition Height="Auto" />
    <RowDefinition Height="*" />
    <RowDefinition Height="*" />
  </Grid.RowDefinitions>
  <CheckBox Grid.Row="0" x:Name="switch" Content="Switch" IsChecked="True" />
  <ListView Grid.Row="1" Visibility="{Binding Path=IsChecked, ElementName=switch, Converter={StaticResource BooleanToVisibilityConverter}}" >
    <ListViewItem Content="11111111"/>
    <ListViewItem Content="22222222"/>
    <ListViewItem Content="33333333"/>
    <ListViewItem Content="44444444"/>
    <ListViewItem Content="55555555"/>
    <ListViewItem Content="66666666"/>
  </ListView>
  <ListView>
    <ListView.Style>
     <Style TargetType="ListView">
      <Setter Property="Grid.Row" Value="2"/>
      <Style.Triggers>
        <DataTrigger Binding="{Binding Path=IsChecked, ElementName=switch}" Value="False">
          <Setter Property="Grid.Row" Value="1"/>
          <Setter Property="Grid.RowSpan" Value="2"/>
        </DataTrigger>
      </Style.Triggers>
     </Style>
    </ListView.Style>
    <ListViewItem Content="aaaaaaaa"/>
    <ListViewItem Content="bbbbbbbb"/>
    <ListViewItem Content="cccccccc"/>
    <ListViewItem Content="dddddddd"/>
    <ListViewItem Content="eeeeeeee"/>
    <ListViewItem Content="ffffffff"/>
  </ListView>
</Grid>

Answer 2

Вы можете использовать Style, который устанавливает Height для RowDefinition на 0, когда CheckBox не отмечен. Попробуйте это:

<Grid>
    <Grid.RowDefinitions>
        <RowDefinition Height="Auto"/>
        <RowDefinition Height="Auto"/>
        <RowDefinition>
            <RowDefinition.Style>
                <Style TargetType="RowDefinition">
                    <Setter Property="Height" Value="*" />
                    <Style.Triggers>
                        <DataTrigger Binding="{Binding IsChecked, ElementName=switch}" Value="False">
                            <Setter Property="Height" Value="0" />
                        </DataTrigger>
                    </Style.Triggers>
                </Style>
            </RowDefinition.Style>
        </RowDefinition>
        <RowDefinition Height="*" />
        <RowDefinition Height="Auto"/>
    </Grid.RowDefinitions>
    <TextBox Grid.Row="0" Text="Some Header Text" />
    <CheckBox Grid.Row="1" x:Name="switch" Content="Switch" IsChecked="True" />
    <ListView Grid.Row="2" Visibility="{Binding Path=IsChecked, ElementName=switch, Converter={StaticResource BooleanToVisibilityConverter}}" >
        <ListViewItem Content="11111111"/>
        <ListViewItem Content="22222222"/>
        <ListViewItem Content="33333333"/>
        <ListViewItem Content="44444444"/>
        <ListViewItem Content="55555555"/>
        <ListViewItem Content="66666666"/>
    </ListView>
    <ListView Grid.Row="3">
        <ListViewItem Content="aaaaaaaa"/>
        <ListViewItem Content="bbbbbbbb"/>
        <ListViewItem Content="cccccccc"/>
        <ListViewItem Content="dddddddd"/>
        <ListViewItem Content="eeeeeeee"/>
        <ListViewItem Content="ffffffff"/>
    </ListView>
    <TextBox Grid.Row="4" Text="Some Footer Text" />
</Grid>

Answer 3

Ваша проблема здесь в том, что вы можете скрыть ListView, но не окружающее GridRow.Таким образом, ListView свернут, но не строка, высота которой по-прежнему установлена ​​на *.

Вы не можете легко скрыть GridRows.Это возможно только путем реализации этого кода.Я не уверен, действительно ли ты хочешь это сделать. Здесь будет объяснением того, как сделать это в коде позади.

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

<Window x:Class="WpfApp1.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:wpfApp1="clr-namespace:WpfApp1"
    mc:Ignorable="d"
    Title="MainWindow" Height="250" Width="525">
<Window.Resources>
    <wpfApp1:BooleanConverter x:Key="BooleanToVisibilityConverter" />
</Window.Resources>
<Grid>
    <Grid.RowDefinitions>
        <RowDefinition Height="Auto"/>
        <RowDefinition />
        <!-- Height="Auto" -->
        <RowDefinition Height="Auto"/>
    </Grid.RowDefinitions>
    <TextBox Grid.Row="0" Text="Some Header Text" />
    <StackPanel Grid.Row="1">
        <CheckBox  x:Name="switch" Content="Switch" IsChecked="True" />
        <ListView  Visibility="{Binding Path=IsChecked, ElementName=switch, Converter={StaticResource BooleanToVisibilityConverter}}" MaxHeight="70">
            <ListViewItem Content="11111111"/>
            <ListViewItem Content="22222222"/>
            <ListViewItem Content="33333333"/>
            <ListViewItem Content="44444444"/>
            <ListViewItem Content="55555555"/>
            <ListViewItem Content="66666666"/>
        </ListView>
        <ListView  MaxHeight="70">
            <ListViewItem Content="aaaaaaaa"/>
            <ListViewItem Content="bbbbbbbb"/>
            <ListViewItem Content="cccccccc"/>
            <ListViewItem Content="dddddddd"/>
            <ListViewItem Content="eeeeeeee"/>
            <ListViewItem Content="ffffffff"/>
        </ListView>
    </StackPanel>
    <TextBox Grid.Row="2" Text="Some Footer Text" />
</Grid>