WinUI3-自定义应用背景

这篇具有很好参考价值的文章主要介绍了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;

当然有个问题,每次用户重新打开应用,背景图片都会被更改回默认设置的图片。那么如何解决这个问题捏?等我碰到这个问题的时候再说😋。文章来源地址https://www.toymoban.com/news/detail-454964.html

到了这里,关于WinUI3-自定义应用背景的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • VsCode美化 - VsCode自定义 - VsCode自定义背景图

    作为一个二刺螈,VsCode用久了,总觉得少了些什么。是啊,高效的代码生产工具中怎么能没有老婆呢? 那就安装一个VsCode插件把老婆添加到VsCode中吧! 安装 方法一 直接在VsCode的插件中搜索 background (或者 Ctrl + P - ext install background - Enter ),点击第一个安装即可。 方法二

    2024年02月13日
    浏览(37)
  • Android shape定义背景带阴影

    原理其实就是一层一层往上盖,padding就是里面的小抽屉比外面的大抽屉从left,right,top,bottom上分别小多少像素 多盖几层,也就出来阴影了,越往上面这层颜色也就越深,也就是颜色从0a变到2d,最后一个shape也就是最上面这层的颜色,这里用gradient做的从上到下的渐变色

    2024年02月11日
    浏览(40)
  • IntelliJ IDEA 常用设置 主题颜色模式、字体、样式、背景自定义颜色及其背景图片(图文步骤)

    这里已 IntelliJ IDEA 2018.2.8 版本为例(本人已将主题设置成了暗色主题): 点击 file﹥setting  打开设置 点击 Editor﹥Color Scheme﹥Color Scheme Font 主要的操作有主代码字体,字体字号大小,字体行间距,非主代码字体   主要的操作有颜色,斜体,加粗,背景,下划线,删除线,边框

    2023年04月16日
    浏览(51)
  • Element-UI表格自定义背景颜色

    笔记 1.如图所示 2. 自定义样式         此处自定义设置时要加 /deep/、important ,否则不生效; 清除鼠标经过时的背景颜色: /deep/.el-table tbody tr:hovertd{     background-color: unset !important; } * 如果未设置!important该效果不生效 自定义样式时使用f12查看元素,找到对应元素的

    2024年02月15日
    浏览(46)
  • springboot 设置自定义启动banner背景图 教程

    Spring Boot中的banner是在应用程序启动时显示的一个ASCII艺术字符或文本。它被用来给用户展示一些关于应用程序的信息,例如名称、版本号或者公司标志等。 使用Spring Boot的默认设置,如果项目中有一个名为“banner.txt”的文件放置在classpath下的“/META-INF”目录中,那么这个文

    2024年02月12日
    浏览(31)
  • WinUI 3.0 安装

    注1:此文写于2022.12.25. 仅对WinUI 3.0的安装做详细描述。关于WinUI 3.0的概念,以及其与UWP,WPF,WinForms对比,请参见其他博客,如:WinUI 3 试玩报告。 注2:微软自己也有一个WinUI 安装的指南:关于WinUI 3的安装与使用,微软官方 。 目录 前言:WinUI 3.0的简单描述 一、WinUI 3.0 在

    2024年02月03日
    浏览(27)
  • wpf RadioButton自定义样式 圆角/直角变化 背景色渐变

    样式部分 xam  根据  CommandParameter 的value不同,背景圆角的方向不同 效果如    

    2024年02月16日
    浏览(36)
  • Qt之自定义QStringListModel设置背景色和前景色

    QStringListModel里只实现了Qt::EditRole和Qt::DisplayRole,不能直接设置背景色和前景色,所以我们要继承QStringListModel,重写其中的data和setData方法,使其支持Qt::ForegroundRole和Qt::BackgroundRole。 QHStringListModel.h

    2024年02月08日
    浏览(45)
  • vant的NavBar导航栏可以自定义背景图片吗

     可以的,Vant的NavBar导航栏提供了一个 background-image 属性,可以设置自定义背景图片。例  如: 其中, background-image 属性的值为要设置的背景图片的url地址。注意,如果要使用本地图片,可以使用相对路径或者绝对路径。 2.vant的van-tabbar可以自定义背景图片吗? 其中, backgr

    2024年02月10日
    浏览(37)
  • Android sweet-alert-dialog 自定义按钮背景颜色

    sweet-alert-dialog这个怎么在项目中引入,我这里就不说了 大家可以看一下GitHub:GitHub - pedant/sweet-alert-dialog: SweetAlert for Android, a beautiful and clever alert dialog 我这里直接说明如何改弹窗的背景色 1.在你的styles中添加 按钮 样式:  2.添加drawable文件blue_button_background 在blue_button_backgrou

    2024年04月16日
    浏览(43)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包