WPF笔记汇总之控件进阶与面板布局

最新推荐文章于 2023-09-03 16:04:15 发布
最新推荐文章于 2023-09-03 16:04:15 发布
阅读量245 收藏
点赞数
分类专栏： .NET 文章标签： wpf .net c#
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/DahlinSky/article/details/108499946
版权

WPF控件进阶与面板布局

接上一篇《WPF笔记汇总之工程结构与控件基础》，继续总结WPF知识点，这篇主要汇总一些WPF的控件辅助属性以及面板布局的常用用法，还有自定义控件和用户控件的使用用法。

文章目录

1. 控件辅助属性

主要是文档上的一些标准控件的辅助属性用法

1.1 ToolTip 提示

鼠标放在上面提示用的，其中ToolTipService类有很有属性会影响提示工具的行为。可以直接在控件上设置它们。


<StackPanel Margin="10" Name="pnlMain" >
	<!--ToolTipService.ShowDuration设置工具提示的时间-->
	<Button ToolTip="Click here and something will happen!"
			ToolTipService.ShowDuration="5000" >Click here!</Button>
	<DockPanel>
		<ToolBar DockPanel.Dock="Top">

			<Button ToolTip="Create a new file">
				<Button.Content>
					<Image Source="/images/file.png" Width="16" Height="16" />
				</Button.Content>
			</Button>

			<Button>
				<Button.Content>
					<Image Source="/images/file.png" Width="16" Height="16" />
				</Button.Content>
				
				<!--更高级的提示用法-->
				<Button.ToolTip>
					<StackPanel>
						<TextBlock FontWeight="Bold" FontSize="14" Margin="0,0,0,5">Open file</TextBlock>
						<TextBlock>
                       Search your computer or local network
                       <LineBreak />
                       for a file and open it for editing.
						</TextBlock>
						<Border BorderBrush="Silver" BorderThickness="0,1,0,0" Margin="0,8" />
						<WrapPanel>
							<Image Source="/images/file.png" Margin="0,0,5,0" />
							<TextBlock FontStyle="Italic">Press F1 for more help</TextBlock>
						</WrapPanel>
					</StackPanel>
				</Button.ToolTip>
			</Button>
		</ToolBar>
	</DockPanel>
</StackPanel>

高级提示用法截图

1.2 Tab顺序与快捷键

Tab顺序有两个属性：TabIndex和IsTabStop。 TabIndex用于定义顺序，而IsTabStop属性将强制停止该控件的tab属性。
快捷键允许通过按住Alt键然后按键盘上的其他键来到达窗口内的特定控件。可以通过在控件的Text / Content属性中使用添加下划线前缀来定义快捷键。设置好快捷键后只要按下键盘上的Alt键，可用的下划线就会突出显示出来。

<StackPanel Margin="10" TextOptions.TextFormattingMode="Display">
	<Grid Margin="20">
		<Grid.ColumnDefinitions>
			<ColumnDefinition Width="*" />
			<ColumnDefinition Width="20" />
			<ColumnDefinition Width="*" />
		</Grid.ColumnDefinitions>
		<Grid.RowDefinitions>
			<RowDefinition Height="*" />
			<RowDefinition Height="Auto" />
		</Grid.RowDefinitions>
		<StackPanel>
			<Label Content="_First name" Target="{Binding ElementName=txtFirstName}" />
			<TextBox TabIndex="0" Name="txtFirstName"/>
			<Label></Label>
			<TextBox TabIndex="2" />
			<Label>City:</Label>
			<TextBox TabIndex="5" IsReadOnly="True" IsTabStop="False" Background="Gainsboro" />
		</StackPanel>
		<StackPanel Grid.Column="2">
			<Label Content="_Last name" Target="{Binding ElementName=txtLastName}" />
			<TextBox TabIndex="1" Name="txtLastName"/>
			<Label>Zip Code:</Label>
			<TextBox TabIndex="4" />
		</StackPanel>
		<Button Grid.Row="1" HorizontalAlignment="Right" Width="80">Add</Button>
		<Button Grid.Row="1" Grid.Column="2" HorizontalAlignment="Left" Width="80">Cancel</Button>
	</Grid>
</StackPanel>

2. 布局面板

布局面板，不明思议，就是布局控件用的容器，摆控件用的。

2.1 Canvas

该面板可以设置每个子控件的坐标，容许完全的布局控制。一般用来做画布用，坐标的定位有x轴，y轴，z轴，默认的z轴值为0，但我们为每个形状分配一个新值。规则是具有较高z坐标的元素会覆盖具有较低值的元素。

<Canvas>
	<Button Canvas.Left="10">Top left</Button>
	<Button Canvas.Right="10">Top right</Button>
	<Button Canvas.Left="10" Canvas.Bottom="10">Bottom left</Button>
	<Button Canvas.Right="10" Canvas.Bottom="10">Bottom right</Button>
	
	<Ellipse Panel.ZIndex="2" Fill="Gainsboro" Canvas.Left="25" Canvas.Top="25" Width="200" Height="200" />
	<Rectangle Panel.ZIndex="3" Fill="LightBlue" Canvas.Left="25" Canvas.Top="25" Width="50" Height="50" />
	<Rectangle Panel.ZIndex="2" Fill="LightCoral" Canvas.Left="50" Canvas.Top="50" Width="50" Height="50" />
	<Rectangle Panel.ZIndex="4" Fill="LightCyan" Canvas.Left="75" Canvas.Top="75" Width="50" Height="50" />
</Canvas>
2.2 WrapPanel

自动换行面板，可以水平或者垂直方向排列控件并且能自动换行。

<WrapPanel>
	<Button>Test button 1</Button>
	<Button>Test button 2</Button>
	<Button>Test button 3</Button>
	<Button Height="40">Test button 4</Button>
	<Button>Test button 5</Button>
	<Button>Test button 6</Button>
</WrapPanel>

<WrapPanel Orientation="Vertical">
	<Button>Test button 1</Button>
	<Button>Test button 2</Button>
	<Button>Test button 3</Button>
	<Button Width="140">Test button 4</Button>
	<Button>Test button 5</Button>
	<Button>Test button 6</Button>
</WrapPanel>
2.3 StackPanel

与 WrapPanel 很相似，但可以水平或者垂直方向做延伸，但不会换行。

<StackPanel Orientation="Vertical">
	<Button HorizontalAlignment="Left">Button 1</Button>
	<Button HorizontalAlignment="Center">Button 2</Button>
	<Button HorizontalAlignment="Right">Button 3</Button>
	<Button HorizontalAlignment="Right">Button 4</Button>
	<Button HorizontalAlignment="Center">Button 5</Button>
	<Button HorizontalAlignment="Left">Button 6</Button>
</StackPanel>
2.4 DockPanel

DockPanel允许您将子控件停靠在顶部、底部、左侧或右侧。其中LastChildFill属性将禁止DockPanel的最后一个子节点占用其余空间，感觉此属性不常用。

<DockPanel LastChildFill="True">
	<Button DockPanel.Dock="Top" Height="50">Top</Button>
	<Button DockPanel.Dock="Bottom" Height="50">Bottom</Button>
	<Button DockPanel.Dock="Left" Width="50">Left</Button>
	<Button DockPanel.Dock="Right" Width="50">Right</Button>
	<Button>Center</Button>
</DockPanel>
2.5 Grid

Grid可以包含多行和多个列。您为每行定义一个高度，为每列定义一个宽度，以像素的绝对数量、可用空间的百分比或自动方式，其中行或列将根据内容自动调整其大小。

<Grid>
	<!--星形宽度/高度：百分比-->
	<Grid.ColumnDefinitions>
		<ColumnDefinition Width="2*" />
		<ColumnDefinition Width="1*" />
		<ColumnDefinition Width="1*" />
	</Grid.ColumnDefinitions>
	<Grid.RowDefinitions>
		<RowDefinition Height="2*" />
		<RowDefinition Height="1*" />
		<RowDefinition Height="1*" />
	</Grid.RowDefinitions>
	<Button VerticalAlignment="Top" HorizontalAlignment="Center">Button 1</Button>
	<Button Grid.Column="1">Button 2</Button>
	<Button Grid.Column="2">Button 3</Button>
	<Button Grid.Row="1">Button 4</Button>
	<Button Grid.Column="1" Grid.Row="1" VerticalAlignment="Center" HorizontalAlignment="Right">Button 5</Button>
	<Button Grid.Column="2" Grid.Row="1">Button 6</Button>
	<Button Grid.Row="2">Button 7</Button>
	<Button Grid.Column="1" Grid.Row="2">Button 8</Button>
	<Button Grid.Column="2" Grid.Row="2">Button 9</Button>
</Grid>

<!--绝对单元和自动宽度/高度-->
<Grid>
	<Grid.ColumnDefinitions>
		<ColumnDefinition Width="1*" />
		<ColumnDefinition Width="Auto" />
		<ColumnDefinition Width="100" />
	</Grid.ColumnDefinitions>
	<Button>Button 1</Button>
	<Button Grid.Column="1">Button 2 with long text</Button>
	<Button Grid.Column="2">Button 3</Button>
</Grid>

<!--RowSpan跨越-->
<Grid>
	<Grid.ColumnDefinitions>
		<ColumnDefinition Width="*" />
		<ColumnDefinition Width="*" />
		<ColumnDefinition Width="*" />
	</Grid.ColumnDefinitions>
	<Grid.RowDefinitions>
		<RowDefinition Height="*" />
		<RowDefinition Height="*" />
		<RowDefinition Height="*" />
	</Grid.RowDefinitions>
	<Button Grid.ColumnSpan="2">Button 1</Button>
	<Button Grid.Column="3">Button 2</Button>
	<Button Grid.Row="1">Button 3</Button>
	<Button Grid.Column="1" Grid.Row="1" Grid.RowSpan="2" Grid.ColumnSpan="2">Button 4</Button>
	<Button Grid.Column="0" Grid.Row="2">Button 5</Button>
</Grid>
<TextBlock></TextBlock>
<!--GridSplitter分割移动条，其中的宽度和高度，可以用ResizeDirection 属性将其强制进入 Rows 或 Columns 模式-->
<Grid>
	<Grid.ColumnDefinitions>
		<ColumnDefinition Width="*" />
		<ColumnDefinition Width="5" />
		<ColumnDefinition Width="*" />
	</Grid.ColumnDefinitions>
	<TextBlock FontSize="55" HorizontalAlignment="Center" VerticalAlignment="Center" TextWrapping="Wrap">Left side</TextBlock>
	<GridSplitter Grid.Column="1" Width="5" HorizontalAlignment="Stretch" />
	<TextBlock Grid.Column="2" FontSize="55" HorizontalAlignment="Center" VerticalAlignment="Center" TextWrapping="Wrap">Right side</TextBlock>
</Grid>

<!--综合实例-->
<Grid Margin="10">
	<Grid.ColumnDefinitions>
		<ColumnDefinition Width="Auto" />
		<ColumnDefinition Width="*" />
	</Grid.ColumnDefinitions>
	<Grid.RowDefinitions>
		<RowDefinition Height="Auto" />
		<RowDefinition Height="Auto" />
		<RowDefinition Height="*" />
	</Grid.RowDefinitions>
	<Label>Name:</Label>
	<TextBox Grid.Column="1" Margin="0,0,0,10" />
	<Label Grid.Row="1">E-mail:</Label>
	<TextBox Grid.Row="1" Grid.Column="1" Margin="0,0,0,10" />
	<Label Grid.Row="2">Comment:</Label>
	<TextBox Grid.Row="2" Grid.Column="1" AcceptsReturn="True" Height="100" />
</Grid>

3. 创建自己的控件

WPF提供了两种完成此任务的方法：用户控件和自定义控件。自定义控件的外观通常通过主题文件中的样式进行控制，而用户控件的外观将遵循应用程序其余部分的外观。 自定义控件可以设置样式/模板，而用户控件则不能。

3.1 用户控件

WPF 用户控件继承UserControl类，其行为与WPF窗口非常相似：有一个XAML文件和一个代码后置文件。 在XAML文件中，可以添加现有的WPF控件以创建所需的外观，然后将其与代码后置文件中的代码组合，以实现所需的功能。 实例代码是一个限制并显示字数输入的用户控件

  • 创建用户控件

UI前置脚本：UserControl1.xaml

<UserControl x:Class="WpfStudy.UserControl1"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
             xmlns:local="clr-namespace:WpfStudy"
             mc:Ignorable="d" 
             d:DesignHeight="150" d:DesignWidth="300">
	<Grid>
		<Grid.RowDefinitions>
			<RowDefinition Height="Auto" />
			<RowDefinition Height="*" />
		</Grid.RowDefinitions>
		<Grid.ColumnDefinitions>
			<ColumnDefinition Width="*" />
			<ColumnDefinition Width="Auto" />
		</Grid.ColumnDefinitions>
		<Label Content="{Binding Title}" />
		<Label Grid.Column="1">
			<StackPanel Orientation="Horizontal">
				<TextBlock Text="{Binding ElementName=txtLimitedInput, Path=Text.Length}" />
				<TextBlock Text="/" />
				<TextBlock Text="{Binding MaxLength}" />
			</StackPanel>
		</Label>
		<TextBox MaxLength="{Binding MaxLength}" Grid.Row="1" Grid.ColumnSpan="2" 
				 Name="txtLimitedInput" ScrollViewer.VerticalScrollBarVisibility="Auto" TextWrapping="Wrap" />
	</Grid>
</UserControl>

后置代码：UserControl1.xaml.cs

public partial class UserControl1 : UserControl
{
	public UserControl1()
	{
		InitializeComponent();
		this.DataContext = this;
	}
	public string Title { get; set; }
	public int MaxLength { get; set; }
}
  • 用户控件的使用
    使用前，先要编译用户控件，然后在声明中引入uc命名空间，之后就可以像其他其他WPF控件一样使用了。
<Window x:Class="WpfStudy.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
		xmlns:uc="clr-namespace:WpfStudy"
		mc:Ignorable="d"
        Title="MainWindow" Height="600" Width="400"
		Icon="me.png" WindowStartupLocation="CenterScreen">
	<Window.Resources>
	</Window.Resources>
	<Grid Margin="10">
		<Grid.RowDefinitions>
			<RowDefinition Height="Auto" />
			<RowDefinition Height="*" />
		</Grid.RowDefinitions>
		<uc:UserControl1 Title="Enter title:" MaxLength="30" Height="50" />
		<uc:UserControl1 Title="Enter description:" MaxLength="140" Grid.Row="1" />
	</Grid>
</Window>
3.2 自定义控件

自定义控件比用户控件更加底层。 创建自定义控件时，将根据需要的深度继承现有类。 在许多情况下，可以继承其他WPF控件继承的Control类（例如TextBox），但如果需要更深入，则可以继承FrameworkElement甚至UIElement。

卷儿哥
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
C#WPF控件大全
qq_30725967的博客
03-28 531
C#WPF控件大全
WPF 常用控件
lvxingzhe3的博客
03-25 3570
WPF常用控件
WPF-常见集合控件（ItemsControl、ListView、DataGrid、TreeView、TabControl.......）
rwo_bear的博客
09-03 2740
属于ItemsControl族主要用到两个依赖属性：ItemSource:指定数据来源ItemTemplete:在资源中指定一个数据显示模板更多属性：DisplayMemberPath、SelectedValuePath。。。
智能控制导论课件智能控制导论课件
03-08
蔡自兴的，很不错 国家本科精品课程 很全面，蔡自兴的，很不错 国家本科精品课程
WPF控件大全.zip
07-31
wpf 12种控件的Style 有Button,DataGrid等等，wpf 12种控件的Style 有Button,DataGrid等等，
WPF（一） WPF基本控件与布局
Hello World!
08-19 5137
WPF（Windows Presentation Foundation）是微软推出的基于Windows的用户界面框架，中文译为“Windows呈现基础”，属于.NET Framework 3.0的一部分。WPF类似于WinForm技术框架，但是相比于WinForm，WPF对大部分基础功能进行了更加强大的拓展，并且引入了XAML标记语言，真正实现了开发人员和设计人员的前后端分离，并且衍生出了一套MVVM开发框架。
WPF的ListView控件自定义布局用法实例
09-02
主要介绍了WPF的ListView控件自定义布局的方法,结合实例形式分析了WPF中ListView控件的布局方法,需要的朋友可以参考下
WPF 自定义控件库 常用控件封装&常用控件样式重写
最新发布
03-26
WPF 自定义控件库 常用控件封装&常用控件样式重写
WPF 自定义虚拟键盘控件
12-28
WPF .net Framework 4.6.2 虚拟键盘自定义控件；适合新手借鉴、程序应急使用；直接上源码，可自行修改； 虚拟键盘(支持英文，数字输入，及部分特殊字符(特殊字符都为英文字符)) 1.0版本；后续慢慢增加其他功能及其他...
WPF布局、控件、事件、绑定、MVVM基础入门
03-26
WPF布局、控件、事件、绑定、MVVM基础入门
WPF 面板控件:Canvas控件
m0_58717895的博客
06-20 926
WPF Canvas控件
WPF各种控件样式大全
11-21
wpf 12种控件的Style 可能会需要修改 有Button,DataGrid,
WPF常用控件
08-26
本资源新增TonyTab2017,treeviewEx,Mui,LuaEditor以及一些其他常用控件
wpf 控件样式大全
12-30
wpf 控件样式大全 可以帮着做漂亮WPF客户端的一些实例帮助
WPF各种基本控件模版
08-24
TextBox样式包括：水印、富文本格式、密码框、只读、搜索、选择文件路径 Button样式：鼠标移上去变色、图标+文字、勾选 Loading样式：仿VS2015的等待动画、原型进度条 Image样式：转动 ComboBox样式：水印、日历、清楚按钮 TreeView样式：仿QQ样式 ListBox样式：单选、多选
WPF控件学习系列之五---CanvasPanel控件
gavinlove_的专栏
04-16 1904
Canvas Panel<br /> <br />Introduction介绍<br />The Canvas is the most basic layout panel in WPF. It's child elements are positioned by explicit coordinates. The coordinates can be specified relative to any side of the panel usind the Canvas.Left, Canvas.Top,
9款WPF用户界面控件对比评测
热门推荐
飞龙在天
12-13 4万+
WPF（Windows Presentation Foundation）是微软推出的基于Vista的用户界面框架，它提供了统一的编程模型、语言和框架，真正做到了分离界面设计人员与开发人员的工作；同时它提供了全新的多媒体交互用户图形界面，是很多桌面应用开发的首选工具。由此，市面上各大知名第三方控件厂商均有专门针对WPF版本的用户界面控件，下面小编为你一一进行了盘点，并简单列出了各自的特点，希望能帮助
对wpf 的入门记录总结----面板控件Canvas、WrapPanel、StackPanel、DockPanel
暗色调的博客
09-28 387
面板是WPF裡其中一個很重要的控件。 面板扮演著裝載其他控件的容器的角色，同時也控制著頁面和視窗的佈局。 由於一個視窗只允許一個子控件，因此面板經常會被使用於分隔空間，這樣每個空間就會有一個控件或者面板。 wpf支持6种面板： 1. Canvas 这是一种简单的面板，与WinForms应用处理方式类似。该面板可以设置每个子控件的坐标，容许完全的布局控制。但是该面板不够弹性，因为你必须手动移动子控件...
详细描述wpf常用控件，布局控件，详细描述
07-09
WPF（Windows Presentation Foundation）是一种用于创建Windows应用程序的UI框架，提供了丰富的控件和布局控件，下面是对常用控件和布局控件的详细描述： 常用控件： 1. Button（按钮）：用于触发特定操作或事件，...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值