通过绑定调整项目列

时间:2014-02-10 19:07:53

标签: c# xaml data-binding grid

我使用C#/ XAML以及MVVM-Light Toolkit在Windows 8.1中编写日历。

我创建了一个带有Grid作为ItemsPanel的ItemsControl,这样我(希望 - 我还没有尝试过)可以将项目放在我想要的网格中。

然而,Grid有3个固定列,我希望能够通过更改该项的属性来确定将Item放入哪个列。
我通过使用绑定尝试了这个,但这种方式不能按预期工作 - 它只适用于静态数字。

以下是创建列表的代码:

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

1 个答案:

答案 0 :(得分: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;
    }
  }

<强>结果

enter image description here

由于您没有看到列绑定,请验证您没有收到任何绑定错误。

在Visual Studio输出窗口中查找绑定错误。