原文链接
https://white-night.club/index.php/2023/05/22/appdev5/
2023年5月22日
将应用背景设置为自定义的图片
前言
图片和应用界面色调的选择
这一块仁者见仁，智者见智。但最好从用户交互的角度去仔细思考颜色的搭配。设想一下，你的用户打开你的应用，发现蓝色背景红色字，标题栏还是绿色。我要是用户我就得高血压。
如果你选择深色的背景，那么应用主题、导航栏颜色、标题栏颜色最好选择偏白色的，反之亦然。我个人的其中一个颜色搭配如下:
- 二次元背景，大部分背景色为黑色。
- 应用标题栏选择#ffffffff。
- 导航栏背景色选择#ceffffff。
- 页面框架颜色选择#00000000。
- 应用的主题设置为light。
实现效果如图，主要是这么搭配，你自定义的标题栏几乎能和导航栏融为一体。我个人觉得还是能凑合看的。
还有就是图片要素不要选太杂的。特别是当你想把页面框架的背景设置图中这种半透明的效果时。我自己试过了，图片选那种要素太多的会导致用户看不清你的界面。
全局背景设置
MainWindow.xaml
显然，你想让用户从打开应用到关闭应用，都能加载出自定义的背景。那么肯定是在你的窗口文件MainWindow.xaml中操作。
我直接把代码放上来。这段代码中包括：
- 自定义的图片，及其存放的相对路径
- 导航栏
- 页面框架
别忘了修改图片存放的路径，已经在代码中高亮标记了。
//MainWindow.xaml
<Grid><Grid.Background><ImageBrush x:Name="ApplicationBackgroundImage" ImageSource="Assets/Background/Default.jpg" Stretch="UniformToFill"/></Grid.Background><Grid Background="#ffffffff" x:Name="AppTitleBar" Grid.Column="0" VerticalAlignment="Top"><TextBlock x:Name="AppTitleTextBlock"TextWrapping="NoWrap" Text="LoginMenuTemplate"FontStretch="Expanded"VerticalAlignment="Center"Margin="10,10,1,2"/></Grid><Grid Margin="0,29.5,0,0"><NavigationView x:Name="navigationView" Background="#ceffffff" SelectionChanged="LoadPages" IsBackButtonVisible="Collapsed" IsSettingsVisible="False" ><NavigationView.MenuItems><NavigationViewItem Icon="Home" Content="主页" Tag="Home"/> </NavigationView.MenuItems><NavigationView.FooterMenuItems><NavigationViewItem Icon="Setting" Content="设置" Tag="Settings" /></NavigationView.FooterMenuItems><Frame Background="#00000000" x:Name="pagesFrame"></Frame></NavigationView></Grid></Grid>实现的效果可以自己试下，也可以自行尝试各部件之间的颜色搭配。
自定义背景
更改ImageSource
刚刚你已经设置了应用的背景，接下来就是实现让用户能自定义背景的操作了。
个人建议，把自定义背景的操作放在你应用的设置界面Settings.xaml里。
这里直接放代码。原理就是通过文件选择器选择某张图片，通过流转换成位图，最后再把MainWindow.xaml中背景图片的源设置为该位图。具体是通过buttom，还是checkbox啥的去触发，各位就看自己喜好了。
private async void changeAppBackground(object sender, RoutedEventArgs e){var filePicker = new FileOpenPicker();var hwnd = WinRT.Interop.WindowNative.GetWindowHandle(MainWindow.current);WinRT.Interop.InitializeWithWindow.Initialize(filePicker, hwnd);filePicker.FileTypeFilter.Add("*");var file = await filePicker.PickSingleFileAsync();if (file != null){BitmapImage bitmapImage = new BitmapImage();FileRandomAccessStream stream = (FileRandomAccessStream)await file.OpenAsync(FileAccessMode.Read);bitmapImage.SetSource(stream);MainWindow.backgroundImage.ImageSource = bitmapImage;}}别忘了在MainWindow中添加backgroundImage的定义以及对应的初始化。代码如下
public MainWindow(){this.InitializeComponent();current = this;backgroundImage = ApplicationBackgroundImage;}public static Microsoft.UI.Xaml.Media.ImageBrush backgroundImage;当然有个问题，每次用户重新打开应用，背景图片都会被更改回默认设置的图片。那么如何解决这个问题捏？等我碰到这个问题的时候再说😋。
