Drawing-irregular forms

WPF implements irregular forms, many and many more ways ....

This paper summarizes several methods that Debuglzq thinks are concise and efficient.

Several common ways to implement WPF irregular forms are as follows:

1. Use tools such as blend to draw a desired form. This can be referenced in xiaowei0705 's blog post:WPF makes irregular forms .

2. Assign the path value to the Clip property of window. This can be referred to in DEBUGLZQ's previous blog post:WPF Effect clip and transform .

3. Use a PNG image with a transparent background.

4. Add border to the window main container

5. Use blender to create a description of the desired path.

6. Other

The first method to be described in this article is to say that there is no technical content, basically do not write code. The premise is that you have to have a PNG image with a suitable transparent background.

Let's say you've finished making the PNG image (and, of course, down one for the demo), then this irregular form is implemented as follows:

<window x:class= "Wpfsharpwindow.mainwindow"        xmlns= "http://schemas.microsoft.com/winfx/2006/xaml/ Presentation "        xmlns:x=" Http://schemas.microsoft.com/winfx/2006/xaml "        title=" MainWindow "height=" 412 " Width= "528"         allowstransparency= "True" windowstyle= "None" opacitymask= "white" background= "Transparent" >    <grid mouseleftbuttondown= "Grid_mouseleftbuttondown" >        <image stretch= "Fill" source= "/ Wpfsharpwindow;component/cow.png "/>    </Grid></Window>

Explain the property settings that this XAML needs to be aware of:

　　allowstransparency="True"-Allow transparency

　　background="Transparent"-Set Background transparency

　　windowstyle="None"-Remove borders

　　opacitymask="White"-Set White transparent

The MouseLeftButtonDown routed event for the Gird subscription is to implement the drag of the form. The event is handled as follows:

private void Grid_mouseleftbuttondown (object sender, MouseButtonEventArgs e) {this   . DragMove ();}

The implementation results are as follows:

The effect is unclear? Two more.

Digression: More and more found the blog home page of the quality is getting worse, a lot of articles have no value at all, pure garbage ~

Sincerely recommend to send to the home page of the blog, I hope that the author can spend some time, share valuable things, do not grandstanding ~ Imagine: you send to the homepage of the blog you do not want to go to see, let alone others? Also hope that the blog Park team to strengthen the monitoring efforts!

The purpose of our blog is to share, to share is a kind of accumulation, the process of writing a blog can be seen as a precipitate, so this is a win. Personal humble opinion, welcome criticism

"As long as everyone gives a little love, the world will become a better place ..."

-------------

What if I need to update the form style at run time? The image can be updated:

private void Button1_Click (object sender, RoutedEventArgs e) {    var urisource = new Uri (@ "/wpfsharpwindow;component/ Hotpot.png ", urikind.relative);    Imgbackground.source=new BitmapImage (UriSource);}

4. Add border to the window main container

Similar to the previous DEBUGLZQ blog post using the Clip property, we can add border to the top container of window.

This method is required for the writing of border, and there is no requirement for its use of image, container content, etc.

An example is given below

MainWindow.xaml as follows:

<window x:class= "Wpfwindowanimation.mainwindow" xmlns= "http://schemas.microsoft.com/winfx/2006/xaml/ Presentation "xmlns:x=" Http://schemas.microsoft.com/winfx/2006/xaml "title=" MainWindow "height=" "width=" 525 "allowstransparency=" True "windowstyle=" None "background=" Transparent "mouseleftbuttondown=" window_mous Eleftbuttondown "> <border cornerradius=" 0,30,40,50 "width=" Auto "height=" Auto "borderthickness=" 1 "BorderBrush = "Green" > <Border.Background> <imagebrush imagesource= "tulips.jpg"/> </border.b ackground> <Grid> <Grid.RowDefinitions> <rowdefinition height= "Auto"/ > <rowdefinition/> <rowdefinition height= "Auto"/> </grid.rowde             finitions> <textblock grid.row= "0" margin= "5" text= "Title"/> <grid grid.row= "1"/> <textblock margin= "1, 10,"Grid.row=" 2 "text=" Footer "padding=" 5 "horizontalalignment=" Center "/> </Grid> </border>&lt ;/window>

The effect is as follows:

Of course, if I'm just looking for a color background, you can set the border Fill property directly to get it.

TIP1: DragMove of the window: whenever This.dragmove () is called in the MouseLeftButtonDown event;

TIP2: About the window's resize: By setting the properties of Windows: such as resizemode= "Canresizewithgrip".

TIP3: About window closing, maximizing, minimizing, etc.: by adding a button to the container, add the appropriate style to it, by using the Click event of the button.

This. Close ();
This. WindowState = System.Windows.WindowState.Maximized;
This. WindowState = System.Windows.WindowState.Minimized;

5. How to achieve the key---path production

This method does not tell you how path is made, so it is necessary to explain the following:

There are generally 2 ways to make path:

1. Use the so-called "path Description Language", that is, path contains the data property values such as M, L, C, Z, and so on. The advantage of this approach is that path description is clean and refreshing, and the disadvantage is that the implementation method is relatively complex.

2. Use Blender. The disadvantage is that path description is complex, but the advantage is that it is easy to use and can "drag" out various paths.

Let's use blender to make 1 path.

We add 1 rectangle and a triangle to the window.

Under drag adjustment, as follows:

Note At this point, the generated XAML is not path.

Combine the two element as follows:

The effect is as follows:

At this point, the generated XAML is already the path.

------------------

You can also generate path first

Then combine the resulting 2 paths together, with the same effect as above.

Of course, you can also select the page element right click, ..., these are the specific operations of blend, not the main object of this article ~

----------------------

You can then use this path to easily make a path-type form. As follows:

<window xmlns= "http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x= "Http://schemas.microso Ft.com/winfx/2006/xaml "xmlns:local=" Clr-namespace:wpfnavigationpanelpro "xmlns:ec=" Http://schemas.microsoft . Com/expression/2010/controls "xmlns:ed=" http://schemas.microsoft.com/expression/2010/drawing "x:class=" Wpfnavigationpanelpro.mainwindow "title=" MainWindow "height=" 444 "width=" 559 "windowstyle=" None "allowstransparency  = "True" background= "Transparent" > <Grid> <path data= "m137.333,1 l167.333,31.000003 277.333,31.000003 277.333,177.33299 1,177.33299 1,31.000003 107.333,31.000003 z "fill=" Green "margin=" 102.667,16,106,84.117 "Stretch=" Fill "stroke=" Transparent "strokethickness=" 2 "/> <wrappanel margin=" 115,94,119,116 "> <rectan GLE fill= "Red" width= "" "height=" "margin=" ten "/> <rectangle fill=" Red "width=" height= " "/> <rectangle fill=" Red "Wi"Dth= "height=" "margin="/> <rectangle fill= "Red" width= "height=" margin= "ten"/> <rectangle fill= "Red" width= "height=" margin= "ten"/> </WrapPanel> </Grid>< /window>

The results are as follows:

(Note: The reason for making path is because: a little more concise.) Completely can be dragged out of the desired interface directly use ~)

Another example:

<window xmlns= "http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x= "http// Schemas.microsoft.com/winfx/2006/xaml "x:class=" Windowtest.mainwindow "x:name=" window "title=" MainWindow "Widt H= "640" height= "552" windowstyle= "None" allowstransparency= "True" background= "Transparent" > <grid x:name= " LayoutRoot "> <path data=" m144,0.5 c220.77621,0.5 283.46991,22.348854 287.31326,49.824082 l287.38416,50.5 287. 5,50.5 287.5,52.499997 287.5,232.5 c287.5,251.27768 223.25287,266.5 144,266.5 64.747139,266.5 0.5,251.27768 0.5,232.5 l0.5,52.499997 0.5,50.5 0.61584973,50.5 0.6867221,49.824082 c4.5301003,22.348854 67.223793,0.5 144,0.5 z "Stretch=" Fill "stroke=" Black "opacity=" 0.5 "margin=" 0,0,0,1 "> <Path.Fill> <lineargradientbrus                    H startpoint= "0,0" endpoint= "0,1" > <gradientstop offset= "0" color= "Violet"/>           <gradientstop offset= "1" color= "LightGreen"/>     </LinearGradientBrush> </Path.Fill> </Path> <border borderbrush= "Pink" borderthickness= "1" margin= "0,102,0,69" opacity= "0.3" > <grid margin= "8,106.5,8,72.5"/> </Bo Rder> </Grid></Window>

The effect is as follows:

By using blend, you can create a variety of so-called irregular forms that you can think of.

6. Other

Summary: In various ways to implement the WPF irregular form of methods, blender to make path this method is the most flexible and powerful ~

Drawing-irregular forms