Grid and ItemsControl.ItemContainerStyle in WIndows Phone - silverlight

Question

I've got a serious problem and i can't solve it. There is the following code what perfectly works in WPF:
<ItemsControl Grid.Row="1" ItemsSource="{Binding GameFields}" HorizontalAlignment="Stretch">
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<UniformGrid Rows="7" Columns="7" Margin="20" HorizontalAlignment="Center" VerticalAlignment="Center" />
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
<ItemsControl.ItemTemplate>
<DataTemplate>
<Button Command="{Binding SingleStepCommand}" CommandParameter="{Binding Index}" Visibility="{Binding Visible}" Background="Transparent"
Margin="10" BorderBrush="Transparent" BorderThickness="0">
<Button.Content>
<Image Source="{Binding IconPath}" Stretch="Fill" />
</Button.Content>
</Button>
</DataTemplate>
</ItemsControl.ItemTemplate>
<ItemsControl.ItemContainerStyle>
<Style>
<Setter Property="Grid.Row" Value="{Binding X}" />
<Setter Property="Grid.Column" Value="{Binding Y}" />
</Style>
</ItemsControl.ItemContainerStyle>
</ItemsControl>
And a try to implement in Windows Phone(7.1). But all elements of the itemspaneltemplate grid are on each other, i mean on the same X and Y position. Here's what i've tried:
<ItemsControl x:Name="ContentSource" Grid.Row="1" Margin="12,0,12,0" ItemsSource="{Binding GameFields}" >
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<Grid.RenderTransform>
<TransformGroup>
<TranslateTransform X="{Binding X}" Y="{Binding Y}" />
</TransformGroup>
</Grid.RenderTransform>
</Grid>
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
<ItemsControl.ItemTemplate>
<DataTemplate>
<Button Command="{Binding SingleStepCommand}" CommandParameter="{Binding Index}" Visibility="{Binding Visible}" Grid.Row="{Binding X}"
Grid.Column="{Binding Y}">
<Button.Content>
<Image Source="{Binding IconPath}" Stretch="Fill" />
</Button.Content>
</Button>
</DataTemplate>
</ItemsControl.ItemTemplate>
<!--ItemsControl.Resources>
<Style TargetType="ContentPresenter">
<Setter Property="Grid.Row" Value="17" />
<Setter Property="Grid.Column" Value="17" />
</Style>
</ItemsControl.Resources-->
</ItemsControl>
3 different way and none of them works. (Resources, TranslateTransform and Button grid.row binding). Do you have any suggestion what im doing wrong or what should i use?
I have to use MVVM strictly, so there's no code behind. Any advice will get thanks and sorry for my english :)

Answer 1

You have got the right idea - you do need to set the Grid.Row and Grid.Column properties on the ContentPresenter. The easiest way to do this is with your own Attached Properties for each.
Something like this:
public class ItemsGridLayout
{
public static int GetGridRow(DependencyObject obj)
{
return (int)obj.GetValue(GridRowProperty);
}
public static void SetGridRow(DependencyObject obj, int value)
{
obj.SetValue(GridRowProperty, value);
}
// Using a DependencyProperty as the backing store for GridRow. This enables animation, styling, binding, etc...
public static readonly DependencyProperty GridRowProperty =
DependencyProperty.RegisterAttached("GridRow", typeof(int), typeof(FrameworkElement), new PropertyMetadata(0, (s, e) =>
{
var presenter = GetItemsPresenter(s);
if (presenter != null)
{
Grid.SetRow(presenter, GetGridRow(s));
}
}));
public static int GetGridColumn(DependencyObject obj)
{
return (int)obj.GetValue(GridColumnProperty);
}
public static void SetGridColumn(DependencyObject obj, int value)
{
obj.SetValue(GridColumnProperty, value);
}
// Using a DependencyProperty as the backing store for GridColumn. This enables animation, styling, binding, etc...
public static readonly DependencyProperty GridColumnProperty =
DependencyProperty.RegisterAttached("GridColumn", typeof(int), typeof(FrameworkElement), new PropertyMetadata(0, (s, e) =>
{
var presenter = GetItemsPresenter(s);
if (presenter != null)
{
Grid.SetColumn(presenter, GetGridColumn(s));
}
}));
static FrameworkElement GetItemsPresenter(DependencyObject target)
{
while (target != null)
{
if (target is ContentPresenter)
{
return target as FrameworkElement;
}
target = VisualTreeHelper.GetParent(target);
}
return null;
}
}
Then in XAML it's used like this:
<ItemsControl>
<ItemsControl.ItemTemplate>
<DataTemplate>
<Button local:ItemsGridLayout.GridRow="{Binding X}"
local:ItemsGridLayout.GridColumn="{Binding Y}"

Answer 2

I ran into the very same problem today. Learning Silverlight after WPF, I didn't expect that this wouldn't work.
After a few more searches to avoid this kind of workaround, I tried to add a Style resource for the ContentPresenter and it worked like a charm in Silverlight 5.
<ItemsControl ItemsSource="{Binding Source={StaticResource CVM}, Path=PagedItems}">
<ItemsControl.Resources>
<Style TargetType="ContentPresenter">
<Setter Property="Grid.Column" Value="{Binding OffsetX}"/>
<Setter Property="Grid.Row" Value="{Binding OffsetY}"/>
</Style>
</ItemsControl.Resources>
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition/>
...
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition/>
...
<RowDefinition/>
</Grid.RowDefinitions>
</Grid>
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
</ItemsControl>