Dot-Net

讓 WPF 應用程序看起來像 Metro 風格，即使在 Windows 7 中？（視窗 Chrome / 主題 / …

  • November 27, 2012

我喜歡新 Office 套件和 Visual Studio 上的視窗鑲邊：

在此處輸入圖像描述

當然，我仍在為 Windows 7 開發應用程序，但我想知道是否有一種快速簡便的方法（閱讀：WPF 樣式或 Windows 庫）來模擬這種樣式。我過去做過一些視窗鍍鉻樣式，但是讓它看起來和表現得恰到好處真的很棘手。

有誰知道是否有現有的模板或庫可以為我的 WPF 應用程序添加“現代 UI”外觀和感覺？

我最終選擇的解決方案是MahApps.Metro（github），（在現在在兩個軟體上使用它之後）我認為它是一個出色的 UI 工具包*（感謝Oliver Vogel的建議）*。

視窗樣式

它只需極少的工作即可為應用程序設置皮膚，並且對標準 Windows 8 控制項進行了改編。它非常堅固。

文本框水印

Nuget 上有一個版本：

您可以使用 GUI 通過 Nuget 安裝 MahApps.Metro（右鍵點擊您的項目，管理 Nuget 引用，搜尋“MahApps.Metro”）或通過控制台：

PM> 安裝包 MahApps.Metro

它也是免費的——即使用於商業用途。

2013 年 10 月 29 日更新：

我發現 MahApps.Metro 的 Github 版本包含目前 nuget 版本中不可用的控制項和样式，包括：

數據網格：

在此處輸入圖像描述

清潔視窗：

在此處輸入圖像描述

飛出：

在此處輸入圖像描述

瓷磚：

在此處輸入圖像描述

github 儲存庫非常活躍，有相當多的使用者貢獻。我建議檢查一下。

我所做的是創建自己的視窗和样式。因為我喜歡控制一切，我不希望一些外部庫只是為了使用它的 Window。我在 GitHub 上查看了已經提到的 MahApps.Metro

MahApps

以及GitHub 上非常漂亮的 Modern UI。（僅限 .NET4.5）

現代使用者界面

還有一個是極樂世界，但我真的沒有嘗試過這個。

極樂世界

當我看到它是如何完成的時，我所做的風格真的很簡單。現在我有了自己的 Window，我可以用 xaml 做任何我想做的事情……對我來說，這是我自己做的主要原因。我也為你做了一個 :) 我可能應該說，如果不探索Modern UI，我將無法做到這一點，這是很大的幫助。我試圖讓它看起來像 VS2012 Window。它看起來像這樣。

我的視窗

這是程式碼（請注意它的目標是 .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>

引用自：https://stackoverflow.com/questions/13592326

相關問答

Dot-Net

Windows 7 和 Windows 8 中的 ListBox 邊距不同

  • April 1, 2013
檢視問答
Dot-Net

.net 4.5 下的列表/組合框背景和選定顏色

  • January 30, 2015
檢視問答
Dot-Net

帶有彈出視窗的 WPF 慣用手

  • August 7, 2013
檢視問答
Dot-Net

新的 Windows 應用程序 - 什麼語言？

  • July 8, 2011
檢視問答
Dot-Net

如何使 WPF 視窗在工作列上閃爍？

  • February 25, 2011
檢視問答
Dot-Net

System.Windows.Input.Key 列舉中沒有 Equals 鍵的條目？

  • June 1, 2022
檢視問答