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.
精彩评论