WPF/Silverlight Bind Canvas to Collection of View Model Elements - wpf

Is it possible to use a DataTemplate to render a collection of points as a bunch of lines (with data binding and drag and drop)?
Here are the details:
I have multiple objects in my view model. These objects ultimately have locations on a canvas specified in absolute pixel coordinates. I need to be able to drag and drop these items around on the canvas and update their coordinates. Some objects are represented by a point, others are a collection of line segments. I'm using MVVM (Jounce). Should my view model expose a ObservableCollection<Shape> that somehow binds the coordinates? That feels wrong. Or is there a way I can use DataTemplates here to draw lines with points on the end of each line segment given a collection of line segments? Here is an example ViewModel:
using System.Collections.Generic;
using System.Collections.ObjectModel;
using Jounce.Core.ViewModel;
namespace CanvasBindTest.ViewModels
{
/// <summary>
/// Sample view model showing design-time resolution of data
/// </summary>
[ExportAsViewModel(typeof(MainViewModel))]
public class MainViewModel : BaseViewModel
{
public MainViewModel()
{
var start = new PointView { X = 0, Y = 0 };
var middle = new PointView { X = 1132 / 2, Y = 747 / 2 };
var end = new PointView() { X = 1132, Y = 747 };
var lineView = new LineView(new[] { start, middle, end });
Lines = new LinesView(new[] { lineView });
}
public LinesView Lines { get; private set; }
}
public class LinesView : BaseViewModel
{
public ObservableCollection<LineView> Lines { get; private set; }
public LinesView(IEnumerable<LineView> lines)
{
Lines = new ObservableCollection<LineView>(lines);
}
}
public class LineView : BaseViewModel
{
public ObservableCollection<PointView> Points { get; private set; }
public LineView(IEnumerable<PointView> points)
{
Points = new ObservableCollection<PointView>(points);
}
}
public class PointView : BaseViewModel
{
private int x, y;
public int X
{
get { return x; }
set { x = value; RaisePropertyChanged(() => X); }
}
public int Y {
get { return y; }
set { y = value; RaisePropertyChanged(() => Y); }
}
}
}
Here is the View, which is a canvas wrapped in a ItemsControl with a background image. The view model coordinates are relative to the background image's unscaled size:
<UserControl x:Class="CanvasBindTest.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:viewModels="clr-namespace:CanvasBindTest.ViewModels"
mc:Ignorable="d" d:DesignHeight="300" d:DesignWidth="400">
<UserControl.Resources>
<DataTemplate x:Key="SkylineTemplate" DataType="viewModels:LineView">
<ItemsControl ItemsSource="{Binding Points}">
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<!--I have a collection of points here, how can I draw all the lines I need and keep the end-points of each line editable?-->
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
</ItemsControl>
</DataTemplate>
</UserControl.Resources>
<Grid d:DataContext="{d:DesignInstance viewModels:MainViewModel, IsDesignTimeCreatable=True}">
<ScrollViewer x:Name="Scroll">
<ItemsControl ItemsSource="{Binding Lines}">
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<Canvas>
<Canvas.Background>
<ImageBrush Stretch="Uniform" ImageSource="Properties/dv629047.jpg"/>
</Canvas.Background>
</Canvas>
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
</ItemsControl>
</ScrollViewer>
</Grid>
</UserControl>

Your LineView must be LineViewModel, it'll be more correct.
I describe the mechanism for points, for lines I think you will understand by yourself.
Main Control
Use ItemsControl.
ItemsControl.PanelControl must be Canvas.
ItemsSource - Your collection of PointWiewModel.
Make two DataTemplates for types PointWiewModel.
Make the PointView control and put it into the appropriate DataTemplate.
PointView control
Two way bind Canvas.X attached property to PointViewModel.X property.
Two way bind Canvas.Y attached property to PointViewModel.Y property.
Add logic of changing Canvas.X and Canvas.Y when you drag a PointView control.
Result
After that you could drag your (for example) PointVew control and the properties in your view model will be updated because of two way binding.
Suppose I understand correctly what do you want.
Added answers to the questions
Silverlight 5 supports it. That's mean all the items will be placed on the Canvas control. Some article about ItemsControl.
<ItemsControl>
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<Canvas></Canvas>
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
</ItemsControl>
PointView is the second user control.
Note: I've described a way to draw an array of points with MVVM. You can drag each point on the canvas and receiving the new coordinates in your view model. (Maybe my description was a bit confusing on this stage so I've deleted LineViews from it)
In order to make a Lines, you have to connect your points. It'll be more difficult so I suggest you to make a variant with points only.
When you will be familiar with it, you can move your ItemsControl into templated control. Make your own ItemSource collection and drawing the Path by this points when they will change the position.
You can also search some opensource graph controls and see how they drawing curving lines by dots. Actually they usually do doing it with the Path like I have described.
Sorry, but I wouldn't write more because it'll became an article but not an answer)
P.S: It is interesting question, so If I have some free time I may be write an article. About templated controls you can read here.

It's absolutely disgusting how much XAML this takes. I'll look for a way to clean it up using styles and templates. Also, I need to draw the line to the center of the point, that shouldn't be hard. For now, below is what worked. I ended up created a Collection<Pair<Point, Point>> ViewModel to bind the "Line" collection. Otherwise I'm looking at the line point-by-point and can't draw a line since I can't find X2/Y2.
Thanks for the inspiration Alexander.
Here is the XAML:
<ItemsControl ItemsSource="{Binding Lines}">
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<Canvas />
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
<ItemsControl.ItemTemplate>
<DataTemplate DataType="viewModels:LineViewModel">
<ItemsControl ItemsSource="{Binding LineSegments}">
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<Canvas />
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
<ItemsControl.ItemTemplate>
<DataTemplate>
<ItemsControl>
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<Canvas />
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
<ItemsControl ItemsSource="{Binding Lines}">
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<Canvas />
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
<ItemsControl.ItemTemplate>
<DataTemplate>
<Line X1="{Binding Item1.X}" X2="{Binding Item2.X}" Y1="{Binding Item1.Y}" Y2="{Binding Item2.Y}" Stroke="Black" StrokeThickness="2"/>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
<ItemsControl ItemsSource="{Binding LineSegment}">
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<Canvas />
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
<ItemsControl.ItemTemplate>
<DataTemplate>
<Ellipse Canvas.Left="{Binding X}" Canvas.Top="{Binding Y}" Width="10" Height="10" Fill="Black">
<Ellipse.RenderTransform>
<TranslateTransform X="{Binding X}" Y="{Binding Y}"/>
</Ellipse.RenderTransform>
</Ellipse>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
</ItemsControl>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
Here is the ViewModel:
namespace CanvasBindTest.ViewModels
{
/// <summary>
/// Sample view model showing design-time resolution of data
/// </summary>
[ExportAsViewModel(typeof (MainViewModel))]
public class MainViewModel : BaseViewModel
{
public MainViewModel()
{
var start = new PointViewModel {X = 0, Y = 0};
var middle = new PointViewModel {X = 30, Y = 10};
var end = new PointViewModel {X = 20, Y = 0};
var simpleLine = new LineSegmentsViewModel(new[] {start, middle, end});
Lines = new ObservableCollection<LineViewModel> {new LineViewModel(new[] {simpleLine})};
}
public ObservableCollection<LineViewModel> Lines { get; private set; }
}
public class LineViewModel : BaseViewModel
{
public LineViewModel(IEnumerable<LineSegmentsViewModel> lineSegments)
{
LineSegments = new ObservableCollection<LineSegmentsViewModel>(lineSegments);
}
public ObservableCollection<LineSegmentsViewModel> LineSegments { get; private set; }
}
public class LineSegmentsViewModel : BaseViewModel
{
public LineSegmentsViewModel(IEnumerable<PointViewModel> lineSegment)
{
LineSegment = new ObservableCollection<PointViewModel>(lineSegment);
Lines = new Collection<Tuple<PointViewModel, PointViewModel>>();
var tmp = lineSegment.ToArray();
for (var i = 0; i < tmp.Length - 1; i++)
{
Lines.Add(new Tuple<PointViewModel, PointViewModel>(tmp[i], tmp[i+1]));
}
}
public Collection<Tuple<PointViewModel, PointViewModel>> Lines { get; private set; }
public ObservableCollection<PointViewModel> LineSegment { get; private set; }
}
public class PointViewModel : BaseViewModel
{
private int x, y;
public int X
{
get { return x; }
set
{
x = value;
RaisePropertyChanged(() => X);
}
}
public int Y
{
get { return y; }
set
{
y = value;
RaisePropertyChanged(() => Y);
}
}
}
}

Related

Tile view for ListView in WPf

How to simulate a tile view for a ListView in WPF?
I was trying the example shown here. But I can't get to the right solution... But I don't want to use that solution as I it's too much specific. So how will be the way to accomplilsh that?
EDIT: I'm trying this now and seems to work...
<ListBox ItemsSource="{Binding Path=ListObservableUsers, ElementName=AdminWindow}">
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Vertical">
<Image Source="{Binding Path=Picture}"></Image>
<Label Content="{Binding Path=Dni}"></Label>
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
Where the ElementName=AdminWindow comes from <Window .... x:Name="AdminWindow"
And I created my own ObservableCollection<MyUser>
public class MyUser
{
public MyUser(int id, string dni, Bitmap picture)
{
Id = id;
Dni = dni;
Image img = new Image();
FPhiMultipleSources.FromBitmapImage(img, picture);
Picture = img.Source;
}
public int Id { get; set; }
public string Dni { get; set; }
public ImageSource Picture { get; set; }
}
...
public UCAdminMain()
public UCAdminMain()
{
ListObservableUsers = new ObservableCollection<MyUser>();
InitializeComponent();
uiCurrent = SynchronizationContext.Current;
// Create users to add with its image
....
ListObservableUsers.Add(...);
}
And now I'm trying to put them inside a wrap panel. With no luck right now... Any ideas?
<ListBox.ItemsPanel>
<ItemsPanelTemplate>
<WrapPanel />
</ItemsPanelTemplate>
</ListBox.ItemsPanel>
try to use a wrappanel
An ItemsControl with a WrapPanel as the ItemsContainer would probably be a good fit for what you are trying to do.

WPF DataTemplate fails for Shape types

I'm trying to set up a WPF DataTemplate that will be used for Line (System.Windows.Shapes.Line) objects.
From a default .NET 4 WPF Application, I set my Window xaml to:
<Window x:Class="WpfTestDataTemplates.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:system="clr-namespace:System;assembly=mscorlib"
Title="MainWindow" Height="350" Width="525">
<Window.Resources>
<DataTemplate DataType="{x:Type system:String}" >
<TextBlock>It's a string</TextBlock>
</DataTemplate>
<DataTemplate DataType="{x:Type Line}" >
<TextBlock>It's a line</TextBlock>
</DataTemplate>
</Window.Resources>
<ListView ItemsSource="{Binding MyItems}" />
</Window>
And the code behind is:
using System.Collections.Generic;
using System.Windows;
using System.Windows.Shapes;
namespace WpfTestDataTemplates
{
public partial class MainWindow : Window
{
public List<object> MyItems {get; set; }
public MainWindow()
{
InitializeComponent();
DataContext = this;
MyItems = new List<object>();
MyItems.Add("The first string");
MyItems.Add(new Line { X1 = 0, Y1 = 0, X2 = 5, Y2 = 5 });
MyItems.Add("The second string");
MyItems.Add(new Rectangle { Height = 5, Width = 15 });
MyItems.Add(42);
}
}
}
The resulting window looks like this:
I expect the second entry to read: It's a line, but instead it seems the DataTemplate for the Line type is not found. For types without an explicit DataTemplate, I expect the default rendering to be the .ToString() member of the object, but that's not what is happening either. So I'd expect the fourth entry to read: System.Windows.Shapes.Rectangle
Why is the {x:Type Line} type not being recognized, and what DataTemplate is being applied to Shape objects?
A DataTemplate is what you use to put UI on data objects that aren't themselves UIElements and have no concept of rendering themselves on-screen. Line and Rectangle however are UIElements - they know how to render themselves, and don't need a DataTemplate to tell them how.
If you give your Line and Rectangle some color, you'll see that they disregard the well-meaning DataTemplate and show up in the list as a line and a rectangle:
MyItems.Add(new Line { X1 = 0, Y1 = 0, X2 = 5, Y2 = 5,
Stroke = Brushes.Lime, StrokeThickness = 2 });
...
MyItems.Add(new Rectangle { Height = 5, Width = 15, Fill = Brushes.Blue });
To change the appearance of UIElements, you'd typically use Style (if it is a FrameworkElement) and/or ControlTemplate (if it is a Control).
Edit:
If, instead of a Line, you have your own data class representing a line (let's call it LineData), you can use a DataTemplate to render that class any way you'd like:
public class LineData
{
public LineData(Point start, Point end)
{
this.Start = start;
this.End = end;
}
public Point Start { get; private set; }
public Point End { get; private set; }
public double XLength
{
get { return this.End.X - this.Start.X; }
}
public double YLength
{
get { return this.End.Y - this.Start.Y; }
}
}
...
MyItems.Add(new LineData(new Point(10, 10), new Point(60, 30)));
..and the DataTemplate..
<DataTemplate DataType="{x:Type vm:LineData}" >
<StackPanel Orientation="Horizontal" SnapsToDevicePixels="True" >
<TextBlock>It's a line:</TextBlock>
<Grid>
<Rectangle Stroke="Black" StrokeThickness="1"
Width="{Binding Path=XLength}" Height="{Binding Path=YLength}" />
<Line Stroke="Red" StrokeThickness="2"
X1="{Binding Path=Start.X}" Y1="{Binding Path=Start.Y}"
X2="{Binding Path=End.X}" Y2="{Binding Path=End.Y}" />
</Grid>
</StackPanel>
</DataTemplate>
..gives us:

Binding Silverlight controls collection to Grid - possible or not?

I'm a bit new to Silverlight and now I'm developing a map app. I have a collection of custom controls (map markers, POIs, etc). Every control has a property "Location" of the type Point, where Location.X means Canvas.Left of the control, Location.Ymeans Canvas.Top of the control.
I'm trying to refactor my interface to MVVM pattern. I want to do something like this:
Say my controls are in Canvas. I want to have something like:
<Canvas DataContext="{StaticResource myModel}" ItemsSource="{Binding controlsCollection}">
<Canvas.ItemTemplate> ... </Canvas.ItemTemplate>
</Canvas>
In my custom control I want to have something like:
<myCustomControl DataContext="{StaticResource myControlModel}" Canvas.Left="{Binding Location.X}" Canvas.Top="{Binding Location.Y}" />
Is it possible? Maybe there's a better way?
I would think it is possible to use the ItemsControl control for this.
Let's say you create a holder-control that holds the position of the control + more info that you choose.
I call it "ControlDefinition.cs":
public class ControlDefinition : DependencyObject, INotifyPropertyChanged
{
public static readonly DependencyProperty TopProperty = DependencyProperty.Register("Top", typeof(Double), typeof(ControlDefinition), new PropertyMetadata(0d));
public static readonly DependencyProperty LeftProperty = DependencyProperty.Register("Left", typeof(Double), typeof(ControlDefinition), new PropertyMetadata(0d));
public static readonly DependencyProperty ModelProperty = DependencyProperty.Register("Model", typeof(Object), typeof(ControlDefinition), new PropertyMetadata(null));
public Double Top
{
get { return (Double)GetValue(TopProperty); }
set
{
SetValue(TopProperty, value);
NotifyPropertyChanged("Top");
}
}
public Double Left
{
get { return (Double)GetValue(LeftProperty); }
set
{
SetValue(LeftProperty, value);
NotifyPropertyChanged("Left");
}
}
public Object Model
{
get { return (Object)GetValue(ModelProperty); }
set
{
SetValue(ModelProperty, value);
NotifyPropertyChanged("Model");
}
}
public event PropertyChangedEventHandler PropertyChanged;
private void NotifyPropertyChanged(String aPropertyName)
{
if (PropertyChanged != null)
PropertyChanged(this, new PropertyChangedEventArgs(aPropertyName));
}
}
Then, in my MODEL (ViewModel.cs), I create an ObservableCollection of this class:
public static readonly DependencyProperty ControlsProperty = DependencyProperty.Register("Controls", typeof(ObservableCollection<ControlDefinition>), typeof(MainWindow), new PropertyMetadata(null));
public new ObservableCollection<ControlDefinition> Controls
{
get { return (ObservableCollection<ControlDefinition>)GetValue(ControlsProperty); }
set
{
SetValue(ControlsProperty, value);
NotifyPropertyChanged("Controls");
}
}
Then, in the same MODEL, I initialize the collection and adds 4 dummy controls:
this.Controls = new ObservableCollection<ControlDefinition>();
this.Controls.Add(new ControlDefinition() { Top = 10, Left = 10, Model = "One" });
this.Controls.Add(new ControlDefinition() { Top = 50, Left = 10, Model = "Two" });
this.Controls.Add(new ControlDefinition() { Top = 90, Left = 10, Model = "Three" });
And I would have my VIEW (View.xaml) something like this:
<ItemsControl ItemsSource="{Binding Path=Controls}">
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<Canvas Background="Beige" IsItemsHost="True" />
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
<ItemsControl.ItemTemplate>
<DataTemplate>
<TextBlock Text="{Binding Path=Model, Mode=OneWay}" />
</DataTemplate>
</ItemsControl.ItemTemplate>
<ItemsControl.ItemContainerStyle>
<Style>
<Setter Property="Canvas.Top" Value="{Binding Path=Top, Mode=OneWay}" />
<Setter Property="Canvas.Left" Value="{Binding Path=Left, Mode=OneWay}" />
</Style>
</ItemsControl.ItemContainerStyle>
</ItemsControl>
NOTE that I show a "TextBlock" control inside my "DataTemplate", in lack of your control.
And I show the "Model" property (which I have defined as "String") in the TextBlock's "Text" property. You can assign the "Model" property to your control's "DataContext" property as in your example.
Hope it helps!
So, after all times of googling, asking and reading, here I found a solution:
There should be a model implementing INotifyPropertyChanged interface. DependencyProperties are not necessary. Here's an example:
public class MyItemModel: INotifyPropertyChanged
{
// INotifyPropertyChanged implementation
...
//
private Point _location;
public Point Location
{
get { return Location; }
set { _location = value; NotifyPropertyChanged("Location"); }
}
// any other fields
...
//
}
Then, say we have a model with a collection of MyItemModels:
public class MyModel: INotifyPropertyChanged
{
// INotifyPropertyChanged implementation
...
//
private ObservableCollection<MyItemModel> _myCollection;
public ObservableCollection<MyItemModel> MyCollection
{
get { return _myCollection; }
set { _myCollection = value; NotifyPropertyChanged("MyCollection"); }
}
}
Then, in XAML, we should use ItemsControl like this:
<ItemsControl x:Name="LayoutRoot" DataContext="{StaticResource model}"
ItemsSource="{Binding MyCollection}"
HorizontalAlignment="Left" VerticalAlignment="Top">
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<Canvas x:Name="host"/>
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
<ItemsControl.ItemTemplate>
<DataTemplate>
<Grid x:Name="item" Background="Transparent">
<Grid.RenderTransform>
<TranslateTransform X="{Binding Location.X}" Y="{Binding Location.Y}"/>
</Grid.RenderTransform>
// other stuff here
...
//
</Grid>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
Works like a charm :) Thanks everyone.

Adding Caliburn Micro Screen(UserControl) to a Canvas in WPF MVVM?

I am using Caliburn Micro in my Project and i have many UserControls and thier viewmodel inherited from PropertyChangedBase, i want this UserControl to be added to a Canvas in my ShellView. I dont want to use IWindowManager from showing Windows instead i want them to get added in a Canvas.
Please help. How can i do that.
If you use ContentControl within your ShellView you can hook into the View-ViewModel binding process of Caliburn.Micro.
I assume that in your ShellViewModel you have a bunch of properties exposed that are types of ViewModel. If you place a ContentControl in your ShellView (this could be on/as a child of Canvas if that is the container you wish to use to layout your Shell), and then name that control with the name of the property in your ShellViewModel you wish it to be bound to, then Caliburn's ViewModelBinder will do the rest for you.
As an example say you have a VM called FizzViewModel and a matching View called FizzView (which is just a UserControl) and you want FizzView to appear on your ShellView you could do something like the following...
A stripped back ShellViewModel
public class ShellViewModel : Screen, IShell
{
public ShellViewModel(FizzViewModel theFizz)
{
TheFizz = theFizz;
}
public FizzViewModel TheFizz { get; set; }
}
And its matching ShellView
<UserControl x:Class="ANamespace.ShellView">
<Canvas>
<ContentControl x:Name="TheFizz"></ContentControl>
</Canvas>
</UserControl>
Here because the ContentControl is named TheFizz, it will be bound by Caliburn to the property with that name on your VM (the one of type FizzViewModel)
Doing this means you don't have to laydown your UserControl's using their true types on your ShellView, you let Caliburn do the work for you via conventions (which all so means its easy to swap out the type TheFizz if you just add a little more interface indirection).
UPDATE
From the extra information you have provided in the comments, I can now see you are actually looking at a problem that requires an ItemsControl.
The default DataTemplate Caliburn uses looks like the following
<DataTemplate xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:cal="clr-namespace:Caliburn.Micro;assembly=Caliburn.Micro">
<ContentControl cal:View.Model="{Binding}"
VerticalContentAlignment="Stretch"
HorizontalContentAlignment="Stretch" />
</DataTemplate>
You will notice that it uses a ContentControl, which has some advantages as I have discussed above. Basically what this will do is allow Caliburn to provide DataTemplateSelector like behaviour to the items in your ItemsControl. So you can add VMs of different types to the collection your ItemsControl is bound to and this default DataTemplate will resolve the type of View to use to display it. The following demos a very simple example of how you can achieve what you want.
First the ShellViewModel, take note of the BindableCollection named Items
[Export(typeof(IShell))]
public class ShellViewModel : IShell
{
public ShellViewModel()
{
Items = new BindableCollection<Screen>();
_rand = new Random();
}
public BindableCollection<Screen> Items { get; set; }
private Random _rand;
public void AddItem()
{
var next = _rand.Next(3);
var mPosition = System.Windows.Input.Mouse.GetPosition(App.Current.MainWindow);
switch (next)
{
case 0:
{
Items.Add(new BlueViewModel
{
X = mPosition.X,
Y = mPosition.Y,
});
break;
}
case 1:
{
Items.Add(new RedViewModel
{
X = mPosition.X,
Y = mPosition.Y,
});
break;
}
case 2:
{
Items.Add(new GreenViewModel
{
X = mPosition.X,
Y = mPosition.Y,
});
break;
}
default:
break;
}
}
}
And then a few dummy VM types that you want to display in your Shell. These could be/do anything you like:
public abstract class SquareViewModel : Screen
{
public double X { get; set; }
public double Y { get; set; }
}
public class BlueViewModel : SquareViewModel
{
}
public class RedViewModel : SquareViewModel
{
}
public class GreenViewModel : SquareViewModel
{
}
Now a ShellView, note the ItemsControl which binds to the Items property on your ShellViewModel
<Window x:Class="WpfApplication2.ShellView"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:cal="clr-namespace:Caliburn.Micro;assembly=Caliburn.Micro">
<Grid >
<Grid.RowDefinitions>
<RowDefinition></RowDefinition>
</Grid.RowDefinitions>
<ItemsControl x:Name="Items"
HorizontalAlignment="Stretch"
VerticalAlignment="Stretch">
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<Canvas cal:Message.Attach="[Event MouseLeftButtonUp] = [Action AddItem()]"
Background="Transparent"></Canvas>
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
<ItemsControl.ItemContainerStyle>
<Style TargetType="ContentPresenter">
<Setter Property="Canvas.Left" Value="{Binding Path=X}" />
<Setter Property="Canvas.Top" Value="{Binding Path=Y}" />
</Style>
</ItemsControl.ItemContainerStyle>
</ItemsControl>
</Grid>
</Window>
And an example of a UserControl that will be used to display the GreenViewModel, create 2 more of these, changing the names to RedView and BlueView and set the backgrounds appropriately to get the demo to work.
<UserControl x:Class="WpfApplication2.GreenView"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Width="30"
Height="30">
<Grid Background="Green"></Grid>
</UserControl>
What this example does when put together is creates colored squares on the Canvas of your shell based on the location of the mouse click. I think you should be able to take this and extend it to your needs.

Mouse events not firing when databinding to a Silverlight ContentControl

I am in the process of taking a Silverlight 4 UserControl containing a canvas which has a number of FrameworkElements on it and converting this to use databinding.
The XAML for my original canvas was:
<Canvas x:Name="panelDisplay" >
<Rectangle Width="50" Height="50" MouseLeftButtonDown="Element_MouseLeftButtonDown" Stroke="Aqua" StrokeThickness="5" Fill="Aquamarine" Canvas.Left="450" Canvas.Top="50" x:Name="rect1" />
<Image Source="../Images/3.jpg" Stretch="UniformToFill" Width="356" Height="224" MouseLeftButtonDown="Element_MouseLeftButtonDown" Canvas.Left="317" Canvas.Top="140" x:Name="image1" />
</Canvas>
This displays the rectangle and image and the MouseLeftButtonDown event fires which then deals with operations such as dragging and resizing.
In order to get this working with databinding I created an object called CanvasElement:
public class CanvasElement
{
public CanvasElement(int id, object elementContent, double width, double height, int left, int top)
{
Id = id;
ElementContent = elementContent;
Width = width;
Height = height;
Left = left;
Top = top;
}
public int Id { get; set; }
public object ElementContent { get; set; }
public double Width { get; set; }
public double Height { get; set; }
public int Left { get; set; }
public int Top { get; set; }
}
The ElementContent is used to store the Rectangle or Image. I populate an ObservableCollection called CanvasElements and assign the DataContext of the control. I have changed my XAML to:
<Canvas x:Name="panelDisplay" >
<ItemsControl x:Name="CanvasElements" ItemsSource="{Binding Path=CanvasElements}">
<ItemsControl.ItemTemplate>
<DataTemplate>
<Canvas>
<ContentControl Content="{Binding Path=ElementContent}" Height="{Binding Path=Height}" Width="{Binding Path=Width}"
Canvas.Left="{Binding Path=Left}" Canvas.Top="{Binding Path=Top}"
MouseLeftButtonDown="CanvasElement_MouseLeftButtonDown" />
</Canvas>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
</Canvas>
My elements appear but the CanvasElement_MouseLeftButtonDown does not fire. I have also used ContentControl within the ItemsControl.
My questions are:
Is this is sensible way to go?
Why is MouseLeftButtonDown not firing?
You are better off to put the MouseLeftButtonDown event handler on the ItemsControl. Any events that happen on it's children will bubble up to it and you can handle them there.
I eventually decided that using the ItemsControl to bind to a collection of shapes was not the best way forward.
The main reason for this is that by using a control in the DataTemplate to house shapes adds extra complexity, in my case I have a main canvas and each shape was housed in its own canvas placed on the main canvas.
I believe this was causing the problem with the events and makes it more complex to position shapes.

Resources