WPF：调整 ScrollViewer 内数据网格的宽度答案

【问题标题】：WPF: Resize width of datagrid inside ScrollViewerWPF：调整 ScrollViewer 内数据网格的宽度
【发布时间】：2013-11-21 10:54:08
【问题描述】：

我有ScrollViewer 显示页面内容的位置。在里面我有一个 DataGrid，但是当我把 DataGrid 放在 ScrollViewer 里面时，列的宽度会丢失。所以我在这里读到了http://stackoverflow.com/questions/17875765/wpf-scrollviewer-around-datagrid-affects-column-width 我需要将父级的宽度绑定到我的 DataGrid，这没关系，但有什么问题。当窗口宽度增加时，DataGrid 的宽度也会增加，但是当窗口宽度减小时，DataGrid 的宽度不会改变。我想要的是当宽度改变时DataGrid的宽度也改变了。

这是示例 XAML：

<Window x:Class="WpfApplication1.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow" Height="350" Width="525">
    <ScrollViewer VerticalScrollBarVisibility="Auto" HorizontalScrollBarVisibility="Auto">
    <!--Page Content-->
        <Grid x:Name="grid">
            <DataGrid Width="{Binding ElementName=grid, Path=ActualWidth}">
                <DataGrid.Columns>
                    <DataGridTextColumn Width="*" Header="Header 1"  />
                    <DataGridTextColumn Width="*" Header="Header 2" /> 
                    <DataGridTextColumn Width="*" Header="Header 3" /> 
                    <DataGridTextColumn Width="*" Header="Header 4" />
                    <DataGridTextColumn Width="*" Header="Header 5" />
                    <DataGridTextColumn Width="*" Header="Header 6" />
                    <DataGridTextColumn Width="*" Header="Header 7" /> 
                </DataGrid.Columns>
            </DataGrid>
        </Grid>
    </ScrollViewer>
</Window>

已编辑： 现在我的 MainWindow 看起来像：

<Window x:Class="WpfApplication1.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow" Height="350" Width="525"
        xmlns:my="clr-namespace:WpfApplication1"
        x:Name="window1">
    <ScrollViewer VerticalScrollBarVisibility="Auto" HorizontalScrollBarVisibility="Auto">
        <my:MyGrid />
    </ScrollViewer>
</Window>

和我的控制：

<UserControl x:Class="WpfApplication1.MyGrid"
             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" 
             mc:Ignorable="d" 
             d:DesignHeight="300" d:DesignWidth="300">
    <Grid>
        <DataGrid Width="{Binding RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type Window}}, Path=ActualWidth}">
            <DataGrid.Columns>
                <DataGridTextColumn Width="*" Header="Header 1"  />
                <DataGridTextColumn Width="*" Header="Header 2" />
                <DataGridTextColumn Width="*" Header="Header 3" />
                <DataGridTextColumn Width="*" Header="Header 4" />
                <DataGridTextColumn Width="*" Header="Header 5" />
                <DataGridTextColumn Width="*" Header="Header 6" />
                <DataGridTextColumn Width="*" Header="Header 7" />
            </DataGrid.Columns>
        </DataGrid>
    </Grid>
</UserControl>

【问题讨论】：

标签： c# wpf xaml

【解决方案1】：

试试这个方法：

<Window x:Class="WpfApplication1.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow" Height="350" Width="525"
        x:Name="window1">
    <ScrollViewer VerticalScrollBarVisibility="Auto" HorizontalScrollBarVisibility="Auto">
    <!--Page Content-->
            <DataGrid Width="{Binding ElementName=window1, Path=ActualWidth}">
                <DataGrid.Columns>
                    <DataGridTextColumn Width="*" Header="Header 1"  />
                    <DataGridTextColumn Width="*" Header="Header 2" /> 
                    <DataGridTextColumn Width="*" Header="Header 3" /> 
                    <DataGridTextColumn Width="*" Header="Header 4" />
                    <DataGridTextColumn Width="*" Header="Header 5" />
                    <DataGridTextColumn Width="*" Header="Header 6" />
                    <DataGridTextColumn Width="*" Header="Header 7" /> 
                </DataGrid.Columns>
            </DataGrid>
    </ScrollViewer>
</Window>

这个更适合你吗？

【讨论】：

好的，它可以按我的意愿工作，但是如果我在 UserControl 中呈现 DataGrid 怎么办？ UserControl 中的 Width="{Binding ElementName=ShellView, Path=ActualWidth}" 对我不起作用。
很高兴它有效。随意投票有用的答案或将一个标记为答案。您必须向我展示您如何使用该 UserControl。该用户控件的 xaml 是什么样的？
这有点复杂，因为我使用的是我正在学习的 Caliburn.Micro ;)。我有显示我的 UserControl 和我尝试在我的情况下获取 window1 或 ShellView。
您可以将绑定更改为：Width="{Binding RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type UserControl}}, Path=ActualWidth}" 这是一个让控件先找到的小技巧usercontrol 类型的父级。您将拥有一个自定义用户控件，但它将继承自用户控件本身并且可以正常工作。我希望 usercontrol 类型的第一个父级是您希望使用的那个。
就我而言，我需要将 x:Type UserControl 更改为 x:Type Window 。无论如何，如果我运行我的示例项目滚动条总是会显示，即使整个内容都是可见的。你能检查一下我编辑的样本吗？

【解决方案2】：

上述解决方案几乎对我有用，除了有额外的滚动条（DataGrid 的内部滚动条和 ScrollViewer 的外部滚动条）。因为 Window.ActualWidth 和 ActualHeight 有点太大了，所以之前已经隐藏了内部的。由于 Window 的外部边框，DataGrid 的大小需要比 Window 的大小小一点。转换器可用于从宽度中减去 25，从高度中减去 42。

我的工作解决方案最终是基于代码的。抱歉，我知道每个人都在 xaml 中工作。但我会发布它以防其他人好奇如何在代码中做同样的事情......

class FindResultsGrid : Window
{
    public FindResultsGrid(List<FindResultLine> list)
    {
        var dg = new DataGrid() 
        { 
            AutoGenerateColumns = false, 
            Height = 450, // starting size, will be dynamic based on window...
            Width = 900,
            SelectionMode= DataGridSelectionMode.Single 
        };
        this.Width = dg.Width + 25;
        this.Height = dg.Height + 42;

        dg.AddColumn("Item", "ItemName", width: 151);
        dg.AddColumn("Line #", "lineNbr", width: 51);
        dg.AddColumn("Text", "lineText");

        dg.SetBinding(DataGrid.WidthProperty, new Binding("ActualWidth") { Source = this, Converter=new WidthConversion() });
        dg.SetBinding(DataGrid.HeightProperty, new Binding("ActualHeight") { Source = this, Converter=new HeightConversion() });

        this.Content = dg;

        dg.ItemsSource = list;
    }
}
class WidthConversion : IValueConverter
{
    object IValueConverter.Convert(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
    {
        return ((double)value) - 25.0;
    }
    object IValueConverter.ConvertBack(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture) { throw new NotImplementedException(); }
}
class HeightConversion : IValueConverter
{
    object IValueConverter.Convert(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
    {
        return ((double)value) - 42;
    }
    object IValueConverter.ConvertBack(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture) { throw new NotImplementedException(); }
}


public static class MyExtensions
{
    public static DataGridTextColumn AddColumn(this DataGrid dg, string header,
        string propertyPath = null,
        double width = Double.NaN,
        BindingMode way = BindingMode.OneWay,
        bool canUserSort = true)
    {
        if (propertyPath == null)
            propertyPath = header;
        var binding = new System.Windows.Data.Binding(propertyPath);
        binding.Mode = way;
        var col = new DataGridTextColumn()
        {
            Header = header,
            Binding = binding,
            Width = Double.IsNaN(width) ? DataGridLength.Auto : new DataGridLength(width),
            CanUserSort = canUserSort
        };
        dg.Columns.Add(col);
        return col;
    }

【讨论】：

【解决方案3】：

试试这个：将数据网格与滚动查看器一起使用时，我也遇到了同样的问题。将 ScrollViewer 的 HorizontalScrollBarVisibility 属性设置为“已禁用”。它在宽度增加和减小时都起作用。

【讨论】：