ItemsControl Grid.Row Grid.Column在Silverlight中的綁定

我想使用ItemsControl爲Grid.Row和Grid.Column使用不同的X和Y值來填充網格，我從我的WPF項目中複製它，並且可以在Silverlight（Windows Phone）中無法使用它。ItemsControl Grid.Row Grid.Column在Silverlight中的綁定

這裏是它的簡化版本：

視圖模型，其在DataContext設置爲：

public class ViewModel 
{ 
    public ObservableCollection<GridItem> Data { get; set; } 

    public ViewModel() 
    { 
     Data = new ObservableCollection<GridItem>(); 
     FillData(); 
    } 

    // fill Data property with some random color GridItems 
    private void FillData() 
    { 
     string[] colors = { "Red", "Green", "Yellow", "Blue" }; 
     Random r = new Random(); 

     for (int i = 0; i < 10; i++) 
     { 
      Data.Add(new GridItem(i, i, colors[r.Next(colors.Length)])); 
     } 
    } 
} 

public class GridItem 
{ 
    public int X { get; set; } 
    public int Y { get; set; } 
    public string Color { get; set; } 

    public GridItem(int x, int y, string color) 
    { 
     X = x; 
     Y = y; 
     Color = color; 
    } 
}

的XAML：

<Grid x:Name="LayoutRoot" Background="Transparent"> 

    <ItemsControl ItemsSource="{Binding Data}" HorizontalAlignment="Stretch" VerticalAlignment="Stretch"> 
     <ItemsControl.ItemsPanel> 
      <ItemsPanelTemplate>      
      <Grid Background="Orange"> 
       <Grid.ColumnDefinitions> 
        <ColumnDefinition /> 
        <ColumnDefinition /> 
        <ColumnDefinition /> 
        <ColumnDefinition /> 
        <ColumnDefinition /> 
        <ColumnDefinition /> 
        <ColumnDefinition /> 
        <ColumnDefinition /> 
        <ColumnDefinition /> 
        <ColumnDefinition /> 
        <ColumnDefinition /> 
       </Grid.ColumnDefinitions> 
       <Grid.RowDefinitions> 
        <RowDefinition /> 
        <RowDefinition /> 
        <RowDefinition /> 
        <RowDefinition /> 
        <RowDefinition /> 
        <RowDefinition /> 
        <RowDefinition /> 
        <RowDefinition /> 
        <RowDefinition /> 
        <RowDefinition /> 
        <RowDefinition /> 
       </Grid.RowDefinitions> 
      </Grid> 
     </ItemsPanelTemplate> 
     </ItemsControl.ItemsPanel> 
     <ItemsControl.ItemTemplate> 
      <DataTemplate> 
       <Ellipse 
        Grid.Row="{Binding Y}" 
        Grid.Column="{Binding X}" 
        Fill="{Binding Color}" 
        Stroke="White" /> 
      </DataTemplate> 
     </ItemsControl.ItemTemplate> 
    </ItemsControl> 
</Grid>

這是結果（它置於所有橢圓在彼此之上）：

Result

雖然它應該這樣做：

intention

有誰知道爲什麼不起作用？

來源

2012-08-29 Jesse

什麼時候您的視圖模型被置？在InitializeComponent之前還是之後？ –

@ShawnKendrot在 – Jesse

之後ViewModel（DataContext）需要在** InitializeComponent之前設置**。 X和Y的值需要設置爲綁定 –

嘗試設置爲ContentPresenter內，而不是定義橢圓的DataTemplate中的一部分Grid.Row和Grid.Column綁定：

<ItemsControl.Resources> 
     <Style TargetType="ContentPresenter"> 
      <Setter Property="Grid.Row" Value="{Binding Y}"/> 
      <Setter Property="Grid.Column" Value="{Binding X}"/> 
     </Style> 
    </ItemsControl.Resources> 
    <ItemsControl.ItemTemplate> 
     <DataTemplate> 
      <Ellipse 
       Fill="{Binding Color}" 
       Stroke="White" /> 
     </DataTemplate> 
    </ItemsControl.ItemTemplate>

來源

2012-08-29 14:04:21

當我這樣做時，它會引發XamlParseException：「無法設置只讀屬性」 – Jesse

這是因爲DataTemplate其包裹在ContentPresenter內容。 Grid.Row和Grid.Column屬性僅適用於直接後代，因此在這種情況下它們不相關，因爲它們在控制層次結構中處於兩個深度。

當DataTemplate呈現時，在運行時動態添加ContentPresenter。爲了完成這項工作，您需要勾選動態生成的項目，並在包含項目上設置和Column附加屬性。

有證據顯示在獲得這個工作的一種方式的博客文章：http://www.scottlogic.co.uk/blog/colin/2010/11/using-a-grid-as-the-panel-for-an-itemscontrol/

來源

2013-06-23 03:07:59 spoida

ItemsControl Grid.Row Grid.Column在Silverlight中的綁定

回答

相關問題