Как сделать WPF ListView не выше его содержимого, но уместиться в окне с другими элементами управления? - PullRequest
13 голосов
/ 16 марта 2011

Я пытаюсь расположить пользовательский интерфейс WPF следующим образом:

Mock up

  1. В верхней части окна расположены элементы управления высотой самоопределения (эффективно пристыкованы кверхняя часть окна, но такая высокая, как они хотят).
  2. Под этими элементами управления находится ListView.ListView может содержать переменное количество элементов, каждый из которых имеет различную высоту. Проблема: ListView не должен быть выше, чем должен быть.Если все элементы в виде списка легко поместятся в окне, я хочу, чтобы ListView был точно такой же высоты, чтобы все его элементы отображались (поэтому окно выглядит как плавный макет веб-страницы с пустым пространством вдно).С другой стороны, если все элементы ListView не помещаются в окне, я хочу, чтобы весь пользовательский интерфейс соответствовал окну (как будто цифра 3 ниже пристыкована к нижней части окна, и ListViewзаполнял доступное пространство).Все это должно изменяться динамически, поскольку пользователь изменяет размеры окна и / или нажимает кнопки, которые изменяют содержимое представления списка.
  3. Под ListView есть еще несколько элементов управления высотой самоопределения.Они должны появляться непосредственно под ListView без пробелов.В частности, они не должны просто пристыковываться к нижней части окна, если они будут помещаться непосредственно под ListView.

Решения будут очень приветствоваться;Некоторое время я возился и сумел заставить все работать за исключением элементов управления под ListView, используя внешнюю DockPanel в окне с первыми элементами управления, закрепленными сверху, и ListView заполнил оставшееся пространствоно установите значение VerticalAlignment = "Top".

Идеальным решением будет чистое XAML, но я не против кода, если его неизбежно.Бонусные баллы за решение, которое позволяет размещать несколько таких устройств вертикально :) Спасибо за любую помощь!

Ответы [ 4 ]

15 голосов
/ 16 марта 2011

Попробуйте

<Grid VerticalAlignment="Top">
    <Grid.RowDefinitions>
        <RowDefinition Height="auto" />
        <RowDefinition Height="*" />
        <RowDefinition Height="auto" />

    </Grid.RowDefinitions>

    <Button Content="hello" />
    <ScrollViewer Grid.Row="1" >
    <ListView >
            <ListBoxItem Content="hi" />
            <ListBoxItem Content="hi" />
            <ListBoxItem Content="hi" />
            <ListBoxItem Content="hi" />
            <ListBoxItem Content="hi" />
            <!-- Some Items -->
    </ListView>
    </ScrollViewer>
    <Button Content="hello" Grid.Row="2" />

</Grid>
2 голосов
/ 16 марта 2011

Используйте Grid с тремя строками и установите для высоты всех трех значение Auto, чтобы они соответствовали содержимому.

<Window x:Class="WpfApplicationUnleashed.Window1"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:sys="clr-namespace:System;assembly=mscorlib" xmlns:local="clr-namespace:WpfApplicationUnleashed"
        Title="Window1" >
    <Grid VerticalAlignment="Top">
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto"></RowDefinition>
            <RowDefinition Height="Auto"></RowDefinition>
            <RowDefinition Height="Auto"></RowDefinition>
        </Grid.RowDefinitions>

        <StackPanel Margin="10" Grid.Row="0" Orientation="Horizontal">
            <Button Margin="10">These are top controls</Button>
            <Label Margin="10">These are top controls</Label>
            <TextBox Margin="10">These are top controls</TextBox>
        </StackPanel>

        <TreeView Margin="10" Grid.Row="1">
            <TreeViewItem Header="Item 1" >
                <TreeViewItem Header=" Sub Item 1" />
                <TreeViewItem Header=" Sub Item 2" />
                <TreeViewItem Header="Sub Item 3" />
            </TreeViewItem>
            <TreeViewItem Header="Item 2" />
            <TreeViewItem Header="Item 3" />
            <TreeViewItem Header="Item 4" />
        </TreeView>

        <StackPanel Margin="10" Grid.Row="2" Orientation="Horizontal">
            <Button Margin="10">These are bottom controls</Button>
            <Label Margin="10">These are bottom controls</Label>
            <TextBox Margin="10">These are bottom controls</TextBox>
        </StackPanel>


    </Grid>
</Window>
1 голос
/ 27 февраля 2014

Я тоже боролся с размером.И ответом было действительно установить свойство Высота моих строк сетки.У меня есть следующие настройки:

<Grid>
    <Grid.RowDefinitions>
        <RowDefinition Height="*"></RowDefinition>
        <RowDefinition Height="Auto"></RowDefinition>
    </Grid.RowDefinitions>
    <ListBox Grid.Row="0"
                         HorizontalAlignment="Stretch"
                         VerticalContentAlignment="Stretch" 
                         ScrollViewer.CanContentScroll="True"
                         ScrollViewer.VerticalScrollBarVisibility="Visible"
                         ItemsSource="{Binding AuditEntries}"
                         Margin="1 0 1 1" BorderThickness="0" VerticalAlignment="Top"/>
    <Button Grid.Row="1" />
</Grid>

Итак, что действительно решило мою проблему, это установить свойство Высота для первого определения строки (которое содержит мой ListBox ):

<RowDefinition Height="*"></RowDefinition>

Какое веселое веселье ...

0 голосов
/ 16 марта 2011

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

...