Сделать приложения WPF выглядящими в стиле Metro даже в Windows 7? (Окно Chrome /Тематика /Тема)

Мне нравится окно Chrome в новых пакетах Office Suite и Visual Studio.

введите описание изображения здесь

Я, конечно, все еще разрабатываю приложения для Windows 7, но мне интересно, есть ли быстрый и простой способ (читай: стиль WPF или библиотека Windows) для эмуляции этого стиля. В прошлом я занимался стилизацией оконного хрома, но заставить его выглядеть и вести себя правильно - действительно сложно.

Кто-нибудь знает, существуют ли существующие шаблоны или библиотеки для добавления внешнего вида и стиля "Modern UI" в мои приложения WPF?

117 голосов | спросил Daniel 28 32012vEurope/Moscow11bEurope/MoscowWed, 28 Nov 2012 00:17:28 +0400 2012, 00:17:28

6 ответов


0

Решение, которое я выбрал в итоге, было MahApps.Metro ( github ), который (после использования его на двух частях программного обеспечения сейчас) я считаю отличным комплектом пользовательского интерфейса (кредит Оливер Фогель для предложения) .

Стиль окна

Он обрабатывает приложение без особых усилий и адаптирует стандартные элементы управления Windows 8. Это очень надежно.

Водяной знак текстового поля

Версия доступна на Nuget:

  

Вы можете установить MahApps.Metro через Nuget, используя графический интерфейс (щелкните правой кнопкой мыши на   ваш проект, Управление ссылками Nuget, поиск «MahApps.Metro») или   через консоль:

     

PM > Install-Package MahApps.Metro

Он также бесплатный - даже для коммерческого использования.

Обновление 10-29-2013:

Я обнаружил, что версия MahApps.Metro на Github содержит элементы управления и стили, недоступные в текущей версии nuget, в том числе:

DataGrids:

введите описание изображения здесь

Чистое окно:

введите описание изображения здесь

Всплывающие:

введите описание изображения здесь

Керамическая плитка:

введите описание изображения здесь

GitHub-репозиторий очень активен с небольшим вкладом пользователей. Я рекомендую проверить это.

ответил Daniel 19 MarpmTue, 19 Mar 2013 17:07:56 +04002013-03-19T17:07:56+04:0005 2013, 17:07:56
0

Что я сделал, так это создал свое собственное окно и стиль. Потому что мне нравится все контролировать, и я не хотел, чтобы некоторые внешние библиотеки просто использовали окно из него. Я посмотрел на уже упомянутые MahApps.Metro на GitHub

MahApps

а также очень хороший современный интерфейс на CodePlex . (Только .NET4.5)

Современный пользовательский интерфейс)

Есть еще один - Elysium , но я действительно не пробовал этот.

Элизиум

Стиль, который я сделал, был действительно легким, когда я посмотрел, как это делается в этих. Теперь у меня есть свое собственное Окно, и я могу делать с xaml все, что захочу ... для меня это главная причина, почему я сделал свое собственное. И я сделал еще один для вас тоже :) Я, вероятно, должен сказать, что я не смог бы сделать это без изучения Современного пользовательского интерфейса , это было бы очень полезно. Я пытался сделать его похожим на окно VS2012. Похоже на это.

MyWindow

Вот код (обратите внимание, что он нацелен на .NET4.5)

 public class MyWindow : Window
{

    public MyWindow()
    {
        this.CommandBindings.Add(new CommandBinding(SystemCommands.CloseWindowCommand, this.OnCloseWindow));
        this.CommandBindings.Add(new CommandBinding(SystemCommands.MaximizeWindowCommand, this.OnMaximizeWindow, this.OnCanResizeWindow));
        this.CommandBindings.Add(new CommandBinding(SystemCommands.MinimizeWindowCommand, this.OnMinimizeWindow, this.OnCanMinimizeWindow));
        this.CommandBindings.Add(new CommandBinding(SystemCommands.RestoreWindowCommand, this.OnRestoreWindow, this.OnCanResizeWindow));
    }

    private void OnCanResizeWindow(object sender, CanExecuteRoutedEventArgs e)
    {
        e.CanExecute = this.ResizeMode == ResizeMode.CanResize || this.ResizeMode == ResizeMode.CanResizeWithGrip;
    }

    private void OnCanMinimizeWindow(object sender, CanExecuteRoutedEventArgs e)
    {
        e.CanExecute = this.ResizeMode != ResizeMode.NoResize;
    }

    private void OnCloseWindow(object target, ExecutedRoutedEventArgs e)
    {
        SystemCommands.CloseWindow(this);
    }

    private void OnMaximizeWindow(object target, ExecutedRoutedEventArgs e)
    {
        SystemCommands.MaximizeWindow(this);
    }

    private void OnMinimizeWindow(object target, ExecutedRoutedEventArgs e)
    {
        SystemCommands.MinimizeWindow(this);
    }

    private void OnRestoreWindow(object target, ExecutedRoutedEventArgs e)
    {
        SystemCommands.RestoreWindow(this);
    }
}

А вот ресурсы:

 <BooleanToVisibilityConverter x:Key="bool2VisibilityConverter" />

<Color x:Key="WindowBackgroundColor">#FF2D2D30</Color>
<Color x:Key="HighlightColor">#FF3F3F41</Color>
<Color x:Key="BlueColor">#FF007ACC</Color>
<Color x:Key="ForegroundColor">#FFF4F4F5</Color>

<SolidColorBrush x:Key="WindowBackgroundColorBrush" Color="{StaticResource WindowBackgroundColor}"/>
<SolidColorBrush x:Key="HighlightColorBrush" Color="{StaticResource HighlightColor}"/>
<SolidColorBrush x:Key="BlueColorBrush" Color="{StaticResource BlueColor}"/>
<SolidColorBrush x:Key="ForegroundColorBrush" Color="{StaticResource ForegroundColor}"/>

<Style x:Key="WindowButtonStyle" TargetType="{x:Type Button}">
    <Setter Property="Foreground" Value="{DynamicResource ForegroundColorBrush}" />
    <Setter Property="Background" Value="Transparent" />
    <Setter Property="HorizontalContentAlignment" Value="Center" />
    <Setter Property="VerticalContentAlignment" Value="Center" />
    <Setter Property="Padding" Value="1" />
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type Button}">
                <Grid Background="{TemplateBinding Background}">
                    <ContentPresenter x:Name="contentPresenter"
                          HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
                          VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
                          SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"
                          Margin="{TemplateBinding Padding}"
                          RecognizesAccessKey="True" />
                </Grid>
                <ControlTemplate.Triggers>
                    <Trigger Property="IsMouseOver" Value="True">
                        <Setter Property="Background" Value="{StaticResource HighlightColorBrush}" />
                    </Trigger>
                    <Trigger Property="IsPressed" Value="True">
                        <Setter Property="Background" Value="{DynamicResource BlueColorBrush}" />
                    </Trigger>
                    <Trigger Property="IsEnabled" Value="false">
                        <Setter TargetName="contentPresenter" Property="Opacity" Value=".5" />
                    </Trigger>
                </ControlTemplate.Triggers>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

<Style x:Key="MyWindowStyle" TargetType="local:MyWindow">
    <Setter Property="Foreground" Value="{DynamicResource ForegroundColorBrush}" />
    <Setter Property="Background" Value="{DynamicResource WindowBackgroundBrush}"/>
    <Setter Property="ResizeMode" Value="CanResizeWithGrip" />
    <Setter Property="UseLayoutRounding" Value="True" />
    <Setter Property="TextOptions.TextFormattingMode" Value="Display" />
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="local:MyWindow">
                <Border x:Name="WindowBorder" Margin="{Binding Source={x:Static SystemParameters.WindowNonClientFrameThickness}}" Background="{StaticResource WindowBackgroundColorBrush}">
                    <Grid>
                        <Border BorderThickness="1">
                            <AdornerDecorator>
                                <Grid x:Name="LayoutRoot">
                                    <Grid.RowDefinitions>
                                        <RowDefinition Height="25" />
                                        <RowDefinition Height="*" />
                                        <RowDefinition Height="15" />
                                    </Grid.RowDefinitions>
                                    <ContentPresenter Grid.Row="1" Grid.RowSpan="2" Margin="7"/>
                                    <Rectangle x:Name="HeaderBackground" Height="25" Fill="{DynamicResource WindowBackgroundColorBrush}" VerticalAlignment="Top" Grid.Row="0"/>
                                    <StackPanel Orientation="Horizontal" HorizontalAlignment="Right" VerticalAlignment="Top" WindowChrome.IsHitTestVisibleInChrome="True" Grid.Row="0">
                                        <Button Command="{Binding Source={x:Static SystemCommands.MinimizeWindowCommand}}" ToolTip="minimize" Style="{StaticResource WindowButtonStyle}">
                                            <Button.Content>
                                                <Grid Width="30" Height="25" RenderTransform="1,0,0,1,0,1">
                                                    <Path Data="M0,6 L8,6 Z" Width="8" Height="7" VerticalAlignment="Center" HorizontalAlignment="Center"
                                                        Stroke="{Binding Foreground, RelativeSource={RelativeSource Mode=FindAncestor, AncestorType=Button}}" StrokeThickness="2"  />
                                                </Grid>
                                            </Button.Content>
                                        </Button>
                                        <Grid Margin="1,0,1,0">
                                            <Button x:Name="Restore" Command="{Binding Source={x:Static SystemCommands.RestoreWindowCommand}}" ToolTip="restore" Visibility="Collapsed" Style="{StaticResource WindowButtonStyle}">
                                                <Button.Content>
                                                    <Grid Width="30" Height="25" UseLayoutRounding="True" RenderTransform="1,0,0,1,.5,.5">
                                                        <Path Data="M2,0 L8,0 L8,6 M0,3 L6,3 M0,2 L6,2 L6,8 L0,8 Z" Width="8" Height="8" VerticalAlignment="Center" HorizontalAlignment="Center"
                                                            Stroke="{Binding Foreground, RelativeSource={RelativeSource Mode=FindAncestor, AncestorType=Button}}" StrokeThickness="1"  />
                                                    </Grid>
                                                </Button.Content>
                                            </Button>
                                            <Button x:Name="Maximize" Command="{Binding Source={x:Static SystemCommands.MaximizeWindowCommand}}" ToolTip="maximize" Style="{StaticResource WindowButtonStyle}">
                                                <Button.Content>
                                                    <Grid Width="31" Height="25">
                                                        <Path Data="M0,1 L9,1 L9,8 L0,8 Z" Width="9" Height="8" VerticalAlignment="Center" HorizontalAlignment="Center"
                                                            Stroke="{Binding Foreground, RelativeSource={RelativeSource Mode=FindAncestor, AncestorType=Button}}" StrokeThickness="2"  />
                                                    </Grid>
                                                </Button.Content>
                                            </Button>
                                        </Grid>
                                        <Button Command="{Binding Source={x:Static SystemCommands.CloseWindowCommand}}" ToolTip="close"  Style="{StaticResource WindowButtonStyle}">
                                            <Button.Content>
                                                <Grid Width="30" Height="25" RenderTransform="1,0,0,1,0,1">
                                                    <Path Data="M0,0 L8,7 M8,0 L0,7 Z" Width="8" Height="7" VerticalAlignment="Center" HorizontalAlignment="Center"
                                                        Stroke="{Binding Foreground, RelativeSource={RelativeSource Mode=FindAncestor, AncestorType=Button}}" StrokeThickness="1.5"  />
                                                </Grid>
                                            </Button.Content>
                                        </Button>
                                    </StackPanel>
                                    <TextBlock x:Name="WindowTitleTextBlock" Grid.Row="0" Text="{TemplateBinding Title}" HorizontalAlignment="Left" TextTrimming="CharacterEllipsis" VerticalAlignment="Center"  Margin="8 -1 0 0"  FontSize="16"  Foreground="{TemplateBinding Foreground}"/>
                                    <Grid Grid.Row="2">
                                        <Path x:Name="ResizeGrip" Visibility="Collapsed" Width="12" Height="12" Margin="1" HorizontalAlignment="Right"
                                        Stroke="{StaticResource BlueColorBrush}" StrokeThickness="1" Stretch="None" Data="F1 M1,10 L3,10 M5,10 L7,10 M9,10 L11,10 M2,9 L2,11 M6,9 L6,11 M10,9 L10,11 M5,6 L7,6 M9,6 L11,6 M6,5 L6,7 M10,5 L10,7 M9,2 L11,2 M10,1 L10,3" />
                                    </Grid>
                                </Grid>
                            </AdornerDecorator>
                        </Border>
                        <Border BorderBrush="{StaticResource BlueColorBrush}" BorderThickness="1" Visibility="{Binding IsActive, RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type Window}}, Converter={StaticResource bool2VisibilityConverter}}" />
                    </Grid>
                </Border>
                <ControlTemplate.Triggers>
                    <Trigger Property="WindowState" Value="Maximized">
                        <Setter TargetName="Maximize" Property="Visibility" Value="Collapsed" />
                        <Setter TargetName="Restore" Property="Visibility" Value="Visible" />
                        <Setter TargetName="LayoutRoot" Property="Margin" Value="7" />
                    </Trigger>
                    <Trigger Property="WindowState" Value="Normal">
                        <Setter TargetName="Maximize" Property="Visibility" Value="Visible" />
                        <Setter TargetName="Restore" Property="Visibility" Value="Collapsed" />
                    </Trigger>
                    <MultiTrigger>
                        <MultiTrigger.Conditions>
                            <Condition Property="ResizeMode" Value="CanResizeWithGrip" />
                            <Condition Property="WindowState" Value="Normal" />
                        </MultiTrigger.Conditions>
                        <Setter TargetName="ResizeGrip" Property="Visibility" Value="Visible" />
                    </MultiTrigger>
                </ControlTemplate.Triggers>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
    <Setter Property="WindowChrome.WindowChrome">
        <Setter.Value>
            <WindowChrome CornerRadius="0" GlassFrameThickness="1" UseAeroCaptionButtons="False" />
        </Setter.Value>
    </Setter>
</Style>
ответил Kapitán Mlíko 20 MarpmWed, 20 Mar 2013 13:51:30 +04002013-03-20T13:51:30+04:0001 2013, 13:51:30
0

Я бы порекомендовал современный интерфейс для WPF .

У него очень активный сопровождающий, он потрясающий и бесплатный!

Современный пользовательский интерфейс для WPF (снимок экрана примера приложения

В настоящее время я портирую некоторые проекты на MUI, первое (а пока что второе) впечатление просто удивительно!

Чтобы увидеть MUI в действии, вы можете загрузить XAML Spy , основанный на MUI.

РЕДАКТИРОВАТЬ: использовать Modern UI для WPF несколько месяцев, и мне это нравится!

ответил Joel 22 PMpMon, 22 Apr 2013 14:56:40 +040056Monday 2013, 14:56:40
0

Исходя из ответа Виктора Ла Круа с указанным выше источником, я изменил бы его, чтобы использовать следующее:

Пример шрифта Marlett

Лучше использовать шрифт Marlett вместо точек Path Data для кнопок «Свернуть», «Восстановить /развернуть» и «Закрыть».

<StackPanel Orientation="Horizontal" HorizontalAlignment="Right" VerticalAlignment="Top" WindowChrome.IsHitTestVisibleInChrome="True" Grid.Row="0">
<Button Command="{Binding Source={x:Static SystemCommands.MinimizeWindowCommand}}" ToolTip="minimize" Style="{StaticResource WindowButtonStyle}">
    <Button.Content>
        <Grid Width="30" Height="25">
            <TextBlock Text="0" FontFamily="Marlett" FontSize="14" VerticalAlignment="Center" HorizontalAlignment="Center" Padding="3.5,0,0,3" />
        </Grid>
    </Button.Content>
</Button>
<Grid Margin="1,0,1,0">
    <Button x:Name="Restore" Command="{Binding Source={x:Static SystemCommands.RestoreWindowCommand}}" ToolTip="restore" Visibility="Collapsed" Style="{StaticResource WindowButtonStyle}">
        <Button.Content>
            <Grid Width="30" Height="25" UseLayoutRounding="True">
                <TextBlock Text="2" FontFamily="Marlett" FontSize="14" VerticalAlignment="Center" HorizontalAlignment="Center" Padding="2,0,0,1" />
            </Grid>
        </Button.Content>
    </Button>
    <Button x:Name="Maximize" Command="{Binding Source={x:Static SystemCommands.MaximizeWindowCommand}}" ToolTip="maximize" Style="{StaticResource WindowButtonStyle}">
        <Button.Content>
            <Grid Width="31" Height="25">
                <TextBlock Text="1" FontFamily="Marlett" FontSize="14" VerticalAlignment="Center" HorizontalAlignment="Center" Padding="2,0,0,1" />
            </Grid>
        </Button.Content>
    </Button>
</Grid>
<Button Command="{Binding Source={x:Static SystemCommands.CloseWindowCommand}}" ToolTip="close"  Style="{StaticResource WindowButtonStyle}">
    <Button.Content>
        <Grid Width="30" Height="25">
            <TextBlock Text="r" FontFamily="Marlett" FontSize="14" VerticalAlignment="Center" HorizontalAlignment="Center" Padding="0,0,0,1" />
        </Grid>
    </Button.Content>
</Button>

ответил FlyingMaverick 15 PMpMon, 15 Apr 2013 17:58:38 +040058Monday 2013, 17:58:38
0

Если вы готовы платить, я настоятельно рекомендую вам компоненты Telerik для WPF . Они предлагают великолепные стили /темы , и в них есть определенные темы как для Office 2013, так и для Windows 8 (РЕДАКТИРОВАТЬ: а также тематический стиль Visual Studio 2013). Однако на самом деле, предлагая гораздо больше, чем просто стили, вы получите целый набор действительно полезных элементов управления.

Вот как это выглядит в действии (скриншоты взяты из примеров Telerik):

Образец панели мониторинга Telerik

Образец панели мониторинга Telerik CRM

Здесь приведены ссылки на пример панели управления telerik для руководителей (первый снимок экрана) и здесь. для информационной панели CRM (второй снимок экрана).

Они предлагают 30-дневную пробную версию, просто сделайте это!

ответил Joel 16 TueEurope/Moscow2014-12-16T12:44:01+03:00Europe/Moscow12bEurope/MoscowTue, 16 Dec 2014 12:44:01 +0300 2014, 12:44:01
0

Взгляните на это окно в стиле метрополитена WPF с дополнительными светящимися границами .

Это автономное приложение, не использующее никаких других библиотек, кроме Microsoft.Windows.Shell (входит в комплект), для создания окон в стиле metro с необязательными светящимися границами.

Поддерживает Windows вплоть до XP (.NET4).

ответил Laila 29 SatEurope/Moscow2018-12-29T21:22:17+03:00Europe/Moscow12bEurope/MoscowSat, 29 Dec 2018 21:22:17 +0300 2018, 21:22:17

Похожие вопросы

Популярные теги

security × 330linux × 316macos × 2827 × 268performance × 244command-line × 241sql-server × 235joomla-3.x × 222java × 189c++ × 186windows × 180cisco × 168bash × 158c# × 142gmail × 139arduino-uno × 139javascript × 134ssh × 133seo × 132mysql × 132