NanUI文档目录。我们得透过个别栽方法获得不同之标题栏对象。

NanUI文档目录

UWP中落实由定义标题栏

  • NanUI简介
  • 开头利用NanUI
  • 包裹并下内嵌式的HTML/CSS/JS资源
  • 运用网页来设计总体窗口
  • 什么兑现C#和Javascript的并行通信
  • 何以处理NanUI中之下载过程 – DonwloadHandler的使(待更新。。。)
  • 安处理NanUI中之弹窗过程 – LifeSpanHandler的下(待更新。。。)
  • 什么样控制Javascript对话框 – JsDialogHandler的使用(待更新。。。)
  • 自打定义资源处理程序 (待更新。。。)

0x00 起因

当UWP开发被,有时候我们盼望实现由定义标题栏,例如在标题栏中加入搜索框、按钮之类的控件。搜了产资料竟然以一个日文网站找到了千篇一律篇介绍者主题的文章:

http://www.atmarkit.co.jp/ait/articles/1510/14/news022.html

看了下本想在翻译过来分享,但小地方说之无是特地强烈,所以自己实现了生,结合自己的认知总结了马上篇稿子。

用网页来设计总体窗口

创NanUI应用之章程本文不再阐述,具体方法请参见文章目录里之系文章。本文将介绍NanUI的主导力量,用相同摆设网页铺满所有窗体区域,并以叙如何用CSS和HTML来促成对窗体的拖动、最大化、最小化、关闭等操作。

图片 1

如图所示的界面,整个窗体的样式且是由于HTML和CSS等前端技术来表现的。具体的HTML/CSS/JS代码本文不详细描述,因为这些同NanUI的干不殊,根据实际项目之需要,您可以吧您的软件界面设计出更全的意义。

当示例界面中,我们用根本介绍系统命令菜单部分的无比小化、最大化和关按钮,以及界面左侧红色的可用作拖动窗体的纵向标题栏的落实。

为此前端技术来分析,左侧纵向标题栏其精神是平等长条宽度固定,高度100%的DIV;命令区域外之极端小化、最大化和关按钮其本来面目是三只SPAN标签内嵌套了三独不等之FontAwsome的图标。下面的内容以介绍其是怎么贯彻对承载窗体状态改变之。

0x01 UWP中的标题栏

一个平淡无奇的UWP窗口如下图所示:

 图片 2

俺们好透过个别栽方法获得不同之标题栏对象,不同目标操作侧重点不同。

var coreTitleBar = Windows.ApplicationModel.Core.CoreApplication.GetCurrentView().TitleBar;

这种艺术取得的是一个CoreApplicationViewTitleBar对象,主要决定标题栏扩展等息息相关功能。后面的coreTitleBar指的就是是者目标。

var appTitleBar = Windows.UI.ViewManagement.ApplicationView.GetForCurrentView().TitleBar;

这种方法得到之凡一个ApplicationViewTitleBar对象,主要用于控制标题栏背景色,最小化、最大化、关闭等按钮的水彩、背景色等。后面的appTitleBar指的就算是以此目标。

咱们于定义标题栏时立刻点儿单对象还见面用到。

何以通过拖拽HTML元素来运动窗体位置

如您需贯彻类似示例中拖动左侧红色区域标题栏来转窗体位置的功能,那么当拖欠因素对应的CSS中只有需要点名该因素所在区域的-webkit-app-region属于性值为drag即可兑现:

.some-class{
    -webkit-app-region:drag;
}

指定此体制后,只要鼠标指针在该体作用的区域外执行拖拽操作,那么NanUI的承前启后窗体的岗位将仍鼠标的拖动而产生改变。

但是当规划界面时,如果你希望在可拖动元素区域外的一些区域不接收拖动信号,那么单纯需要以-webkit-app-region属于性值改呢no-drag即可。

比如说示例中,三个系统命令按钮实际上是包括在一个DIV元素内,同时这DIV设置了-webkit-app-region属于性值为drag,这时你会发现,拖动这个DIV所在区域(包括三单令按钮的区域)时窗体都实现了走,但是这吗阻断了是区域外之任何鼠标操作,包括三独令按钮的鼠标点击操作。这明显不是所盼之效果。如下,该区域的HTML代码为:

<div class="app-sys-command-container">
    <ul class="sys-commands">
        <li n-ui-command="minimize">
            <i class="fa fa-window-minimize"></i>
        </li>
        <li n-ui-command="maximize">
            <i class="fa fa-window-maximize"></i>
        </li>
        <li n-ui-command="close">
            <i class="fa fa-close"></i>
        </li>
    </ul>
</div>

于css样式.app-sys-command-container备受安装了-webkit-app-region属性值为drag,这造成了ul.sys-commands区域啊呈现可拖动的状态。为了避免此区域为默认的拖动事件影响至任何事件的附和,那么就需设置.sys-commands的体-webkit-app-region属性值为no-drag,那么就有区域将不再相应窗体拖动的波。这一部分底CSS代码为:

.demo-app > content > .app-sys-command-container {
    ...
    -webkit-app-region: drag;
    ...
}

.demo-app > content > .app-sys-command-container > .sys-commands {
    ...
    -webkit-app-region: no-drag;
    ...
}

这么,您就好灵活的操纵而拖动来改变窗体位置的区域了。

0x02 实现由定义标题栏

coreTitleBar中产生一个性质为ExtendViewIntoTitleBar,将那个安装也true就允许用我们当窗体中因故XAML定义之视图扩展至标题栏区域

coreTitleBar.ExtendViewIntoTitleBar = true;

以此装置后标题栏原有的地方便熄灭了,我们定义的计算扩充了过去,如下图所示:

 图片 3

看起来离我们的靶子即了有,标题栏消失了,我们于XAML中定义的Grid上换占据了初标题栏的职务,原有的appTitleBar上之最大化、最小化、关闭按钮都可用。如果单独是一样合图片扩展及标题栏用作背景的语句貌似可以了,不过我们意在在标题栏上加个搜索栏,所以要在几乎只问题的:

appTitleBar的背景色不谐和。

若缓解者问题,我们用把appTitleBar上按钮的背景色设置也透明:

appTitleBar.ButtonBackgroundColor = Colors.Transparent;

安装后窗体就成这样了:

 图片 4

按钮背景色变成了晶莹剔透,但系统标题栏上之按钮和我们从定义标题栏上之搜索框重叠了。要解决这个题材我们得用coreTitleBar上的特性SystemOverlayLeftInset和SystemOverlayRightInset,分别代表了coreTitleBar嵌入时的左手距同右手距,我们得以经过安装从定义标题栏的Padding属性达到目的:

//TitleBar为我们自己的标题栏
TitleBar.Height = coreTitleBar.Height;
TitleBar.Padding = new Thickness(
    coreTitleBar.SystemOverlayLeftInset,
    0,
    coreTitleBar.SystemOverlayRightInset,
    0 );

那当啊时进行这装置于好啊,coreTitleBar有一个轩然大波称为LayoutMetricsChanged,当页面布局发生变化时触发,例如屏幕旋转导致页面还布局就会见触发这个波。我们可吧标题栏Padding属性的装在这波里。设置好后运行程序标题栏如下图所示:

 图片 5

这么像好多矣,但是当自己眷恋以搜索栏输入点内容经常意识根本点不上什么,放大镜按钮也没法点,按停搜索栏还会拖动窗口,看来是咱友好之标题栏被网标题栏遮挡在脚了。

 图片 6

大概就是是达标图这样一栽感觉。

对此这题目,我们可以Window对象中之SetTitleBar()方法就将文字区域安装为标题栏:

Window.Current.SetTitleBar(TitleText);

其中TitleText是咱们打定义标题栏中之公文控件的区域,这个主意就将TitleText这个控件设置为标题栏。效果就是是TitleText控件可以拖动窗体,双击可以最大化/恢复等。这样任何急需收取输入的控件便无属于标题栏,就可正常接收输入了。

此外自还考虑了一样栽办法就是重叠两叠Grid,底层通过SetTitleBar设置也标题栏,放置不需要吸收输入的控件如文本、图片等,上层放置需要吸收输入的控件,如TextBox等,不过尚未实际测试。

除却还足以设想让标题栏加入返回按钮,按钮调用Frame.GoBack()方法,根据Frame.CanGoBack属性决定回到按钮是否出示。这个啊够呛容易实现,就非发证明了。

先后最后运行效果如图所示,其中手机极本身即非显示标题栏

图片 7

怎么样通过HTML元素来执行窗体的最大化/最小化/关闭操作

在上面的html代码有中,展示了示范程序的老三只系统命令按钮的贯彻方式:

<div class="app-sys-command-container">
    <ul class="sys-commands">
        <li n-ui-command="minimize">
            <i class="fa fa-window-minimize"></i>
        </li>
        <li n-ui-command="maximize">
            <i class="fa fa-window-maximize"></i>
        </li>
        <li n-ui-command="close">
            <i class="fa fa-close"></i>
        </li>
    </ul>
</div>

内部的i标签内,可以看到不广泛的html属性n-ui-command,这等同性质是NanUI用来标注按钮行为之专用属性,通过其属于性值minimize/maximize/close不难看出,通过点击具备这同一专用属性的签,就能落实窗体对应的极其小化/最大化/关闭操作。

特意需要指出的,在演示窗体中点击最大化按钮后得以视,最大化按钮的图标从最大化改成了还原的体,这是通过采取Javascript监测窗体事件来兑现之。

犹上面介绍的专用属性,NanUI还置了有的专用的波。通过监听这些事件来促成部分奇异之法力,例如地方所说的最大化窗体时转系统按钮的图标,又要是窗体市区焦点时移标题栏的水彩等。

0x03 相关下载

https://github.com/durow/TestArea/tree/master/UWPTest/TitleBarTest

NanUI 窗体专用事件

眼前NanUI实现的专用事件有以下三个:

  • hoststatechange:
    窗体状态(最大化、最小化、还原)发生反时接触。
  • hostactivestate: 窗体获得或丢失焦点时接触。
  • hostsizechange: 窗体大小改变时接触。

通过监听这些事件,您便足以根据需要来贯彻部分特定的职能。如示例项目遭到,使用了jQuery来监听这三个专用事件:

$(function () {
    //窗口状态改变
    $(window).on("hoststatechange", function (e) {
        console.log(e.detail);
        $("#label-form-state").text(e.detail.stateName);

    });

    //窗口激活状态改变
    $(window).on("hostactivestate", function (e) {
        console.log(e.detail);
        $("#label-activated-state").text(e.detail.stateName);

        if (e.detail) {
            if (e.detail.state === 1) {
                $("html").addClass("app-active");
            }
            else {
                $("html").removeClass("app-active");
            }
        }
    });
    //窗口尺寸改变
    $(window).on("hostsizechange", function (e) {
        console.log(e.detail);
        $("#label-size-state").text(`width:${e.detail.width} height:${e.detail.height}`);

    });

});

上述代码的现实性职能,可以活动对示范程序开展调试来查效果。

内置Javascript对象 – NanUI

NanUI除了实现了上述的专用html属性n-ui-command和老三个专用事件外,在Javascript全局环境遭到尚放了一个专用对象NanUI,通过该目标您得查询时NanUI和CEF的版号,通过hostWindow中的主意来博当前窗体的状态值,执行最大化、最小化和倒闭操作。

图片 8

以身作则源码

git clone https://github.com/NetDimension/NanUI-Examples-03-Design-Your-Form-With-Html.git

社群和帮扶

GitHub
https://github.com/NetDimension/NanUI/

交流群QQ群
521854872

帮扶作者

要你欢喜自之办事,并且期待NanUI持续的前进,请对NanUI项目展开资助为这个来鼓励与支撑我连续NanUI的付出工作。你可以采用微信或者支付宝来围观下的次维码进行资助。

图片 9