Office 2010 Look and Feel?

Question

I am getting started on a WPF app whose UI will be modeled rather loosely on Outlook. I would like to emulate the Blue color scheme in the Outlook 2010 beta. Has anyone seen any tutorials or recipes that describe how to style WPF buttons so that they look like Outlook 2010's Task buttons? Those are the ones in the lower-left corner of the Outlook 2010 main window. Thanks

Answer 1

You should try expression blend 3 (there is a free trial). You can create a style very easily by editing the button template. The button looks to me like it just has a gradient, an icon, a border and text.

Answer 2

Here's a ready-made paid product solution that might help... Does the solution need to be free/open source? This one has a free trial.

Answer 3

Here is a very basic template for an Outlook 2010 task button, which was created in Expression Blend. I separated the template as a window resource. But notice that the image and text are hard-coded into the markup. To use this template, you will need to either incorporate it into each button you declase, as a separate control template for that button, or you will need to create a custom control with appropriate properties to which you can bind.

Note also that I haven't created triggers. To emulate an Outlook 2010 button, the default state should be borderless--the border and glass effects should appear for a mouse-over, a mouse-press, and so on. Nonetheless, the template shows how to get the Outlook 2010 look.

You can check out the button by creating a new WPF project and replacing the Window1 markup with the markup below.

<Window
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    x:Class="Outlook_2010_Task_Button.MainWindow"
    x:Name="Window"
    Title="MainWindow"
    Width="640" Height="480" Background="#FFB7C9E0">
    <Window.Resources>
     <ControlTemplate x:Key="TaskButtonTemplate" TargetType="{x:Type RadioButton}">
      <Border x:Name="OuterBorder" Width="150" Height="28" BorderBrush="#FF59697F" BorderThickness="0.75" Background="#FFB0C8E2" Opacity="0.85" SnapsToDevicePixels="False">
       <Border.Effect>
        <DropShadowEffect BlurRadius="3" Opacity="0.1"/>
       </Border.Effect>
       <Border x:Name="InnerBorder" BorderBrush="White" BorderThickness="0.75" Background="{x:Null}" Opacity="0.75" SnapsToDevicePixels="False">
        <Grid>
         <Border x:Name="Glow" Margin="0.999,0,-0.999,0" Grid.Row="0" Grid.RowSpan="2" BorderBrush="Black" BorderThickness="0">
          <Border.Background>
           <RadialGradientBrush Center="0.494,0.98" GradientOrigin="0.494,0.98" RadiusX="0.56" RadiusY="1.018">
            <GradientStop Color="#CCFFFFFF"/>
            <GradientStop Offset="1"/>
           </RadialGradientBrush>
          </Border.Background>
         </Border>
         <Border x:Name="Shine" Margin="0" BorderBrush="Black" BorderThickness="0" Grid.RowSpan="2">
          <Border.Background>
           <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
            <GradientStop Color="#87FFFFFF" Offset="0"/>
            <GradientStop Offset="0.319"/>
           </LinearGradientBrush>
          </Border.Background>
         </Border>
         <StackPanel HorizontalAlignment="Left" Margin="0" Grid.RowSpan="2" Orientation="Horizontal">
          <Image Height="24" HorizontalAlignment="Left" Margin="4,0,0,0" Source="calendar.png"/>
          <TextBlock Text="Calendar" HorizontalAlignment="Center" VerticalAlignment="Center" FontFamily="Segoe UI" FontWeight="Bold" Margin="9,0,0,0" Foreground="#FF001955" />
         </StackPanel>
        </Grid>
       </Border>
      </Border>
     </ControlTemplate>
    </Window.Resources>

    <Grid x:Name="LayoutRoot">
     <RadioButton HorizontalAlignment="Center" VerticalAlignment="Center" Content="RadioButton" Template="{DynamicResource TaskButtonTemplate}"/>
    </Grid>
</Window>