Làm cách nào để làm cho XAML DataGridColumns lấp đầy toàn bộ DataGrid?


117

Tôi đang sử dụng DataGrid trong XAML (không phải Silverlight) với các cột có thể thay đổi kích thước, DataGrid sẽ mở rộng nếu người dùng thay đổi kích thước màn hình.

Hiện tại nếu chiều rộng của tất cả các cột DataGrid nhỏ hơn chiều rộng của DataGrid, tôi nhận được một "cột" bổ sung xuất hiện không thể nhấp vào được và không có mục đích gì.

Có ai biết làm thế nào để làm cho một cột luôn thay đổi kích thước để lấp đầy tất cả các không gian còn lại?

Câu trả lời:


248

Nếu bạn sử dụng Width="*"cột sẽ lấp đầy để mở rộng không gian có sẵn.

Nếu bạn muốn tất cả các cột chia đều lưới, hãy áp dụng điều này cho tất cả các cột. Nếu bạn chỉ muốn một cái lấp đầy không gian còn lại, chỉ cần áp dụng nó cho cột đó với phần còn lại là "Tự động" hoặc một chiều rộng cụ thể.

Bạn cũng có thể sử dụng Width="0.25*"(ví dụ) nếu bạn muốn cột chiếm 1/4 chiều rộng có sẵn.


2
và làm thế nào để làm điều tương tự nếu tôi đang sử dụng AutoGenerateColumns="True"?
javapowered

1
@javapowered - Tôi khuyên bạn nên đặt câu hỏi của riêng bạn, tham khảo câu hỏi này.
ChrisF

16
@javapowered<DataGrid AutoGenerateColumns="True" ColumnWidth="*" ItemsSource={Binding} />
Xavier

11
@MohamedSakherSawan nó thực sự hoạt động cho datagrid. Cả ColumnWidth="*"trên DataGridWidth="*"trên các cột indivdual có hiệu quả mong muốn
Steve

1
Đưa ra một Lỗi Sting không thể được chuyển đổi sang '*'
co2f2e

18

Đảm bảo DataGrid của bạn đã Widthđược đặt thành{Binding Path=ActualWidth, RelativeSource={RelativeSource Mode=FindAncestor,AncestorType=Window,AncestorLevel=1}} .

Như vậy, cài đặt Width="*"thuộc tính của bạn trên DataGrid.Columns/DataGridXXXXColumncác phần tử sẽ hoạt động.


9

Như đã lưu ý, ColumnWidth="*" hoạt động hoàn toàn tốt cho DataGrid trong XAML.

Tôi đã sử dụng nó trong ngữ cảnh này:

<DataGrid ColumnWidth="*" ItemsSource="{Binding AllFolders, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}" />

7

Đặt thuộc tính cột Widththành chiều rộng tương ứng, chẳng hạn như*


3

2 Cent của tôi ->

Rất muộn để dự tiệc

DataGrid -> Column -> Width = "*" chỉ hoạt động nếu vùng chứa mẹ DataGrid có chiều rộng cố định.

ví dụ: tôi đặt DataGrid trong Grid -> Column có width = "Auto" thì Width = "*" trong DataGrid không hoạt động nhưng nếu bạn đặt Grid -> Column Width = "450" ​​có nghĩa là cố định thì nó hoạt động tốt


2

Một vòng quay khác về chủ đề tương tự:

protected void OnWindowSizeChanged(object sender, SizeChangedEventArgs e)
{
    dataGrid.Width = e.NewSize.Width - (e.NewSize.Width * .1);

    foreach (var column in dataGrid.Columns)
    {
       column.Width = dataGrid.Width / dataGrid.Columns.Count;
    }
 }

1

Tôi đã thêm HorizontalAlignment = "Center" (Mặc định là "Strech") và nó giải quyết được vấn đề của tôi vì nó làm cho datagrid chỉ rộng khi cần thiết. (Đã xóa cài đặt Chiều rộng của lưới dữ liệu nếu bạn có.)

nhập mô tả hình ảnh ở đây


Kết hợp với câu trả lời đã chọn và câu trả lời này, nó đã giải quyết được vấn đề cho tôi. Tôi cần phải loại bỏ chiều rộng trên Datagrid chính nó. Cảm ơn.
Bryan Harrington

0

Điều này sẽ không mở rộng cột cuối cùng của lưới xaml để lấy không gian còn lại nếu AutoGeneratedColumns="True".


Tôi đã xóa AutoGenerateColumns, mặc dù các cột không được chia hoặc kéo dài toàn bộ chiều rộng của lưới / màn hình dữ liệu. Tôi có hàng tương ứng của lưới là "*" và chiều rộng cột không có bất kỳ chiều rộng nào được chỉ định ("tự động" hoặc "một số giá trị"). Nhưng tôi vẫn gặp sự cố, đây là mã xaml của thiết kế của tôi pastie.org/10085815
GK

0

đặt chiều rộng của MỘT cột thành bất kỳ giá trị nào, tức là chiều rộng = "*"


0

Đối với những người đang tìm kiếm giải pháp thay thế C #:

Nếu bạn cần vì lý do nào đó để bật "AutoGeneratedColumns", một điều bạn có thể làm là chỉ định chiều rộng của tất cả các cột ngoại trừ những cột bạn muốn tự động thay đổi kích thước (nó sẽ không chiếm không gian còn lại , nhưng nó sẽ thay đổi kích thước thành nội dung của ô ).

Ví dụ (dgShopppingCart là DataGrid của tôi):

dgShoppingCart.Columns[0].Visibility = Visibility.Hidden; 
dgShoppingCart.Columns[1].Header = "Qty";
dgShoppingCart.Columns[1].Width = 100;
dgShoppingCart.Columns[2].Header = "Product Name"; /*This will be resized to cell content*/
dgShoppingCart.Columns[3].Header = "Price";
dgShoppingCart.Columns[3].Width = 100;
dgShoppingCart.Columns[4].Visibility = Visibility.Hidden; 

Đối với tôi, nó hoạt động như một giải pháp thay thế vì tôi cần thay đổi kích thước DataGrid khi người dùng tối đa hóa Cửa sổ.

Khi sử dụng trang web của chúng tôi, bạn xác nhận rằng bạn đã đọc và hiểu Chính sách cookieChính sách bảo mật của chúng tôi.
Licensed under cc by-sa 3.0 with attribution required.