WPF笔记汇总之富文本控件与标签页控件

最新推荐文章于 2024-08-06 16:21:00 发布
最新推荐文章于 2024-08-06 16:21:00 发布
阅读量2.1k 收藏 12
点赞数 1
分类专栏： .NET 文章标签： wpf c# .net xaml
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/dahlinsky/article/details/108597412
版权

WPF富文本控件与标签页控件

接着上一篇《WPF笔记汇总之杂项控件与样式》，来总结下一个WPF知识点，这篇主要汇总富文本控件与选项卡控件，包括一些常用的用法属性及相关控件样式的自定义实例。

文章目录

1. FlowDocument 控件

就是编辑这些加载的富文本用的控件。就是FlowDocument系列控件，负责渲染富文本，这包括图片、列表、表格，以及其他可以浮动、调整等的元素。使用FlowDocument，可以在设计时像HTML一样指定富文本内容，并能直接在你的WPF应用中渲染。FlowDocument并不是单独的组件。

1.1 FlowDocumentScrollViewer

FlowDocument的最简单的包装，它简单地把文档显示成一份长文本文档，允许滚动浏览。可以在按住Ctrl键时使用鼠标滚轮放大和缩小。也可以在FlowDocumentScrollViewer上将IsToolBarVisible属性设置为true，显示缩放的工具栏。通过设置ScrollViewer.VerticalScrollBarVisibility属性为Auto，滚动条将被置为不可见，TextAlignment属性设置对其方式，IsOptimalParagraphEnabled属性使文本尽量在前，。 IsHyphenationEnabled 允许WPF使用连字符分割单词。

<FlowDocumentScrollViewer>
	<FlowDocument>
		<Paragraph FontSize="36">Hello, world!</Paragraph>
		<Paragraph FontStyle="Italic" TextAlignment="Left" FontSize="14" Foreground="Gray">The ultimate programming greeting!</Paragraph>
	</FlowDocument>
</FlowDocumentScrollViewer>

<!--显示缩放工具栏-->
<FlowDocumentScrollViewer IsToolBarVisible="True" Zoom="80" ScrollViewer.VerticalScrollBarVisibility="Auto">
	<FlowDocument>
		<Paragraph FontSize="36">Hello, world!</Paragraph>
		<Paragraph FontStyle="Italic" TextAlignment="Left" FontSize="14" Foreground="Gray">The ultimate programming greeting!</Paragraph>
	</FlowDocument>
</FlowDocumentScrollViewer>

<!--文本对齐-->
<FlowDocumentScrollViewer ScrollViewer.VerticalScrollBarVisibility="Auto">
		<FlowDocument>
			<Paragraph FontStyle="Italic" FontSize="14" Foreground="Gray">
				By setting the
				<Bold>IsOptimalParagraphEnabled</Bold> property to true,
                  you will allow WPF to look ahead on the lines to come, before deciding
                  where to break. This will usually result in a more pleasant reading
                  experience. It works especially well in combination with the
				<Bold>IsHyphenationEnabled</Bold> property.
			</Paragraph>
		</FlowDocument>
	</FlowDocumentScrollViewer>

<FlowDocumentScrollViewer ScrollViewer.VerticalScrollBarVisibility="Auto">
	<FlowDocument IsOptimalParagraphEnabled="True" IsHyphenationEnabled="True">
		<Paragraph FontStyle="Italic" FontSize="14" Foreground="Gray">
			By setting the
			<Bold>IsOptimalParagraphEnabled</Bold> property to true,
                  you will allow WPF to look ahead on the lines to come, before deciding
                  where to break. This will usually result in a more pleasant reading
                  experience. It works especially well in combination with the
			<Bold>IsHyphenationEnabled</Bold> property.
		</Paragraph>
	</FlowDocument>
</FlowDocumentScrollViewer>
1.2 FlowDocumentPageViewer

该控件会自动把你的文档分割成页，以便在页之间浏览，支持Ctrl+F键盘快捷键来启动搜索，但要确保有足够的水平控件，否则看不到搜索框

<DockPanel>
	<WrapPanel DockPanel.Dock="Top">
		<Button Name="btnSearch" Click="btnSearch_Click">Search</Button>
	</WrapPanel>
	<FlowDocumentPageViewer Name="fdViewer">
		<FlowDocument>
			<Paragraph>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce faucibus odio arcu, luctus vestibulum tortor congue in. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce nec lacinia neque. Donec malesuada, ligula non vestibulum cursus, urna purus pellentesque orci, aliquet accumsan dui velit ac justo. Phasellus sagittis ligula in leo dapibus, vel vestibulum felis mattis. Fusce vitae auctor nibh. Ut sit amet fringilla turpis. Aenean tincidunt feugiat sapien, quis scelerisque enim pretium commodo. Mauris fermentum posuere nulla, vitae fermentum quam malesuada in. Cras ultrices bibendum nulla eu mollis. Sed accumsan pretium magna, non sodales velit viverra id. Sed eu elit sit amet sem ullamcorper rhoncus.</Paragraph>
			<Paragraph>Nulla vitae suscipit tellus. Nunc sit amet tortor fermentum, sollicitudin enim cursus, sagittis lacus. Pellentesque tincidunt massa nisl, nec tempor nulla consequat a. Proin pharetra neque vel dolor congue, at condimentum arcu varius. Sed vel luctus enim. Curabitur eleifend dui et arcu faucibus, sit amet vulputate libero suscipit. Vestibulum ultrices nisi id metus ultrices, eu ultricies ligula rutrum. Phasellus rhoncus aliquam pretium. Quisque in nunc erat. Etiam mollis turpis cursus, sagittis felis vel, dignissim risus. Ut at est nec tellus lobortis venenatis. Fusce elit mi, gravida sed tortor at, faucibus interdum felis. Phasellus porttitor dolor in nunc pellentesque, eu hendrerit nulla porta. Vestibulum cursus placerat elit. Nullam malesuada dictum venenatis. Interdum et malesuada fames ac ante ipsum primis in faucibus.</Paragraph>
		</FlowDocument>
	</FlowDocumentPageViewer>
</DockPanel>

也可以在后置代码中调用搜索按钮

private void btnSearch_Click(object sender, RoutedEventArgs e)
{
	fdViewer.Find();
}
1.3 FlowDocumentReader

前两种控件的结合体。它有一些比较重要的属性，ViewingMode - 控制初始查看模式。 默认值为Page，但如果您需要其他默认视图，则可以将其更改为Scroll或TwoPage。 除非明确禁用，否则最终用户仍可以更改此设置。IsFindEnabled - 使您能够禁用文档中的搜索。 如果禁用，搜索按钮将从工具栏中删除。IsTwoPageViewEnabled， IsPageViewEnabled 和 IsScrollViewEnabled - 允许关闭阅读器的特定查看模式。 设置为false时，此模式不再适用于阅读器，并且该按钮将从工具栏中删除。
Zoom - 允许设置默认缩放级别。 标准是100％，但可以使用Zoom属性更改此值。

<Grid>
	<FlowDocumentReader>
		<FlowDocument>
			<Paragraph>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce faucibus odio arcu, luctus vestibulum tortor congue in. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce nec lacinia neque. Donec malesuada, ligula non vestibulum cursus, urna purus pellentesque orci, aliquet accumsan dui velit ac justo. Phasellus sagittis ligula in leo dapibus, vel vestibulum felis mattis. Fusce vitae auctor nibh. Ut sit amet fringilla turpis. Aenean tincidunt feugiat sapien, quis scelerisque enim pretium commodo. Mauris fermentum posuere nulla, vitae fermentum quam malesuada in. Cras ultrices bibendum nulla eu mollis. Sed accumsan pretium magna, non sodales velit viverra id. Sed eu elit sit amet sem ullamcorper rhoncus.</Paragraph>
			<Paragraph>Nulla vitae suscipit tellus. Nunc sit amet tortor fermentum, sollicitudin enim cursus, sagittis lacus. Pellentesque tincidunt massa nisl, nec tempor nulla consequat a. Proin pharetra neque vel dolor congue, at condimentum arcu varius. Sed vel luctus enim. Curabitur eleifend dui et arcu faucibus, sit amet vulputate libero suscipit. Vestibulum ultrices nisi id metus ultrices, eu ultricies ligula rutrum. Phasellus rhoncus aliquam pretium. Quisque in nunc erat. Etiam mollis turpis cursus, sagittis felis vel, dignissim risus. Ut at est nec tellus lobortis venenatis. Fusce elit mi, gravida sed tortor at, faucibus interdum felis. Phasellus porttitor dolor in nunc pellentesque, eu hendrerit nulla porta. Vestibulum cursus placerat elit. Nullam malesuada dictum venenatis. Interdum et malesuada fames ac ante ipsum primis in faucibus.</Paragraph>
		</FlowDocument>
	</FlowDocumentReader>
</Grid>

也可以从后置代码进行设置

<Grid>
	<FlowDocumentScrollViewer Name="fdViewer" />
</Grid>

public MainWindow()
{
	InitializeComponent();

	FlowDocument doc = new FlowDocument();
	Paragraph p = new Paragraph(new Run("Hello, world!"));
	p.FontSize = 36;
	doc.Blocks.Add(p);
	
	p = new Paragraph(new Run("The ultimate programming greeting!"));
	p.FontSize = 14;
	p.FontStyle = FontStyles.Italic;
	p.TextAlignment = TextAlignment.Left;
	p.Foreground = Brushes.Gray;
	doc.Blocks.Add(p);
	fdViewer.Document = doc;
}
1.4 高级FlowDocument内容

可以在FlowDocument中包含任何WPF控件。 使用BlockUIContainer元素包含他们，就可以访问所有控件了。

<Window.Resources>
	<x:Array x:Key="UserArray" Type="{x:Type local:User}">
		<local:User Name="John Doe" Age="42"/>
		<local:User Name="Jane Doe" Age="36"/>
	</x:Array>
</Window.Resources>
<Grid>
	<FlowDocumentScrollViewer>
		<FlowDocument>
			<Paragraph FontSize="36" Margin="0">Users</Paragraph>
			<Paragraph FontStyle="Italic" TextAlignment="Left" FontSize="14" Foreground="Gray">Here's a list of our users, inside our FlowDocument, in a completely interactive ListView control!</Paragraph>
			<BlockUIContainer>
				<ListView BorderThickness="0" ItemsSource="{StaticResource UserArray}">
					<ListView.View>
						<GridView>
							<GridViewColumn Header="Name" DisplayMemberBinding="{Binding Name}" Width="150" />
							<GridViewColumn Header="Age" DisplayMemberBinding="{Binding Age}" Width="75" />
						</GridView>
					</ListView.View>
				</ListView>
			</BlockUIContainer>
			<Paragraph FontStyle="Italic" TextAlignment="Left" FontSize="14" Foreground="Gray">More content can go here...</Paragraph>
		</FlowDocument>
	</FlowDocumentScrollViewer>
</Grid>

public class User
{
	public String Name { get; set; }
	public int Age { get; set; }
}

2. RichTextBox 控件

FlowDocument通常是只读的，但将其放入一个RichTextBox控件后，你就可以像在Word那样的文档编辑器上一样编辑这些文本了。比较麻烦的是，RichTextBox 不能直接访问RichTextBox的文本属性，只能使用来自RichTextBox的TextPointer的TextRange对象来获取控件中的文本或控件中的选择。此外还需要设置一下段落的间距。

<DockPanel>
	<WrapPanel DockPanel.Dock="Top">
	<Button Name="btnGetText" Click="btnGetText_Click">Get text</Button>
	<Button Name="btnSetText" Click="btnSetText_Click">Set text</Button>
	<Button Name="btnGetSelectedText" Click="btnGetSelectedText_Click">Get sel. text</Button>
	<Button Name="btnSetSelectedText" Click="btnSetSelectedText_Click">Replace sel. text</Button>
	</WrapPanel>
<TextBox DockPanel.Dock="Bottom" Name="txtStatus" />
<RichTextBox Name="rtbEditor" SelectionChanged="rtbEditor_SelectionChanged">
	<RichTextBox.Resources>
		<Style TargetType="{x:Type Paragraph}">
			<Setter Property="Margin" Value="0" />
		</Style>
	</RichTextBox.Resources>
	<FlowDocument>
			<Paragraph FontSize="36">Hello, world!</Paragraph>
			<Paragraph FontStyle="Italic" TextAlignment="Left" FontSize="14" Foreground="Gray">Thanks to the RichTextBox control, this FlowDocument is completely editable!</Paragraph>
	</FlowDocument>
</RichTextBox>
</DockPanel>

3. TabControl 控件

TabControl 就是标签页控件。其中TabStripPlacement 属性可以改变选项卡的位置，结合样式与模板可以改变标签选项卡的位置及标签页头文字的方向。

3.1 常规用法
<!--简单标签页-->
<Grid>
	<TabControl>
		<TabItem Header="General">
			<Label Content="Content goes here..." />
		</TabItem>
		<TabItem Header="Security" />
		<TabItem Header="Details" />
	</TabControl>
</Grid>

<!--自定义标题-->
<Grid>
	<TabControl>
		<TabItem>
			<TabItem.Header>
				<StackPanel Orientation="Horizontal">
					<Image Source="/images/file.png" />
					<TextBlock Text="Blue" Foreground="Blue" />
				</StackPanel>
			</TabItem.Header>
			<Label Content="Content goes here..." />
		</TabItem>
		<TabItem>
			<TabItem.Header>
				<StackPanel Orientation="Horizontal">
					<Image Source="/images/file.png" />
					<TextBlock Text="Red" Foreground="Red" />
				</StackPanel>
			</TabItem.Header>
		</TabItem>
		<TabItem>
			<TabItem.Header>
				<StackPanel Orientation="Horizontal">
					<Image Source="/images/file.png" />
					<TextBlock Text="Green" Foreground="Green" />
				</StackPanel>
			</TabItem.Header>
		</TabItem>
	</TabControl>
</Grid>

<!--控制标签页-->
<DockPanel>
	<StackPanel Orientation="Horizontal" DockPanel.Dock="Bottom" Margin="2,5">
		<Button Name="btnPreviousTab" Click="btnPreviousTab_Click">Prev.</Button>
		<Button Name="btnNextTab" Click="btnNextTab_Click">Next</Button>
		<Button Name="btnSelectedTab" Click="btnSelectedTab_Click">Selected</Button>
	</StackPanel>
	<TabControl Name="tcSample">
		<TabItem Header="General">
			<Label Content="Content goes here..." />
		</TabItem>
		<TabItem Header="Security" />
		<TabItem Header="Details" />
	</TabControl>
</DockPanel>

private void btnPreviousTab_Click(object sender, RoutedEventArgs e)
{
	int newIndex = tcSample.SelectedIndex - 1;
	if (newIndex < 0)
		newIndex = tcSample.Items.Count - 1;
	tcSample.SelectedIndex = newIndex;
}
private void btnNextTab_Click(object sender, RoutedEventArgs e)
{
	int newIndex = tcSample.SelectedIndex + 1;
	if (newIndex >= tcSample.Items.Count)
		newIndex = 0;
	tcSample.SelectedIndex = newIndex;
}
private void btnSelectedTab_Click(object sender, RoutedEventArgs e)
{
	MessageBox.Show("Selected tab: " + (tcSample.SelectedItem as TabItem).Header);
}
3.2 改变标签页方向

<TabControl TabStripPlacement="Left">
	<TabControl.Resources>
		<Style TargetType="{x:Type TabItem}">
			<Setter Property="HeaderTemplate">
				<Setter.Value>
					<DataTemplate>
						<ContentPresenter Content="{TemplateBinding Content}">
							<ContentPresenter.LayoutTransform>
								<RotateTransform Angle="270" />
							</ContentPresenter.LayoutTransform>
						</ContentPresenter>
					</DataTemplate>
				</Setter.Value>
			</Setter>
			<Setter Property="Padding" Value="3" />
		</Style>
	</TabControl.Resources>
	
	<TabItem Header="General">
		<Label Content="Content goes here..." />
	</TabItem>
	<TabItem Header="Security" />
	<TabItem Header="Details" />
</TabControl>

标签选项卡改变位置截图

3.3 自定义标签页

可以通过使用Style更改ControlTemplate来实现自定义的样式。 通过添加ContentPresenter 控件，指定TabItem的内容应放在何处。

<Grid>
    <TabControl Margin="10" BorderBrush="Gainsboro">
        <TabControl.Resources>
            <Style TargetType="TabItem">
                <Setter Property="Template">
                    <Setter.Value>
                        <ControlTemplate TargetType="TabItem">
                            <Border Name="Border" BorderThickness="1,1,1,0" BorderBrush="Gainsboro" CornerRadius="4,4,0,0" Margin="2,0">
                                <ContentPresenter x:Name="ContentSite"
                                    VerticalAlignment="Center"
                                    HorizontalAlignment="Center"
                                    ContentSource="Header"
                                    Margin="10,2"/>
                            </Border>
                            <ControlTemplate.Triggers>
                                <Trigger Property="IsSelected" Value="True">
                                    <Setter TargetName="Border" Property="Background" Value="LightSkyBlue" />
                                </Trigger>
                                <Trigger Property="IsSelected" Value="False">
                                    <Setter TargetName="Border" Property="Background" Value="GhostWhite" />
                                </Trigger>
                            </ControlTemplate.Triggers>
                        </ControlTemplate>
                    </Setter.Value>
                </Setter>
            </Style>
        </TabControl.Resources>
        <TabItem Header="General">
            <Label Content="Content goes here..." />
        </TabItem>
        <TabItem Header="Security" />
        <TabItem Header="Details" />
    </TabControl>
</Grid>
  • 效果运行截图
    自定义TabControl
卷儿哥
关注
专栏目录
wpf RichTextBox文本编辑器
08-29
wpf RichTextBox文本编辑器，可实现打开保存,添加图片，处理字符等 自己摸索出来的，有问题欢迎提出来。一起改进
WPF+RichTextBox实现富文本编辑器
02-18
WPF+RichTextBox实现富文本编辑器，主要实现主要实现复制，剪切，粘贴，撤销，重做，保存，打开，文本加粗，斜体，下划线，删除线，左对齐，居中对齐，右对齐，两端对齐，缩进，减少缩进，项目符号，数字符号，上标，下标，背景色，前景色，图片，打印等功能。具体实现可参考相关文章
WPF篇（10）-Label标签+TextBlock文字块+TextBox文本框+RichTextBox富文本框
最新发布
一个人的江湖
08-06 1455
Label控件继承于ContentControl控件，它是一个文本标签，如果您想修改它的标签内容，请设置Content属性。我们曾提过ContentControl的Content属性是object类型，。
WPF.HtmlEditor富文本编辑器Demo
01-02
如果引用MSHTML不可用,请换成32位,此演示程序是Win10&x64;位下的HTML引用 基本的文本编辑，查看Html源码、打印、导出文本文件、插入图片、插入表格等，可作为参考使用
wpf分页预览html文件,用WPF实现打印及打印预览
weixin_34355977的博客
06-30 780
应该说，WPF极大地简化了我们的打印输出工作，想过去使用VC++做开发的时候，打印及预览可是一件极麻烦的事情，而现在我不会再使用C++来做Windows的桌面应用了——性价比实在太低。WPF的打印功能是很强大而简便的，它甚至能够直接打印界面上的内容，包括各种控件的显示内容，例如你在界面上摆放了一个datagrid控件，画了一个五角星，或写了一段文字，都可以直接打印出来，这里有一篇文章很简单明了地说...
WPF富文本编辑器
05-15
使用WPF中的RichTextBox控件自定义的文本编辑器，具备文本字体、字体大小、颜色、背景色、加粗、斜线等基本功能
WPF RichTextBox文本编辑框
07-18
这个是经过整理的例子，原来的例子比较复杂。
界面控件DevExpress WPF v21.2新版亮点 - 富文本编辑器升级
需要界面开发、IDE工具研发中文教程资料的小伙伴，记得私信我~
04-12 865
DevExpress WPF已正式发布了v21.2，新版本继续增强了富文本编辑器工具的功能等，欢迎下载最新版体验！
WPF：文本和墨水控件
sheila_1988的博客
02-21 1875
用来显示和编辑文字的控件，无论文本输入是来自于键盘还是指示笔，这些控件有： ·TextBox ·RichTextBox ·PasswordBox ·InkCanvas 1、TextBox 从TextBoxBase继承。使用户能够输入一行或者多行文字。内建了各种功能支持：与Cut、Copy、Paste、Undo和Redo 命令的绑定（就像在之前章节所看到的），甚至还可
界面控件DevExpress WPF富文本编辑器，让系统拥有Word功能（二）
需要界面开发、IDE工具研发中文教程资料的小伙伴，记得私信我~
05-06 1949
本文介绍DevExpress WPF控件中的富文本编辑器，该允许开发者将文字处理功能集成WPF项目中。
WPF学习笔记04-控件Control_Part1
qq_23506909的博客
03-08 1130
11111
富文本控件
04-22
这是一个富文本控件 用C#开发的类似word的富文本编辑器控件，支持字体、排版、插入图片、网页内容提取、颜色拾取等，功能超强，并可以扩展。完全开源的。基于C# .NET2.0开发的。
WPF富文本编辑器,开源代码demo仿word
01-02
基本的文本编辑，查看Html源码、打印、导出文本文件、插入图片、插入表格等，可作为参考使用
WPF自制RichTextBox文本编辑器
12-13
WPF自制RichTextBox文本编辑器，利用了命令，RichTextBox的一些常用属性。实现基本常用的编辑功能
WPF版HTML编辑器基于RichTextBox
07-04
网上找到的WPF版HTML编辑器都是基于web browser控件，它在WPF中存在AllowsTransparency问题。今天终于解决了，分享给大家。 只收1分，大家可以接收吧! 源码来自于codeproject，原版不支持中文汉字，中文会变成乱码还报错。 我做了小修改，全部改为UTF-8编码。
WPF 学生成绩管理工具开发笔记（2）— 创建并使用带有关闭功能的TabItem控件
MaFeng
07-02 1688
目录 一、Shell.Xaml前端代码 二、创建带有关闭功能的TabItem继承控件CloseableTabItem 1、选择自定件控件选项建立 CloseableTabItem 派生自TabItem,并注册一个名称为CloseTab 的路由事件 2、为CloseTabItem创建资源字典CloseableTabItemStyle.xaml 3、App.xaml中引用该字典...
《深入浅出WPF》学习笔记
贵有恒，何必三更眠五更起；最无益，莫过一日曝十日寒
05-03 4208
WPF是什么？ WPF是Windows Presentation Foundation的简称，是用来专门编写程序表示层的技术 1.XAML概览 1.1XAML是什么 XAML(Extensible Application Markup Language):可扩展应用程序标记语言，类似于HTML+CSS+JavaScript的组合 XAML是WPF技术中专门用来设计UI的语言 XAML是...
qt 背景和控件布局_QT 中怎样使得控件与 界面等比例变化
weixin_35348899的博客
01-13 1200
转自：https://github.com/exoticknight/blog-post/blob/master/python-with-Qt-application-development/python%20%C3%97%20Qt%E5%BA%94%E7%94%A8%E5%BC%80%E5%8F%91%20%C2%B7%202%20--%20%E7%95%8C%E9%9D%A2%E5%88%9D...
wpf学习笔记
m0_48048068的博客
09-15 954
wpf学习笔记 XAML 是微软公司为构建应用程序用户界面而创建的一种新的“可扩展应用程序标记语言”，提供了一种便于扩展和定位的语法来定义和程序逻辑分离的用户界面。 XAML是一种基于XML的，格式组织良好的标记语言（比HTML要严格和准确）。其支持快速高效实现应用程序用户界面。 特点： 定义应用程序的界面元素 显示的声明WPF资源（样式、模板、动画等） 可扩展性（自定义UI控件） 集中关注于界面的设计和实现 XAML命名空间的语法： xmlns[:可选映射前缀]="命名空间描述" 注意：没有加可选映射前缀
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值