WPF学习路线

2024-01-10 21:13:52

WPF学习路线

### 一. 布局

[StackPanel] 默认垂直方向排列，通过Orientation属性修改

<Grid>
    <StackPanel Orientation = "Horizontal">
        <!--默认情况下StackPanel水平方向放置，通过Orientation属性修改-->
        <Button width = "100" Height = "40" />
        <Button width = "100" Height = "40" />
        <Button width = "100" Height = "40" />
        <Button width = "100" Height = "40" />
    </StackPanel>
</Grid>

[WrapPanel] 水平或者垂直方向排列，但当空间不足时自动换行

[DockPanel] 选择一个面停靠

<Grid>
    <DockPanel LastChilfFill = "false">
        <!--默认情况下DockPanel最后一个块自动填充剩余空间，要达到效果需得
LastChilfFill = "false"-->
        <Button width = "100" Height = "40"
            DockPanel.Dock = "Left"/>
        <Button width = "100" Height = "40"
            DockPanel.Dock = "Right"/>
        <Button width = "100" Height = "40"
            DockPanel.Dock = "Top"/>
        <Button width = "100" Height = "40"
            DockPanel.Dock = "Bottom"/>
    </DockPanel>
</Grid>

[Grid] 划分桌面空间，类似Table表格，可灵活设置行列并放置控件元素

<Grid>
    <Grid.RowDefinitions>
        <!--先分成2行-->
        <RowDefinition/>
        <RowDefinition/>
    </Grid.RowDefinitions>

    <Grid.ColumnDefinitions>
        <!--再分成2列-->
        <ColumnDefinition/>
        <ColumnDefinition/>
    </Grid.ColumnDefinitions>

    <!--放置控件，选择行列-->
    <!--第一行第一列-->
    <Border Background = "Red" />
    <!--第一行第二列-->
    <Border Background = "Green" Grid.Column = "1"/>
    <!--第二行第一列-->
    <Border Background = "Blue" Grid.Row = "1"/>
    <!--第二行第二列-->
    <Border Background = "yellow" Grid.Row = "1" Grid.Column =     "1"/>
</Grid>

[UniformGrid] 指定行列数量，均分有限的空间容器
[Canvas] 使用固定座标设置元素的位置，不具备锚定停靠等功能

### 二. 样式Style

 1 <Window.Resources>
 2     <!-- 当使用样式时默认使用样式中的属性值，但如果控件中重写了属性值，那么重写的属性值优先级更高-->
 3     <Style x:Key = "baseButtonStyle" TargetType = "Button">
 4         <Setter Property = "Fontsize" value = "20"/>
 5         <Setter Property = "Foreground" value = "red"/>
 6     </Style>
 7     <!--Style可以使用继承-->
 8     <Style x:Key = "DefaultStyle" TargetType = "Button"
 9     BasedOn = {StaticResource baseButtonStyle}>
10         <Setter Property = "Fontsize" value = "20"/>
11         <Setter Property = "Foreground" value = "red"/>
12     </Style>
13 </Window.Resources>

### 3. 触发器(通常放在Style中或者Template中)
[Trigger]：检测依赖属性的变化。触发器生效

 1 <Style.Triggers>
 2     <!--当鼠标划过触发器生效-->
 3     <Trigger Property = "IsMouseOver" value="true">
 4         <Setter Property = "Background" value = "red"/>
 5         <Setter Property = "Fontsize" value = "20"/>
 6     </Trigger>
 7     <!--当鼠标离开区域时触发器生效-->
 8     <Trigger Property = "IsMouseOver" value="false">
 9         <Setter Property = "Background" value = "blue"/>
10         <Setter Property = "Fontsize" value = "20"/>
11     </Trigger>
12 </Style.Triggers>

[MultiTrigger]：通过多个条件设置，达到满足条件，触发器生效

 1 <MultiTrigger>
 2     <!--触发器条件-->
 3     <MultiTrigger.Conditions>
 4         <Condition Property = "IsMouseOver" Value = "true"/>
 5         <Condition Property = "IsMouseOver" Value = "true"/>
 6     </MultiTrigger.Conditions>
 7     <!--触发器生效-->
 8     <MultiTrigger.Setters>
 9         <Setter Property = "Background" Value = "Pink"/>
10     </MultiTrigger.Setters>
11 </MultiTrigger>

[DataTrigger]：通过数据变化，触发器生效

1 <!--当绑定的数据发生变化或者数据达到我们的设定值，文本框的背景色改变-->
2 <DataTrigger Bingding = "{Bingding RelativeSource =         {RelativeSource Mode = self},Path = Text}" Value = "123">
3     <Setter Property = "Background" Value = "SeaGreen"/>
4 </DataTrigger>

[MultiDataTrigger]：多个数据条件的触发器

[EventTrigger]：事件触发器，触发了某类事件时触发器生效

### 控件模板Template

定义：空间模板用于定义空间的外观，样式，还可以通过通过空间模板的触发器修改控件行为，相应动画等。

1. 对于WPF中，每个控件都是无外观的。这意味着我们完全可以自定义其可视元素的外观。但不能修改其内部的行为。因为控件的行为已经被固定在控件的具体类中

2. 在Winform中，你会发现控件的外观和行为都被固定在控件的具体类中。当我们想修改按钮的边框或者弧度。或者修改控件本身一些细节的时候，我们需要修改外观的同时把原来所具备的所有行为重写了一遍。我们大多称之为自定义控件

另外附上学习的视频https://www.bilibili.com/video/BV1HC4y1b76v?p=10&spm_id_from=pageDriver

码农公寓

相关文章