1. 程式人生 > >【Telerik UI for ASP.NET教程】如何在WPF應用程式中獲得流暢的設計主題

【Telerik UI for ASP.NET教程】如何在WPF應用程式中獲得流暢的設計主題

下載Telerik UI for WPF最新版本

【Telerik UI for ASP.NET教程】如何在WPF應用程式中獲得流暢的設計主題

瞭解如何使用Telerik UI中的Fluent主題為WPF輕鬆設定WPF應用程式的主題。新增透明度,丙烯酸效果,陰影,動畫等,以使用最新的UX和UI趨勢實現應用程式的現代化。

在WPF中使用Fluent Design

現在可以輕鬆地修改使用Telerik UI for WPF構建的應用程式,應用Fluent設計系統原則。除了主題外,還可以獲得out-of-the-box的透明度,陰影,滑鼠互動動畫,以及最後但並非最不重要的Window視窗的丙烯酸效果甚至更多。

【Telerik UI for ASP.NET教程】如何在WPF應用程式中獲得流暢的設計主題

淺色和深色預定義調色盤

我們只是說我們不能停在那裡並且做到這一點,你可以選擇兩種顏色變化 - 淺色和深色 - 就像你可以使用套件中具有多個預設的其他主題一樣。使用單行程式碼,您可以將Progress Fluent主題的預設外觀從亮變為暗,從而使兩者之間的變化非常簡單:

FluentPalette.LoadPreset(FluentPalette.ColorVariation.Dark);
【Telerik UI for ASP.NET教程】如何在WPF應用程式中獲得流暢的設計主題

更進一步根據Windows強調顏色自定義預設調色盤顏色:

【Telerik UI for ASP.NET教程】如何在WPF應用程式中獲得流暢的設計主題

【Telerik UI for ASP.NET教程】如何在WPF應用程式中獲得流暢的設計主題

【Telerik UI for ASP.NET教程】如何在WPF應用程式中獲得流暢的設計主題

不同的細節

深入瞭解使這個主題如此不同的細節:

控制元件模板內的 FluentControl,它有兩個內建效果:

Ripple:

【Telerik UI for ASP.NET教程】如何在WPF應用程式中獲得流暢的設計主題

Glow:

【Telerik UI for ASP.NET教程】如何在WPF應用程式中獲得流暢的設計主題

背景色調為黑色:

Ripple:

【Telerik UI for ASP.NET教程】如何在WPF應用程式中獲得流暢的設計主題

Glow:

【Telerik UI for ASP.NET教程】如何在WPF應用程式中獲得流暢的設計主題

Glyph:我們的Fluent主題受益的新FrameworkElement。我們用它來視覺化字型字形。它增加了載入時間,提供out-of-the-box的設計時支援,尊重FlowDirection並繼承其父級的Foreground。

Acrylic effect: 使用ThemeEffectsHelper.IsAcrylic附加屬性將特定半透明效果應用於Window,Popup和window-derivate控制元件。目前僅在Windows 10上支援它。在任何其他作業系統中,它只會產生透明的視窗/彈出視窗。:(但是,您也可以通過在MainWindow的靜態建構函式中設定ThemeEffectsHelper.IsAcrylicEnabled來禁用它。

The MaterialAssist static class:來自Material主題,它公開了 MouseOverBrush, PressedBrush, CheckedBrush等屬性,可用於直接修改控制元件的外觀而無需修改其控制元件模板。

Transparency:這是一種隱藏的功能。分享一些很酷的東西!:)遵循Windows 10背後的概念,預設情況下我們使用半透明背景(PrimaryBrush)和前景(InputOpacity)進行輸入,並在MouseOver和Focused上實現。

【Telerik UI for ASP.NET教程】如何在WPF應用程式中獲得流暢的設計主題

如果您不希望它們與應用程式背景混合,您可以通過設定以下內容輕鬆更改:

FluentPalette.Palette.InputOpacity= 1d;
FluentPalette.Palette.PrimaryColor= Colors.White;
結果將是:

【Telerik UI for ASP.NET教程】如何在WPF應用程式中獲得流暢的設計主題

Support of custom CornerRadius:如果您的應用程式需要圓角設計,您可以通過設定一行來將CornerRadius設定為大多數控制元件:

FluentPalette.Palette.CornerRadius = new CornerRadius(3);
支援自定義FocusThickness:如果您想更改Focus上顯示的預設2px邊框,您可以通過設定來修改其厚度:

FluentPalette.Palette.FocusThickness= new Thickness(1);
如何將Fluent主題新增到WPF應用程式中
使用隱式樣式:

1.開啟您的申請

2.在設計檢視中單擊Telerik控制元件

【Telerik UI for ASP.NET教程】如何在WPF應用程式中獲得流暢的設計主題

3.接下來,單擊Theme元素並從可用主題中選擇Fluent:

【Telerik UI for ASP.NET教程】如何在WPF應用程式中獲得流暢的設計主題

4.按確定即可設定!

如果您使用的是StyleManager,則需要在後面的程式碼中設定一行:

public MainWindow()
{
StyleManager.ApplicationTheme = new FluentTheme();
InitializeComponent();
}