WinRT ItemsControl with Grid columns and rows

Question

I'm new to XAML. I searched about ItemsControl and I found a tutorial, which is easy to understand, but the problem is that it is not work in WinRT.

Tutorial: https://rachel53461.wordpress.com/2011/09/17/wpf-itemscontrol-example/

I tried to use TargetType in Style tag, however, in runtime I got an exception.

<ItemsControl ItemsSource="{Binding MyCollection}">
    <!-- ItemsPanelTemplate -->
    <ItemsControl.ItemsPanel>
        <ItemsPanelTemplate>
            <Grid>
                <Grid.RowDefinitions>
                    <RowDefinition />
                    <RowDefinition />
                    <RowDefinition />
                    <RowDefinition />
                    <RowDefinition />
                    <RowDefinition />
                </Grid.RowDefinitions>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition />
                    <ColumnDefinition />
                    <ColumnDefinition />
                    <ColumnDefinition />
                    <ColumnDefinition />
                    <ColumnDefinition />
                </Grid.ColumnDefinitions>
            </Grid>
        </ItemsPanelTemplate>
    </ItemsControl.ItemsPanel>

    <!-- ItemContainerStyle -->
    <ItemsControl.ItemContainerStyle>
        <Style TargetType="TextBox">
            <Setter Property="Grid.Column"
                Value="{Binding xIndex}" />
            <Setter Property="Grid.Row"
                Value="{Binding yIndex}" />
        </Style>
    </ItemsControl.ItemContainerStyle>

    <!-- ItemTemplate -->
    <ItemsControl.ItemTemplate>
        <DataTemplate>
            <TextBox  Background="{Binding color}" Text="{Binding xIndex,Mode=OneWay}" />
        </DataTemplate>
    </ItemsControl.ItemTemplate>
</ItemsControl>

Answer 1

Your problem is here:

<Style TargetType="TextBox">

this is what is should be:

<Style TargetType="ContentPresenter">

The ItemContainer for an ItemsControl is a ContentPresenter (unless a specific item is added to the ItemsControl ).

So your view hierarchy looks something like this (assuming you didn't change the ItemsPanel to something other than a StackPanel ):

<StackPanel>
    <ContentPresenter>
        <TextBox/>
    </ContentPresenter>
</StackPanel>

Edit:

As Scott pointed out in the comments, this solution doesn't actually work for WinRT. I did something similar and you can probably modify it to do the appropriate binding:

public class CustomItemsControl : ItemsControl
{
    protected override void PrepareContainerForItemOverride(DependencyObject element, object item)
    {
        base.PrepareContainerForItemOverride(element, item);
        FrameworkElement source = element as FrameworkElement;
        if (source != null)
        {
            source.SetBinding(Canvas.LeftProperty, new Binding { Path = new PropertyPath("X"), Mode = BindingMode.TwoWay });
            source.SetBinding(Canvas.TopProperty, new Binding { Path = new PropertyPath("Y"), Mode = BindingMode.TwoWay });
        }
    }
}

This binds the Canvas.LeftProperty to the X property on each item in the collection and similarly the Canvas.TopProperty and the Y property.