Office 2010 выглядеть и чувствовать? - PullRequest
Новая
       5

Office 2010 выглядеть и чувствовать?

3 голосов
/ 18 декабря 2009

Я начинаю работать с приложением WPF, чей пользовательский интерфейс будет довольно свободно моделироваться в Outlook. Я хотел бы эмулировать синюю цветовую схему в бета-версии Outlook 2010. Кто-нибудь видел какие-либо учебные пособия или рецепты, которые описывают, как стиль кнопок WPF, чтобы они выглядели как кнопки задач Outlook 2010? Это те, которые находятся в левом нижнем углу главного окна Outlook 2010. Спасибо

Ответы [ 4 ]

3 голосов
/ 23 декабря 2009

Вот очень простой шаблон для кнопки задачи 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>
2 голосов
/ 18 декабря 2009

Вот готовое платное решение для продукта , которое может помочь ... Должно ли решение быть бесплатным / открытым исходным кодом? У этого есть бесплатная пробная версия.

1 голос
/ 18 апреля 2012

Я рекомендую использовать NavigationPane (CodePlex), который предоставит гораздо больше возможностей, чем просто стили кнопок задач Outlook 2010:

Также для внешнего вида ленты я рекомендую использовать Fluent:

0 голосов
/ 18 декабря 2009

Вы должны попробовать выражение blend 3 (есть бесплатная пробная версия). Вы можете очень легко создать стиль, отредактировав шаблон кнопки. Мне кажется, что кнопка имеет только градиент, значок, рамку и текст.

...