Office 2010外观和感觉?

时间:2009-12-18 15:31:51

标签: wpf wpf-controls

我开始使用WPF应用程序,其UI将在Outlook上相当宽松地建模。我想模仿Outlook 2010测试版中的蓝色配色方案。有没有人看过任何描述如何设置WPF按钮样式的教程或配方,使它们看起来像Outlook 2010的任务按钮?这些是Outlook 2010主窗口左下角的那些。感谢

4 个答案:

答案 0 :(得分:3)

这是Outlook 2010任务按钮的一个非常基本的模板,它是在Expression Blend中创建的。我将模板分离为窗口资源。但请注意,图像和文本被硬编码到标记中。要使用此模板,您需要将其合并到您声明的每个按钮中,作为该按钮的单独控件模板,或者您需要创建一个具有适当属性的自定义控件,以便绑定。

另请注意,我还没有创建触发器。要模拟Outlook 2010按钮,默认状态应为无边框 - 边框和玻璃效果应显示为鼠标悬停,鼠标按下等。尽管如此,该模板还是展示了如何获得Outlook 2010外观。

您可以通过创建新的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>

答案 1 :(得分:2)

Here's a ready-made paid product solution可能会有所帮助......解决方案是否需要免费/开源?这个免费试用。

答案 2 :(得分:1)

我建议使用NavigationPane(CodePlex),它将提供比Outlook 2010任务按钮样式更多的功能:

对于Ribbon外观,我建议使用Fluent:

答案 3 :(得分:0)

你应该尝试表达混合3(有一个免费试用版)。您可以通过编辑按钮模板轻松创建样式。按钮对我来说就像它只有一个渐变,一个图标,一个边框和文本。