WIndows Phone中的Grid和ItemsControl.ItemContainerStyle

Question

我遇到了一個嚴重的問題，我無法解決它。有以下代碼在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> 

並嘗試在Windows Phone（7.1）中實現。但是itemspaneltemplate網格的所有元素都是彼此相連的，我的意思是在相同的X和Y位置。以下是我所嘗試的：

<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種不同的方式，它們都不起作用。 （資源，TranslateTransform和Button grid.row綁定）。你有什麼建議，我做錯了什麼或我應該使用什麼？ 我必須嚴格使用MVVM，所以沒有代碼。任何建議將得到感謝和對我的英語感到抱歉:)

Answer 1

你有正確的想法 - 你需要在ContentPresenter上設置Grid.Row和Grid.Column屬性。最簡單的方法是使用您自己的附加屬性。

事情是這樣的：

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

然後在XAML它的使用是這樣的：

<ItemsControl> 
    <ItemsControl.ItemTemplate> 
     <DataTemplate> 
      <Button local:ItemsGridLayout.GridRow="{Binding X}" 
        local:ItemsGridLayout.GridColumn="{Binding Y}" 

Answer 2

我今天碰到了同樣的問題。學習WPF之後的Silverlight，我沒想到這個不起作用。

幾個搜索後避免這種解決辦法的，我試圖添加一個Style資源爲ContentPresenter和它的工作就像一個魅力在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>