如何让 DataGrid 填充 WPF 窗口中的空白区域答案

【问题标题】：How to have DataGrid to Fill Up the Blank Space in Window in WPF如何让 DataGrid 填充 WPF 窗口中的空白区域
【发布时间】：2018-07-09 17:06:44
【问题描述】：

我正在处理 WPF 中的一个项目。其中我的要求是将我的 DataGrid 附加在窗口的底部，这样如果用户将恢复向下或最大化窗口或更改窗口的大小，则 DataGrid 的高度不应超出主窗口并且应该自动调整大小并且应该出现滚动条来查看数据。在下面给出的代码中，DataGrid 仅显示可用的数据，例如，如果只有 2 行要显示，它将在数据网格中仅显示 2 行，其余用户可以看到背景，如果数据有 50 60 行数据网格将超出主窗口，用户无法看到数据网格中的所有行。

我的要求数据网格高度不应超过主窗口中的可用空间。如果数据库中没有要显示的行，则 DataGrid 应该显示空行或简单的灰色空间。

<StackPanel>

    <StackPanel Orientation="Horizontal">
        <TextBlock Margin="40 50 0 0" Text="Label1:" Foreground="White" FontWeight="Medium" />
        <ComboBox x:Name="CustomerList" Margin="15 40 0 0" Padding="7" Width="300" Foreground="Black" FontWeight="Medium" Cursor="Hand">
    </StackPanel>

    <StackPanel Orientation="Horizontal">
        <TextBlock Margin="25 30 0 0" Text="Label2" Foreground="White" FontWeight="Medium" TextWrapping="Wrap" Width="54"/>
        <TextBox x:Name="AppName" Margin="15 30 0 0" Padding="7" Width="230" Background="LightCyan" Foreground="Black" FontWeight="Medium" />
    </StackPanel>

    <StackPanel Orientation="Horizontal">          
        <TextBox x:Name="Tenure" Margin="20 30 0 0" Padding="7" Width="170" Background="LightCyan" Foreground="Black" FontWeight="Medium" />          
    </StackPanel>

    <Grid>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="1000"/>
            <ColumnDefinition Width="150"/>
        </Grid.ColumnDefinitions>
        <StackPanel>
            <StackPanel Orientation="Horizontal" Grid.Column="0">

               <TextBlock Margin="25 30 0 0" Text="Label2.:" Foreground="White" FontWeight="Medium" Width="80" TextWrapping="Wrap"/>
            </StackPanel>

            <StackPanel Orientation="Horizontal" Grid.Column="0">                    
                <Button x:Name="Add_btn" Content="Add Data" Width="120" Padding="12" Background="Transparent" Foreground="White" FontWeight="Medium" Margin="15 30 0 0" BorderBrush="White" BorderThickness="1" Click="Add_btn_Click" Cursor="Hand"/>
            </StackPanel>
        </StackPanel>

        <StackPanel Grid.Column="1" HorizontalAlignment="Right">
            <Image Source="C:\Users\Asim Abbas\Source\Icons\Upload1.png" Height="90" Width="90" Margin="0 25 0 0" MouseLeftButtonDown="Image_MouseLeftButtonDown" Cursor="Hand">
                <Image.Effect>
                    <DropShadowEffect/>
                </Image.Effect>
            </Image>

            <TextBlock Margin="20,5,0,0" Text="Upload" Foreground="White" FontWeight="Medium" />

        </StackPanel>
    </Grid>

这就是事情变得丑陋的地方 - 数据从上方继续

    <DataGrid 
        DockPanel.Dock="Bottom"
        x:Name="Grid"
        Margin="0 20 0 0"
        AutoGenerateColumns="False"
        CanUserAddRows="False"
        CanUserDeleteRows="False"
        ColumnHeaderHeight="60"
        CanUserResizeColumns="False"
        ScrollViewer.VerticalScrollBarVisibility="Visible"
        VerticalScrollBarVisibility="Visible"
        CanUserReorderColumns="False"
        CanUserResizeRows="False"
        CanUserSortColumns="False"
        RowBackground="LightCyan"
        RowHeight="30"
        HorizontalGridLinesBrush="LightGray"
        Width="Auto"            
        IsReadOnly="True"
        VerticalAlignment="Stretch"
        VerticalContentAlignment="Stretch"
        FontSize="11"
        HorizontalAlignment="Left"
        FontWeight="Medium"
        VerticalGridLinesBrush="LightGray" 
        BorderBrush="FloralWhite"
        MouseDoubleClick="LCGrid_MouseDoubleClick">

        <DataGrid.ColumnHeaderStyle>
            <Style TargetType="DataGridColumnHeader">
                <Setter Property="ContentTemplate">
                    <Setter.Value>
                        <DataTemplate>
                            <TextBlock HorizontalAlignment="Center" TextWrapping="Wrap" Text="{Binding}"/>
                        </DataTemplate>
                    </Setter.Value>
                </Setter>
                <Setter Property="VerticalContentAlignment" Value="Bottom"/>
                <Setter Property="HorizontalContentAlignment" Value="Center"/>
                <Setter Property="BorderThickness" Value=".5,.5,.5,.5"/>
                <Setter Property="BorderBrush" Value="LightGray"/>
                <Setter Property="Background" Value="FloralWhite"/>
                <Setter Property="FontWeight" Value="SemiBold"/>
                <Setter Property="FontSize" Value="12"/>
                <Setter Property="Padding" Value="5"/>
                <Setter Property="Width" Value="Auto"/>
            </Style>
        </DataGrid.ColumnHeaderStyle>

        <DataGrid.RowHeaderStyle>
            <Style TargetType="DataGridRowHeader">
                <Setter Property="HorizontalContentAlignment" Value="Right"/>
                <Setter Property="Width" Value="25"/>
                <Setter Property="FontWeight" Value="Medium"/>
                <Setter Property="FontSize" Value="12"/>
                <Setter Property="Background" Value="FloralWhite"/>
            </Style>
        </DataGrid.RowHeaderStyle>

        <DataGrid.CellStyle>
            <Style TargetType="DataGridCell">
                <Setter Property="Padding" Value="3"/>
                <Setter Property="Template">
                    <Setter.Value>
                        <ControlTemplate TargetType="{x:Type DataGridCell}">
                            <Border Padding="{TemplateBinding Padding}" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" SnapsToDevicePixels="True" VerticalAlignment="Bottom">
                                <ContentPresenter SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" VerticalAlignment="Bottom"/>
                            </Border>
                        </ControlTemplate>
                    </Setter.Value>
                </Setter>
            </Style>
        </DataGrid.CellStyle>

        <DataGrid.Columns>
            <DataGridTextColumn Binding="{Binding Col1}" Header="Col 1" Width="150"/>
            <DataGridTextColumn Binding="{Binding Col1}" Header="Col2" Width="60">
                <DataGridTextColumn.ElementStyle>
                    <Style TargetType="TextBlock">
                        <Setter Property="HorizontalAlignment" Value="Center"/>
                    </Style>
                </DataGridTextColumn.ElementStyle>
            </DataGridTextColumn>
            <DataGridTextColumn Binding="{Binding Col1, StringFormat={}{0:dd-MMM-yy}}" Header="Col 3" Width="80"/>
            <DataGridTextColumn Binding="{Binding Col1}" Header="Col3" Width="80"/>
            <DataGridTextColumn Binding="{Binding Col1}" Header="Col 4" Width="250"/>
            <DataGridTextColumn Binding="{Binding Col1}" Header="Col5" Width="80"/>
            <DataGridTextColumn Binding="{Binding Col1, StringFormat=N2}" Header="LC Value" Width="100">
                <DataGridTextColumn.ElementStyle>
                    <Style TargetType="TextBlock">
                        <Setter Property="HorizontalAlignment" Value="Right"/>
                    </Style>
                </DataGridTextColumn.ElementStyle>
            </DataGridTextColumn>

            <DataGridTextColumn Binding="{Binding Col1, StringFormat=N2}" Header="Col6" Width="100">
                <DataGridTextColumn.ElementStyle>
                    <Style TargetType="TextBlock">
                        <Setter Property="HorizontalAlignment" Value="Right"/>
                    </Style>
                </DataGridTextColumn.ElementStyle>
            </DataGridTextColumn>

            <DataGridTextColumn Binding="{Binding Col1, StringFormat=N2}" Header="Col 7" Width="100">
                <DataGridTextColumn.ElementStyle>
                    <Style TargetType="TextBlock">
                        <Setter Property="HorizontalAlignment" Value="Right"/>
                    </Style>
                </DataGridTextColumn.ElementStyle>
            </DataGridTextColumn>

            <DataGridTextColumn Binding="{Binding Col1, StringFormat=N2}" Header="Col8" Width="100">
                <DataGridTextColumn.ElementStyle>
                    <Style TargetType="TextBlock">
                        <Setter Property="HorizontalAlignment" Value="Right"/>
                    </Style>
                </DataGridTextColumn.ElementStyle>
            </DataGridTextColumn>

            <DataGridTextColumn Binding="{Binding Col1, StringFormat=N2}" Header="Col9" Width="100">
                <DataGridTextColumn.ElementStyle>
                    <Style TargetType="TextBlock">
                        <Setter Property="HorizontalAlignment" Value="Right"/>
                    </Style>
                </DataGridTextColumn.ElementStyle>
            </DataGridTextColumn>

            <DataGridTextColumn Binding="{Binding Col1, StringFormat={}{0:dd-MMM-yy}}" Header="Col10" Width="80"/>
            <DataGridTextColumn Binding="{Binding Col1, StringFormat={}{0:dd-MMM-yy}}" Header="Col11" Width="80"/>
            <DataGridTextColumn Binding="{Binding Col1}" Header="Col12" Width="250"/>
            <DataGridTextColumn Binding="{Binding Col1, StringFormat=N0}" Header="Col13" Width="80">

                <DataGridTextColumn.ElementStyle>
                    <Style TargetType="TextBlock">
                        <Setter Property="HorizontalAlignment" Value="Center"/>
                    </Style>
                </DataGridTextColumn.ElementStyle>
            </DataGridTextColumn>

            <DataGridTextColumn Binding="{Binding Col1, StringFormat=N0}" Header="Col 14" Width="80">
                <DataGridTextColumn.ElementStyle>
                    <Style TargetType="TextBlock">
                        <Setter Property="HorizontalAlignment" Value="Center"/>
                    </Style>
                </DataGridTextColumn.ElementStyle>
            </DataGridTextColumn>

            <DataGridTextColumn Binding="{Binding Col1}" Header="Col 15" Width="150"/>
            <DataGridTextColumn Binding="{Binding Col1}" Header="Col 16" Width="150"/>
            <DataGridTextColumn Binding="{Binding Col1}" Header="Col 17" Width="200"/>
            <DataGridTextColumn Binding="{Binding Col1}" Header="Col 18" Width="80"/>
            <DataGridTextColumn Binding="{Binding Col1}" Header="Col 19" Width="100"/>

        </DataGrid.Columns>
    </DataGrid>

</StackPanel>

【问题讨论】：

你需要学习如何use panels for layout。这种带有随意放置在Margin 上的控件的固定大小布局非常脆弱。

标签： c# wpf datagrid

【解决方案1】：

简而言之，您必须使用 Grid 和 RowDefinition Height="*" - 您的行将具有相对高度

<Grid>
    <Grid.RowDefinitions>
        <RowDefinition Height="Auto"/>  <!-- fit componets size -->
        <RowDefinition Height="*"/>     <!-- relative size -->
    </Grid.RowDefinitions>
    <Grid Grid.Row="0">
        <StackPanel>
             ..........
        </StackPanel>
    </Grid
    <Grid Grid.Row="1">
        <DataGrid AutoGenerateColumns="True" 
                  ScrollViewer.CanContentScroll="True" 
                  ScrollViewer.VerticalScrollBarVisibility="Auto"
                  ScrollViewer.HorizontalScrollBarVisibility="Auto">

            ...............
        </DataGrid>
    </Grid>
</Grid>

【讨论】：

谢谢，但没用。加载数据时，DataGrid 超出了窗口大小/高度。我的数据中有大约 4000 行。加载数据时，我希望 DataGrid 高度不超过窗口的剩余高度，并且用户应该能够在 DataGrid 内滚动。
@AsimAbbas 将 ScrollViewer 添加到 DataGrid 中
如果你做对了，这会奏效。所有高于 DataGrid 的东西都应该放在第一行（Celso 放StackPanel 的地方）。 DataGrid 本身位于 second 行中。 Grid 应该是根布局面板。您不能使网格成为StackPanel 的后代，否则将无法正常工作。
我正在按照上面 Celso 描述的方式进行操作，在 VS 的设计环境中，DataGrid 完全按照我想要的方式显示，但是当程序运行时，当我单击时没有加载任何行a Show Data Button 它从 SQL 加载数据，由于 DB 中有很多行，DataGrid 走出窗口，我无法垂直滚动。我的桌面资源。是 1920 x 1080 和编。运行最大化。前卫。在我有一个框架的主页中运行，并且框架正在加载一个有 DataGrid 和其他东西的页面。页面大小为 d:DesignHeight="620" d:DesignWidth="1200"
try remove this: VerticalAlignment="Stretch" VerticalContentAlignment="Stretch" 最好先把你所有的style都去掉，看看是不是ok，然后慢慢帮助style看看有没有问题，把一个简单的数据网格，没有你放这么多东西，看看是否可以