WPF + Office Style

I went in trouble for several days with the WPF ribbon and not getting the "office look" because of the rounded border, the title bar, the grip in the status bar….

After several steps forwards or backwards, I finally got a solution! The code is certainly not perfect but the style is quite good!  Check the project ==> http://nperf.codeplex.com/

Office style: the window, the ribbon

1.      Include the library in the main form header

xmlns:r="clr-namespace:Microsoft.Windows.Controls.Ribbon;assembly=RibbonControlsLibrary"

 

2.      In the form, define a grid with 3 rows for ribbon, controls in the middle, status bar at bottom

<Grid>

       <Grid.RowDefinitions>

             <RowDefinition Height="Auto" MinHeight="142.071" />

             <RowDefinition Height="*" />

             <RowDefinition Height="Auto" MinHeight="24.679" />

       </Grid.RowDefinitions>

 

3.      Add the following xaml :

<Border Grid.Row="0" Grid.RowSpan="3" Background="{DynamicResource

       WindowBackgroundBrush}" CornerRadius="5"

       VerticalAlignment="Stretch"       MouseLeftButtonDown="Window_MouseLeftButtonDown"

       BorderThickness="1" BorderBrush="Black"></Border>

This border fills the form with rounded corners.

 

4.      Add the following xaml for the 3 title bar buttons

        <Button Panel.ZIndex="100" Style="{DynamicResource closeButton}" Height="11" Margin="0,7,11,0" Name="closeButton"

                HorizontalAlignment="Right" VerticalAlignment="Top" Click="closeButton_Click"

                ToolTip="Exit"></Button>

        <Button Panel.ZIndex="100" Style="{DynamicResource maximizeButton}" Height="11" Margin="0,7,24,0" Name="maximizeButton"

                HorizontalAlignment="Right" VerticalAlignment="Top" Width="11" Click="maximizeButton_Click"

                ToolTip="Exit"></Button>

        <Button Panel.ZIndex="100" Style="{DynamicResource minimizeButton}" Height="11" Margin="0,7,38,0" Name="minimizeButton"

                HorizontalAlignment="Right" VerticalAlignment="Top" Width="11" Click="minimizeButton_Click"

                ToolTip="Exit"></Button>

 

5.      Handle the events on the ribbon to get the move or expand/reduce event.

private void closeButton_Click(object sender, RoutedEventArgs e)

{

       this.Close();

}

 

private void maximizeButton_Click(object sender, RoutedEventArgs e)

{

       if( this.WindowState == WindowState.Maximized )

             this.WindowState = WindowState.Normal;

       else

             this.WindowState = WindowState.Maximized;

}

 

private void minimizeButton_Click(object sender, RoutedEventArgs e)

{

       this.WindowState = WindowState.Minimized;

}

 

private void Window_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)

{

       this.DragMove();

}

 

private void TitleBarBorder_MouseDoubleClick(object sender, MouseButtonEventArgs e)

{

       if (this.WindowState == WindowState.Maximized)

             this.WindowState = WindowState.Normal;

       else

             this.WindowState = WindowState.Maximized;

}

 

6.     Add the xaml for the ribbon, the content, etc…

        <r:Ribbon Grid.Row="0" Margin="3,3,3,0" HorizontalAlignment="Stretch" Name="ribbonMain" Title="{Binding Title}"

 

That’s all. You’ve got it.

 If someone find how to put all this in a style, publish ! J

 check the project ==> http://nperf.codeplex.com/

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s