WPF Dynamic Layout with ItemsControl and Grid

Question

Estoy creando un formulario WPF. Uno de los requisitos es que tenga un diseño basado en sector para que un control pueda colocarse explícitamente en uno de los sectores/celdas.

He creado un ejemplo tic-tac-dedo del pie por debajo de transmitir mi problema:

Hay dos tipos y un tipo de base:

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

El DataContext de la forma se ajusta a una instancia 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; 
    } 
} 

Y, por último, el XAML se ve así:

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

Lo que no era tan obvio para mí cuando empecé fue que el elemento ItemsControl en realidad envuelve cada elemento en un contenedor, por lo que mis enlaces Grid.Row y Grid.Column se ignoran ya que las imágenes no están contenidas directamente en la cuadrícula. Por lo tanto, todas las imágenes se colocan en la fila y columna predeterminadas (0, 0).

Lo que está ocurriendo:

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

El resultado deseado:

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

lo tanto, mi pregunta es la siguiente: ¿cómo puedo lograr la colocación dinámica de mis controles en una cuadrícula ? Preferiría una solución compatible con XAML/Data Binding/MVVM.

Gracias.

he puesto el código final aquí: http://www.centrolutions.com/downloads/TicTacToe.zip

Answer 1

Estás en el camino correcto. Solo necesita crear un Style y aplicarlo al ItemsControl.ItemContainerStyle. Luego, en el estilo, especifique un colocador para Grid.Row y Grid.Column. El ItemContainerStyle se aplicará a los contenedores generados para cada artículo.