WPF：在 ScrollViewer 中调整数据网格的宽度
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/20118945/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
WPF: Resize width of datagrid inside ScrollViewer
提问by mardok
I have ScrollViewerwhere is displayed page content. Inside I have a DataGrid, but when I put DataGrid inside ScrollViewer width of columns is lost. So I readed here http://stackoverflow.com/questions/17875765/wpf-scrollviewer-around-datagrid-affects-column-widththat I need to bind width of parent to my DataGrid and it's ok but what's the problem.
When width of window is increase width of DataGrid is increased too but when width of window is decreased width of DataGrid doesn't change. What I would like to have is when width of is change width of DataGrid is changed too.
我有ScrollViewer显示页面内容的位置。在里面我有一个 DataGrid，但是当我将 DataGrid 放在 ScrollViewer 中时，列的宽度丢失了。所以我在这里读到h ttp://stackoverflow.com/questions/17875765/wpf-scrollviewer-around-datagrid-affects-column-width我需要将父级的宽度绑定到我的 DataGrid ，这没问题，但有什么问题。当窗口宽度增加时，DataGrid 的宽度也会增加，但是当窗口宽度减小时，DataGrid 的宽度不会改变。我想要的是什么时候改变 DataGrid 的宽度也改变了。
This is sample XAML:
这是示例 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>
EDITED:Now my MainWindow looks like:
编辑：现在我的 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>
and my control:
和我的控制：
<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>
回答by dev hedgehog
Try this approach:
试试这个方法：
<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>
Would this suit you better?
这会更适合你吗？
回答by Gabe Halsmer
The above solution almost worked for me, except there was extra scrollbars (the inner ones from DataGrid, and the outer ones from ScrollViewer). The inner ones had been hidden before because Window.ActualWidth and ActualHeight are a little too big. The DataGrid's size needs to be a little less then the Window's size, because of the Window's outside border. A Converter can be used to subtract off 25 from the width, and 42 from the height.
上面的解决方案几乎对我有用，除了有额外的滚动条（来自 DataGrid 的内部滚动条和来自 ScrollViewer 的外部滚动条）。因为Window.ActualWidth 和ActualHeight 有点太大了，内部的以前被隐藏了。由于 Window 的外边框，DataGrid 的大小需要比 Window 的大小小一点。转换器可用于从宽度中减去 25，从高度中减去 42。
My working solution ended up being code-based. Sorry, I realize everyone works in xaml. But I'll post it in case anyone else is curious how to do the same thing in code...
我的工作解决方案最终是基于代码的。抱歉，我知道每个人都在 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;
}
回答by Priyankjalu
Try this: I was also having the same issue when using datagrid along with scrollviewer. Set HorizontalScrollBarVisibility property for the ScrollViewer equal to 'Disabled'. It works when the width is increased and also when it is decreased.
试试这个：我在使用 datagrid 和 scrollviewer 时也遇到了同样的问题。将 ScrollViewer 的 HorizontalScrollBarVisibility 属性设置为“已禁用”。它在宽度增加和减少时都起作用。
