DockPanel 中的 WPF4 TabControl/Grid 隐藏了 StatusBar

Posted 2023-02-23

【中文标题】DockPanel 中的 WPF4 TabControl/Grid 隐藏了 StatusBar

【英文标题】：WPF4 TabControl/Grid in a DockPanel is hiding StatusBar

【发布时间】：2011-04-27 15:54:45

【问题描述】：

我有一个窗口，里面有一个包含 3 个元素的 DockPanel、一个停靠在顶部的 MenuBar、一个停靠在底部的 StatusBar 和一个填充主体的 TabControl。

至少，我希望 TabControl 填充主体。在可视化设计器中，TabControl 和 StatusBar 并排布置，而不是顶部和底部。当我运行应用程序时，TabControl 展开以填充 MenuBar 下方的 DockPanel，而 StatusBar 消失。 （我猜它正在被推离父窗口的可见画布。）

我尝试按照this recommendation 设置垂直和水平对齐方式。 我尝试在状态栏上设置 ZIndex。 我尝试使用堆栈面板（都停靠在 DockPanel 内并替换 DockPanel）。 一切都无济于事:-(

以下是我用来呈现 DockPanel 的 XAML 的摘录。关于我做错了什么有什么建议吗？有没有比使用 DockPanel 更好的方法？

    <DockPanel>
    <Menu Name="_menu" Height="23" HorizontalAlignment="Stretch" VerticalAlignment="Top" DockPanel.Dock="Top">
        <MenuItem Header="_User Maintenance">
        </MenuItem>
    </Menu>
    <TabControl 
        x:Name="_panel" 
        ItemsSource="Binding Path=AllTabs" 
        Margin="0,0,0,0" 
        Visibility="Binding Path=Visibility" 
        DockPanel.Dock="Top"
        HorizontalAlignment="Stretch"
        VerticalAlignment="Stretch"
        >
    </TabControl>
    <StatusBar Name="_statusBar" DockPanel.Dock="Bottom" Margin="0,0,0,0" VerticalAlignment="Bottom">
        <StatusBar.ItemsPanel>
            <ItemsPanelTemplate>
                <Grid>
                    <Grid.RowDefinitions>
                        <RowDefinition Height="26"/>
                    </Grid.RowDefinitions>
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="*"/>
                    </Grid.ColumnDefinitions>
                </Grid>
            </ItemsPanelTemplate>
        </StatusBar.ItemsPanel>
        <StatusBarItem Grid.Column="0" Grid.Row="0">
            <ProgressBar Name="_progressBar" Height="20" IsIndeterminate="True" Margin="4,0,4,0" VerticalAlignment="Top" Width="600"/>
        </StatusBarItem>
    </StatusBar>
</DockPanel>

编辑：

通过将 DockPanel.Dock="Top" 与 Horizo​​ntalAlignment 和 VerticalAlignment="Stretch" 一起添加到 TabControl，我能够让 TabControl 堆叠在 StatusBar 上方而不是旁边在视觉设计师中。现在，我的一些 TabItem 的状态栏只会在运行时消失。

我的 TabControl 数据绑定到一个 ViewModel，它公开了一个 UserControls 列表。每个 UserControl 都包含自己的数据绑定 DataGrid（通常还有一些其他控件）。在 DataGrid 仅显示几行的选项卡中，TabControl 和 TabItem 仅拉伸以包含 UserGrid，而 StatusBar 在页面底部可见。在 DataGrid 显示许多行的选项卡上，TabControl 会拉伸以填充窗口，从而隐藏了 StatusBar。

如果有帮助，这是我的 DataGrid 定义：

 <DataGrid 
        Name="_customerGrid" 
        Grid.Column="0" 
        Grid.ColumnSpan="3" 
        Grid.Row="1" 
        AutoGenerateColumns="False" 
        CanUserSortColumns="True"
        ColumnHeaderStyle="StaticResource columnHeaderStyle"
        HorizontalAlignment="Left" 
        ItemsSource="Binding Path=AllCustomers" 
        RowDetailsVisibilityMode="VisibleWhenSelected"
        RowStyle="StaticResource DataGridRowStyle"
        SelectionUnit="FullRow"
        VerticalAlignment="Top">

谢谢！

【参考方案1】：

DockPanel 取决于添加项目的顺序。在添加占用剩余空间的项目之前，您必须先添加停靠的项目。在您的情况下，您只需将您的项目重新排列为如下所示：

<DockPanel>
  <Menu DockPanel.Dock="Top".../>
  <StatusBar DockPanel.Dock="Bottom".../>
  <TabControl/>
</DockPanel>

【讨论】：

DockPanel 的这种行为令人困惑，但逻辑上却如此正确。谢谢，这个解决方案帮助了我！