Cách đặt đường viền hàng và màu nền trong WPF Lưới

Question

Làm cách nào để thiết lập màu đường viền và màu nền trong điều khiển lưới WPF,
tôi đang tạo hàng và cột động và sau đó thêm vào lưới,
mã đằng sau?

Answer 1

Màu Background chỉ có thể được thiết lập cho toàn bộ Grid bằng Background tài sản:

<Grid Background="Red" /> 

Hoặc nếu bạn muốn nó đặt ra cho các tế bào riêng lẻ, bạn cần thêm một yếu tố để các tế bào có của nó Background thuộc tính được đặt.

Đối với Đường viền, Grid chỉ chứa thuộc tính ShowGridLines, có thể được sử dụng để hiển thị đường chấm chấm mỏng không thể được tạo kiểu.

mỗi MSDN:

Chỉ đường chấm có sẵn vì tài sản này được thiết kế như một công cụ thiết kế cho những vấn đề bố trí debug và không có ý định để sử dụng trong mã chất lượng sản xuất. Nếu bạn muốn các dòng bên trong lưới, hãy tạo kiểu các phần tử trong lưới để có đường viền.

Vì vậy, để thêm khung lưới của bạn, bạn cần phải thêm Border yếu tố hoặc điều khiển có chứa một Border cho các tế bào lưới, và phong cách những yếu tố này.

Nhưng có một giải pháp thay thế. This blog post vạch ra cách bạn có thể mở rộng lớp Lưới để tạo Lưới tùy chỉnh có thuộc tính cho Grid dòng. Tôi đã sử dụng nó successfully in the past khi tôi muốn hiển thị các đường lưới nhưng không muốn lấp đầy mọi ô bằng một đối tượng.

<my:CustomGrid ShowCustomGridLines="True" 
       GridLineBrush="Blue" 
       GridLineThickness="1"> 

Answer 2

tùy thuộc vào những gì bạn dự định làm với lưới này nhưng tôi cho rằng bạn muốn điền các ô của lưới bằng các nút điều khiển.

Bạn sẽ phải đặt thuộc tính Nền và đường viền (Đột quỵ) trên các điều khiển sau đó hoặc đóng gói từng điều khiển của bạn trong một Đường viền trước.

Nhưng, tất nhiên nếu bạn muốn cùng màu nền cho mỗi ô, thì hãy đặt nền của lưới. :)

tôi hy vọng tôi đã trả lời tốt.

Answer 3

Đây là một chút hack có vẻ hoạt động tốt. Nếu bạn đặt một phần tử nền trong các hàng/cột cùng với các phần tử bạn thường đặt ở đó, nó sẽ hoạt động như một nền. Bạn sẽ chỉ cần nhớ thứ tự của các phần tử trong XAML (các phần tử xuất hiện khi tăng Z-Order), hoặc thiết lập Panel.Zorder cho phù hợp.

<Window x:Class="gridBackground.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"> 
<Grid> 
    <Grid.RowDefinitions> 
     <RowDefinition/> 
     <RowDefinition/> 
     <RowDefinition/> 
    </Grid.RowDefinitions> 
    <Grid.ColumnDefinitions> 
     <ColumnDefinition/> 
     <ColumnDefinition/> 
    </Grid.ColumnDefinitions> 
     <Border Background="Red" /> 
     <Border Grid.Row="2" Grid.Column="1" Background="Red" />   
     <Border Grid.Row="1" Background="LightBlue" />  
     <Border Grid.Row="2" Background="Orange" /> 
     <Border Grid.Row="0" Grid.Column="1" Background="Orange" /> 
     <TextBlock Grid.ColumnSpan="2" Grid.Row="1" Text="Here is some more text" HorizontalAlignment="Center" VerticalAlignment="Center"/> 
     <TextBlock Grid.ColumnSpan="2" Text="Here is some text" HorizontalAlignment="Center" VerticalAlignment="Center"/> 
     <TextBlock Grid.ColumnSpan="2" Grid.Row="2" Text="Here is even more text" HorizontalAlignment="Center" VerticalAlignment="Center"/> 
    </Grid> 
</Window> 

Nó trông như thế này: