UWP: Win10 软件开发之学习笔记（2017.5.11更新）

现代操作系统应用开发

---

以下是我个人的学习笔记，欢迎大家提出疑问，我们一起探讨。

github

---

1.XAML

• XAML只是特定格式的XML，它遵循所有XML的规则。XML的使用者就是将我们的代码变成windows10可执行文件的编译器；
• XAML是一种简单的创建类的实例并设置属性的方法，代码量比C#节省了很多。
• XAML中的类型转换器使得用户在设置属性时能用一些非常简洁的字符来代替冗长的类型名和枚举值

XAML -XML Syntax, create instances of Classes that define the UI

Type Converters - Convert literal strings in XAML into enumerations, instances of classes, etc

2.Grid && Stackpanel

• Grid 与 Stackpanel 都会将某些特定的控件如image、retangular自动扩充至100%，但Grid会将其单元格内的元素自动居中，且Grid内元素可以重叠，而Stackpanel就不行了。
• 所以大部分布局可以用StackPanel进行，但是并不是说Grid一无是处，它在适应性变化中还是能起到很好的作用的，而这是StackPanel无法做到的。

3.Understanding Default Properties, Complex Properties and the property Element Syntax

Default Prpperty … Ex. sets Content property

<Button>click Me</Button>

Complex Properties - Break out a property into its own element syntax:

<Button Name="ClickMeButton"
        HorizonalAlignment="Left"
        Content="Click Me"
        Margin="20,20,0,0"
        VerticalAlignment="Top"
        Click="ClickMeButton_Click"
        Width="200"
        Heigh="100"
        >
        <Button.Background>
            <LinearGradientBrush Endpoint="0.5,1" StartPoint="0.5,0">
                <GradientStop Color="Black" Offset="0"/>
                <GradientStop Color="Red" Offset="1"/>
            </LinearGradientBrush>
        </Button.Background>
</Button>

Elements put themselves into rows and columns using attached property syntax

...
 ...
 <Button Grid.Row="0" />
</Grid>

• When referencing Rows and Columns … 0-based.
• There’s always one default implicit cell: Row 0, Column 0
• If not specified, element will be in the default cell

4.Understanding XAML Schemas and Namesoace Declarations

• Don’t touch the schema stuff - It’s necessary!
• Schemas define rules for XAML, for UWP, for designer support, etc.
• Namesoaces tell XAML parser where to find the definition rules for a given element in the XAML.

5.XAML layout with Grids

Layout controls don’t have a content properety …
they have a Children property of type UIElementCollection.
By embedding any control inside of a layout control, you are implicitly calling the Add method of the Children collection Property.

<Grid Background="Black">
    <Grid.RowDefinitions>
        <RowDefinition Height="*" />
        <RowDefinition Height="*" />
        <RowDefinition Height="*" />
    </Grid.RowDefinition>
    <Grid.ColumnDefinitions></Grid.ColumnDefinition>
</Grid>

Sizes expressed in terms of :
- Auto -Use the largest value of elements it contains to define the width / height
- *(star sizing) -Utilize all the available space
- 1* -of all available space, give me 1 “share”
- 2* -of all available space, give me 2 “shares”
- 3* -of all available space, give me 3 “shares”

6 total shares … 3* would be 50% of the available width / height

6.XAML layout with Stackpanel

<StackPanel>
    <TextBlock>Top</TextBlock>
    <TextBlock>Bottom</TextBlock>
</StackPanel>

• Vertical Orientation by default.
• Left-to-right flow by default when Horizontal aligment
• Most layouts will combine multiple layout controls.
• Grid will overlap controls. StackPanel will stack them.

7.SplitView

The split view allows us to create a panel that can be displayed or hidden.

We would use the SplitView to implement hamburger navogation.

There are two parts to a SplitView:
(1) The part that is hidden by default(Pane)
(2) The part that is shown by default(Content)

SplitView可用于实现菜单。

• 隐藏在展示部分旁边的部分，我们称之为Pane

• 很容易背覆盖或者被推开的用于展示的部分，我们称之为Content

• 属性

  • IsPaneOpen
  • DisplayMode
  • Inline 把Content推开来让Pane表示，但Pane关闭时不显示
  • Overlap 把Content完全遮挡住，但Pane关闭时不显示
  • CompactOverlay 把Content完全遮挡住，但Pane关闭时有显示
    
    • 需要设置CompactPaneLength
  • CompactInline 把Content推开让Pane表示，但Pane关闭时显示
  • CompactPaneLength 用于设置Pane关闭时的宽度
  • OpenPaneLength 用于设置Pane打开时的宽度 -

8.Relative Panel

It basically defines an area within which you can position and align child objects

• in relation to each other

• or in relation to the parent panel

• 用于在Relative Panel内定位的附加属性（Attach Property）有三大类：

  • 面板对齐关系（Panel Alignment Relationship）：如将控件与面板顶端对其，左对齐等
  • 同级对齐关系（Sibling Alignment Relationship）：用于同级元素的对齐，如控件间的顶端对齐，左对齐等。
  • 同级位置关系（Sibling Position Relationship）:用于放置同级元素，如控件的上、下、左、右等。

以上优先级从高到低

• 附加属性：
  
  • AlignRightWithPanel (True/False)
  • AlignLeftWith (the name of controls)
  • LeftOf (the name of controls)
  • AlignVerticalCenterWith (the name of controls)
  • AlignHorizontalCenterWithPanel (True/False)
  • AlignBottomWithPanel (True/False)
  • AlignTopWith (the name of controls)

9.Navigation

APP > Window > Frame > MainPage

You can load pages into a child frame or into the root frame.

• 在UWP里，页面时存在于Frame Object里。
• 当APP启动的时候，会有一个最高级的Application Object，在里面会有一个窗口，在桌面版本的UWP里，它会显示顶部的一栏，就是有“最小化”、“最大化”、“关闭”按钮，以及应用名的那一栏。在里面，是Frame，用于存放页面（Pages）。
• 在APP.xaml.cs中会有向MainPage跳转的代码rootFrame.Navigate(typeof(MainPage),e.Argument)
• 为了在Mainpage中像APP一样导入导出页面，我们可以在MainPage中定义一个Frame，然后在MainPage()函数中加入MyFrame.Navigate(typeof(Page1)),同时能使得MainPage中定义的导航栏能存在多个页面中
• 定义跳转按钮

MyFrame.Navigate(typeof(Page1));

-定义后退按钮

if (MyFrame.CanGoBack) {
    MyFrame.GoBack();
}

• 定义前进按钮

if (MyFrame.CanGoForward()) {
    MyFrame.GoForward();
}

• HyperlinkButton按钮

<HyperlinkButton Content="Go to