Click here to Skip to main content
15,892,059 members
Articles / Desktop Programming / WPF

Aero Style (No Code)

Rate me:
Please Sign up or sign in to vote.
3.18/5 (21 votes)
20 Aug 2008CPOL 61K   127   9
Learn how to create good looking apps without using a line of code!
Image 1

Introduction

I have been in the WPF world for 3 months, and let me tell you that it's AMAZING! Today, I'll show you how to create the Aero Style for your WPF apps.

You'll need Microsoft Expression Blend.

Let's Start

To the window that you'd like to apply this Aero Style, set these properties:

Properties.png
  • AllowTransparency = Checked
  • BorderThickness = 1 to all
  • WindowsStyle = None

Now, let's set the Gradients to give it that glossy white transparent effect:

Colors.png

Add 6 colors to your Gradient, set the first one, going from left to right, to:

1:#4CA2A2A2
2:#60B4B4B4
3:#60FFFFFF 
4:#60E7E7E7
5:#60FFFFFF
6:#4CA2A2A2

You'll get something like this:

Window.png

Then add the DropShadow BitmapEffect:

BitmapEffect.png

And set the properties just like in the image.

And that's it! See how easy it is to give a cool look to your apps in WPF. Here's all that we have done in XAML:

XML
 <Window
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    x:Class="Aero_Intenmp_1.Window1"
    x:Name="Window"
    Title="Window1"
    Width="346.5" Height="270" WindowStyle="None" 
	AllowsTransparency="True" BorderBrush="#FFFFFFFF" 
	BorderThickness="1,1,1,1" MouseLeftButtonDown="move">
    <Window.BitmapEffect>
        <DropShadowBitmapEffect Color="#FF000000"/>
    </Window.BitmapEffect>
    <Window.Background>
        <LinearGradientBrush EndPoint="0.984,0.983" StartPoint="0.025,0.024">
            <GradientStop Color="#4CA2A2A2" Offset="0"/>
            <GradientStop Color="#4CA2A2A2" Offset="1"/>
            <GradientStop Color="#60B4B4B4" Offset="0.247"/>
            <GradientStop Color="#60FFFFFF" Offset="0.837"/>
            <GradientStop Color="#60FFFFFF" Offset="0.423"/>
            <GradientStop Color="#60E7E7E7" Offset="0.709"/>
        </LinearGradientBrush>
    </Window.Background>

    <Grid x:Name="LayoutRoot"/>
</Window> 

Read

Hi, please keep in mind that I'm only 14 years old. If you find an error or something, please let me know. Thanks!

History

  • 20th August, 2008: Initial post

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)



Comments and Discussions

 
GeneralThank you for sharing the code. Pin
KinjalMansi12-Jan-10 19:19
KinjalMansi12-Jan-10 19:19 
GeneralYou need more ... Pin
IndioX865-Nov-08 0:04
IndioX865-Nov-08 0:04 
GeneralYes Pin
Prox-YD27-Oct-08 14:35
Prox-YD27-Oct-08 14:35 
GeneralWell but it is not enough Pin
adminfort27-Oct-08 13:57
adminfort27-Oct-08 13:57 
GeneralNice effect Pin
kwilson96227-Sep-08 17:06
kwilson96227-Sep-08 17:06 
It took me a bit to figure out what it was that you were doing. I finally realized that you were creating an effect that you could apply over something else. Just goes to show that I haven't had enough coffee today.

I like that you included the xaml code, since my trial copy of Expression Blend expired. So I was able to open up Visual Basic Express 2008 and try it out.

I've been programming as a hobby since the days when the only computers around were mainframes, and we all walked around in our high school (1973-4) with rolls of paper punch tape (skinny ribbons of paper with punched holes) to feed into the teletype machines to load our programs. I have also had boxes and boxes of punch cards sitting around. When Radio Shack came out with their home computers in the early 80's, I got a Model III. It had no hard drive, but it did have two 5-1/2 inch 180K floppy drives. One was for the operating system floppy and the other was so that I would not have to take out the OS floppy to put in my data storage floppy. It had a black-and-white screen, and the only graphics were from the ASCII code. I also had a 150 baud modem (150 bits per second), so I could finally hook up to remote mainframes from home. I had to write my own communications program in assembly language because of bugs with a local university's communication program that would lose characters after a line-feed (even waiting for characters to echo back wouldn't work; I had to build in a delay after sending a line-feed).

Oh, did I get sidetracked? Anyway, I loved the effect, loved how little code it took, and it did give me some ideas for other projects I'm working on.

Keep up the good work!

Abort, Retry, Panic...

GeneralGraphics / Desing Pin
Prox-YD24-Aug-08 9:57
Prox-YD24-Aug-08 9:57 
QuestionDont get too excited ? Pin
Prox-YD20-Aug-08 10:54
Prox-YD20-Aug-08 10:54 
AnswerRe: Dont get too excited ? Pin
Bill960325-Mar-10 10:45
Bill960325-Mar-10 10:45 
GeneralDon't get too excited :) Pin
Vitaly Tomilov20-Aug-08 9:55
Vitaly Tomilov20-Aug-08 9:55 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.