WPF Code: Usercontrol mit anpassbarer Größe zur Laufzeit

Date 29.06.2017

WPF C# Code: Usercontrol mit anpassbarer Größe zur Laufzeit, Mouse und UIElement Position, Width und Height

Dieses Code Beispiel betriefft die Berechnung und Anpassung der Größe und Position eines UserControls zur Laufzeit in einem übergeordneten Canvas UIElement.

C# Code, Code-Example

Video Anleitung

MainWindow eingebettet in einem WPF Projekt

Xaml MainWindow

<Window x:Class="wpf_Rectangles.MainWindow"

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:uc="clr-namespace:wpf_Rectangles._UserControls"

xmlns:local="clr-namespace:wpf_Rectangles"

mc:Ignorable="d"

Title="MainWindow" Height="350" Width="525" AllowsTransparency="False" Background="White" WindowStyle="SingleBorderWindow">

<uc:UcPanel Width="100" Height="100" Canvas.Left="110" Canvas.Top="40"></uc:UcPanel>

</Canvas>

</Window>

C# Code des MainWindow

Hier wird der MouseMove Event verwendet und aus der Differenz der Maus-Cursor Position zum UserControl UcPanel wird die neue Position berechnet.

using System;

using System.Collections.Generic;

using System.Linq;

using System.Text;

using System.Threading.Tasks;

using System.Windows;

using System.Windows.Controls;

using System.Windows.Data;

using System.Windows.Documents;

using System.Windows.Input;

using System.Windows.Media;

using System.Windows.Media.Imaging;

using System.Windows.Navigation;

using System.Windows.Shapes;

using wpf_Rectangles._UserControls;

namespace wpf_Rectangles

{

public partial class MainWindow : Window

{

public MainWindow()

{

InitializeComponent();

}

#region mouse dragging

//-------------< MouseMove() >-------------

public Boolean isSizing = false;

public int sizing_EdgeType = 0;

public double sizing_Offset_X = 0;

public double sizing_Offset_Y = 0;

public UcPanel sizing_Panel = null;

public Border sizing_Edge = null;

enum EdgeTypes

{

TopMove = 0,

TopLeft = 1,

TopRight = 2,

BottomLeft = 3,

BottomRight = 4

}

public void CanvasMain_MouseUp(object sender, MouseButtonEventArgs e)

{

//-------------< MouseUp() >-------------

if (isSizing)

{

//--< reset >--

isSizing = false;

sizing_EdgeType = -1;

sizing_Offset_X = 0;

sizing_Offset_Y = 0;

sizing_Panel = null;

sizing_Edge = null;

//--</ reset >--

}

//-------------</ MouseUp() >-------------

}

private void CanvasMain_MouseMove(object sender, MouseEventArgs e)

{

//------------< MouseMove() >------------

if (isSizing == true) set_Sizing(sender, e);

//-------------</ MouseMove() >------------

}

private void set_Sizing(object sender, MouseEventArgs e)

{

//-------------< sizing_Cols_And_Rows() >-------------

if (isSizing == false) return;

//< check >

if (sizing_EdgeType < 0) return;

if (sizing_Panel == null) return;

//</ check >

if (e.LeftButton != MouseButtonState.Pressed)

{

isSizing = false;

}

else

{

//------< MouseButtonState.Pressed >------

//< mouse position >

Point mouse_point = e.GetPosition(this);

double mouse_x = mouse_point.X;

double mouse_y = mouse_point.Y;

//</ mouse position >

//--< get Position >--

Point position = this.TranslatePoint(new Point(0, 0), sizing_Panel );

double pos_X = -position.X;

double pos_Y = -position.Y;

//--</ get Position >--

////--< get Offset >--

//Point offset = e.GetPosition(sizing_Edge);

//double offset_X = offset.X;

//double offset_Y = offset.Y;

////--</ get Offset >--

double diff_X = (pos_X - mouse_x);

double diff_Y = (pos_Y - mouse_y);

if (sizing_EdgeType == (int)EdgeTypes.TopMove)

{

//----< sizing Move >----

double new_Left = mouse_x - sizing_Offset_X ;

double new_Top = mouse_y - sizing_Offset_Y;

//< set >

if (new_Left > 0) Canvas.SetLeft(sizing_Panel, new_Left);

if (new_Top > 0) Canvas.SetTop(sizing_Panel, new_Top);

//</ set >

//----</ sizing Move >----

}

else

{

//-------------< sizing >--------------

if ((sizing_EdgeType == (int)EdgeTypes.TopLeft) || (sizing_EdgeType == (int)EdgeTypes.BottomLeft))

{

//----< sizing Left >----

double new_Left = mouse_x ;

double new_Width = (sizing_Panel.ActualWidth) + diff_X;

//< set Left >

if (new_Left > 0) Canvas.SetLeft(sizing_Panel, new_Left);

//</ set Left >

//< set width >

if (new_Width > 0) sizing_Panel.Width = new_Width;

//</ set width >

//----</ sizing Left >----

}

if ((sizing_EdgeType == (int)EdgeTypes.TopLeft) || (sizing_EdgeType == (int)EdgeTypes.TopRight ))

{

//----< sizing Top >----

double new_Top = mouse_y;

double new_Height = (sizing_Panel.ActualHeight) + diff_Y;

//< set Left >

if (new_Top > 0) Canvas.SetTop(sizing_Panel, new_Top);

//</ set Left >

//< set width >

if (new_Height > 0) sizing_Panel.Height = new_Height;

//</ set width >

//----</ sizing Top >----

}

if ((sizing_EdgeType == (int)EdgeTypes.TopRight) || (sizing_EdgeType == (int)EdgeTypes.BottomRight))

{

//----< sizing Right >----

double new_Width = mouse_x-pos_X ;

//< set width >

if (new_Width > 0) sizing_Panel.Width = new_Width;

//</ set width >

//----</ sizing Right >----

}

if ((sizing_EdgeType == (int)EdgeTypes.BottomLeft) || (sizing_EdgeType == (int)EdgeTypes.BottomRight))

{

//----< sizing Bottom >----

double new_Height = mouse_y - pos_Y;

//< set width >

if (new_Height > 0) sizing_Panel.Height = new_Height ;

//</ set width >

//----</ sizing Bottom >----

}

//-------------</ sizing >--------------

}

//------</ MouseButtonState.Pressed >------

}

//-------------</ sizing_Cols_And_Rows() >-------------

}

#endregion /mouse dragging

}

UserControl: UcPanel

Das Usercontrol UcPanel ist ein dynamisches Usercontrol, welches zur Laufzeit in die Canvas eingefügt werden kann.

Das Panel enthält die 4 Eckpunkte mit welchen man die Größe einstellen kann, sowie die Top-Leiste mit welcher man auch nur verschieben kann.

Das Usercontrol setzt die Startparameter im überliegenden Parent Element, welches ein Canvas UIElement sein muss

Xaml des UserControls

<UserControl x:Class="wpf_Rectangles._UserControls.UcPanel"

xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"

xmlns:d="http://schemas.microsoft.com/expression/blend/2008"

xmlns:local="clr-namespace:wpf_Rectangles._UserControls"

mc:Ignorable="d"

d:DesignHeight="300" d:DesignWidth="300" IsHitTestVisible="True" >

<Grid >

</Border>

</Border>

</Border>

</Border>

</Border>

</Grid>

</UserControl>

C# Code des UserControls

Hier wird der Cursor beim Betreten und Verlassen des Elements gesetzt

Und die Public Werte im MainWindows eingestellt

using System;

using System.Collections.Generic;

using System.Linq;

using System.Text;

using System.Threading.Tasks;

using System.Windows;

using System.Windows.Controls;

using System.Windows.Data;

using System.Windows.Documents;

using System.Windows.Input;

using System.Windows.Media;

using System.Windows.Media.Imaging;

using System.Windows.Navigation;

using System.Windows.Shapes;

namespace wpf_Rectangles._UserControls

{

/// <summary>

/// Interaction logic for UcPanel.xaml

/// </summary>

public partial class UcPanel : UserControl

{

public UcPanel()

{

InitializeComponent();

}

public int edgeType = 0;

enum EdgeTypes

{

TopLeft = 1,

TopRight = 2,

BottomLeft = 3,

BottomRight = 4

}

public bool isSizing = false;

private void recLeftTop_MouseDown(object sender, MouseButtonEventArgs e)

{

edgeType = (int)EdgeTypes.TopLeft;

set_Sizing(sender, e);

}

private void recRightTop_MouseDown(object sender, MouseButtonEventArgs e)

{

edgeType = (int)EdgeTypes.TopRight ;

set_Sizing(sender, e);

}

private void recLeftBottom_MouseDown(object sender, MouseButtonEventArgs e)

{

edgeType = (int)EdgeTypes.BottomLeft;

set_Sizing(sender, e);

}

private void recRightBottom_MouseDown(object sender, MouseButtonEventArgs e)

{

edgeType = (int)EdgeTypes.BottomRight;

set_Sizing(sender,e);

}

private void recTop_MouseDown(object sender, MouseButtonEventArgs e)

{

//-------------< set_Sizing() >-------------

Point offset = e.GetPosition(recTop);

double offset_X = offset.X;

double offset_Y = offset.Y;

//< set main >

Grid gridPanel = this.Parent as Grid;

Canvas canvasMain = Parent as Canvas;

MainWindow main = canvasMain.Parent as MainWindow;

main.isSizing = true;

main.sizing_EdgeType = 0;

main.sizing_Panel = this;

main.sizing_Edge = sender as Border;

main.sizing_Offset_X = offset_X;

main.sizing_Offset_Y = offset_Y;

//</ set main >

//-------------<// set_Sizing() >-------------

}

private void set_Sizing(object sender, MouseButtonEventArgs e)

{

//-------------< set_Sizing() >-------------

//< set main >

Grid gridPanel = this.Parent as Grid;

Canvas canvasMain = Parent as Canvas;

MainWindow main = canvasMain.Parent as MainWindow;

main.isSizing = true;

main.sizing_EdgeType = edgeType;

main.sizing_Panel = this;

main.sizing_Edge = sender as Border;

//</ set main >

//-------------<// set_Sizing() >-------------

}

#region Region: Cursor enter leave

//----< ENTER >----

private void recLeftTop_MouseEnter(object sender, MouseEventArgs e)

{

Cursor=Cursors.SizeNWSE ;

}

private void recRightTop_MouseEnter(object sender, MouseEventArgs e)

{

Cursor = Cursors.SizeNESW;

}

private void recLeftBottom_MouseEnter(object sender, MouseEventArgs e)

{

Cursor = Cursors.SizeNESW;

}

private void recRightBottom_MouseEnter(object sender, MouseEventArgs e)

{

Cursor = Cursors.SizeNWSE;

}

private void recTop_MouseEnter(object sender, MouseEventArgs e)

{

Cursor = Cursors.Hand;

}

//----</ ENTER >----

//----< LEAVE >----

private void rec_MouseLeave(object sender, MouseEventArgs e)

{

Cursor = Cursors.No;

}

//----</ LEAVE >----

#endregion /cursor: enter leave

}