Question

我想在Windows 8 metro应用中显示8x8网格。要做到这一点：

我创建了一个Grid，并添加了8个行定义和8个列定义。
然后我为每个网格单元添加一个带有黑色边框的Rectangle。
然后在MeasureOverride方法中，检查availableSize。由于我的网格需要是正方形（宽高比= 1.0），我计算availableSize.Width, availableSize.Height的最小值并返回一个等于(minimum, minimum)的新大小。

然而，这不起作用。生成的网格大小等于availableSize，而不是我从MeasureOverride方法返回的大小。如果我修改了MeaureOverride，那么我将Height RowDefinition的{{1}}设置为minimum，将Width ColumnDefinition设置为minimum它起作用了。但我看到了一些视频，他们说你不应该明确地设置Height＆amp;任何事物的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;
    }
}

您也可以为此构建一个行为也可以做同样的事情。

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

2 个答案: