A Simple Canvas Control and Three Image Controls

    

<UserControl x:Class='SilverlightApplication3.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' 
    mc:Ignorable='d' 
    d:DesignWidth='640' 
    d:DesignHeight='480'>
     <Grid x:Name="LayoutRoot" Background="White">
          <Canvas x:Name="myCanvas"
                  Background="LightBlue">
             <Image x:Name="Image1"
                    Source="/image1.jpg"
                    Height="100"
                    MouseLeftButtonDown="dragMouseLeftButtonDown"
                    MouseLeftButtonUp="dragMouseLeftButtonUp"
                    MouseMove="dragMouseMove"/>

              <Image x:Name="Image2"
                    Source="/image2.jpg"
                    Height="100"
                    MouseLeftButtonDown="dragMouseLeftButtonDown"
                    MouseLeftButtonUp="dragMouseLeftButtonUp"
                    MouseMove="dragMouseMove"/>
              <Image x:Name="Image3"
                    Source="/image3.jpg"
                    Height="100"
                    MouseLeftButtonDown="dragMouseLeftButtonDown"
                    MouseLeftButtonUp="dragMouseLeftButtonUp"
                    MouseMove="dragMouseMove"/>
          </Canvas>
      </Grid>
  </UserControl>

//File: Page.xaml.cs

 using System;
 using System.Collections.Generic;
 using System.Linq;
 using System.Windows;
 using System.Windows.Controls;
 using System.Windows.Documents;
 using System.Windows.Input;
 using System.Windows.Media;
 using System.Windows.Media.Animation;
 using System.Windows.Shapes;

 namespace SilverlightApplication3
 {
     public partial class MainPage : UserControl
     {
         Point lastPosition;
         Boolean isCaptured = false;

         public MainPage()
          {
             InitializeComponent();
          }

         void dragMouseMove(object sender, MouseEventArgs e)
          {
             var img = sender as Image;
             if (isCaptured){
                  double moveX = e.GetPosition(this).X - lastPosition.X;
                  double moveY = e.GetPosition(this).Y - lastPosition.Y;
                  Canvas.SetTop(img, moveY);
                  Canvas.SetLeft(img, moveX);
            }
         }

         void dragMouseLeftButtonUp(object sender, MouseButtonEventArgs e){
             var img = sender as Image;
             img.ReleaseMouseCapture();
             isCaptured = false;
         }

         void dragMouseLeftButtonDown(object sender, MouseButtonEventArgs e)
         {
             var img = sender as Image;
             lastPosition = e.GetPosition(img);
             isCaptured = true;
             img.CaptureMouse();
          }
     }
 }

1.	Positioning UI Elements with a Canvas
2.	Use tag rather than attribute to set canvas background
3.	Add button to Canvas
4.	The Canvas.ZIndex is based on a number starting with 0 being the farthest back
5.	Create Canvas controls that contain other controls and even nest them in other Canvas or Grid controls.
6.	Nested Canvas Objects
7.	To draw a rectangle, specify its Canvas.Top, Canvas.Left, Width, Height, and Fill color
8.	A basic Canvas element
9.	A basic Canvas with some content.
10.	Simple Canvas Layout
11.	Set control position for Canvas
12.	Get position on a Canvas with Canvas.GetLeft
13.	Canvas dependant
14.	Canvas without Viewbox
15.	Adding Rectangles to Canvas
16.	Put text on Canvas
17.	Put control into a Canvas
18.	Canvas loaded event
19.	Set Canvas background to White
20.	Add Thickness for Padding

A Simple Canvas Control and Three Image Controls : Canvas « Containers « Silverlight

Related examples in the same category