【问题标题】:How can I get a Grid to draw Borders for blank cells?如何让网格为空白单元格绘制边框?
【发布时间】:2011-11-18 23:23:32
【问题描述】:

我有一个 ItemsControl,它使用 Grid 作为 ItemsPanelTemplate,并设置 ItemContainerStyle 上的 Grid.Column 和 Grid.Row 以在网格中定位数据项

有没有办法将 GridLines 添加到 Grid 中,或者用边框填充空白单元格?

现在我将 ShowGridLines 设置为 True 以显示虚线,但是我希望显示水平线,并且我更喜欢实心 GridLines

有相当多的 XAML,但这里是我的 XAML 布局的屏幕截图:

【问题讨论】:

  • 你的布局使用了什么工具?
  • @AdamBT Balsamiz,他们有一个我通常使用的free web demo
  • 很好......非常感谢!

标签: wpf xaml layout grid gridlines


【解决方案1】:

抱歉,无法设置网格线的样式。至少不是以简单的方式。解释见以下问题:How can I change the color of the gridlines of a Grid in WPF?

MSDN 文档说“只有虚线可用,因为此属性 旨在作为调试布局问题的设计工具,而不是 用于生产质量代码。如果你想要里面的线条 一个 Grid,将 Grid 中的元素设置为有边框。”

编辑:如果你想要边框你可以创建一个自定义的Grid并在控件的OnRender方法中绘制GridLines

    using System.Windows;
    using System.Windows.Controls;
    using System.Windows.Media;

    namespace BorderGridControl
    {
        public class GridControl : Grid
        {
            #region Properties
            public bool ShowCustomGridLines
            {
                get { return (bool)GetValue(ShowCustomGridLinesProperty); }
                set { SetValue(ShowCustomGridLinesProperty, value); }
            }

            public static readonly DependencyProperty ShowCustomGridLinesProperty =
                DependencyProperty.Register("ShowCustomGridLines", typeof(bool), typeof(GridControl), new UIPropertyMetadata(false));

            
            public Brush GridLineBrush
            {
                get { return (Brush)GetValue(GridLineBrushProperty); }
                set { SetValue(GridLineBrushProperty, value); }
            }

            public static readonly DependencyProperty GridLineBrushProperty =
                DependencyProperty.Register("GridLineBrush", typeof(Brush), typeof(GridControl), new UIPropertyMetadata(Brushes.Black));

            public double GridLineThickness
            {
                get { return (double)GetValue(GridLineThicknessProperty); }
                set { SetValue(GridLineThicknessProperty, value); }
            }

            public static readonly DependencyProperty GridLineThicknessProperty =
                DependencyProperty.Register("GridLineThickness", typeof(double), typeof(GridControl), new UIPropertyMetadata(1.0));
            #endregion

            protected override void OnRender(DrawingContext dc)
            {
                if (ShowCustomGridLines)
                {
                    foreach (var rowDefinition in RowDefinitions)
                    {
                        dc.DrawLine(new Pen(GridLineBrush, GridLineThickness), new Point(0, rowDefinition.Offset), new Point(ActualWidth, rowDefinition.Offset));
                    }

                    foreach (var columnDefinition in ColumnDefinitions)
                    {
                        dc.DrawLine(new Pen(GridLineBrush, GridLineThickness), new Point(columnDefinition.Offset, 0), new Point(columnDefinition.Offset, ActualHeight));
                    }
                    dc.DrawRectangle(Brushes.Transparent, new Pen(GridLineBrush, GridLineThickness), new Rect(0, 0, ActualWidth, ActualHeight));
                }
                base.OnRender(dc);
            }
            static GridControl()
            {
                DefaultStyleKeyProperty.OverrideMetadata(typeof(GridControl), new FrameworkPropertyMetadata(typeof(GridControl)));
            }
        }
    }

我试过了,它似乎工作得很好。

这里是一个使用示例:

    <controls:GridControl ShowCustomGridLines="True"
                          GridLineBrush="Red"
                          GridLineThickness="1">
        <Grid.RowDefinitions>
            <RowDefinition/>
            <RowDefinition/>
            <RowDefinition/>
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition/>
            <ColumnDefinition/>
            <ColumnDefinition/>
        </Grid.ColumnDefinitions>
    </controls:GridControl>

【讨论】:

  • 是的,我看到了。我开始认为我需要在 Loaded 事件中创建一些东西,用边框填充所有空白单元格。或者也许将两个网格重叠在一起,使顶部透明,底部填充边框。
  • 您是在 Xaml 中还是在代码中创建 RowDefinitionsColumnDefinitions,具体取决于项目?
  • 在 XAML 中。每个“行”实际上是它自己的Grid,有 7 个列。
  • @Rachel:查看我的更新答案,我相信这是迄今为止最简单的方法。
  • 谢谢,这看起来很有希望!我会在星期一检查一下(现在回家,并且有严格的禁止在家工作的政策)
猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2012-01-10
相关资源
最近更新 更多