在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並返回一個等於(minimum, minimum)的新大小。

然而，這是行不通的。生成的網格大小等於availableSize，而不是我從我的MeasureOverride方法返回的大小。如果我修改MeaureOverride，以便我設置Height的RowDefinition s到minimum和Width的ColumnDefinition s到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; 
    } 
} 

你也可以建立這樣，會做同樣的事情的行爲。