WPF笔记

WPF笔记

使用笔记

Visual Studio 快捷键

注释：Ctrl + K, Ctrl + C

取消：Ctrl + K, Ctrl + U

整理代码：Ctrl + K, Ctrl + D

tips

1. 使用d:的标签会在编辑时展示，但编译时忽略

控制台输出

using System.Diagnostics;

Trace.WriteLine();

学习笔记

使用C#代码编写界面的方法

现在基本不用

// 创建grid结构
var grid = (Grid)this.Content;
// 创建button对象
Button button = new Button();
button.Height = 50;
button.Width = 100;
Margin = new Thickness(0, 0, 0, 0);
button.Content = "Button !!!";
// 为grid添加button按钮
grid.Children.Add(button);

XAML形式

    <Grid>
        <Button>
            <Button.Height>50</Button.Height>
            <Button.Width>100</Button.Width>
            <Button.Content>
                <TextBlock>Click me 4</TextBlock>
            </Button.Content>
        </Button>
    </Grid>

StackPanel & ListBox

    <StackPanel>
        <TextBlock HorizontalAlignment="Center" Margin="20">Hello World</TextBlock>
        <ListBox Height="100" Width="100">
            <ListBoxItem Content="item 1"></ListBoxItem>
            <ListBoxItem Content="item 2"></ListBoxItem>
            <ListBoxItem Content="item 3"></ListBoxItem>
            <ListBoxItem Content="item 4"></ListBoxItem>
        </ListBox>
        <Button Margin="20" Width="100" Click="Button_Click">随便</Button>
    </StackPanel>

逻辑树 & 视觉树

WPF Visualizer

逻辑树是视觉树的子集

Grid网格系统

Width可选的参数：auto * 2* 3*

    <Grid>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="3*"></ColumnDefinition>
            <ColumnDefinition Width="2*"></ColumnDefinition>
            <ColumnDefinition Width="2*"></ColumnDefinition>
        </Grid.ColumnDefinitions>
        <Grid.RowDefinitions>
            <RowDefinition Height="*"></RowDefinition>
            <RowDefinition Height="*"></RowDefinition>
            <RowDefinition Height="*"></RowDefinition>
        </Grid.RowDefinitions>
        <Button Grid.Row="0" Grid.Column="0">Click me 1</Button>
        <Button Grid.Row="0" Grid.Column="1">Click me 2</Button>
        <Button Grid.Row="1" Grid.Column="0">Click me 3</Button>
        <Button Grid.Row="1" Grid.Column="1">Click me 4</Button>
        <TextBlock Grid.Row="2" Grid.Column="0">Hello World</TextBlock>
    </Grid>

属性依赖与数据处理

    <Grid>
        <Button Height="100" Width="200" Content="ClickMe">
            <Button.Style>
                <Style TargetType="Button">
                    <Style.Triggers>
                        <Trigger Property="IsMouseOver" Value="True">
                            <Setter Property="FontSize" Value="25"></Setter>
                            <Setter Property="Foreground" Value="White"></Setter>
                        </Trigger>
                    </Style.Triggers>
                </Style>
            </Button.Style>
        </Button>
    </Grid>

Data Binding 数据绑定

1. 单向绑定 one way bining : Source -> Target
2. 双向绑定 two way bining : Source <-> Target
3. 指定方向绑定 oneWayToSource -> bining source
4. 单次绑定 One Time -> 构造方法中单次执行

    <StackPanel>
        <TextBox Name="myTextBox" Width="100" Margin="50" Text="{Binding ElementName=mySlider, Path=Value, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}"></TextBox>
        <Slider Name="mySlider" Minimum="0" Maximum="100" IsSnapToTickEnabled="True"></Slider>
    </StackPanel>

INotifyPropertyChanged 自定义数据绑定