design sketch

( Black is my desk )

Rounded login box

Based on WPF.

In the beginning, the first effect is the fillet form , Just out of a beautiful mind , But people are not satisfied , A little change is like a little more . Ha ha ha

Change default

In fact, it is to hide the original form , And make a new one .
WindowStyle="None" AllowsTransparency="True" Background="Transparent"
Make the form transparent , How to achieve it .
WindowStyle="None"
Form border removed
AllowsTransparency="True"
Allow transparency
Background="Transparent"
Form transparent

Please use them together . So we have a transparent bottom layer .

Set fillet
Setting the fillet is used here Border attribute . <Border BorderThickness="1" BorderBrush="DarkGray"
CornerRadius="20,20,20,20" Margin="95,49,91,118.6"> <Border.Background>
<SolidColorBrush Color="White"/> </Border.Background> </Border>
BorderThickness="1"
Change the thickness of the form , Numerical line , So the thick lines must be opposite .
BorderBrush="DarkGray"
Set the color of the border , This way, I'm dark grey , What color do you want to use to correspond to the relative color .
CornerRadius="20,20,20,20"
adopt CornerRadius To set the fillet , And the latter is the angle we want to bend , If you want to bend at a large angle, set the value a little higher , If you want a low-key angle, set the value a little smaller .

design sketch :

Now we have the canvas we want . If you want transparency, go through Opacity="0.7" To set .

Name and password box
In this part, the pre effect is that there is a text prompt when there is no input , The text prompt disappears when the text box gets focus .

TEXT Box becomes a line
BorderThickness="0,0,0,1"
Modify with this property , In this way, you can get a text frame , The essence is to display a frame line .

No focus, text prompt , Disappear after acquisition
<TextBox.Style> <Style TargetType="TextBox" > <Style.Triggers > <Trigger
Property="Text" Value="{x:Null}"> <Setter Property="Background"
Value="{StaticResource H}"/> </Trigger> <Trigger Property="Text" Value="">
<Setter Property="Background" Value="{StaticResource H}"/> </Trigger>
</Style.Triggers> </Style> </TextBox.Style>
As for the text, it can be directly passed through Text=" Please enter a name " To set

Graphical buttons

Change button to picture , In fact, it's to post pictures to the controls , for instance : Your keycaps are black , But you don't like the red key you changed into , In essence, he has fulfilled his own key duty , And we changed the key cap, just the appearance . So just attach a picture , No more writing .

Remove background bar
After we add the picture, we will find that there is still the original border around the picture , It's not beautiful , adopt BorderBrush="{x:Null}" Easy to remove

because WPF You need to write your own attributes , Here's what I want to achieve , The rest is skipped . Please correct where the writing is not good .

Technology
©2019-2020 Toolsou All rights reserved,
It's unexpected Python Cherry tree (turtle The gorgeous style of Library )Unity3D of UGUI Basics -- Three modes of canvas os Simple use of module computer network --- Basic concepts of computer network ( agreement , system )html Writing about cherry trees , Writing about cherry trees Some East 14 Pay change 16 salary , Sincerity or routine ?Unity-Demo Examples ✨ realization UI- Backpack equipment drag function 06【 Interpretation according to the frame 】 Data range filtering -- awesome java Four functional interfaces ( a key , simple )