通過綁定調整項目Column

Question

我正在使用C＃/ XAML以及MVVM-Light工具包編程Windows 8.1中的日曆。

我已經創建了一個ItemsControl作爲ItemsPanel的網格，以便我（希望 - 我還沒有嘗試過這一點）可以將物品放置在該網格內的任何位置。

但是，該網格有3個固定列，我想通過更改該項目的屬性來確定將哪個列放入該項目。
我試過這個通過使用綁定，但這種方式不能按預期工作 - 它只適用於靜態數字。

下面是創建列表中的代碼：

ItemsList = new ObservableCollection<object>(tmpPeriodsList.Select((x, i) => new 
    { 
     ColorHash = x.ColorHash, 
     Index = i, 
     Margin = new Thickness(0,60*i,0, 0), 
     ColumnIndex = ColumnIndex(i), 
    })); 
} 


private int ColumnIndex(int i) 
{ 
    //Purpose: Place the third item the third column 
    if (i == 2) return 2; 
    return 0; 
} 

而且這裏的XAML：

<ItemsControl Grid.Column="1" 
       ItemsSource="{Binding Day.ItemsList, Source={StaticResource Locator}}">      
    <ItemsControl.ItemsPanel> 
     <ItemsPanelTemplate> 
      <Grid> 
       <Grid.ColumnDefinitions> 
        <ColumnDefinition Width="100"/> 
        <ColumnDefinition Width="100"/> 
        <ColumnDefinition Width="100"/> 
       </Grid.ColumnDefinitions> 
      </Grid>         
     </ItemsPanelTemplate> 
    </ItemsControl.ItemsPanel> 

    <ItemsControl.ItemTemplate> 
     <DataTemplate> 
       <!-- Those Bindings work fine --> 
       <Grid Height="20" Width="80" Margin="{Binding Margin}"> 
       <Grid.Background> 
        <SolidColorBrush Color="{Binding ColorHash, Converter={StaticResource HexToColorConverter}}"/> 
       </Grid.Background> 
      </Grid> 
     </DataTemplate> 
    </ItemsControl.ItemTemplate> 

    <ItemsControl.ItemContainerStyle> 
     <Style TargetType="FrameworkElement"> 
      <!-- This line only works with static numbers (0,1,2) and 
       changes the Column of all Elements --> 
      <Setter Property="Grid.Column" Value="{Binding ColumnIndex}"/> 
     </Style> 
    </ItemsControl.ItemContainerStyle> 
</ItemsControl>  

我現在猜測，Grid.Column爲整數類型的不行。如列的寬度不是雙倍。這可能是真的嗎？

我真的沒有什麼線索可能是錯那裏...

非常感謝您的幫助！

FunkyPeanut

Answer 1

我簡化代碼有些用於測試目的和結合作品，結合的產品無論是在第0列或第2列;

XAML

<Grid> 
    <ItemsControl Grid.Column="1" 
        ItemsSource="{Binding}"> 
     <ItemsControl.ItemsPanel> 
     <ItemsPanelTemplate> 
      <Grid> 
      <Grid.ColumnDefinitions> 
       <ColumnDefinition Width="100" /> 
       <ColumnDefinition Width="100" /> 
       <ColumnDefinition Width="100" /> 
      </Grid.ColumnDefinitions> 
      </Grid> 
     </ItemsPanelTemplate> 
     </ItemsControl.ItemsPanel> 

     <ItemsControl.ItemTemplate> 
     <DataTemplate> 
      <!-- Those Bindings work fine --> 
      <Grid Height="20" 
       Width="80" 
       Margin="{Binding Margin}"> 
      <Grid.Background> 
       <SolidColorBrush Color="Orange" /> 
      </Grid.Background> 
      </Grid> 
     </DataTemplate> 
     </ItemsControl.ItemTemplate> 

     <ItemsControl.ItemContainerStyle> 
     <Style TargetType="FrameworkElement"> 
      <!-- This line only works with static numbers (0,1,2) and 
       changes the Column of all Elements --> 
      <Setter Property="Grid.Column" 
        Value="{Binding ColumnIndex}" /> 
     </Style> 
     </ItemsControl.ItemContainerStyle> 
    </ItemsControl> 
    </Grid> 

代碼

public partial class BindGridColumns : Window { 
    private ObservableCollection<object> ItemsList; 

    public BindGridColumns() { 
     InitializeComponent(); 

     ItemsList = new ObservableCollection<object>(); 

     for (int i = 0; i < 7; i++) 
     { 
     ItemsList.Add(new 
     { 
     Index = i, 
     Margin = new Thickness(0, 60 * i, 0, 0), 
     ColumnIndex = ColumnIndex(i), 
     }); 
     } 

     this.DataContext = ItemsList; 
    } 

    private int ColumnIndex(int i) { 
     //Purpose: Place every third item the third column 
     if (i % 3 == 0) return 2; 
     return 0; 
    } 
    } 

結果

由於您沒有看到列綁定，請確認您沒有收到任何綁定錯誤。

查看Visual Studio輸出窗口中的綁定錯誤。