Silverlight 3 - 数据绑定矩形在画布上的位置

时间:2009-10-28 13:54:00

标签: c# data-binding silverlight-3.0 silverlight-2.0

我目前正在尝试使用ItemsControl将一组对象绑定到Silverlight 3中的Canvas,如下所示:

<ItemsControl x:Name="ctrl" ItemsSource="{Binding myObjectsCollection}">
    <ItemsControl.ItemsPanel>
        <ItemsPanelTemplate>
            <Canvas></Canvas>
        </ItemsPanelTemplate>
    </ItemsControl.ItemsPanel>
    <ItemsControl.ItemTemplate>
        <DataTemplate>
            <Rectangle Stroke="LightGray" Fill="Black"  StrokeThickness="2" 
                   RadiusX="15" RadiusY="15" Canvas.Left="{Binding XAxis}"
                   Height="25" Width="25">
            </Rectangle>
        </DataTemplate>
    </ItemsControl.ItemTemplate>
</ItemsControl>

不幸的是,似乎忽略了Canvas.Left上的绑定。根据我所学到的here,这似乎是由于项目被放置在内容展示器内而不是我在项目面板中指定的实际画布。

有没有办法可以使用数据绑定来确定画布上元素的位置?

5 个答案:

答案 0 :(得分:7)

我意识到这已经接受了答案,但是在不弄乱边距的情况下实现初始目标的方法是创建自定义ItemsControl并覆盖PrepareContainerForItemOverride方法。在此方法中,您在代码中设置绑定。

public class CustomItemsCollection
    : ItemsControl
{
    protected override void PrepareContainerForItemOverride(DependencyObject element, object item)
    {

        FrameworkElement contentitem = element as FrameworkElement;
        Binding leftBinding = new Binding("Left"); // "Left" is the property path that you want to bind the value to.
        contentitem.SetBinding(Canvas.LeftProperty, leftBinding);

        base.PrepareContainerForItemOverride(element, item);
    }

}

答案 1 :(得分:2)

您无法在Silverlight中使用ItemsControl.ItemContainerStyle。它不存在。它仅存在于几个叶级别类中,如ListBox本身。

答案 2 :(得分:1)

你说得对,在Canvas和Rectangle之间插入了一个ContentPresenter。 一种解决方法是设置左边距而不是Canvas.Left

<Rectangle Stroke="LightGray" Fill="Black" StrokeThickness="2" 
      RadiusX="15" RadiusY="15" Height="25" Width="25">
    <Rectangle.Margin>
        <Thickness Left="{Binding XAxis}"/>
    </Rectangle.Margin>
</Rectangle>

答案 3 :(得分:1)

我知道这个问题有点陈旧,但你可以使用渲染变换 - 我正在做类似的事情;

<ItemsControl ItemsSource="{Binding Notes}">
    <ItemsControl.ItemsPanel>
        <ItemsPanelTemplate>
            <Canvas Background="Aqua"/>
        </ItemsPanelTemplate>
    </ItemsControl.ItemsPanel>

    <ItemsControl.ItemTemplate>
        <DataTemplate>
            <Border Width="{Binding W}" Height="{Binding H}" BorderBrush="Navy" BorderThickness="5" CornerRadius="10">
                <TextBlock Text="{Binding Text}"/>
                <Border.RenderTransform>
                    <TransformGroup>
                        <RotateTransform Angle="0"/>
                        <TranslateTransform X="{Binding X}" Y="{Binding Y}"/>
                    </TransformGroup>
                </Border.RenderTransform>
            </Border>
        </DataTemplate>
    </ItemsControl.ItemTemplate>
</ItemsControl>

答案 4 :(得分:-2)

将以下内容添加到ItemsControl

 <ItemsControl.ItemContainerStyle>
    <Style TargetType="{x:Type ContentPresenter}">
      <Setter Property="Canvas.Left" Value="{Binding XPath=XAxis}"/>
    </Style>
  </ItemsControl.ItemContainerStyle>

无需任何自定义控件