wpf 自定义窗口

This is just a little tutorial on how to create a custom window

这只是有关如何创建自定义窗口的小教程

1. Create a new project and choose WPF-Application

1.创建一个新项目，然后选择WPF-Application

2. Add

2.添加

AllowsTransparency="True" Background="Transparent" WindowStyle="None"

Your XAML should now look like this

您的XAML现在应该如下所示

2. Add a "Border"-tag inside the grid. You can add attributes to it like CornerRadius to make rounded corners.

2.在网格内添加“边框”标签。 您可以向其添加属性，例如CornerRadius来制作圆角。

3. Now we're setting the background. I'll use a linear gradient.

3.现在我们设置背景。 我将使用线性渐变。

for this you add a "Border.Background"-Tag inside the border and a "LinearGradientBrush"-Tag inside it.

为此，您可以在边框内添加“ Border.Background”标签，并在边框内添加“ LinearGradientBrush”标签。

Your XAML should now look like this

您的XAML现在应该如下所示

4. Now the creative part. Put this inside the LinearGradientBrush tags:

4.现在是创意部分。 将其放入LinearGradientBrush标签中：

Add a few other options to these tags.

向这些标签添加其他一些选项。

Than you can change the

比您可以更改

My XAML now looks like this

我的XAML现在看起来像这样

5. Now you can add a shadow to you're application. This is pretty simple. Just add

5.现在，您可以在应用程序中添加阴影。 这很简单。 只需添加

Little explanation:

小解释：

Color: Color

颜色：颜色

Opacity: How opaque the shadow is. 1=100% 0=0%

不透明度：阴影的透明度。 1 = 100％0 = 0％

Direction:  Shadow direction in degrees

方向：阴影方向，以度为单位

Softnes: How soft the shadow is

Softnes：阴影的柔和度

ShadowDeph: How far the shadow is behind the window.

ShadowDeph：阴影在窗口后面的距离。

To make the shadow visible, you have to add a little margin to the Border

为了使阴影可见，您必须在边框上添加一点边距

My XAML now looks like this

我的XAML现在看起来像这样

6. Now we have to care about the positioning of the elements (i.e. Buttons)

6.现在，我们必须关心元素（即按钮）的位置

Do this by adding a grid insitde the border and add a "Grid.RowDefinitions" and a "Grid.ColumnDefinitions" tag to it

为此，可以添加一个边框插入网格并为其添加“ Grid.RowDefinitions”和“ Grid.ColumnDefinitions”标签

I use 5 colums and 3 rows. 1 Column for the icon, one for the header and the rest for min/max/close.

我使用5列和3行。 1列用于图标，一列用于标题，其余列用于最小/最大/关闭。

My XAML now looks like that.

我的XAML现在看起来像这样。

7. Add the buttons, icons and labels.

7.添加按钮，图标和标签。

Put this code inside the grid.

将此代码放在网格中。

My Text                                                

Grid.Row: The Row, where its positioned

Grid.Row：行，其位置

Grid.Column: The Column, where its positioned

Grid.Column：列，其位置

Grid.RowSpan: How many rows its height

Grid.RowSpan：其高度为多少行

Grid.ColumnSpan: How many Columns its height

Grid.ColumnSpan：其高度为几列

Source: Image source

来源：图片来源

FontFamily: Font

FontFamily：字体

FontSize: Font size

FontSize：字体大小

Foreground: Font color

前景：字体颜色

Content: Buttons text

内容：按钮文字

My final XAML looks like that:

我的最终XAML如下所示：

        
             
                  
                       
                            
                             
                             
                             
                             
                             
                             
                             
                             
                             
                             
                         
                    
                   
                       
                    
                   
                       
                            
                             
                             
                         
                        
                            
                             
                             
                             
                             
                         
                        
                        
        My Text                
                        
                        
                    
               
          
     
    

I hope you liked my tutorial and found it helpful.

希望您喜欢我的教程并发现它对您有所帮助。

翻译自:

wpf 自定义窗口