帶ItemsControl和Grid的WPF動態佈局

我正在創建一個WPF表單。其中一個要求是它具有基於扇區的佈局，以便可以將控制明確地放置在其中一個扇區/單元中。帶ItemsControl和Grid的WPF動態佈局

我已經創建了一個井字棋例如低於傳達我的問題：

有兩種類型和一種鹼基類型：

public class XMoveViewModel : MoveViewModel 
{ 
} 
public class OMoveViewModel : MoveViewModel 
{ 
} 
public class MoveViewModel 
{ 
    public int Row { get; set; } 
    public int Column { get; set; } 
}

形式的DataContext設置到一個實例的：

public class MainViewModel : ViewModelBase 
{ 
    public MainViewModel() 
    { 
     Moves = new ObservableCollection<MoveViewModel>() 
     { 
      new XMoveViewModel() { Row = 0, Column = 0 }, 
      new OMoveViewModel() { Row = 1, Column = 0 }, 
      new XMoveViewModel() { Row = 1, Column = 1 }, 
      new OMoveViewModel() { Row = 0, Column = 2 }, 
      new XMoveViewModel() { Row = 2, Column = 2} 
     }; 
    } 
    public ObservableCollection<MoveViewModel> Moves 
    { 
     get; 
     set; 
    } 
}

最後，XAML看起來是這樣的：

<Window.Resources> 
    <DataTemplate DataType="{x:Type vm:XMoveViewModel}"> 
     <Image Source="XMove.png" Grid.Row="{Binding Path=Row}" Grid.Column="{Binding Path=Column}" Stretch="None" /> 
    </DataTemplate> 
    <DataTemplate DataType="{x:Type vm:OMoveViewModel}"> 
     <Image Source="OMove.png" Grid.Row="{Binding Path=Row}" Grid.Column="{Binding Path=Column}" Stretch="None" /> 
    </DataTemplate> 
</Window.Resources> 
<Grid> 
    <ItemsControl ItemsSource="{Binding Path=Moves}"> 
     <ItemsControl.ItemsPanel> 
      <ItemsPanelTemplate> 
       <Grid ShowGridLines="True"> 
        <Grid.RowDefinitions> 
         <RowDefinition /> 
         <RowDefinition /> 
         <RowDefinition /> 
        </Grid.RowDefinitions> 
        <Grid.ColumnDefinitions> 
         <ColumnDefinition /> 
         <ColumnDefinition /> 
         <ColumnDefinition /> 
        </Grid.ColumnDefinitions> 
       </Grid> 
      </ItemsPanelTemplate> 
     </ItemsControl.ItemsPanel> 
    </ItemsControl> 
</Grid>

當我開始時，對我來說不是很明顯的是ItemsControl元素實際上將每個項目包裝在一個容器中，所以我的Grid.Row和Grid.Column綁定被忽略，因爲圖像沒有直接包含在網格中。因此，所有圖像都放置在默認的行和列（0,0）中。

正在發生的事情：

What is happening http://i48.tinypic.com/29xyl9j.png

期望的結果：

The desired result http://i50.tinypic.com/2druhqd.png

所以，我的問題是：我怎麼能實現在網格中我控制的動態佈局？我更喜歡XAML /數據綁定/ MVVM友好的解決方案。

謝謝。

我已經把這裏的最終代碼： http://www.centrolutions.com/downloads/TicTacToe.zip

來源

2010-05-26 Jason Williams

嘿傑森，任何機會得到你的井字遊戲的完整代碼？我很想看看。謝謝！ – VitalyB 2010-09-01 19:05:10

不幸的是，這個項目只是一個例子，而不是一個完整的遊戲。這是一個更大的（非tic-tac-toe）項目的原型。如果您仍然對此感興趣，我已經在最初的問題下面提供了最終代碼的鏈接。 – 2010-09-02 13:37:35