在Windows 8/ WPF / Silverlight中显示8x8网格

Question

我想在Windows 8地铁应用程序中显示一个8x8网格。为此，请执行以下操作：

1. I创建了一个Grid，并添加了8个行定义和8个列定义。然后，
2. ，我在每个网格单元格中添加一个黑色边框的Rectangle。然后在
3. 中，在MeasureOverride方法中，检查availableSize。因为我的网格需要是平方(纵横比= 1.0)，所以我计算availableSize.Width, availableSize.Height的最小值，并返回一个与(minimum, minimum)相等的新大小。

然而，这是行不通的。生成的网格大小等于availableSize，而不是我从MeasureOverride方法返回的大小。如果我修改MeaureOverride，使Height of RowDefinitions设置为minimum，Width of ColumnDefinitions设置为minimum，那么它就能工作。但是我看到了一些视频，他们说不应该显式地设置任何东西的Height和Width属性。

那么，是否有一种更好的方法来实现我想要的呢？

Answer 1

我不确定您是否需要以任何方式与这些单元进行交互，但是如果您只想绘制一个网格，下面是一个快速控制。它将填充父控件的空间。

public class GridShape : Control
{
    public int Columns
    {
        get { return (int)GetValue(ColumnsProperty); }
        set { SetValue(ColumnsProperty, value); }
    }
    public static readonly DependencyProperty ColumnsProperty = DependencyProperty.Register("Columns", typeof(int), typeof(GridShape), new PropertyMetadata(8));

    public int Rows
    {
        get { return (int)GetValue(RowsProperty); }
        set { SetValue(RowsProperty, value); }
    }
    public static readonly DependencyProperty RowsProperty = DependencyProperty.Register("Rows", typeof(int), typeof(GridShape), new PropertyMetadata(8));

    public Brush Stroke
    {
        get { return (Brush)GetValue(StrokeProperty); }
        set { SetValue(StrokeProperty, value); }
    }
    public static readonly DependencyProperty StrokeProperty = DependencyProperty.Register("Stroke", typeof(Brush), typeof(GridShape), new PropertyMetadata(new SolidColorBrush(Colors.Black)));

    public double StrokeThickness
    {
        get { return (double)GetValue(StrokeThicknessProperty); }
        set { SetValue(StrokeThicknessProperty, value); }
    }
    public static readonly DependencyProperty StrokeThicknessProperty = DependencyProperty.Register("StrokeThickness", typeof(double), typeof(GridShape), new PropertyMetadata(1.0));

    protected override void OnRender(System.Windows.Media.DrawingContext drawingContext)
    {
        Pen pen = new Pen(Stroke, StrokeThickness);

        double heightSpan = ActualHeight / Rows;
        double widthSpan = ActualWidth / Columns;

        for (double y = 0; y <= ActualHeight; y += heightSpan)
            drawingContext.DrawLine(pen, new Point(0, y), new Point(ActualWidth, y));

        for (double x = 0; x <= ActualWidth; x += widthSpan)
            drawingContext.DrawLine(pen, new Point(x, 0), new Point(x, ActualHeight));
    }
}

Answer 2

一种解决方案是创建一个自定义网格控件来处理宽度、高度

    public class SquareGrid : Grid
{
    public SquareGrid()
    {
        this.SizeChanged += OnSizeChanged;
        this.Loaded += OnLoaded;
    }

    private void OnSizeChanged(object sender, SizeChangedEventArgs e)
    {
        var parent = VisualTreeHelper.GetParent(this) as FrameworkElement;
        if (parent == null) return;

        ResizeToSquare(parent);
    }

    private void OnLoaded(object sender, RoutedEventArgs routedEventArgs)
    {
        var parent = VisualTreeHelper.GetParent(this) as FrameworkElement;
        if (parent == null) return;

        parent.SizeChanged += ParentOnSizeChanged;
    }

    private void ParentOnSizeChanged(object sender, SizeChangedEventArgs sizeChangedEventArgs)
    {
        FrameworkElement parent = sender as FrameworkElement;
        if (parent == null) return;

        ResizeToSquare(parent);
    }

    private void ResizeToSquare(FrameworkElement parent)
    {
        var min = Math.Min(parent.ActualHeight, parent.ActualWidth);

        this.Width = min;
        this.Height = min;
    }
}

您还可以为此构建一种行为，以完成同样的任务。