Установить высоту элемента на высоту соседнего элемента

Question

У меня есть GUI в приложении WPF, которое выглядит так:

<Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto"/>
        </Grid.RowDefinitions>
    <StackPanel Orientation="Horizontal">
        <StackPanel Orientation="Vertical">
            <Border Background="Beige" BorderThickness="1" BorderBrush="Black" Width="100" Height="50" Margin="2"></Border>

            <Border Background="Beige" BorderThickness="1" BorderBrush="Black" Width="100" Height="90" Margin="2"></Border>
        </StackPanel>

        <Border Background="Beige" BorderThickness="1" BorderBrush="Black" Margin="2">
            <StackPanel>
            <StackPanel Orientation="Horizontal">
                <Button Content="Some"/>
                <Button Content="Buttons"/>
            </StackPanel>
                <Label Content="Some Label"/>
                <ListView ScrollViewer.VerticalScrollBarVisibility="Auto">
                    <ListViewItem>Item1</ListViewItem>
                    <ListViewItem>Item2</ListViewItem>
                    <!-- and so on...-->
                    <ListViewItem>Item8</ListViewItem>
                    </ListView>
            </StackPanel>
        </Border>
    </StackPanel>
    </Grid>

Две границы слева - просто заполнители для элементов GUI в реальном приложении. Элемент GUI выглядит следующим образом:

Я хочу, чтобы правое StackPanel было так же высоко, как левое StackPanel, как вследующий снимок экрана:

Для снимка экрана я вручную устанавливал для свойства MaxHeight ListView правильное значение, но, конечно, этоне является удовлетворительным решением, и это станет невозможным, если я не знаю во время компиляции, какие и сколько элементов заполняют левые StackPanel.

Есть ли какое-либо решение этой проблемы? Я пытался связать:

<Grid>
            <Grid.RowDefinitions>
                <RowDefinition Height="Auto"/>
            </Grid.RowDefinitions>
        <StackPanel Orientation="Horizontal">
            <StackPanel Orientation="Vertical" Name="Left">
                <Border Background="Beige" BorderThickness="1" BorderBrush="Black" Width="100" Height="50" Margin="2"></Border>

                <Border Background="Beige" BorderThickness="1" BorderBrush="Black" Width="100" Height="90" Margin="2"></Border>
            </StackPanel>

            <Border Background="Beige" BorderThickness="1" BorderBrush="Black" Margin="2" Height="{Binding ElementName=Left, Path=Height}">
                <!-- as above -->
            </Border>
        </StackPanel>
        </Grid>

Но мне это не удалось, даже когда я связался с ActualHeight слева StackPanel. Есть предложения?

Answer 1

Панели стека расширяются, чтобы соответствовать их содержимому. Вместо этого вам нужно поместить ListView в контейнер фиксированного размера (я использовал Grid со строкой высоты *), который берет его размер из полей в первом столбце.

Я использовал привязку к ActualHeight, которая была очень похожа на вашу.

Другим важным отличием была установка VerticalAlignment="Top" на первой панели стека, в противном случае он автоматически изменял размер на тот жевысота как граница.

<Grid>
    <Grid.RowDefinitions>
        <RowDefinition Height="Auto"/>
    </Grid.RowDefinitions>
    <StackPanel Orientation="Horizontal">

        <StackPanel Orientation="Vertical" Name="Left" VerticalAlignment="Top">
            <Border Background="Beige" BorderThickness="1" BorderBrush="Black" Width="100" Height="50" Margin="2"></Border>
            <Border Background="Beige" BorderThickness="1" BorderBrush="Black" Width="100" Height="90" Margin="2"></Border>
        </StackPanel>

        <Border Height="{Binding ElementName=Left, Path=ActualHeight}" >
            <Border Background="Beige" BorderThickness="1" BorderBrush="Black" Margin="2">
                <Grid >
                    <Grid.RowDefinitions>
                        <RowDefinition Height="Auto"/>
                        <RowDefinition Height="Auto"/>
                        <RowDefinition Height="*"/>
                    </Grid.RowDefinitions>

                    <StackPanel Grid.Row="0" Orientation="Horizontal">
                        <Button Content="Some"/>
                        <Button Content="Buttons"/>
                    </StackPanel>
                    <Label  Grid.Row="1" Content="Some Label"/>
                    <ListView Grid.Row="2" ScrollViewer.VerticalScrollBarVisibility="Auto">
                        <ListViewItem>Item1</ListViewItem>
                        <ListViewItem>Item2</ListViewItem>
                        <ListViewItem>Item2</ListViewItem>
                        <ListViewItem>Item2</ListViewItem>
                        <ListViewItem>Item2</ListViewItem>
                        <ListViewItem>Item2</ListViewItem>
                        <!-- and so on...-->
                        <ListViewItem>Item8</ListViewItem>
                    </ListView>
                </Grid>
            </Border>
        </Border>
    </StackPanel>
</Grid>

Answer 2

Попробуйте это:

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

    <StackPanel
        Name="FirstPanel" 
        Grid.Column="0"
        VerticalAlignment="Top">

        <Border 
            Background="Beige" 
            BorderThickness="1" 
            BorderBrush="Black"
            Width="100" 
            Height="50" 
            Margin="2"/>

        <Border 
            Background="Beige" 
            BorderThickness="1" 
            BorderBrush="Black"
            Width="100" 
            Height="90" 
            Margin="2"/>

    </StackPanel>

    <Border 
        Name="ContainerBorder"
        Grid.Column="1"
        Background="Beige" 
        BorderThickness="1"
        BorderBrush="Black"
        Margin="2"
        VerticalAlignment="Top"
        MaxHeight="{Binding ElementName=FirstPanel, Path=ActualHeight}">

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

            <StackPanel Grid.Row="0" Orientation="Horizontal">
                <Button Content="Some"/>
                <Button Content="Buttons"/>
            </StackPanel>

            <Label Grid.Row="1" Content="Some Label"/>

            <ListView Grid.Row="2" ScrollViewer.VerticalScrollBarVisibility="Auto">
                <ListViewItem>Item1</ListViewItem>
                <ListViewItem>Item2</ListViewItem>
                <ListViewItem>Item3</ListViewItem>
                <ListViewItem>Item4</ListViewItem>
                <ListViewItem>Item5</ListViewItem>
                <ListViewItem>Item6</ListViewItem>
                <ListViewItem>Item7</ListViewItem>
                <ListViewItem>Item8</ListViewItem>
            </ListView>
        </Grid>
    </Border>
</Grid>

Выход:

Answer 3

<StackPanel>
    <Grid Width="300" Height="200">
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="*"/>
            <ColumnDefinition Width="*"/>
        </Grid.ColumnDefinitions>
        <Grid>
            <Grid.RowDefinitions>
                <RowDefinition Height="2*"/>
                <RowDefinition Height="3*"/>
            </Grid.RowDefinitions>
            <Border Background="Beige" BorderThickness="1" BorderBrush="Black" Margin="2"></Border>

            <Border Grid.Row="1" Background="Beige" BorderThickness="1" BorderBrush="Black" Margin="2"></Border>
        </Grid>
        <Border Grid.Column="1" Background="Beige" BorderThickness="1" BorderBrush="Black" Margin="2">
            <StackPanel>
                <StackPanel Orientation="Horizontal">
                    <Button Content="Some"/>
                    <Button Content="Buttons"/>
                </StackPanel>
                <Label Content="Some Label"/>
                <ListView ScrollViewer.VerticalScrollBarVisibility="Auto">
                    <ListViewItem>Item1</ListViewItem>
                    <ListViewItem>Item2</ListViewItem>
                    <!-- and so on...-->
                    <ListViewItem>Item8</ListViewItem>
                </ListView>
            </StackPanel>
        </Border>

    </Grid>
</StackPanel>