17

我正在尝试按如下方式安排 WPF UI：

小样

  1. 窗口顶部是一些自行决定高度的控件（有效地停靠在窗口顶部，但与它们想要的高度一样高）。
  2. 在这些控件下面是一个 ListView。ListView 可能包含可变数量的项目，每个项目的高度都不同。问题： ListView 不能比它需要的高。如果列表视图中的所有项目都可以轻松放入窗口，我希望 ListView恰好是显示其所有项目的高度（因此窗口看起来像网页的流动布局，底部有空白）。另一方面，如果所有 ListView 项目都不适合窗口，我希望整个 UI 适合窗口（好像下面的数字 3 停靠在窗口底部，并且 ListView 正在填充可用空间） . 当用户调整窗口大小和/或按下更改列表视图内容的按钮时，这一切都必须动态调整。
  3. ListView 下方是更多的自定高度控件。这些必须始终直接出现在 ListView 下方，没有间隙。特别是，如果它们可以直接放在 ListView 下方，则它们不能只停靠在窗口底部。

解决方案将非常受欢迎；我已经摆弄了一段时间，并设法通过在窗口中使用外部 DockPanel 使第一个控件停靠在顶部，并且 ListView 填充剩余空间但设置为 VerticalAlignment="最佳”。

一个纯 XAML 解决方案将是理想的，但如果它是不可避免的，我不介意后面的代码。允许垂直堆叠多个此类布置的解决方案的奖励积分:) 感谢您的帮助！

4

4 回答 4

19

尝试

<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>
于 2011-03-16T02:20:58.777 回答
2

使用三行网格并将所有三行的高度设置为自动，以便它们根据内容调整大小。 

<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>
于 2011-03-16T02:20:52.083 回答
1

我也在为尺寸而苦苦挣扎。答案实际上是设置我的网格行的高度属性。我有以下设置：

<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>

所以真正解决我的问题的是设置第一行定义的Height属性（包含我的ListBox）：

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

有什么好玩的...

于 2014-02-27T11:22:48.600 回答
0

将列表视图和底部控件放入自己的堆栈面板中还不够吗？

于 2011-03-16T00:40:22.897 回答