【问题标题】:Is there any way to create a sticky footer in WPF?有没有办法在 WPF 中创建一个粘性页脚?
【发布时间】:2021-04-23 17:10:45
【问题描述】:

我想在 WPF 中有一个粘性页脚。

这是我在这个主题上发现的唯一问题: Is there any way to create a sticky footer in xaml?

但答案会创建一个固定页脚,而不是一个粘性页脚:

<Grid>
    <Grid.RowDefinitions>
        <RowDefinition Height="Auto" />
        <RowDefinition Height="*" />
        <RowDefinition Height="Auto" />
    </Grid.RowDefinitions>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="Auto" />
    </Grid.ColumnDefinitions>
    <Label Grid.Row="0" Grid.Column="0" Content="Label at the top"/>

    <DataGrid Grid.Row="1"/>

    <Label Grid.Row="2" Grid.Column="0" Content="Label at the bottom"/>
</Grid>

此解决方案的问题在于,当我将 DataGrid 放在中间(第 1 行)时,它会占据所有剩余的空白空间,从而将底部 Label 推开。

DataGrid 不占据整个高度时,我希望底部Label 粘在DataGrid 的底部,并在DataGrid 高于屏幕时留在屏幕上。

伪代码:

if DataGrid needs scrollbar
    <Grid.RowDefinitions>
        <RowDefinition Height="Auto" />
        <RowDefinition Height="*" />
        <RowDefinition Height="Auto" />
    </Grid.RowDefinitions>
else
    <Grid.RowDefinitions>
        <RowDefinition Height="Auto" />
        <RowDefinition Height="Auto" />
        <RowDefinition Height="Auto" />
    </Grid.RowDefinitions>

数字示例:

DataGrid needs a scrollbar:
    screen height: 1000 px
    filled data grid height: 2500 px
    sticky footer height: 30 px
    sticky footer y from top: 970 px (screen height - sticky footer height)

DataGrid does not need a scrollbar:
    screen height: 1000 px
    empty data grid height: 100 px
    sticky footer height: 30 px
    sticky footer y from top: 100 px (same as data grid height)

这只是一个例子,我的屏幕是可调整大小的,所以解决方案不能依赖于屏幕大小。

【问题讨论】:

    标签: wpf xaml footer sticky


    【解决方案1】:

    带有内部 Grid 的 DockPanel 产生所需的布局:

    <DockPanel LastChildFill="False">
        <Label Content="Label at the top" DockPanel.Dock="Top"/>
    
        <Grid DockPanel.Dock="Top">
            <Grid.RowDefinitions>
                <RowDefinition Height="*" />
                <RowDefinition Height="Auto" />
            </Grid.RowDefinitions>
    
            <DataGrid Grid.Row="0" />
    
            <Label Grid.Row="1" Grid.Column="0" Content="Label at the bottom"/>
        </Grid>
    </DockPanel>
    

    【讨论】:

    • 非常感谢,其实我用DockPanel试过了,但是忘记了LastChildFill="False"
    猜你喜欢
    • 2011-04-09
    • 2011-11-06
    • 2022-12-22
    • 2013-01-02
    • 2022-01-25
    • 2014-06-08
    • 2022-07-15
    • 2011-01-11
    • 1970-01-01
    相关资源
    最近更新 更多