UWP 开发 - 从入门到入土

新博客地址：https://gyrojeff.top，欢迎访问！ 本文为博客自动同步文章，为了更好的阅读体验，建议您移步至我的博客👇

本文标题:UWP 开发 - 从入门到入土

文章作者:gyro永不抽风

发布时间:2020年05月02日 - 09:05

最后更新:2020年09月15日 - 07:09

原始链接:http://hexo.gyrojeff.moe/2020/05/02/UWP-%E5%BC%80%E5%8F%91-%E4%BB%8E%E5%85%A5%E9%97%A8%E5%88%B0%E5%85%A5%E5%9C%9F/

许可协议: 署名-非商业性使用-相同方式共享 4.0 国际 (CC BY-NC-SA 4.0) 转载请保留原文链接及作者！

UWP Cheat Sheet

UWP-04 - What is XAML?

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

UWP-05 - Understanding Type Converters

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

UWP-06 - Understanding Default Properties, Complex Properties and the Property Element Syntax

Default Property … Ex. sets Content property:

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<Button Name="ClickMeButton"
        HorizontalAlignment="Left"
        Content="Click Me"
        Margin="20,20,0,0" 
        VerticalAlignment="Top" 
        Click="ClickMeButton_Click"
        Width="200"
        Height="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>

UWP-07 - Understanding XAML Schemas and Namespace Declarations

Don’t touch the schema stuff - it’s necessary!

Schemas define rules for XAML, for UWP, for designer support, etc.

Namespaces tell XAML parser where to find the definition / rules for a given element in the XAML.

UWP-08 - XAML Layout with Grids

Layout controls don’t have a content property … they have a Chidren 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.

1
2
3
4
5
6
7
8
9
10
11
12
<Grid Background="Black">
  <Grid.RowDefinitions>
    <RowDefinition Height="*" />
    <RowDefinition Height="*" />
    <RowDefinition Height="*" />
  </Grid.RowDefinitions>
  <Grid.ColumnDefinitions>
    <ColumnDefinition Width="*" />
    <ColumnDefinition Width="*" />
    <ColumnDefinition Width="*" />
  </Grid.ColumnDefinitions>
</Grid>

Sizes expressed in terms of:

  • Explicit pixels - 100
  • 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.

Elements put themselves into rows and columns using attached property syntax:

1
2
3
4
...
  ...
  <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

UWP-09 - XAML Layout with StackPanel

1
2
3
4
<StackPanel>
  <TextBlock>Top</TextBlock>
  <TextBlock>Bottom</TextBlock>
</StackPanel>
  • Vertical Orientation by default.
  • Left-to-right flow by default when Horizontal orientation.
  • Most layouts will combine multiple layout controls.
  • Grid will overlap controls. StackPanel will stack them.

UWP-14 - Legendary Layout

For the Textbox that you want to cross multiy lines:

1
<TextBox TextWrapping="Wrap"></TextBox>

UWP-17 - Relative Panel

Relative Panel can make layout relative to other components

Priorities:

  • Alignment to Panel
    • AlignTopWithPanel
    • AlignLeftWithPanel
    • AlignRightWithPanel
    • AlignBottomWithPanel
  • Sibling Alignment
    • AlignTopWith
    • AlignLeftWith
    • AlignRightWith
    • AlignBottomWith
  • Sibling Positional
    • Above
    • Below
    • Left
    • Right
posted @ 2020-09-15 09:13  gyro永不抽风  阅读(321)  评论(0)  编辑  收藏  举报