WinUI 3: Part1

1
2
3
4
5
6

// 命令式：一步步告诉计算机怎么做
var stackPanel = new StackPanel();
var button = new Button();
button.Content = "点击我";
stackPanel.Children.Add(button);
this.Content = stackPanel;

1
2
3
4

<!-- 声明式：告诉计算机我要什么结果 -->
<StackPanel>
    <Button Content="点击我" />
</StackPanel>

1
2

<Button Content="点击" Width="200" Height="50" 
        Background="LightBlue" IsEnabled="True"/>

1
2
3
4
5
6
7
8

<Button>
    <Button.Background>
        <LinearGradientBrush>
            <GradientStop Color="Red" Offset="0"/>
            <GradientStop Color="Blue" Offset="1"/>
        </LinearGradientBrush>
    </Button.Background>
</Button>

1
2
3
4
5
6
7
8
9

<Grid>
    <Grid.RowDefinitions>
        <RowDefinition Height="*"/>
        <RowDefinition Height="*"/>
    </Grid.RowDefinitions>
    
    <Button Content="按钮" 
            Grid.Row="0"/> <!-- 附加属性：指定所在行 -->
</Grid>

1
2
3
4
5
6
7
8

<!-- 静态资源（编译时解析） -->
<Page.Resources>
    <SolidColorBrush x:Key="PrimaryBrush" Color="#0078D4"/>
</Page.Resources>
<Button Background="{StaticResource PrimaryBrush}"/>

<!-- 系统主题资源（随系统主题变化） -->
<Button Background="{ThemeResource SystemAccentColor}"/>

1
2
3
4
5

<!-- x:Bind（编译时绑定） -->
<TextBlock Text="{x:Bind ViewModel.UserName, Mode=OneWay}"/>

<!-- Binding（运行时反射绑定） -->
<TextBlock Text="{Binding UserName, Mode=TwoWay}"/>

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11

<!-- 空值 -->
<Image Source="{x:Null}"/>

<!-- 类型引用 -->
<Style TargetType="{x:Type Button}"/>

<!-- 静态成员 -->
<TextBlock Text="{x:Static sys:DateTime.Now}"/> <!-- 需 xmlns:sys="using:System" -->

<!-- 相对源（Binding 专用） -->
<TextBox Text="{Binding RelativeSource={RelativeSource Self}, Path=Tag}"/>

1

<Button Click="Button_Click"/>

1
2
3
4
5

// MainWindow.xaml.cs
private void Button_Click(object sender, RoutedEventArgs e)
{
    // 处理逻辑
}

1
2
3
4

<Page
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:MyApp">

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11

<!-- 简单属性 -->
<TextBlock Text="{x:Bind User.Name}"/>

<!-- 索引器 -->
<TextBlock Text="{x:Bind Users[0].Name}"/>

<!-- 附加属性（需括号） -->
<TextBlock Text="{Binding Path=(Grid.Row), RelativeSource={RelativeSource Self}}"/>

<!-- 多级嵌套 -->
<TextBlock Text="{x:Bind ViewModel.CurrentOrder.Items[0].ProductName}"/>

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21

<Grid>
    <!-- 定义 2 行 -->
    <Grid.RowDefinitions>
        <RowDefinition Height="Auto"/>
        <!-- 第一行：高度随内容而定（Auto） -->
        <RowDefinition Height="*"/>
        <!-- 第二行：高度占据剩余所有空间（*） -->
    </Grid.RowDefinitions>

    <!-- 定义 2 列 -->
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="200"/>
        <!-- 第一列：固定 200 像素 -->
        <ColumnDefinition Width="*"/>
        <!-- 第二列：宽度占据剩余空间 -->
    </Grid.ColumnDefinitions>

    <!-- 使用附加属性把控件放到指定格子里并居中排列 -->
    <TextBlock Grid.Row="0" Grid.Column="0" HorizontalAlignment="Center" Text="这是左上角" />
    <Button Grid.Row="1" Grid.Column="1" HorizontalAlignment="Center" VerticalAlignment="Center" Content="占据剩余大空间的右下角" />
</Grid>

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15

<Grid>
    <Grid.RowDefinitions>
        <RowDefinition Height="200"/>
        <!-- 阶段1：固定占据200px -->
        <RowDefinition Height="*"/>
        <RowDefinition Height="*"/>
        <RowDefinition Height="2*"/>
        <!-- 阶段2：在剩余空间中创建1:1:2的布局结构 -->
    </Grid.RowDefinitions>

    <Border Grid.Row="0" BorderBrush="Green" BorderThickness="1"/>
    <Border Grid.Row="1" BorderBrush="Red" BorderThickness="1"/>
    <Border Grid.Row="2" BorderBrush="Red" BorderThickness="1"/>
    <Border Grid.Row="3" BorderBrush="Red" BorderThickness="1"/>
</Grid>

1
2
3
4
5
6
7

<!-- 垂直堆叠（默认） -->
<!-- 使用Spacing来统一设置间距 -->
<StackPanel Spacing="10">
    <Button Content="按钮1"/>
    <Button Content="按钮2"/>
    <Button Content="按钮3"/>
</StackPanel>

1
2
3
4
5
6
7

<StackPanel Orientation="Horizontal" 
            Spacing="8" 
            HorizontalAlignment="Right">
    <Button Content="保存" Icon="Save"/>
    <Button Content="撤销" Icon="Undo"/>
    <Button Content="重做" Icon="Redo"/>
</StackPanel>

1
2
3
4

<TextBlock Text="I am super excited to be here!" 
           FontFamily="Arial"FontSize="24" 
           FontStyle="Italic" TextWrapping="WrapWholeWords"
           CharacterSpacing="200" Foreground="CornflowerBlue" />

1

<TextBox Header="Enter your name:" PlaceholderText="Name" />

1

<Button Content="Standard XAML button" Click="Button_Click"/>

1
2
3
4
5
6
7
8
9

<DropDownButton Content="Email">
    <DropDownButton.Flyout>
        <MenuFlyout Placement="Bottom">
            <MenuFlyoutItem Text="Send"/>
            <MenuFlyoutItem Text="Reply"/>
            <MenuFlyoutItem Text="Reply All"/>
        </MenuFlyout>
    </DropDownButton.Flyout>
</DropDownButton>

1

<ToggleSwitch Header="Toggle Switch" OffContent="Off" OnContent="On" IsOn="False" />

1
2
3
4
5

class Person
{
    public string Name { get; set; }
    public int Age { get; set; }
}

1
2
3
4
5
6

<DataTemplate x:DataType="local:Person">
    <StackPanel Orientation="Horizontal" Spacing="12">
        <TextBlock Text="{x:Bind Name}" FontWeight="Bold"/>
        <TextBlock Text="{x:Bind Age}" Foreground="Gray"/>
    </StackPanel>
</DataTemplate>

1
2
3

<!-- 将 DataTemplate 挂载到 ListView 的 ItemTemplate 属性 -->
<ListView ItemsSource="{x:Bind People}" 
          ItemTemplate="{StaticResource PersonTemplate}"/>

 1
 2
 3
 4
 5
 6
 7
 8
 9
10

<ListView ItemsSource="{x:Bind People}">
    <ListView.ItemTemplate>
        <DataTemplate x:DataType="local:Person">
            <StackPanel Orientation="Horizontal" Spacing="12">
                <TextBlock Text="{x:Bind Name}" FontWeight="Bold"/>
                <TextBlock Text="{x:Bind Age}" Foreground="Gray"/>
            </StackPanel>
        </DataTemplate>
    </ListView.ItemTemplate>
</ListView>

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11

public sealed partial class MainWindow : Window
{
    public ObservableCollection<Person> People { get; } = new();

    public MainWindow()
    {
        InitializeComponent();
        People.Add(new Person { Name = "Alice", Age = 30 });
        People.Add(new Person { Name = "Bob", Age = 25 });
    }
}