One of the WPF peels: Create a fillet form

Original: WPF skinning one: Creating a fillet form

We all expect our software to have a seemingly eye-catching coat that makes others look professional and aesthetically pleasing. This series is a step-by-step guide to How to design a set of your own WPF form skins, if there are any errors or deficiencies in the text, please also indicate.

WPF is a major focus of Microsoft's strategy, and learning WPF can be a big one: first, learning WPF lets you understand 80% of Silverlight, and second, the XAML language allows you to quickly start WCF and WF, and even more, WPF gives the DX rendering core, Discard the traditional WinForm to GDI +-based rendering, make the interface update smoother, completely solve the flicker problem, but also make the code and interface display separation, which is completely different from the previous WinForm way.

So, this section begins with the simplest way to describe how to create a rounded form.

Simple Introduction to XAML

First, let me take a look at XAML, because only by understanding it can we go deeper into how to create a rounded form.

The so-called XAML is a markup language for XML-like extensible applications that can describe user interface elements, such as Textbox,button, in detail, for precise setup or positioning. The specific people still refer to some other information, anyway, remember that XAML and HTML are similar, is a specific language to describe the interface elements.

In WinForm, when we draw the fillet form, we first set the form to FormBorderStyle to none, that is, no form mode, then we will draw out the area of the form with the background code. It is then cut through the CreateRoundRectRgn () method inside the Win32 function, and the form interface message is finally processed by the WndProc (ref message M).

Create a fillet form

In WPF, it's fairly simple to create a fillet form, and you don't need that many steps at all, and here's what I do:

First, we need to set up WPF's form style to none, which is similar to the WinForm design, which is to set WindowStyle to none, so that when we run F5 we can see a borderless form.

Second, we need to set allowtransparency to True,background to Transparent,OpacityMask toWhite, This allows the four corners to be displayed transparently when we are set to rounded corners, so that when we run F5, we will not see any forms because they are already transparent.

Finally, how to add rounded corners, this is very simple, directly using the border element, add the following code:

<Windowx:class= "Wpfapplication1.msgwindow"xmlns= "Http://schemas.microsoft.com/winfx/2006/xaml/presentation"xmlns:x= "Http://schemas.microsoft.com/winfx/2006/xaml"Title= "Testwindow"Height= "391"Width= "418"WindowStyle= "None"allowstransparency= "True"Background= "Transparent"OpacityMask= "White"ResizeMode= "Noresize"Previewmousemove= "Resetcursor"windowstartuplocation= "Centerscreen">    <GridBackground= "Transparent">            <Borderborderthickness= "5"BorderBrush= "Darkgreen"Cornerradius= "10,10,10,10"MouseMove= "Displayresizecursor"PreviewMouseDown= "Resize"Name= "Top">            <Grid>                <ListBoxMargin= "16,51,18,62"Name= "Uniquemessages" />                <LabelHeight= "+"HorizontalAlignment= "Left"Margin= "16,17,0,0"Name= "Label1"VerticalAlignment= "Top"Width= "+">Label</Label>            </Grid>            </Border>    </Grid></Window>

Where borderthickness is used to denote the thickness of the border, BorderBrush is used to represent the border color, and Cornerradius indicates the curvature of the four corners.

The effect is as follows:

As you can see, the entire form is actually transparent and the rounded corners are perfectly displayed. Control is placed on a transparent form, which means that we are half the success.

Next, we set border's background to obscure the parts of the form that are not transparent.

The code is as follows:

<Windowx:class= "Wpfapplication1.msgwindow"xmlns= "Http://schemas.microsoft.com/winfx/2006/xaml/presentation"xmlns:x= "Http://schemas.microsoft.com/winfx/2006/xaml"Title= "Testwindow"Height= "391"Width= "418"WindowStyle= "None"allowstransparency= "True"Background= "Transparent"OpacityMask= "White"ResizeMode= "Noresize"Previewmousemove= "Resetcursor"windowstartuplocation= "Centerscreen">    <GridBackground= "Transparent">            <Borderborderthickness= "5"BorderBrush= "Darkgreen"Cornerradius= "10,10,10,10"MouseMove= "Displayresizecursor"PreviewMouseDown= "Resize"Name= "Top">            <Border.background>                <LinearGradientBrushEndPoint= "0.5,1"StartPoint= "0.5,0">                    <GradientStopColor= "#eee"/>                </LinearGradientBrush>            </Border.background>            <Grid>                <ListBoxMargin= "16,51,18,62"Name= "Uniquemessages" />                <LabelHeight= "+"HorizontalAlignment= "Left"Margin= "16,17,0,0"Name= "Label1"VerticalAlignment= "Top"Width= "+">Label</Label>            </Grid>            </Border>    </Grid></Window>

Where LinearGradientBrush is used to draw the background of the border area so that the transparent form section is obscured.

So when we run again, we can see the effect:

OK, this form is finished, but how do you drag and drop it to change its size? The next section will continue to explain.

One of the WPF peels: Create a fillet form