Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
1.2k views
in Technique[技术] by (71.8m points)

wpf - 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; }
}

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>

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);
  }
}

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 ?

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 ?

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

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); }
  }
}

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

See Question&Answers more detail:os

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Reply

0 votes
by (71.8m points)

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

Hence, no need for a Style:

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

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

Use it similar to your MapItem class

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

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>

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
OGeek|极客中国-欢迎来到极客的世界,一个免费开放的程序员编程交流平台!开放,进步,分享!让技术改变生活,让极客改变未来! Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

...