UWP仿网易云音乐之1-TitleBar

首先,创建一个UWP的项目。我使用的是Visual Studio 2017 社区版。

如图,我们将项目命名为UWP-Music。

 

现在我们先标题栏的配色调整与网易云音乐一致。

我们先分析一下标题栏,默认标题栏主要有三部分,应用名称、空白区域、按钮(最小化、最大化,关闭)。

分析行为,可以得到:

1.标题栏激活状态,即窗体获得焦点(包括按钮激活)

2.标题栏未激活状态,即窗体失去焦点(包括按钮未激活)

3.按钮鼠标滑过状态

4.按钮按下状态

分析配色:

1.标题栏激活时,空白和按钮背景是一种偏暗的红色(背景色),文字和按钮的图标是白色(前景色)

2.按钮鼠标滑过时,是一种明亮的红色;按钮按下时,是一种很浅的红色

3.窗体失焦时,空白和按钮背景是一种带灰白的红色(背景色),文字和按钮图标是白色(前景色)

我们现在明确了相应行下颜色的设置,为了更准确模仿网易云音乐的本色,我们用最简单的方法:截图加取色。用打印屏幕或者截图工具截取网易云音乐各种状态下的颜色,保存文件,用画图打开,用取色器获取颜色。

我取得的色值如下:

激活背景色(包括按钮): new Color() { A = 255, R = 189, G = 47, B = 46 }

激活前景色(包括按钮):Colors.White

按钮鼠标滑过背景色:new Color() { A = 255, R = 230, G = 17, B = 35 }

按钮鼠标按下背景色:new Color() { A = 255, R = 243, G = 112, B = 120 }

未激活背景色(包括按钮):new Color() { A = 255, R = 181, G = 113, B = 114 }

 

代码中,我们通过

ApplicationView.GetForCurrentView().TitleBar

  获得当前的标题栏

把自定义颜色统一放在一个类中,代码如下

    public class CustomColors
    {
        public static Color TitleBackGroundColor
        {
            get
            {
                return new Color() { A = 255, R = 189, G = 47, B = 46 };
            }
        }

        public static Color TitleInactiveColor
        {
            get
            {
                return new Color() { A = 255, R = 181, G = 113, B = 114 };
            }
        }

        public static Color TitleHoverBackgroundColor
        {
            get
            {
                return new Color() { A = 255, R = 230, G = 17, B = 35 };
            }
        }

        public static Color TitlePressedBackgroundColor
        {
            get
            {
                return new Color() { A = 255, R = 243, G = 112, B = 120 };
            }
        }
    }

  颜色设置代码:

            var appTitleBar = ApplicationView.GetForCurrentView().TitleBar;
            appTitleBar.BackgroundColor = CustomColors.TitleBackGroundColor;
            appTitleBar.ButtonBackgroundColor = CustomColors.TitleBackGroundColor;

            appTitleBar.InactiveBackgroundColor = CustomColors.TitleInactiveColor;
            appTitleBar.ButtonInactiveBackgroundColor = CustomColors.TitleInactiveColor;
            appTitleBar.InactiveForegroundColor = Colors.White;
            appTitleBar.ButtonInactiveForegroundColor = Colors.White;

            appTitleBar.ButtonHoverBackgroundColor = CustomColors.TitleHoverBackgroundColor;
            appTitleBar.ButtonHoverForegroundColor = Colors.White;

            appTitleBar.ButtonPressedBackgroundColor = CustomColors.TitlePressedBackgroundColor;
            appTitleBar.ButtonPressedForegroundColor = Colors.White;

  效果如下:(上传后压缩得好惨,太难看了,还是真实的好看)

posted on 2017-04-05 09:50  阿呜的边城  阅读(288)  评论(0编辑  收藏  举报

导航