使用 winrt 用户控件如何根据依赖属性动态创建控件答案

【问题标题】：with a winrt user control how do i dynamically create controls based on dependency property使用 winrt 用户控件如何根据依赖属性动态创建控件
【发布时间】：2012-12-06 07:35:28
【问题描述】：

我正在尝试创建一个显示图像集合的用户控件。我使用图像集合的依赖属性创建了用户控件。我可以将数据绑定到该属性并正常显示图像。

但是，我对集合的大小进行了硬编码，我希望它能够接收任意数量的图像并显示它们。

我不确定如何根据图像集合动态创建图像。我确定有一些事件我想响应并根据依赖属性的内容创建我的图像。

public sealed partial class ImageView : UserControl
    {

        public ImageView()
        {
            this.InitializeComponent();

            scrollViewer.ZoomSnapPoints.Clear();
            scrollViewer.ZoomSnapPoints.Add(0.2f);
            scrollViewer.ZoomSnapPoints.Add(0.6f);
            scrollViewer.ZoomSnapPoints.Add(1.0f);
            scrollViewer.ZoomSnapPoints.Add(1.4f);
            scrollViewer.ZoomToFactor(0.4f);

        }


        public static readonly DependencyProperty ImagesProperty = DependencyProperty.Register("Images",
            typeof(List<VMImage>), typeof(ImageView), new PropertyMetadata(new List<VMImage>(12)));


        public List<VMImage> Images
        {
            get { return (List<VMImage>)GetValue(ImagesProperty); }
            set { SetValue(ImagesProperty, value); }
        }


    }


<ScrollViewer Height="700" Width="700"
                      x:Name="scrollViewer"
                      MinZoomFactor="0.2"
                      MaxZoomFactor="5.0"
                      ZoomSnapPointsType="Mandatory">

        <Canvas Background="Black" Width="2000" Height="2000" >

            <Image Canvas.Left="{Binding Images[0].Location.X}" 
                   Canvas.Top="{Binding Images[0].Location.Y}"
                   Source="{Binding Images[0].Source}" ></Image>
            <Image Canvas.Left="{Binding Images[1].Location.X}" 
                   Canvas.Top="{Binding Images[1].Location.Y}"
                   Source="{Binding Images[1].Source}" ></Image>
        </Canvas>

    </ScrollViewer>

【问题讨论】：

标签： user-controls windows-runtime custom-controls dependency-properties

【解决方案1】：

您应该将您的依赖属性设为ObservableCollection<VMImage>。这样，您可以将处理程序附加到其CollectionChanged 事件并获得更改通知。只需确保在依赖属性的属性更改回调中将事件处理程序添加到新值并将其从旧值中删除。

public static readonly DependencyProperty ImagesProperty = DependencyProperty.Register("Images",
    typeof(ObservableCollection<VMImage>), typeof(ImageView), new PropertyMetadata(null, OnImagesChanged));

public ObservableCollection<VMImage> Images
{
    get { return (ObservableCollection<VMImage>)GetValue(ImagesProperty); }
    set { SetValue(ImagesProperty, value); }
}

private static void OnImagesChanged(DependencyObject target, DependencyPropertyChangedEventArgs e)
{
    // use wrapper to pass DependencyObject to handler
    NotifyCollectionChangedEventHandler handler = (s, args) => OnCollectionChanged(target, args);
    if (e.OldValue is ObservableCollection<object>)
        (e.OldValue as ObservableCollection<object>).CollectionChanged -= handler;
    if (e.NewValue is ObservableCollection<object>)
        (e.NewValue as ObservableCollection<object>).CollectionChanged += handler;

    var imageView = target as ImageView
    if (imageView != null)
    {
        // collection has changed completely, replace all images
    }
}

static void OnCollectionChanged(object sender, NotifyCollectionChangedEventArgs e)
{
    var imageView = sender as ImageView;
    if (imageView != null)
    {
        if (e.OldItems != null)
        {
            // remove images
        }
        if (e.NewItems != null)
        {
            // add images
        }
    }
}

【讨论】：