Dynamic UI layout using WPF

In the past, I always thought that dynamic layout was a very troublesome issue and a very hard task. However, it seems that in. NET, it is not so troublesome in WPF. The following describes an example of Dynamic Layout that I have implemented.

 

You have to overcome the difficulties because you have requirements! The interface elements required by different users are different for our requirement table names. We cannot modify the code every time! Therefore, you need to complete the dynamic layout.

 

Here we mainly complete this function:

1. Dynamic Line Drawing

2. dynamic new control

3. Lines and controls can be dragged and placed freely.

4. Lines and controls can be deleted.

5. controls can be bound with properties and events.

 

 

To complete this function, we must first define three mouse events, namely, left-click down, move, and up, and right-click Delete (you cannot add or delete only ).

For example, if I want to draw a line, I need to record the position of the current mouse when the left button is down. When the left button is down and move, the drawn line must be displayed in real time. When the left button is down and the left button is up, the position is recorded and the line is drawn. In this process, we can draw a line dynamically.

 

It is relatively simple to dynamically generate controls. If you have a line, a control, and a link, will the layout be completed? Of course, the location should be recorded.

 

Code:

Void Canvas_PreviewMouseLeftButtonDown (object sender, MouseButtonEventArgs e) {// true indicates that the current drag-and-drop mode is if (currentPattern = "0") {// determines whether the primary form is selected if (e. source = mainCanvas) {} else {_ isDown = true; _ startPoint = e. getPosition (mainCanvas); _ originalElement = e. source as UIElement;} else if (currentPattern = "1") {_ isDragging = true; Canvas board = sender as Canvas; _ startPoint = e. getPosition (board); InsertShape = CreateShape (); insertShape. opacity = opacity/2; Canvas. setLeft (insertShape, e. getPosition (board ). x); // start point of the Inserted Line x1/y1 Canvas. setTop (insertShape, e. getPosition (board ). y); board. children. add (insertShape); board. registerName (insertShape. name, insertShape) ;}} void Canvas_PreviewMouseMove (object sender, MouseEventArgs e) {// true indicates that the current drag mode is if (currentPattern = "0") {if (_ isDown) {// If there is no drag or if (_ isDragging = false) & (Math. abs (e. getPosition (mainCanvas ). x-_ startPoint. x)> SystemParameters. minimumHorizontalDragDistance) | (Math. abs (e. getPosition (mainCanvas ). y-_ startPoint. y)> SystemParameters. minimumVerticalDragDistance) {_ isDragging = true; _ originalLeft = Canvas. getLeft (_ originalElement); // obtain the position of the original element _ originalTop = Canvas. getTop (_ originalElement); _ overlayEle Ment = new Rectangle () {Width = _ originalElement. renderSize. width, Height = _ originalElement. renderSize. height, Fill = new VisualBrush (_ originalElement), Opacity = 0.8 // shadow Opacity}; Canvas. setLeft (_ overlayElement, _ originalLeft); Canvas. setTop (_ overlayElement, _ originalTop); mainCanvas. children. add (_ overlayElement);} // if moving, the real-time position if (_ isDragging) {Point CurrentPosition = Mouse is displayed. getPosition (ma InCanvas); // sets the position of the floating object Canvas. setLeft (_ overlayElement, _ originalLeft + CurrentPosition. x-_ startPoint. x); Canvas. setTop (_ overlayElement, _ originalTop + CurrentPosition. y-_ startPoint. y) ;}} else if (currentPattern = "1") {Canvas board = sender as Canvas; if (_ isDragging & insertShape! = Null) {if (insertShape is Line) {(insertShape as Line ). x1 = 0; (insertShape as Line ). x2 = e. getPosition (board ). x-_ startPoint. x; // set the Line X1/Y1/X2/Y2 (insertShape as Line ). y1 = 0; (insertShape as Line ). y2 = e. getPosition (board ). y-_ startPoint. Y ;}}} void Canvas_PreviewMouseLeftButtonUp (object sender, MouseButtonEventArgs e) {// true indicates that the current drag mode is if (currentPattern = "0") {if (_ isDown) {if (_ IsDragging) {// set the shadow position to the current Canvas. setLeft (_ originalElement, Canvas. getLeft (_ overlayElement); Canvas. setTop (_ originalElement, Canvas. getTop (_ overlayElement); Point _ positionInOverlayElement = Mouse. getPosition (_ overlayElement); mainCanvas. children. remove (_ overlayElement); _ overlayElement = null;} // set the moving ID to false _ isDragging = false; _ isDown = false ;}} else if (currentPattern = "1") {// if it is a line Mode, the drag and drop operation is set to false, and the transparency is restored to _ isDragging = false; if (insertShape! = Null) insertShape. Opacity = opacity ;}}

With these three major events, you can easily complete the dynamic layout. How to save it? I put the locations of various controls in the database and read the location information during loading.

Private void btnSave_Click (object sender, RoutedEventArgs e) {// traverses all interface controls, obtains their location information, and saves them. List <A> listAConfig = new List <A> (); // obtain the List of all Line elements on the Interface <Line> listLine = GetElementFormUI. getChildObjects <Line> (mainCanvas); for (int I = 0; I <listLine. count; I ++) {Line l = listLine [I]; A enAConfig = new A (); enAConfig. s_ID = DateTime. now. toFileTime (). toString (); enAConfig. s_NAME = l. name; enAConfig. s_SHAPETYPE = "Line"; enAConfig. I _LEFT = decimal. parse (Canvas. getLeft (l as UIElement ). to String (); enAConfig. I _TOP = decimal. parse (Canvas. getTop (l as UIElement ). toString (); enAConfig. I _X2 = decimal. parse (l. x2.ToString (); enAConfig. I _Y2 = decimal. parse (l. y2.ToString (); listAConfig. add (enAConfig);} // determines whether the object is successfully saved if (ServiceFactory. getAConifgService (). addAConfig (listAConfig) {MessageBox. show ("saved successfully! "," Congratulations! ", MessageBoxButton. OK);} else {MessageBox. Show (" Saving failed! "," Warning! ", MessageBoxButton. OK );}}

So far, we have completed setting and saving the Dynamic Layout. Let's try it!