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

【问题标题】：Silverlight 3 - Data Binding Position of a rectangle on a canvasSilverlight 3 - 画布上矩形的数据绑定位置
【发布时间】：2009-10-28 13:53:59
【问题描述】：

我目前正在尝试使用 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 看来，这是由于项目被放置在内容演示器中，而不是我在项目面板中指定的实际画布。

有没有一种方法可以使用数据绑定来确定画布上元素的位置？

【问题讨论】：

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

【解决方案1】：

我意识到这已经接受了一个答案，但是在不影响边距的情况下实现初始目标的方法是创建一个自定义 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);
    }

}

【讨论】：

【解决方案2】：

您不能在 Silverlight 中使用 ItemsControl.ItemContainerStyle。它不存在。它仅存在于几个叶级类中，例如 ListBox 本身。

【讨论】：

【解决方案3】：

你是对的，在 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>

【讨论】：

很遗憾，Left 属性是只读的，无法设置。
我不知道为什么它是只读的。无论如何，我设法使用值转换器来完成这项工作：但这肯定不是一个优雅的解决方案。
LeftMarginConverter 是如何工作的，当它被应用时，是应用到所有绑定项目相对于容器左边缘的边距？
转换器是：public class LeftMarginConverter : IValueConverter { public object Convert(object value, Type targetType, object parameter, CultureInfoculture) { return new Thickness((int)value, 0, 0, 0) ; } public object ConvertBack(object value, Type targetType, object parameter, CultureInfo 文化) { throw new NotImplementedException(); } } 这样设置了左偏移。如果您使用 Margin={Binding} 进行绑定，您可以根据对象的属性想象任何其他定位。

【解决方案4】：

我知道这个问题有点老了，但你可以只使用渲染转换 - 我正在做类似的事情；

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

【讨论】：

【解决方案5】：

将以下内容添加到您的 ItemsControl

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

不需要任何自定义控件

【讨论】：

这不起作用，因为 ItemsControl 在 Silverlight（v3 或 v4）中没有 ItemContainerStyle 属性。在 WPF 中是的，但这不是问题。