连江县住房和城乡建设局网站,怎么看网站室哪做的,黄冈网站推广在线,怎么用源代码做网站在上一篇中#xff0c;老周用一个示例#xff0c;演示了框架视图的创建过程#xff0c;在本篇中#xff0c;老周将给大伙伴们说一下 Composition 构建 UI 的一些“零件”。 UI Composition 有一个核心类——对#xff0c;就是 Compositor 类#xff0c;它是总生产车间老周用一个示例演示了框架视图的创建过程在本篇中老周将给大伙伴们说一下 Composition 构建 UI 的一些“零件”。 UI Composition 有一个核心类——对就是 Compositor 类它是总生产车间组成 UI 的各种元素都可以由它来创建所以你会看到它公开了 K 个以 Create 开头的方法。我们在组建 UI 时所用到的各种元素都可以调用这些以 Create 打头的方法来创建。 要让用户在窗口上看到你所构建的 UI 元素可视化树中至少需要一 Visual 对象。Visual 是一个基类在组成可视化树时我们有三种 Visual 可以用。 第一种是 ContainerVisual它表示一容器可以向它的 Children 集合中添加子元素以构建复杂的可视化对象。 第二种是 SpriteVisual它从 ContainerVisual 类派生所以也支持添加子元素。Sprite 是“小仙女”的意思表明这个类不仅仅是个容器它自身就可以绘制可视化内容所以这个类用得还是比较多的。它主要公开了 Brush 属性可以使用各种画刷来绘制内容。比如单种颜色填充的画刷渐变画刷绘制图形的画刷等。 第三种是 LayerVisual它也是容器元素它类似于在视图中创建一个图层并可以在其中继续添加子元素。 要呈现多彩灿烂的内容你需要画刷因此UI Compositon 提供各种用途的画刷。 1、单色画刷只有一种颜色对对定可视化元素进行填充。 2、渐变画刷可以设置多种颜色过度。 3、Drawing Surface 这个强大相当于一块自由画布你可以在上面画各种东东。你可以画文本画圆形画线画大象画野鸭子。甚至你可以在上面画一个正在播放的视频。绘制代码是要用C来写不过我们可以结合 Win 2D 组件一起用这个老周后面会绘出例子的。 4、效果画刷。这种画刷主要用来产生一些视觉效果比如模糊、锐化、颜色叠加、反相等等。 有了可视化对象和画刷我们基本上可以弄出很多东西来。不过可能大伙伴们会想了要是能模拟一些真实场景就更佳了。于是灯光就出场了。灯光就是模拟我们现实世界中的各种光源比如小灯泡发出的点光手电筒照射的光或者照射范围更大的环境光如白炽灯等。 1、SpotLight这种光源有点像手电筒的光发散出去后会产生一个锥形区域。 2、PointLight类似于一盏小灯泡光源是一个点但它可以向四周照射。 3、DistantLight这种光有点像汽车的远光灯晚上开车时别乱开远光啊会害死人的也像太阳光。总之这种光源照射面很大而且光很强传播距离远。 4、AmbientLight这种光就像你家里房间里安装的白炽灯或者是新型的节能灯白白的光可以照亮整个屋子即环境光。 老周这么一说你一定会觉得没意思都不知道灯光照起来是什么效果。别急老周后面会给例子的你会看到效果的。 有刷子有灯泡有画布你大概觉得差不多了可以画出很多大作了。是的不过要是你的大作能够动起来是不是更生动了呢。比如你画了猪八戒手里拿着个大西瓜要是能让八戒动起来尤其是嘴巴一下一下地啃西瓜皮那该多好。因此你还需要动画。 1、关键帧动画。这个应该好懂就是可以在某个时刻设置一个关键帧然后关键帧之间会自动以时间为基准产生过度动画。 2、表达式。即使用一个计算公式来生成动画所需要的值。比如你要对可视化元素的不透明度进行动画处理输入 Opacity * 0.5表示每次的不透明度变化最终值都是上一次计算结果的一半比如不透明度为 100%进行动画后变成 50%再进行一次动画后就成 25% …… 要注意的是表达式产生的动画是不能控制时间的。 以上内容你不必太认真看就当作常识大致涉猎一下就 OK 了后续的博文中老周会逐个介绍的。接下来我们要了解一下如何构建 UI 树。 咱们一起来动动手学习编程一定要动手的当然动脑子是必须的如果你能用脚打字也可以动脚。 记得老周一一篇中说过的吧我们要先实现自己的一个视图即实现 IFrameworkView 接口。 class DemoView : IFrameworkView
{……
} 然后我们声明几个私有字段。 Compositor mCompositor null;CoreWindow mWindow null;SpriteVisual rootVisual null; 要组装 UI 构件我们需要一个 Compositor 类的实例在这个例子中我打算用 SpriteVisual 作为 UI 树的根它既可以用画刷绘制内容也可以添加子元素正可谓是一物两用。 接着进行初始化此时我们可以实例化 Compositor 对象或者实例化其他我们需要的东西。注意此时不要组建 UI 树因为窗口还未初始化此时建UI树会发生异常。 public void Initialize(CoreApplicationView applicationView){mCompositor new Compositor();} Load方法我们这里没啥要加载的就留空吧。 public void Load(string entryPoint){// 留着以后用来养金鱼} 接下来是重点SetWindow 方法此时窗口已经可用所以此时可以组建 UI 树了。 public void SetWindow(CoreWindow window){mWindow window;// 创建根元素rootVisual mCompositor.CreateSpriteVisual();// 这个是重点必须要有这个 targetCompositionTarget target mCompositor.CreateTargetForCurrentView();// 指定 UI 根元素target.Root rootVisual;// 这时候UI元素上是空白的// 为了能看到东西我们画点东西上去CompositionColorBrush backBrush mCompositor.CreateColorBrush(Colors.Blue);rootVisual.Brush backBrush;} 这里有一个很重要的东东大伙要严重注意。在组建 UI 时你必须调用 CreateTargetForCurrentView 方法创建一个 CompositionTarget 实例它直接与当前的应用程序视图关联的你必须创建一个该实例然后再把 UI 的根元素赋值给 CompositionTarget 的 Root 属性。Root 属性引用的UI元素就作为整个视图的根。 而且这个 target 在整个视图的生命周期内你只能创建一次如果设置了根元素后你还调用 CreateTargetForCurrentView 方法的话你会收到一条 DCOMPOSITION_ERROR_WINDOW_ALREADY_COMPOSED 错误该错误提醒你该可视化树已经组装过了你不能再调用了。 CreateColorBrush 方法创建一个单色填充的画刷这里我用的是蓝色。 在 Run 方法中开启消息循环。 public void Run(){mWindow.Dispatcher.ProcessEvents(CoreProcessEventsOption.ProcessUntilQuit);} 但是以上代码漏了一句所以一旦运行你只能看到初始屏幕。如下图。 因为你还没有激活当前窗口故你在 ProcessEvents 之前要加上这一句。 public void Run(){mWindow.Activate();mWindow.Dispatcher.ProcessEvents(CoreProcessEventsOption.ProcessUntilQuit);} 因为我用 mWindow 字段引用了当前窗口的实例就是刚刚上面的 SetWindow 方法中所以我直接调用 Activate 方法。如果你没有用变量存储当前窗口的实例你还可以这样调用。 CoreWindow.GetForCurrentThread().Activate(); 最后在视图销毁时打扫一下卫生。 public void Uninitialize(){rootVisual.Dispose();mCompositor.Dispose();mWindow null;} 视图的逻辑弄完了再实现一下 IFrameworkViewSource 接口。 class DemoViewSource : IFrameworkViewSource{public IFrameworkView CreateView(){return new DemoView();}} 别忘了入口点。 class Program{static void Main(){CoreApplication.Run(new DemoViewSource());}} 好大功告成按下【F5】键你满怀信心地看着程序启动。结果傻眼了FK怎么一片空白的 咋回事呢是啊咋回事呢。再检查一下代码逻辑都对啊。其实你之所以看不到东西是因为可视化元素的大小默认是 0所以你要回到 SetWindow 方法给可视化元素设一个 Size。 public void SetWindow(CoreWindow window){mWindow window;// 创建根元素rootVisual mCompositor.CreateSpriteVisual();rootVisual.Size new System.Numerics.Vector2(300f, 320f);……} 如果必要你还可以设置视图对象的偏移量默认是 0、0、0即位于窗口的左上角注意这个坐标是三个值的即XYZ三个轴X和Y轴你都懂的原点在左上角X轴正方向往右Y轴正方向往下。至于Z轴嘛从屏幕里面向外说白了就是正方向指着你。 可以设置一下偏移量。 public void SetWindow(CoreWindow window){mWindow window;// 创建根元素rootVisual mCompositor.CreateSpriteVisual();rootVisual.Size new System.Numerics.Vector2(300f, 320f);rootVisual.Offset new System.Numerics.Vector3(0f, 20f, 5f);
…… } 好了一切的疑问都解开了。再运行一下Good效果出来了。 其实你还可以让它带透明效果的方法和 XAML 中一样。 public void SetWindow(CoreWindow window){……rootVisual mCompositor.CreateSpriteVisual();rootVisual.Size new System.Numerics.Vector2(300f, 320f);rootVisual.Offset new System.Numerics.Vector3(0f, 20f, 5f); rootVisual.Opacity 0.5f;……} 再看看效果。 有趣吧你还可以对它进行旋转的。 rootVisual.RotationAngleInDegrees 60f; RotationAngle 属性设置的旋转角度是弧度角要用角度进行设置就用 RotationAngleInDegrees 属性。 你不过瘾的话还可以调整整个三维坐标的方向。 rootVisual.Orientation new System.Numerics.Quaternion(-15f, 5f, 2f, 1f); 然后就变成这个样子了。 怎么样有意思吧。本篇就扯到这里大伙伴只要知道UI元素的组装方法就可以了至于说那些三维变量如何设置这个可以网上查资料或者自己摸索三维方面的东西还是挺复杂其实老周也不是很了解写出来大家交流交流而已。
