<

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x

[.Net]How to create a custom window using WPF

Published on
8,385 Points
2,285 Views
1 Endorsement
Last Modified:
Approved
This is just a little tutorial on how to create a custom window

1. Create a new project and choose WPF-Application
Screenshot 1
2. Add
AllowsTransparency="True" Background="Transparent" WindowStyle="None"

Open in new window

To the Window Tag.

Your XAML should now look like this
<Window x:Class="WpfApplication1.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow" Height="350" Width="525" AllowsTransparency="True" Background="Transparent" WindowStyle="None">
    <Grid>
        
    </Grid>
</Window>

Open in new window


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

3. Now we're setting the background. I'll use a linear gradient.
for this you add a "Border.Background"-Tag inside the border and a "LinearGradientBrush"-Tag inside it.

Your XAML should now look like this
<Window x:Class="WpfApplication1.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow" Height="350" Width="525" AllowsTransparency="True" Background="Transparent" WindowStyle="None">
    <Grid>
        <Border CornerRadius="20">
            <Border.Background>
                <LinearGradientBrush>
                    
                </LinearGradientBrush>
            </Border.Background>
        </Border>
    </Grid>
</Window>

Open in new window


4. Now the creative part. Put this inside the LinearGradientBrush tags:
<GradientStop Offset="0" Color="Gray"/>

Open in new window

As you can think offset is the distance from the start point. You can put any value in it. 0 means at the start point, 1 at the end point. And Color is just any color you like

Add a few other options to these tags.
Than you can change the
<LinearGradientBrush>

Open in new window

Tag to
<LinearGradientBrush StartPoint="1,1" EndPoint="0,0">

Open in new window

Play a bit around with the values for StartPoint and EndPoint, until you think it looks good.

My XAML now looks like this
<Window x:Class="WpfApplication1.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow" Height="350" Width="525" AllowsTransparency="True" Background="Transparent" WindowStyle="None">
    <Grid>
        <Border CornerRadius="20">
            <Border.Background>
                <LinearGradientBrush StartPoint="0.5,1" EndPoint="1,0.5">
                    <GradientStop Offset="0" Color="White"/>
                    <GradientStop Offset="0.1" Color="Black"/>
                    <GradientStop Offset="0.2" Color="White"/>
                    <GradientStop Offset="0.3" Color="Black"/>
                    <GradientStop Offset="0.4" Color="White"/>
                    <GradientStop Offset="0.5" Color="Black"/>
                    <GradientStop Offset="0.6" Color="White"/>
                    <GradientStop Offset="0.7" Color="Black"/>
                    <GradientStop Offset="0.8" Color="White"/>
                    <GradientStop Offset="0.9" Color="Black"/>
                    <GradientStop Offset="1" Color="White"/>
                </LinearGradientBrush>
            </Border.Background>
        </Border>
    </Grid>
</Window>

Open in new window

Screenshot2
5. Now you can add a shadow to you're application. This is pretty simple. Just add
            <Border.BitmapEffect>
                <DropShadowBitmapEffect Color="Black" Opacity="1" Direction="50" Softness="0.5" ShadowDepth="10" />
            </Border.BitmapEffect>

Open in new window

 

Little explanation:
Color: Color
Opacity: How opaque the shadow is. 1=100% 0=0%
Direction:  Shadow direction in degrees
Softnes: How soft the shadow is
ShadowDeph: How far the shadow is behind the window.
To make the shadow visible, you have to add a little margin to the Border
<Border CornerRadius="20" Margin="20">

Open in new window


My XAML now looks like this
<Window x:Class="WpfApplication1.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow" Height="350" Width="525" AllowsTransparency="True" Background="Transparent" WindowStyle="None">
    <Grid>
        <Border CornerRadius="20" Margin="20">
            <Border.Background>
                <LinearGradientBrush StartPoint="0.5,1" EndPoint="1,0.5">
                    <GradientStop Offset="0" Color="White"/>
                    <GradientStop Offset="0.1" Color="Black"/>
                    <GradientStop Offset="0.2" Color="White"/>
                    <GradientStop Offset="0.3" Color="Black"/>
                    <GradientStop Offset="0.4" Color="White"/>
                    <GradientStop Offset="0.5" Color="Black"/>
                    <GradientStop Offset="0.6" Color="White"/>
                    <GradientStop Offset="0.7" Color="Black"/>
                    <GradientStop Offset="0.8" Color="White"/>
                    <GradientStop Offset="0.9" Color="Black"/>
                    <GradientStop Offset="1" Color="White"/>
                </LinearGradientBrush>
            </Border.Background>
            <Border.BitmapEffect>
                <DropShadowBitmapEffect Color="Black" Opacity="1" Direction="50" Softness="0.5" ShadowDepth="10" />
            </Border.BitmapEffect>
        </Border>
    </Grid>
</Window>

Open in new window


6. Now we have to care about the positioning of the elements (i.e. Buttons)
Do this by adding a grid insitde the border and add a "Grid.RowDefinitions" and a "Grid.ColumnDefinitions" tag to it
            <Grid>
                <Grid.RowDefinitions>
                    
                </Grid.RowDefinitions>
                <Grid.ColumnDefinitions>
                    
                </Grid.ColumnDefinitions>
            </Grid>

Open in new window

Now add as many <RowDefinition Height="*" /> and <ColumnDefinition Width="*" /> Tags inside the <Grid.RowDefinitions> or <Grid.ColumnDefinitions> With and hight are set in pixels. You can use * or 2*, 3*, 1.5* ...for it too, to automatically control the width/height.

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

My XAML now looks like that.
<Window x:Class="WpfApplication1.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow" Height="350" Width="525" AllowsTransparency="True" Background="Transparent" WindowStyle="None">
    <Grid>
        <Border CornerRadius="20" Margin="20">
            <Border.Background>
                <LinearGradientBrush StartPoint="0.5,1" EndPoint="1,0.5">
                    <GradientStop Offset="0" Color="White"/>
                    <GradientStop Offset="0.1" Color="Black"/>
                    <GradientStop Offset="0.2" Color="White"/>
                    <GradientStop Offset="0.3" Color="Black"/>
                    <GradientStop Offset="0.4" Color="White"/>
                    <GradientStop Offset="0.5" Color="Black"/>
                    <GradientStop Offset="0.6" Color="White"/>
                    <GradientStop Offset="0.7" Color="Black"/>
                    <GradientStop Offset="0.8" Color="White"/>
                    <GradientStop Offset="0.9" Color="Black"/>
                    <GradientStop Offset="1" Color="White"/>
                </LinearGradientBrush>
            </Border.Background>
            <Border.BitmapEffect>
                <DropShadowBitmapEffect Color="Black" Opacity="1" Direction="50" Softness="0.5" ShadowDepth="10" />
            </Border.BitmapEffect>
            <Grid>
                <Grid.RowDefinitions>
                    <RowDefinition Height="30"/>
                    <RowDefinition Height="*" />
                    <RowDefinition Height="20" />
                </Grid.RowDefinitions>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="30" />
                    <ColumnDefinition Width="*" />
                    <ColumnDefinition Width="50" />
                    <ColumnDefinition Width="50" />
                    <ColumnDefinition Width="75" />
                </Grid.ColumnDefinitions>
            </Grid>
        </Border>
    </Grid>
</Window>

Open in new window


7. Add the buttons, icons and labels.
Put this code inside the grid.
                <Image Grid.Column="0" Grid.ColumnSpan="1" Grid.Row="0" Grid.RowSpan="1" Source="anypicture.png />
                <Label Grid.Column="1" Grid.ColumnSpan="1" Grid.Row="0" Grid.RowSpan="1" FontFamily="Arial" FontSize="12" Foreground="Black" >My Text</Label>
                <Button Grid.Column="2" Grid.ColumnSpan="1" Grid.Row="0" Grid.RowSpan="1" Background="Black" Content="_" Foreground="White" />
                <Button Grid.Column="3" Grid.ColumnSpan="1" Grid.Row="0" Grid.RowSpan="1" Background="Black" Content="¦" Foreground="White" />
                <Button Grid.Column="4" Grid.ColumnSpan="1" Grid.Row="0" Grid.RowSpan="1" Background="Black" Content="X" Foreground="White" />

Open in new window

Explanation:
Grid.Row: The Row, where its positioned
Grid.Column: The Column, where its positioned
Grid.RowSpan: How many rows its height
Grid.ColumnSpan: How many Columns its height
Source: Image source
FontFamily: Font
FontSize: Font size
Foreground: Font color
Content: Buttons text

My final XAML looks like that:
<Window x:Class="WpfApplication1.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow" Height="350" Width="525" AllowsTransparency="True" Background="Transparent" WindowStyle="None">
    <Grid>
        <Border CornerRadius="20" Margin="20">
            <Border.Background>
                <LinearGradientBrush StartPoint="0.5,1" EndPoint="1,0.5">
                    <GradientStop Offset="0" Color="White"/>
                    <GradientStop Offset="0.1" Color="Black"/>
                    <GradientStop Offset="0.2" Color="White"/>
                    <GradientStop Offset="0.3" Color="Black"/>
                    <GradientStop Offset="0.4" Color="White"/>
                    <GradientStop Offset="0.5" Color="Black"/>
                    <GradientStop Offset="0.6" Color="White"/>
                    <GradientStop Offset="0.7" Color="Black"/>
                    <GradientStop Offset="0.8" Color="White"/>
                    <GradientStop Offset="0.9" Color="Black"/>
                    <GradientStop Offset="1" Color="White"/>
                </LinearGradientBrush>
            </Border.Background>
            <Border.BitmapEffect>
                <DropShadowBitmapEffect Color="Black" Opacity="1" Direction="50" Softness="0.5" ShadowDepth="10" />
            </Border.BitmapEffect>
            <Grid>
                <Grid.RowDefinitions>
                    <RowDefinition Height="30"/>
                    <RowDefinition Height="*" />
                    <RowDefinition Height="20" />
                </Grid.RowDefinitions>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="30" />
                    <ColumnDefinition Width="*" />
                    <ColumnDefinition Width="50" />
                    <ColumnDefinition Width="50" />
                    <ColumnDefinition Width="75" />
                </Grid.ColumnDefinitions>
                <Image Grid.Column="0" Grid.ColumnSpan="1" Grid.Row="0" Grid.RowSpan="1" />
                <Label Grid.Column="1" Grid.ColumnSpan="1" Grid.Row="0" Grid.RowSpan="1" FontFamily="Arial" FontSize="12" Foreground="Black" >My Text</Label>
                <Button Grid.Column="2" Grid.ColumnSpan="1" Grid.Row="0" Grid.RowSpan="1" Background="Black" Content="_" Foreground="White" />
                <Button Grid.Column="3" Grid.ColumnSpan="1" Grid.Row="0" Grid.RowSpan="1" Background="Black" Content="¦" Foreground="White" />
                <Button Grid.Column="4" Grid.ColumnSpan="1" Grid.Row="0" Grid.RowSpan="1" Background="Black" Content="X" Foreground="White" />
            </Grid>
        </Border>
    </Grid>
</Window>

Open in new window

Screenshot3

I hope you liked my tutorial and found it helpful.
1
Comment
Author:416e647265
0 Comments

Featured Post

Become a Certified Penetration Testing Engineer

This CPTE Certified Penetration Testing Engineer course covers everything you need to know about becoming a Certified Penetration Testing Engineer. Career Path: Professional roles include Ethical Hackers, Security Consultants, System Administrators, and Chief Security Officers.

Join & Write a Comment

Discover the basics of using Outlook 2016 from office 365.
This is Part-2 of Learning to use the Power of Mailwasher Pro so if you haven't watched Part-1 yet, I urge you to do so before watching this video. Click this link to watch Part-1 (https://www.experts-exchange.com/videos/56638/Learn-to-use-the-POWER…

Keep in touch with Experts Exchange

Tech news and trends delivered to your inbox every month