在windows phone上的棋盤型網格8

Question

我試圖使一個網格類似於在Windows Phone 8中棋盤的樣子，但即時消息新開發的Windows Phone和使用XAML，我不知道從哪裏開始我想更新「廣場」的顏色的變化，大多數例子見於wpf，他們使用UniformGrid，這是不可用的Windows手機。

等什麼香港專業教育學院發現迄今

<Grid Margin="29,29.5,23,32.5" Height="500"> 
     <Rectangle Stroke="Black"> 
      <Rectangle.Fill> 
       <SolidColorBrush Color="{DynamicResource color}"/> 
      </Rectangle.Fill> 
     </Rectangle> 
     . 
     . 
     . 
</grid> 

，但他們的方式來產生varing大小的網格中，如12×12或9x8如果我使用的正上方，然後將代碼我需要爲每一個矩形廣場不是什麼即將。

所以即時通訊只是想知道什麼xaml會看起來像它似乎也需要使用數據綁定來更新用戶界面。他們是否有辦法生成可視化網格並能夠更新其內容。如果任何人都能指出我的方向真的很有幫助。

Answer 1

創建行和單元格的兩級視圖模型。將行綁定到ItemsControl，然後在項目模板中，將單元綁定到另一個ItemsControl。每個單元格都有一個屬性來判斷它是偶數還是奇數，這樣就可以實現棋盤格式。您可以通過單元的其他屬性來公開遊戲狀態，以通過數據綁定顯示棋盤位置。

最後，由於單元格將具有固定大小，因此將所有內容都包裝在Viewbox中以適應您的容器。

視圖模型：

public class BoardViewModel 
{ 
    private readonly int _rows; 
    private readonly int _columns; 

    public BoardViewModel(int rows, int columns) 
    { 
     _rows = rows; 
     _columns = columns; 
    } 

    public IEnumerable<RowViewModel> Rows 
    { 
     get 
     { 
      return Enumerable 
       .Range(0, _rows) 
       .Select(row => new RowViewModel(row, _columns)) 
       .ToList(); 
     } 
    } 
} 

public class RowViewModel 
{ 
    private readonly int _row; 
    private readonly int _columns; 

    public RowViewModel(int row, int columns) 
    { 
     _row = row; 
     _columns = columns; 
    } 

    public IEnumerable<CellViewModel> Cells 
    { 
     get 
     { 
      return Enumerable 
       .Range(0, _columns) 
       .Select(column => new CellViewModel(_row, column)) 
       .ToList(); 
     } 
    } 
} 

public class CellViewModel 
{ 
    private readonly int _row; 
    private readonly int _column; 

    public CellViewModel(int row, int column) 
    { 
     _row = row; 
     _column = column; 
    } 

    public bool IsEven 
    { 
     get { return (_row + _column) % 2 == 0; } 
    } 
} 

值變換器：

public class CellColorValueConverter : IValueConverter 
{ 
    public object Convert(
     object value, 
     Type targetType, 
     object parameter, 
     CultureInfo culture) 
    { 
     return Application.Current.Resources[ 
      (bool)value == true 
       ? "EvenCellColor" 
       : "OddCellColor"]; 
    } 

    public object ConvertBack(
     object value, 
     Type targetType, 
     object parameter, 
     CultureInfo culture) 
    { 
     throw new NotImplementedException(); 
    } 
} 

的XAML：

<Window.Resources> 
    <local:CellColorValueConverter 
     x:Key="CellColor" /> 
</Window.Resources> 
<Grid> 
    <Viewbox> 
     <ItemsControl 
      ItemsSource="{Binding Rows}"> 
      <ItemsControl.ItemTemplate> 
       <DataTemplate> 
        <ItemsControl 
         ItemsSource="{Binding Cells}"> 
         <ItemsControl.ItemsPanel> 
          <ItemsPanelTemplate> 
           <StackPanel 
            Orientation="Horizontal" /> 
          </ItemsPanelTemplate> 
         </ItemsControl.ItemsPanel> 
         <ItemsControl.ItemTemplate> 
          <DataTemplate> 
           <Rectangle 
            Width="50" 
            Height="50" 
            Fill="{Binding IsEven, Converter={StaticResource CellColor}}" /> 
          </DataTemplate> 
         </ItemsControl.ItemTemplate> 
        </ItemsControl> 
       </DataTemplate> 
      </ItemsControl.ItemTemplate> 
     </ItemsControl> 
    </Viewbox> 
</Grid>