画布ItemsControl中的多个图像 [英] Multiple Image in Canvas ItemsControl

问题描述

我想在画布上显示多个图像.我需要在画布上以不同的方式放置它们.我为图片制作了课程:

I want to show multiple image on a canvas. I need to position them differently in the canvas. I made a class for my images :

class MapItem:Image
{
  public int DistanceToTop { get; set; }
  public int DistanceToLeft { get; set; }
}

我的XAML看起来像这样:

My XAML looks like this :

<UserControl.DataContext>
    <Map:MapViewModel/>
</UserControl.DataContext>

<ItemsControl ItemsSource="{Binding All}">
    <ItemsControl.ItemsPanel>
        <ItemsPanelTemplate>
            <Canvas />
        </ItemsPanelTemplate>
    </ItemsControl.ItemsPanel>
    <ItemsControl.ItemContainerStyle>
        <Style TargetType="Image">
            <Setter Property="Canvas.Left" Value="{Binding DistanceToLeft}" />
            <Setter Property="Canvas.Top" Value="{Binding DistanceToTop}" />
        </Style>
    </ItemsControl.ItemContainerStyle>
</ItemsControl>

我的ViewModel用作DataContext:

My ViewModel used as DataContext :

class MapViewModel : ViewModelBase
{
  public ObservableCollection<MapItem> All   { get; set; }

  public MapViewModel()
  {
    All = new ObservableCollection<MapItem>();
    var wSource = new BitmapImage(new Uri(@"ImagePath"));
    var wImage = new MapItem { Source = wSource, DistanceToLeft = 20, DistanceToTop = 20 };
    test = wImage;
    All.Add(wImage);
  }
}

为什么在XAML中我对DistanceToLeft和DistanceToTop的绑定不起作用?！? 是不是应该自动查看我的ObservableCollection中使用的对象?

Why in the XAML my binding to DistanceToLeft and DistanceToTop are not working ?!? Isn't it suppose to automatically look in the object use in my ObservableCollection ?

编辑:我仍然遇到问题.但是现在我知道它与绑定有关.我正在尝试使用GalaSoft框架使用MVVM模式来实现所有这些功能.因此，我首先将DataContext设置为MapViewModel.为什么我不能从ObservableCollection中访问MapItem的属性?

EDIT : I still have my problem. But now I know it's related with the Binding. I'm trying to implement all this using the MVVM pattern using the GalaSoft framework. So to start I set my DataContext to my MapViewModel. Why can't I acces the properties of the MapItem from my ObservableCollection ?

编辑:最后，在Clemens和Rachel的帮助下，我完成了此操作.

EDIT : Finally with the help of Clemens and Rachel I ended up with this.

我的MapItem类:

My MapItem Class:

class MapItem:Image
{
  public LatLon CoordMiddleOfImage { get; set; }
  public LatLon CoordTopLeftOfImage { get; set; }

  public int DistanceToTop
  {
    get { return (int) Canvas.GetTop(this); }
    set { Canvas.SetTop(this, value); }
  }

  public int DistanceToLeft
  {
    get { return (int)Canvas.GetLeft(this); }
    set { Canvas.SetLeft(this, value); }
  }

  public int ZOrder
  {
    get { return Panel.GetZIndex(this); }
    set { Panel.SetZIndex(this, value); }
  }
}

我的XAML是这样的:

And my XAML like this :

<ItemsControl ItemsSource="{Binding All}">
    <ItemsControl.ItemsPanel>
        <ItemsPanelTemplate>
            <Canvas ClipToBounds="True"  SnapsToDevicePixels="True"/>
        </ItemsPanelTemplate>
    </ItemsControl.ItemsPanel>
</ItemsControl>

现在它像一种魅力:-)

It works like a charm for now :-)

推荐答案

我不太理解为什么您毕竟发明了DistanceToLeft和DistanceToTop属性，然后又难以进行绑定.如果要将图像控件用作项目，为什么不直接应用附加的属性Canvas.Left和Canvas.Top:

I don't quite understand why after all you invented the DistanceToLeft and DistanceToTop properties and then struggle with binding. If you want to use Image controls as items, why not directly apply the attached properties Canvas.Left and Canvas.Top:

All = new ObservableCollection<Image>(); // no need for derived MapItem
var wSource = new BitmapImage(new Uri(@"ImagePath")); 
var wImage = new Image { Source = wSource }; 
Canvas.SetLeft(wImage, 20);
Canvas.SetTop(wImage, 20);
All.Add(wImage); 

因此，不需要样式:

<ItemsControl ItemsSource="{Binding All}">    
    <ItemsControl.ItemsPanel>    
        <ItemsPanelTemplate>    
            <Canvas />    
        </ItemsPanelTemplate>    
    </ItemsControl.ItemsPanel>    
</ItemsControl> 

---

但是，您应该考虑创建一个不是控件的真实ViewModel类，如下所示:

---

However, you should consider to create a real ViewModel class that is not a control, something like this:

public class ImageItem
{
    public string Source { get; set; }
    public double Left { get; set; }
    public double Top { get; set; }
}

使用它类似于您的MapItem类

Use it similar to your MapItem class

All = new ObservableCollection<ImageItem>();
ImageItem image = new ImageItem { Source = @"ImagePath", Left = 20, Top = 20 };
All.Add(image);

您现在将像这样定义ItemContainerStyle:

You would now define an ItemContainerStyle like this:

<ItemsControl.ItemContainerStyle>
    <!-- ContentPresenter is the default item container in ItemsControl -->
    <Style TargetType="ContentPresenter">
        <Setter Property="Canvas.Left" Value="{Binding Left}"/>
        <Setter Property="Canvas.Top" Value="{Binding Top}"/>
        <Setter Property="ContentTemplate">                        
            <Setter.Value>
                <DataTemplate>
                    <Image Source="{Binding Source}"/>
                </DataTemplate>
            </Setter.Value>
        </Setter>
    </Style>
</ItemsControl.ItemContainerStyle>

这篇关于画布ItemsControl中的多个图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！