listboxitem wpf

Diseño dinámico de WPF con ItemsControl y 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 de tic-tac-toe a continuación para 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 del formulario se establece en 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 finalmente, 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 comencé 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 dentro de la grilla. Por lo tanto, todas las imágenes se colocan en la fila y columna predeterminadas (0, 0).

Que esta pasando:

Qué está pasando http://i48.tinypic.com/29xyl9j.png

El resultado deseado:

El resultado deseado http://i50.tinypic.com/2druhqd.png

Entonces, mi pregunta es esta: ¿cómo puedo lograr la ubicació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 a ItemsControl.ItemContainerStyle . Luego, en el estilo, especifique un setter para Grid.Row y Grid.Column . ItemContainerStyle se aplicará a los contenedores generados para cada artículo.