UWP开发01之Windows UI2.x

概要

官方地址:https://docs.microsoft.com/zh-cn/windows/apps/winui/winui2/

安装

NuGet包管理器中添加Microsoft.UI.Xaml

NuGet 程序包

NuGet 包

将 Windows UI (WinUI) 主题资源添加到 App.xaml 资源。 可以通过两种方式来这样做,具体取决于你是否有其他应用程序资源。

a. 如果没有其他应用程序资源,

请将 <XamlControlsResources xmlns="using:Microsoft.UI.Xaml.Controls"/> 添加到 Application.Resources

XAML

1
2
3
4
5
<Application>
<Application.Resources>
<XamlControlsResources xmlns="using:Microsoft.UI.Xaml.Controls" />
</Application.Resources>
</Application>

b. 否则,如果有多个应用程序资源集,

请将 <XamlControlsResources xmlns="using:Microsoft.UI.Xaml.Controls"/> 添加到 Application.Resources.MergedDictionaries

XAML

1
2
3
4
5
6
7
8
9
<Application>
<Application.Resources>
<ResourceDictionary>
<ResourceDictionary.MergedDictionaries>
<XamlControlsResources xmlns="using:Microsoft.UI.Xaml.Controls" />
</ResourceDictionary.MergedDictionaries>
</ResourceDictionary>
</Application.Resources>
</Application>

将对工具包的引用添加到 XAML 页和代码隐藏页。

  • 在 XAML 页的页面顶部添加引用

    XAML

    1
    xmlns:muxc="using:Microsoft.UI.Xaml.Controls"
  • 在代码中(如果想要使用类型名称而不对其进行限定),可以添加 using 指令。

    C#

    1
    using MUXC = Microsoft.UI.Xaml.Controls;

窗口背景毛玻璃效果

页面文件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<Page
x:Class="App1.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:local="using:App1"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:muxc="using:Microsoft.UI.Xaml.Controls"
mc:Ignorable="d">

<Grid
x:Name="GlassHost"
HorizontalAlignment="Stretch"
VerticalAlignment="Stretch">

</Grid>
</Page>

点击F7进入对应的代码文件

设置元素背景毛玻璃效果的方法

1
2
3
4
5
6
7
8
9
10
11
12
private void initializeFrostedGlass(UIElement glassHost)
{
Visual hostVisual = ElementCompositionPreview.GetElementVisual(glassHost);
Compositor compositor = hostVisual.Compositor;
var backdropBrush = compositor.CreateHostBackdropBrush();
var glassVisual = compositor.CreateSpriteVisual();
glassVisual.Brush = backdropBrush;
ElementCompositionPreview.SetElementChildVisual(glassHost, glassVisual);
var bindSizeAnimation = compositor.CreateExpressionAnimation("hostVisual.Size");
bindSizeAnimation.SetReferenceParameter("hostVisual", hostVisual);
glassVisual.StartAnimation("Size", bindSizeAnimation);
}

调用

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
public MainPage()
{
this.InitializeComponent();
var view = ApplicationView.GetForCurrentView();
view.TitleBar.BackgroundColor = Colors.Transparent;
//将标题栏的三个键背景设为透明
view.TitleBar.ButtonBackgroundColor = Colors.Transparent;
//失去焦点时,将三个键背景设为透明
view.TitleBar.ButtonInactiveBackgroundColor = Colors.Transparent;
view.TitleBar.ButtonInactiveForegroundColor = Colors.Black;
//窗口的可视部分扩展到标题栏上
CoreApplicationView coreappview = CoreApplication.GetCurrentView();
coreappview.TitleBar.ExtendViewIntoTitleBar = true;
//主题区域背景毛玻璃效果
initializeFrostedGlass(GlassHost);
}