开发者

Office 2010 Look and Feel?

开发者 https://www.devze.com 2022-12-14 04:32 出处:网络
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 开发者_JAVA技

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 开发者_JAVA技巧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


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


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.


I recommend using NavigationPane (CodePlex) which will provide much more features than just Outlook 2010 Task buttons styles:

  • http://navigationpane.codeplex.com/

Also for Ribbon look and feel I recommend using Fluent:

  • http://fluent.codeplex.com/


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.

0

精彩评论

暂无评论...
验证码 换一张
取 消