Embed Size (px)
DESCRIPTION
Silverlight Use Mouse Dynamic Draw Rectangular
Citation preview
Silverlight Use Mouse Dynamic Draw Rectangular
In this section we will discuss dynamic draw rectangular in Silverlight. This skill allows user
customized drawing rectangular. The key point of this skill is using event in Canvas to draw
rectangular. The reason why choose Canvas is because Canvas.Top and Canvas.Left are both great
methods for position. When user want to dynamic draw a rectangular, press mouse left click
(MouseLeftButtonDown event), record mouse click Canvas coordinate and when move mouse
(MouseMove event) record mouse movement coordinate again. During this process to dynamic
generate a rectangular box. And this rectangular box will change its size follow the mouse
movement. When mouse left click pop up (MouseLeftButtonUp event), cancel
MouseLeftButtonDown event binding.
Full Source code:
MainPage.xaml.cs
using System;
using System.Collections.Generic;
using System.Linq;
using System.Net;
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 SLRectangular
{
public partial class MainPage : UserControl
{
public MainPage()
{
InitializeComponent();
}
private Rectangular rect; //Declare a rectangular reference
private Point origPoint; //Set a mouse point reference
private bool isAddMouseEvent = false; // indicate whether add MouseEvent
/// <summary>
///When press Mouse left button generate relevant rectangular box component. Add relevant
MoveComponent event and MouseLeftButtonUp event
/// </summary>
/// <param name="sender"></param>
/// <param name="e"></param>
private void Handle_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)
{
rect = new Rectangular();
origPoint = e.GetPosition(AddUC);
rect.SetValue(Canvas.LeftProperty, origPoint.X); //Set rectangular original X coordinate
rect.SetValue(Canvas.TopProperty, origPoint.Y); //Set Rectangular original Y Coordinate
rect.Opacity = 1; // Set component transparency
rect.Fill = new SolidColorBrush(Colors.Blue);
rect.RadiusX = 10;// Set Rounded attribute to make it with a good-looking
rect.RadiusY = 10;
AddUC.MouseMove += Handle_MouseMove; //Load MouseMove event for Canvas panel
AddUC.MouseLeftButtonUp += Handle_MouseLeftButtonUp;// Load
MouseLeftButtonUp event for Canvas panel
AddUC.Children.Add(rect); //Add rectangular in Canvas panel
}
/// <summary>
///When finish drawing Mouse left button, remove page Mouse even binding when pop up
mouse.
/// </summary>
/// <param name="sender"></param>
/// <param name="e"></param>
private void Handle_MouseLeftButtonUp(object sender, MouseButtonEventArgs e)
{
AddUC.MouseLeftButtonUp -= Handle_MouseLeftButtonUp;
AddUC.MouseMove -= Handle_MouseMove;
}
/// <summary>
/// When press Mouse button, rectangular box component change size to relevant box
/// </summary>
/// <param name="sender"></param>
/// <param name="e"></param>
private void Handle_MouseMove(object sender, MouseEventArgs e)
{
Point curPoint = e.GetPosition(AddUC);
if (curPoint.X > origPoint.X)
{
rect.Width = curPoint.X - origPoint.X;
}
if (curPoint.X < origPoint.X)
{
rect.SetValue(Canvas.LeftProperty, curPoint.X);
rect.Width = origPoint.X - curPoint.X;
}
if (curPoint.Y > origPoint.Y)
{
rect.Height = curPoint.Y - origPoint.Y;
}
if (curPoint.Y < origPoint.Y)
{
rect.SetValue(Canvas.TopProperty, curPoint.Y);
rect.Height = origPoint.Y - curPoint.Y;
}
}
private void button1_Click(object sender, RoutedEventArgs e)
{
// Monitor it’s Mouse Drawing state or not. If not, binding as Mouse Drawing State and set
this button as unavailable state.
if (isAddMouseEvent == false)
{
this.AddUC.MouseLeftButtonDown += Handle_MouseLeftButtonDown;
isAddMouseEvent = true;
this.button1.IsEnabled = false;
}
}
}
}
MainPage.xaml
<UserControl x:Class="SLRectangle.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:DesignHeight="1000" d:DesignWidth="1000"
xmlns:sdk="http://schemas.microsoft.com/winfx/2006/xaml/presentation/sdk">
<Grid x:Name="LayoutRoot" >
<Canvas x:Name="AddUC" HorizontalAlignment="Stretch" Background="Black"
VerticalAlignment="Stretch" Width="1920" Height="1080">
</Canvas>
<Button Width="97" Height="30" Content="Click to Draw" x:Name="button1"
Margin="15,10,0,0" VerticalAlignment="Top" HorizontalAlignment="Left"
Click="button1_Click"></Button>
</Grid>
</UserControl>
It’s a tiny but also nice and useful skill in actual project. For example, when we need our clients
customized set some machine anchor points in a background image with a lot of machine
equipments and configure relevant machine information for these anchor points, our clients can
draw some rectangular on those machines and when finish drawing and relevant data, we can store
that customized configure interface and rectangular position and size as XML into Database. Next
time we get it out from Database and restore, the customized interface will turn up.
Effect Screenshot:
Silverlight Component Recommend:
Spire.Doc is a MS Word component which enables user to perform a wide range of Word
document processing tasks directly, such as generate, read, write and modify Word document for
.NET and Silverlight. Learn More…
