WPF Page->Canvas->TabControl->TabItem->Grid->DataGrid 不显示垂直滚动条答案

【问题标题】：WPF Page->Canvas->TabControl->TabItem->Grid->DataGrid not showing vertical scrollbarsWPF Page->Canvas->TabControl->TabItem->Grid->DataGrid 不显示垂直滚动条
【发布时间】：2017-04-13 19:23:56
【问题描述】：

好的，我也遇到了“垂直滚动条不显示”的问题，建议的解决方案要么不起作用，要么不适用于这种情况。

希望不是显示一个，而是两个数据网格，并排显示，每个在应用程序上都有自己的数据源，可以正确响应用户调整大小，这意味着网格将按预期扩展和收缩。网格应该被“锚定”并相应地渲染（哦，我多么怀念 WinForms 和实际简单锚定的日子！）。

第一个网格通常会显示不足的行来触发垂直滚动条，没关系。

第二个数据网格的内容基于第一个数据网格的选定行，这意味着当用户在第一个数据网格（第 0 列）中选择一行时，将执行一条 SQL 语句并将结果显示在另一个数据网格中（第 1 列中的一个）。

发生的情况是第二个网格的内容，如果大于显示的大小，将继续呈现（看不见）推动页面容器项目（底部的状态栏，代码中未显示）到一侧并继续在应用程序边界之外进行渲染（不可见，但网格的行为就像它有无限的显示空间一样）。

我没有得到一个带有垂直滚动条的漂亮的分页网格。

我使用 MVVMLight 作为工具包，并且相应的 ViewModel 按设计工作。数据不是问题，只是渲染。

我很确定解决方案非常简单，只是我还没有 xaml 经验（我是新手）来解决这个问题。我已经尝试将网格封闭在各种其他容器中（DockPanel、StackPanel withorientation=Horizontal 等），但似乎无法做到正确。我什至尝试将行高绑定到选项卡控件的实际高度 - 失败。

所以...对于教程解释的一点帮助将不胜感激！

这是页面的完整 xaml（除了我已经删除了无关的标签页）：

    <Page x:Class="GetSchemaExplorerMsSqlSvr.DbMetaDataPage"
      xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
      xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
      xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
      xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
      xmlns:local="clr-namespace:GetSchemaExplorerMsSqlSvr"
      xmlns:i="http://schemas.microsoft.com/expression/2010/interactivity"
      xmlns:command="http://www.galasoft.ch/mvvmlight"
      mc:Ignorable="d" 
      d:DesignHeight="300" d:DesignWidth="500"
      Height="Auto"
            Width="Auto"
      Title="DbMetaDataPage"
            x:Name="pgDbMetaDataPage"
      Background="{StaticResource YellowBackground}"
      DataContext="{Binding MainWindowVM, Source={StaticResource Locator}}"
      >
  <Canvas>
    <TabControl x:Name="tcDbMetaData" Height="Auto"  Width="Auto">
            <TabItem x:Name="tiDbMetaData" Header="Get Schema" VerticalAlignment="Stretch">
                <Grid Margin="1,1,1,1">
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="Auto"/>
                        <ColumnDefinition Width="*"/>
                    </Grid.ColumnDefinitions>
                    <Grid.RowDefinitions>
                        <RowDefinition/>
                    </Grid.RowDefinitions>
                    <DataGrid
                        Grid.Column="0"
                        x:Name="dgDbMetaData"
                        ItemsSource="{Binding Path=GetSchemaMetaData, Mode=OneWay, NotifyOnSourceUpdated=True, UpdateSourceTrigger=PropertyChanged}" 
                        IsReadOnly="True"
                        SelectedItem="{Binding Path=SelectedMetaDataItem, Mode=TwoWay, NotifyOnSourceUpdated=True, UpdateSourceTrigger=PropertyChanged}"
                    />
                    <DataGrid
                        Grid.Column="1"
                        ItemsSource="{Binding Path=MetaDataCollectionInfo, Mode=OneWay}" 
                        IsReadOnly="True"
                        VerticalScrollBarVisibility="Auto"
                    />
                </Grid>
            </TabItem>
    </TabControl>
  </Canvas>
</Page>

【问题讨论】：

标签： c# wpf xaml datagrid scrollbar

【解决方案1】：

这是因为您将 TabControl 设置为 Canvas 的子级。它用于设置其子元素的绝对定位。由于您不需要设置绝对位置，因此您应该删除 Canvas 并将 Page 的内容直接设置为 TabControl。

来自 MSDN：

Canvas 的子元素总是被赋予他们想要的完整大小。因此，垂直对齐和水平对齐在 Canvas 内无效。

(https://msdn.microsoft.com/en-us/library/system.windows.controls.canvas%28v=vs.110%29.aspx)

您的代码将是：

<Page...>
    <TabControl ...>
        <TabItem ...>
           <Grid ...>
               <DataGrid Grid.Column="0".../>
               <DataGrid Grid.Column="1" .../>
           </Grid>
        </TabItem>
     </TabControl>
</Page>

【讨论】：

哈！去搞清楚！我只是靠自己发现了这一点，并且要得意洋洋地吹嘘自己的成功，却发现了这个答案。感谢您的快速回复和正确答案。您将被标记为答案！

【解决方案2】：

如上所述，删除 Canvas 元素解决了问题。更改后的 xaml 在下面发布，仅供参考。结果不是很漂亮，但现在我正在寻找功能，这可以解决问题。

<Page x:Class="GetSchemaExplorerMsSqlSvr.DbMetaDataPage"
      xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
      xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
      xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
      xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
      xmlns:local="clr-namespace:GetSchemaExplorerMsSqlSvr"
      xmlns:i="http://schemas.microsoft.com/expression/2010/interactivity"
      xmlns:command="http://www.galasoft.ch/mvvmlight"
      mc:Ignorable="d" 
      d:DesignHeight="300" d:DesignWidth="500"
      Height="Auto"
            Width="Auto"
      Title="DbMetaDataPage"
            x:Name="pgDbMetaDataPage"
      Background="{StaticResource YellowBackground}"
      DataContext="{Binding MainWindowVM, Source={StaticResource Locator}}"
      >
    <TabControl x:Name="tcDbMetaData" Height="Auto"  Width="Auto">
        <TabItem x:Name="tiDbMetaData" Header="Get Schema" VerticalAlignment="Stretch">
            <DockPanel VerticalAlignment="Stretch" HorizontalAlignment="Stretch">

                <Grid DockPanel.Dock="Top" Background="{StaticResource YellowBackground}">
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="Auto"/>
                        <ColumnDefinition Width="*"/>
                    </Grid.ColumnDefinitions>
                    <Grid.RowDefinitions>
                        <RowDefinition/>
                        <RowDefinition MaxHeight="40"/>
                    </Grid.RowDefinitions>
                    <DataGrid
                        Grid.Row="0"
                        Grid.Column="0"
                        x:Name="dgDbMetaData"
                        ItemsSource="{Binding Path=GetSchemaMetaData, Mode=OneWay, NotifyOnSourceUpdated=True, UpdateSourceTrigger=PropertyChanged}" 
                        IsReadOnly="True"
                        SelectedItem="{Binding Path=SelectedMetaDataItem, Mode=TwoWay, NotifyOnSourceUpdated=True, UpdateSourceTrigger=PropertyChanged}"
                    />
                    <DataGrid
                        Grid.Row="0"
                        Grid.Column="1"
                        ItemsSource="{Binding Path=MetaDataCollectionInfo, Mode=OneWay}" 
                        IsReadOnly="True"
                        VerticalScrollBarVisibility="Auto"
                    />
                    <Button Grid.Column="0" Grid.Row="1" MaxHeight="30" Margin="5, 5, 5, 5" Content="Fetch MetaData"/>
                </Grid>
            </DockPanel>
        </TabItem>
        <TabItem Header="Tables">
            <Grid Background="#FFE5E5E5"/>
        </TabItem>
        <TabItem Header="Views">
            <Grid Background="#FFE5E5E5"/>
        </TabItem>
        <TabItem Header="Stored Procedures">
            <Grid Background="#FFE5E5E5"/>
        </TabItem>
        <TabItem Header="Functions">
            <Grid Background="#FFE5E5E5"/>
        </TabItem>
    </TabControl>

</Page>

【讨论】：