Creating a IE9-like UI

If you haven’t been living under a rock, you might have noticed that IE9 Beta has been released! One of the things I like about IE9 is its new UI… Let's try and re-create it!

Glass Chrome Window

First things first, IE9 uses a glass chrome window… Microsoft has released the WPF Shell Integration Library which allows us to customize our window chrome.

“The custom chrome feature allows applications control over the outer frame of the window so that WPF content can be drawn over the title bar. This allows applications to integrate with Aero glass to emulate the Office 2007/2010 look and feel, or to completely replace the frame with its own content without having to manage all the system behaviors that get lost when using WindowStyle.None"

Here is my glass chrome window style:

<Style TargetType="{x:Type local:MainWindow}">
    <Setter Property="shell:WindowChrome.WindowChrome">
        <Setter.Value>
            <shell:WindowChrome GlassFrameThickness="-1" />
        </Setter.Value>
    </Setter>
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type local:MainWindow}">
                <Grid>
                    <ContentPresenter 
                        Margin="{Binding Source=
			{x:Static shell:SystemParameters2.Current}, 
			Path=WindowNonClientFrameThickness}" 
                        Content="{TemplateBinding Content}"/>
                </Grid>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

Lester Lebo has a excellent sample of this feature available here.

HeaderedTabControl

Next on my list of things to-do is create a HeaderedTabControl! If you look at the IE9 UI, the address bar and the tabs bleed on the same line and there is a grid splitter between them that can be used to resize the allocated space!

public class HeaderedTabControl : TabControl
{
    static HeaderedTabControl()
    {
        DefaultStyleKeyProperty.OverrideMetadata(typeof(HeaderedTabControl), 
		new FrameworkPropertyMetadata(typeof(HeaderedTabControl)));            
    }

    public object Header
    {
        get { return (object)GetValue(HeaderProperty); }
        set { SetValue(HeaderProperty, value); }
    }

    public static readonly DependencyProperty HeaderProperty =
        DependencyProperty.Register("Header", typeof(object), 
		typeof(HeaderedTabControl), new UIPropertyMetadata(null));
}

And here is the default style:

<Style TargetType="{x:Type local:HeaderedTabControl}">
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type local:HeaderedTabControl}">
                <Grid KeyboardNavigation.TabNavigation="Local">
                    <Grid.RowDefinitions>
                        <RowDefinition Height="Auto"/>
                        <RowDefinition Height="5" />
                        <RowDefinition Height="*"/>
                    </Grid.RowDefinitions>
                    <Border Grid.Row="1" BorderBrush="Black" 
			Background="White" BorderThickness="1,1,1,0" 
			CornerRadius="2,2,0,0" />
                    <Grid Grid.Row="0" >
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="1*" />
                            <ColumnDefinition Width="2*" />
                        </Grid.ColumnDefinitions>
                        <ContentPresenter Content="{TemplateBinding Header}" 
				Grid.Column="0" Margin="0,0,5,0" />
                        <GridSplitter Width="5" HorizontalAlignment="Right" 
				Grid.Column="0" Background="Transparent" />
                        <TabPanel Grid.Column="1" Background="Transparent" 
				IsItemsHost="True" Panel.ZIndex="1" 
                                    Margin="2.5,0,0,0"
                                    VerticalAlignment="Bottom" 
				KeyboardNavigation.TabIndex="1"/>
                    </Grid>
                    <Border Grid.Row="2"
                                BorderBrush="Black" BorderThickness="1,0,1,1" 
					CornerRadius="0,0,2,2"
                                KeyboardNavigation.DirectionalNavigation="Contained" 
                                KeyboardNavigation.TabNavigation="Local" 
                                KeyboardNavigation.TabIndex="2">
                        <ContentPresenter x:Name="PART_SelectedContentHost" 
					ContentSource="SelectedContent"/>
                    </Border>
                </Grid>

                <ControlTemplate.Triggers>
                    <Trigger Property="IsEnabled" Value="False">
                        <Setter Property="Foreground" Value="Gray"/>
                    </Trigger>
                </ControlTemplate.Triggers>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

Let's Try It Out

Now that we have all the building blocks required, let's try it out…

<local:HeaderedTabControl>
    <local:HeaderedTabControl.Header>
        <Grid Margin="5,2,2,2">
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="50" />
                <ColumnDefinition Width="*" />
            </Grid.ColumnDefinitions>
            <Button Content="Back" Grid.Column="0" />
            <TextBox Text="this is in the header" Grid.Column="1" />
        </Grid>
    </local:HeaderedTabControl.Header>
    <TabItem Header="Welcome">
        <Border Background="Cyan">
            <TextBlock Text="Welcome to my silly little demo of a IE9-like UI clone"
                        Margin="20,20,20,20"/>
        </Border>
    </TabItem>
    <TabItem Header="Blog - Rudi Grobler">
        <WebBrowser Source="http://www.rudigrobler.net" />
    </TabItem>
</local:HeaderedTabControl>

And this is how it looks:

Read more about IE9 here.

P.S.: As always, here is the code!

CodeProject