Office 2010 Look and feel?

Question

I run in a WPF application whose interface will be fairly easy to model in Outlook. I would like to emulate the blue color scheme in the beta version of Outlook 2010. Has anyone seen any tutorials or recipes that describe the style of WPF styles so that they look like Outlook 2010 task buttons? These are the ones in the lower left corner of the main Outlook 2010 window. Thanks

Answer 1

Here is a very simple template for the Outlook 2010 task button that was created in Expression Blend. I split the template as a window resource. But note that the image and text are hardcoded in the markup. To use this template, you need to either include it in each button that you declare, or as a separate control template for this button, or you need to create a custom control with the appropriate properties with which you can bind.

Please note that I have not created triggers yet. To emulate the Outlook 2010 button, the default state should be borderless - border and glass effects should appear for the mouse, mouse click, etc. However, the template shows what Outlook 2010 looks like.

, WPF Window1 .

<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>

Answer 2

, ... / ? .

Answer 3

NavigationPane (CodePlex), , Outlook 2010:

• http://navigationpane.codeplex.com/

Fluent:

• http://fluent.codeplex.com/

Answer 4

blend 3 ( ). , . , , , .