1. 布局控件
Grid(网格)
Grid 是一种灵活的布局控件,可以将子元素安排在行和列的网格中。每个子元素可以指定它所在的行和列。
示例:
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/> <!-- 自动适应内容 -->
<RowDefinition Height="*"/> <!-- 剩余空间分配 -->
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/> <!-- 剩余空间分配 -->
<ColumnDefinition Width="2*"/> <!-- 两倍的剩余空间分配 -->
</Grid.ColumnDefinitions>
<TextBlock Text="Row 0, Col 0" Grid.Row="0" Grid.Column="0"/>
<TextBlock Text="Row 0, Col 1" Grid.Row="0" Grid.Column="1"/>
<TextBlock Text="Row 1, Col 0" Grid.Row="1" Grid.Column="0"/>
<TextBlock Text="Row 1, Col 1" Grid.Row="1" Grid.Column="1"/>
</Grid>
StackPanel(堆栈面板)
StackPanel 是一种布局控件,可以将子元素沿水平或垂直方向堆叠排列。
功能:
• 简单的顺序排列
• 适用于纵向或横向排列子元素
示例:
<StackPanel Orientation="Vertical"> <!-- 垂直排列 -->
<TextBlock Text="Item 1"/>
<TextBlock Text="Item 2"/>
<TextBlock Text="Item 3"/>
</StackPanel>
<StackPanel Orientation="Horizontal"> <!-- 水平排列 -->
<TextBlock Text="Item A"/>
<TextBlock Text="Item B"/>
<TextBlock Text="Item C"/>
</StackPanel>
DockPanel(停靠面板)
DockPanel 是一种布局控件,可以将子元素停靠在容器的边缘。
功能:
• 子元素可以停靠在上下左右四个方向
• 中心区域可以填充剩余空间
示例:
<DockPanel>
<TextBlock Text="Top" DockPanel.Dock="Top"/> <!-- 停靠在顶部 -->
<TextBlock Text="Bottom" DockPanel.Dock="Bottom"/> <!-- 停靠在底部 -->
<TextBlock Text="Left" DockPanel.Dock="Left"/> <!-- 停靠在左侧 -->
<TextBlock Text="Right" DockPanel.Dock="Right"/> <!-- 停靠在右侧 -->
<TextBlock Text="Center"/> <!-- 默认填充剩余空间 -->
</DockPanel>
Canvas(画布)
Canvas 是一种布局控件,可以通过绝对定位子元素。
功能:
• 子元素使用坐标进行绝对定位
• 适用于需要精确控制位置的场景
示例:
<Canvas>
<TextBlock Text="Top Left" Canvas.Left="10" Canvas.Top="10"/> <!-- 左上角 -->
<TextBlock Text="Bottom Right" Canvas.Left="100" Canvas.Top="100"/> <!-- 右下角 -->
</Canvas>
2. 控件绑定(继续)
TextBlock(文本块)
TextBlock 是一种文本显示控件,用于显示只读文本。
功能:
• 显示简单的文本内容
• 支持数据绑定和格式化
示例:
<TextBlock Text="Hello, WPF!"/>
<TextBlock Text="{Binding Path=UserName}"/> <!-- 数据绑定 -->
TextBox(文本框)
TextBox 是一种用户输入控件,用于输入和编辑文本。
功能:
• 输入单行或多行文本
• 支持数据绑定和验证
示例:
<TextBox Width="200" Height="30" Text="{Binding Path=UserInput, Mode=TwoWay}"/> <!-- 双向数据绑定 -->
Button(按钮)
Button 是一种按钮控件,用户可以点击以触发操作。
功能:
• 响应用户点击事件
• 可以绑定命令(Command)
示例:
<Button Content="Click Me" Width="100" Height="30" Click="Button_Click"/>
<Button Content="Submit" Command="{Binding SubmitCommand}"/> <!-- 绑定命令 -->
CheckBox(复选框)
CheckBox 是一种允许用户选择或取消选择的控件。
功能:
• 支持选中和未选中状态
• 支持三态(选中、未选中、不确定)
示例:
<CheckBox Content="Agree to terms" IsChecked="{Binding Path=IsAgree, Mode=TwoWay}"/>
ComboBox(组合框)
ComboBox 是一种下拉列表控件,允许用户从预定义的选项中进行选择。
功能:
• 显示下拉列表
• 支持数据绑定
示例:
<ComboBox ItemsSource="{Binding Path=Options}" SelectedItem="{Binding Path=SelectedOption, Mode=TwoWay}"/>
ListBox(列表框)
ListBox 是一种列表控件,显示多个项,允许用户进行选择。
功能:
• 显示项列表
• 支持多选
示例:
<ListBox ItemsSource="{Binding Path=Items}" SelectedItem="{Binding Path=SelectedItem, Mode=TwoWay}"/>
3. 数据绑定
单向绑定
单向绑定将源属性的值传递给目标属性,但不会反向更新。
示例:
<TextBlock Text="{Binding Path=UserName}"/>
双向绑定
双向绑定允许源属性和目标属性互相更新。
示例:
<TextBox Text="{Binding Path=UserInput, Mode=TwoWay}"/>
命令绑定
命令绑定用于将UI事件绑定到ViewModel中的命令
示例:
<Button Content="Submit" Command="{Binding SubmitCommand}"/>
4. 样式和模板
定义样式
样式用于统一设置控件的外观。
示例:
<Window.Resources>
<Style TargetType="Button">
<Setter Property="Background" Value="LightBlue"/>
<Setter Property="Foreground" Value="White"/>
<Setter Property="FontSize" Value="14"/>
<Setter Property="Margin" Value="5"/>
</Style>
</Window.Resources>