UWP开发入门教程 01-08 学习笔记

通关了大逆转裁判、逆转裁判5,6、以及雷顿教授VS逆转裁判、口袋妖怪Y、星之卡比三重彩,机器人星球后,我决定要开始学习了。暑假可不能这么浪费了。

毕竟,还有2个多月呢。


[hermit auto="0" loop="0" unexpand="0" fullheight="0"]netease_songs#:22719028[/hermit]

我准备学关于C#(C Sharp)的UWP开发,原因只有一个,我是软粉,没了。

那么,这次,绝对不能半途而废。

(Python 3.0 : 快扶我起来,看老子不打死他)


01-02

首先,说到编程的第一个程序,当然就是我们大名鼎鼎的 Hello World! 了。

在01-02课中,Bob演示了(估计以后就这么一次了),类似VB的鼠标拖拽创建控件方式。如图,这是我跟着做的。

▲看,真是人生第一步啊

然后,就是写代码了,一按F12,代码就会自己跳出来。鉴于“Hello World!”总被人嘲笑,于是,我是这么写的:

private void Button_Click(object sender, RoutedEventArgs e)
{
ResultTextBlock.Text = "不好,中计!";
}

顺便说一下,按钮的文本是“我笑诸葛亮无能”。


03

本节课主要涉及的是概念性的问题:

B站评论区:

1. MainPage.xaml & MainPage.xaml.cs

(UI设计层和逻辑层)同属于一个对象MainPage,MainPage类继承于Page类。设计层 使用的是xaml语言,逻辑层用的是C#。

【注:也就是“子集”,或者说“包含”的意思,这点和HTML很像。】

设计层关注的是各种控件的布局和属性,这是后边大半课程分步介绍的主要内容。

逻辑层决定UWP如何运行,然而本课程是假设观众有了基本的C#基础的,因此C#的部分需要自己去补。

2. 用UWP可以干什么以及uwp如何在不同设备间适配

3. 要跟完整个课程,基础必备的知识有哪些,而且这些也是制作一个UWP最基本的:

a. API:有基本的认识,能够掌握如何调用API,关注API的开发、开放和更新,最好自己系统的整理一个API笔记;

b. C#要求至少掌握到能够使用Async、 await和Task,这也是C#发展到现在的精华,对于我这样自学的小白,if else、class啥的入门还比较好啃,到了这3项还真是要命了,本课程以外必须自己修炼。

和他说的差不多,我也是这么理解的(懒得打字),接下来的几节课,我们需要学习XAML,JSON(由于有App Inventor 2 的基础)。以及基本的C#素养,然后就能写自己的UWP啦!


04

什么是XAML?

XAML是XML的一种。

那么,XML,又是什么呢?

XML是HTML的通用化表达,可以用在任何你想用的地方。

我觉得吧,XML应该包含HTML、XAML。但是XML又来源于HTML,也就是所谓“你中有我、我中有你”的关系。

言归正传,在接触到XAML后,我简直感动的要哭了!

App Inventor 2 的布局设计根本不是给人用的!!!!

首先,有XAML后,一目了然,一清二楚。什么控件归属于什么,用编辑器就能看到了。不像我们的AI2,还要一个一个用那条小小的蓝线找。

还有,C#中有创建控件的方法,这一点就足够完爆AI2了!(虽然麻烦了一点)。

比如,像Bob演示的那样,我打上去了:

private void Pageload(object sender, RoutedEventArgs e)
{
Button mybutton = new Button();
mybutton.Name = "ClM_button";
mybutton.Content = "我笑诸葛亮无能";
mybutton.Width = 200;
mybutton.Height = 100;
mybutton.Margin = new Thickness(20, 20, 0, 0);
mybutton.HorizontalAlignment = Windows.UI.Xaml.HorizontalAlignment.Left;
mybutton.VerticalAlignment = Windows.UI.Xaml.VerticalAlignment.Top;

mybutton.Background = new SolidColorBrush(Windows.UI.Colors.Pink);
mybutton.Click += Mybutton_Click;

LayoutGrid.Children.Add(mybutton);
}

private void Mybutton_Click(object sender, RoutedEventArgs e)
{
ResultTextBlock.Text = "不好,中计!";
}

这就是用后端创建代码的方法。

最后,在C#与XAML的对比中,一目了然,XAML的最大优点就是简洁了。

又比如同样的东西,用XAML来就是这样:

 <Button x:Name="Clickme"

HorizontalAlignment="Left"

Margin="0,59,0,0"

Content="我笑诸葛亮无能"

VerticalAlignment="Top"

RenderTransformOrigin="-0.626,-0.69"

Click="Button_Click" FontSize="48"

</Button>

(有点小差别,别在意)

结论很明显了,就是XAML简洁的多的多。


05

类型转换

你可能注意到了,在C#创建过程中,你看到的是这样的:

mybutton.HorizontalAlignment = Windows.UI.Xaml.HorizontalAlignment.Left;

而在XAML中,他却是这样的:

HorizontalAlignment="Left"

这就有个问题了,凭什么C#调用的是属性值,而XAML却是一个字符串呢?

答案是,XAML会通过这个“Left”,来寻找(枚举),Windows.UI.Xaml.HorizontalAlignment.Left,这个值。

这就有点像Pascal的常量了。

所以,如果我们把"Left"改成“王司徒”的话,他就会报错了。


06

这节课审美风格独特。

要点其实就三个:

  • 默认属性
  • 复杂属性
  • 属性元素语法

默认属性看起来很简单,比如上面的Button,我们把他改一下,变成这样:

<Button x:Name="Clickme"

HorizontalAlignment="Left"

Margin="0,59,0,0"

Content="我笑诸葛亮无能"

VerticalAlignment="Top"

RenderTransformOrigin="-0.626,-0.69"

Click="Button_Click" FontSize="48">我笑诸葛亮无能

</Button>

然后,你就会发现,Button 的Content(内容属性)变成了“我笑诸葛亮无能”了。

这里,不加任何定义的文字“我笑诸葛亮无能”就是默认属性了。

通常来说,一个控件的默认属性往往是Content。

 

复杂属性,“性”如其名,就是比较复杂的属性。Bob给我们展示了一个具有现代主义艺术审美的、特立独行的UI设计:

▲红黑相间,法力无边!

而他的XAML代码是这样的:(渐变部分)

            <Button.Background>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
  <LinearGradientBrush.GradientStops>
                        <GradientStopCollection>
<GradientStop Color="Black" Offset="0"/>
<GradientStop Color="#FFF93B3B" Offset="1"/>
    </GradientStopCollection>
                    </LinearGradientBrush.GradientStops>
</LinearGradientBrush>
</Button.Background>

(红色部分可以省略)

为什么红色部分可以省略呢?这就牵涉到属性元素语法了。

刚刚讲过默认属性了。刚好,现学现用,   <GradientStopCollection> <LinearGradientBrush.GradientStops> 的默认属性。而那个Collection又是包含了两个对象的,所以可以省去。

(听不懂也没关系,反正VS自己会生成最简洁的)


07

这节课依然是概念课。

XAML顶端的那一坨东西是干什么用的呢?

就像这个一样:

<Page
x:Class="App1.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:App1"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d" Loaded="Pageload">

看着令人头大。对吧?

然后,Bob同志打开了http://schemas.microsoft.com/winfx/2006/xaml/presentation这个网址。结果是404。

咦,奇了怪了去了,为什么头部文件会是404呢。

Bob说,这其实就是装装样子的,就是个名字而已,没想让你打开。严格来说,应该叫URi.

他还说,听懂了吗?听懂了就可以忘了,反正也没什么用。


08

这节课是纯干货了。

定义行主要用以下代码:

<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="*"/>
</Grid.RowDefinitions>

<Rectangle Height="100" Fill="Beige" Grid.Row="0"/>
<Rectangle Grid.Row="1" Fill="SteelBlue"/>

解析:

行从0开始!

Height="Auto"中的Auto代表自动,也就是说,选取最高的那一个元素的高度来设置高度。

而Height="*"也就如字面意思一样,“*”,通配符,也就是吧剩下所有的空间给占了。

而“*”的存在也就是为什么<Rectangle Grid.Row="1" Fill="SteelBlue"/>不设置高度的原因了。(默认属性)

PLUS:

1* 代表一份,用好这个,就不用在C#中再设置了。总共的份数是把所有的?*相加得出的。

比如1* 2* 3* 加起来就是6份。

还有:

Grid.Row的默认属性是0,所以也可以不写。可以节省代码;

Margin的值是绝对的!

 


To Be Continued...

 

点赞

发表回复

电子邮件地址不会被公开。必填项已用 * 标注

此站点使用Akismet来减少垃圾评论。了解我们如何处理您的评论数据