原文链接
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的定义以及对应的初始化。代码如下文章来源:https://www.toymoban.com/news/detail-454964.html
public MainWindow()
{
this.InitializeComponent();
current = this;
backgroundImage = ApplicationBackgroundImage;
}
public static Microsoft.UI.Xaml.Media.ImageBrush backgroundImage;
当然有个问题,每次用户重新打开应用,背景图片都会被更改回默认设置的图片。那么如何解决这个问题捏?等我碰到这个问题的时候再说😋。文章来源地址https://www.toymoban.com/news/detail-454964.html
到了这里,关于WinUI3-自定义应用背景的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!