Вставка меток с помощью ItemsControl в сетку

Question

Я хочу отсортировать ярлыки из ItemsControl в мою сетку. Когда я привязываю свойства Grid.Row и Grid.Column, положение столбца и строки не изменяется. Что я делаю не так?

Ярлыки имеют неправильное положение в сетке

Здесь мой View.xaml

    <Window.Resources>
    <vm:MainViewModel x:Key="MainVM"/>
</Window.Resources>

<DockPanel DataContext="{StaticResource MainVM}">

    <Grid Width="500">
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto"/>
        </Grid.RowDefinitions>

        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="*" />
            <ColumnDefinition Width="*"/>
            <ColumnDefinition Width="*"/>
            <ColumnDefinition Width="*"/>

        </Grid.ColumnDefinitions>


        <ItemsControl
        ItemsSource="{Binding MachineList}">
            <ItemsControl.ItemTemplate>
                <DataTemplate>
                    <Border  BorderBrush="Black" Background="Gainsboro" BorderThickness="1" Margin="2">

                        <Label Content="{Binding SerialNumber}"                    
                               Grid.Column="{Binding StationNumber}" 
                               Grid.Row="{Binding LineNumber}"
                               Margin="0"
                               VerticalAlignment="Center"
                               HorizontalAlignment="Center"
                               Background="LightBlue"
                               />

                    </Border>
                </DataTemplate>
            </ItemsControl.ItemTemplate>
        </ItemsControl>
    </Grid>
</DockPanel>

Здесь моя MainViewModel. cs

   public class MainViewModel: BaseViewModel
{
    public ObservableCollection<Machine> MachineList { get; set; }

    public MainViewModel()
    {
        Machine m1 = new Machine(0, "Row1 Column3", 1, 3, MachineType.SX);
        Machine m2 = new Machine(0, "Row1 Column2", 1, 2, MachineType.SX);
        Machine m3 = new Machine(0, "Row2 Column1", 2, 1, MachineType.SX);
        MachineList = new ObservableCollection<Machine>();

        MachineList.Add(m1);
        MachineList.Add(m2);
        MachineList.Add(m3);
    }




}

Answer 1

Проблема в том, что ItemsControl отображает элементы на своей собственной панели, которая не является вашей сеткой, поэтому свойство сетки не влияет на расположение элементов. Правильный способ сделать это - определить сетку в свойстве ItemsControl.ItemsPanel следующим образом:

<ItemsControl
            ItemsSource="{Binding MachineList}">
    <ItemsControl.ItemTemplate>
        <DataTemplate>
            <Border  BorderBrush="Black" Background="Gainsboro"   BorderThickness="1" Margin="2">
                <Label Content="{Binding SerialNumber}" 
                                   Margin="0"
                                   VerticalAlignment="Center"
                                   HorizontalAlignment="Center"
                           Background="LightBlue"
                               />
            </Border>
        </DataTemplate>
    </ItemsControl.ItemTemplate>
    <ItemsControl.ItemsPanel>
        <ItemsPanelTemplate>
            <Grid Width="500">
                <Grid.RowDefinitions>
                    <RowDefinition Height="Auto"/>
                </Grid.RowDefinitions>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="*" />
                    <ColumnDefinition Width="*"/>
                    <ColumnDefinition Width="*"/>
                    <ColumnDefinition Width="*"/>
                </Grid.ColumnDefinitions>
            </Grid>
        </ItemsPanelTemplate>
    </ItemsControl.ItemsPanel>
    <ItemsControl.ItemContainerStyle>
        <Style>
            <Setter Property="Grid.Row" Value="{binding ...}" />
            <Setter Property="Grig.Column" Value="{binding ...}" />
        </Style>
    </ItemsControl.ItemContainerStyle>
</ItemsControl>

см. здесь в Свойство ItemsPanelTemplate раздел