Layout dinâmico WPF com ItemsControl e grade
Estou criando um formulário WPF. Um dos requisitos é que ele tenha um layout baseado em setor para que um controle possa ser explicitamente colocado em um dos setores / células.
Criei um exemplo do jogo da velha abaixo para transmitir o meu problema:
Existem dois tipos e um tipo base:
public class XMoveViewModel : MoveViewModel
{
}
public class OMoveViewModel : MoveViewModel
{
}
public class MoveViewModel
{
public int Row { get; set; }
public int Column { get; set; }
}
O DataContext do formulário está definido para uma instância de:
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;
}
}
E, finalmente, o XAML fica assim:
<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 />
<ColumnD,efinition />
<ColumnDefinition />
</Grid.ColumnDefinitions>
</Grid>
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
</ItemsControl>
</Grid>
O que não era tão óbvio para mim quando comecei foi que o elemento ItemsControl realmente agrupa cada item em um contêiner, então minhas ligações Grid.Row e Grid.Column são ignoradas, pois as imagens não estão diretamente contidas na grade. Assim, todas as imagens são colocadas na linha e coluna padrão (0, 0).
O que está acontecendo:
O que está acontecendo http://i48.tinypic.com/29xyl9j.png
O resultado desejado:
O resultado desejado http://i50.tinypic.com/2druhqd.png
Então, minha pergunta é a seguinte: como posso obter o posicionamento dinâmico dos meus controles em uma grade? Eu preferiria uma solução compatível com XAML / Data Binding / MVVM.
Obrigado.
Eu coloquei o código final aqui:http://www.centrolutions.com/downloads/TicTacToe.zip