Sunday, September 19, 2010

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… Lets try and re-create it!
Glass chrome window
Frist 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>
Read more:  Rudi Grobler in the Cloud