WinUI3-自定义应用背景

原文链接

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;

当然有个问题，每次用户重新打开应用，背景图片都会被更改回默认设置的图片。那么如何解决这个问题捏？等我碰到这个问题的时候再说😋。