在Windows 8 / WPF / Silverlight中顯示8x8網格

Question

我想在Windows 8 Metro應用程序中顯示8x8網格。 去做這個：

1. 我創建了Grid ，並添加了8個行定義和8個列定義。
2. 然后，我向每個網格單元添加一個帶有黑色邊框的Rectangle 。
3. 然后在MeasureOverride方法中，檢查availableSize 。 由於我的網格必須是正方形（長寬比= 1.0），因此我計算了availableSize.Width, availableSize.Height的最小值availableSize.Width, availableSize.Height並返回了一個等於(minimum, minimum)的新Size。

但是，這不起作用。 生成的網格大小等於availableSize ，而不是我從MeasureOverride方法返回的大小。 如果我修改MeaureOverride ，以便將RowDefinition的Height設置為minimum ，而ColumnDefinition的Width ColumnDefinition為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

一種解決方案是創建一個自定義Grid控件來處理寬度，高度

    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;
    }
}

您也可以為此構建一個行為相同的行為。