I am working on a little WPF app to build a UI for the Freebase web database and decided that the entry point to the app will be a simple textbox where the user can type in the search text. Here's what it looks like:

While this was the look that I had envisioned I did not really expect to be able to achieve it as easily as I did with WPF! I at first started off with a simple window and set its size to what I wanted.

<Window x:Class="TextboxApp.Window1"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="Freebase Search"
        Height="65"
        WindowStyle="None"
        Width="708"
        MinHeight="65"
        MinWidth="400"
        WindowStartupLocation="CenterScreen"
        x:Name="MainWindow">
...

I then plonked a DockPanel into the window with a TextBox in it.

<DockPanel Background="Transparent">
    <TextBox x:Name="txtSearch"
             FontSize="40"
             TextAlignment="Center"
             VerticalAlignment="Center"
             Foreground="Wheat"
    </TextBox>
</DockPanel>

I wanted a swanky gradient background and also get the nice rounded corners for the window. After a few attempts with less than stellar results I settled upon the following structure.

<DockPanel Background="Transparent">
    <Border CornerRadius="9,9,9,9">
        <Border.Background>
            <LinearGradientBrush StartPoint="0,0" EndPoint="2,1" x:Name="WindowBackground">
                <GradientStop Color="#CC000000"  Offset="0.0" />
                <GradientStop Color="#CCFFFFFF" Offset="1.0" />
            </LinearGradientBrush>
        </Border.Background>
        <TextBox x:Name="txtSearch"
                 FontSize="40"
                 TextAlignment="Center"
                 VerticalAlignment="Center"
                 KeyDown="txtSearch_KeyDown"
                 Background="Transparent"
                 Foreground="Wheat"
                 BorderBrush="Transparent"
                 BorderThickness="0"
                 Visibility="Hidden">
        </TextBox>
    </Border>
</DockPanel>

I now had a textbox with nice rounded corners but the window itself was a standard rectangle. A little googling revealed the pixy dust you've got to sprinkle to get it going. First you enable transparency on the window itself and make its background transparent like so (note the tags in bold below):

<Window x:Class="TextboxApp.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="Freebase Search"
        Height="65"
        Width="708"
        WindowStyle="None"
        MinHeight="65"
        MinWidth="400"
        WindowStartupLocation="CenterScreen"
        x:Name="TheMainWindow"
        AllowsTransparency="True"
        Background="Transparent"
        ShowInTaskbar="False">

The basic idea is to make all backgrounds and borders transparent except for the Border tag in the DockPanel so that only the rouned corners in the border element are visible. Here's the modified code (again, note the stuff in bold):

<DockPanel Background="Transparent">
    <Border CornerRadius="9,9,9,9">
        <Border.Background>
            <LinearGradientBrush StartPoint="0,0" EndPoint="2,1" x:Name="WindowBackground">
                <GradientStop Color="#CC000000"  Offset="0.0" />
                <GradientStop Color="#CCFFFFFF" Offset="1.0" />
            </LinearGradientBrush>
        </Border.Background>
        <TextBox x:Name="txtSearch"
                 FontSize="40"
                 TextAlignment="Center"
                 VerticalAlignment="Center"
                 KeyDown="txtSearch_KeyDown"
                 Background="Transparent"
                 Foreground="Wheat"
                 BorderBrush="Transparent"
                 BorderThickness="0">
        </TextBox>
    </Border>
</DockPanel>

That's it! Now I had the nice custom round cornered window! I added some pizzazz with some fade-in/fade-out animation and I was in business!

If you'd like to take a look at the code, here's the link you'll need.

• Download Source