WPF技术之ContentControl 控件

简介: ContentControl 是 WPF 中的一个常见控件,用于显示单个内容元素。它可以包含任意类型的内容,包括文本、图像、控件等。

1. 基本用法:

<ContentControl><TextBlockText="Hello, WPF!"/></ContentControl>

在上述示例中,ContentControl 中包含一个 TextBlock,用于显示文本 "Hello, WPF!"。这是 ContentControl 最简单的用法。

  1. 数据绑定:
<ContentControlContent="{Binding MyProperty}"/>

通过将 Content 属性绑定到一个属性上,可以动态地更改 ContentControl 中显示的内容。

  1. 模板选择:
<ContentControlContent="{Binding MyProperty}"><ContentControl.Resources><DataTemplateDataType="{x:Type local:MyClass}"><local:MyCustomControl/></DataTemplate></ContentControl.Resources></ContentControl>

在上述示例中,根据不同的数据类型选择不同的模板来显示内容。当 MyPropertyMyClass 类型时,将使用 MyCustomControl 控件来显示内容。

  1. 内容转换:
<ContentControlContent="{Binding MyProperty}"><ContentControl.ContentTemplate><DataTemplate><TextBlockText="{Binding Length}"/></DataTemplate></ContentControl.ContentTemplate></ContentControl>

通过定义 ContentTemplate 属性,可以自定义 ContentControl 中显示内容的外观。在上述示例中,MyProperty 的内容将被转换为一个 TextBlock,并显示其长度。

  1. 动画效果:
<ContentControlx:Name="myContentControl"Content="Initial Content"><ContentControl.Triggers><EventTriggerRoutedEvent="ContentControl.MouseDown"><BeginStoryboard><Storyboard><DoubleAnimationDuration="0:0:1"To="1.5"Storyboard.TargetProperty="RenderTransform.ScaleX"/><DoubleAnimationDuration="0:0:1"To="1.5"Storyboard.TargetProperty="RenderTransform.ScaleY"/></Storyboard></BeginStoryboard></EventTrigger></ContentControl.Triggers><ContentControl.RenderTransform><ScaleTransform/></ContentControl.RenderTransform></ContentControl>

动画.gif

在上述示例中,点击 ContentControl 时,会启动一个动画效果,将内容进行缩放。

ContentControl 的应用非常灵活,它可以用于创建自定义控件、数据绑定、模板选择、内容转换等场景。通过对 ContentControl 进行自定义,并结合数据绑定和模板,您可以实现各种复杂的界面布局和交互效果。

2.经典应用

在WPF中,可以将ContentControl与TabControl结合使用,来实现将不同的内容显示在TabControl的选项卡中。下面是一个简单的例子:

XAML代码:

<TabControl><TabItemHeader="Tab 1"><ContentControlContent="{Binding Tab1Content}"/></TabItem><TabItemHeader="Tab 2"><ContentControlContent="{Binding Tab2Content}"/></TabItem></TabControl>

Tab1UserControl

<UserControlx:Class="BlankApp4.Tab1UserControl"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:local="clr-namespace:BlankApp4"xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"d:DesignHeight="450"d:DesignWidth="800"mc:Ignorable="d"><GridBackground="Azure"><BorderHorizontalAlignment="Center"VerticalAlignment="Center"><TextBlockText="ContentControl1"/></Border></Grid></UserControl>

Tab2UserControl

<UserControlx:Class="BlankApp4.Tab2UserControl"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:local="clr-namespace:BlankApp4"xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"d:DesignHeight="450"d:DesignWidth="800"Background="Black"mc:Ignorable="d"><Grid><BorderHorizontalAlignment="Center"VerticalAlignment="Center"><TextBlockForeground="White"Text="ContentControl1"/></Border></Grid></UserControl>

ViewModel代码:这里使用了第三方库Prism中的MVVM

publicclassMainWindowViewModel : BindableBase  {
publicMainWindowViewModel()
      {
Tab1Content=newTab1UserControl();
Tab2Content=newTab2UserControl();
      }
privateContentControltab2Content;
publicContentControlTab2Content      {
get { returntab2Content; }
set { SetProperty(reftab2Content, value); }
      }
privateContentControltab1Content;
publicContentControlTab1Content      {
get { returntab1Content; }
set { SetProperty(reftab1Content, value); }
      }
  }

在上述例子中,TabControl包含两个TabItem,分别是"Tab 1"和"Tab 2"。每个TabItem中都包含一个ContentControl,通过绑定ContentControl的Content属性,将ViewModel中的对应内容显示在选项卡中。

需要注意的是,为了在ContentControl中显示不同的内容,我们在ViewModel中定义了两个UserControl类型的属性:Tab1Content和Tab2Content。在ViewModel的构造函数中,我们将具体的UserControl实例赋值给这两个属性。当TabItem被选中时,ContentControl会根据Content属性的值显示不同的内容。

动画.gif

目录
相关文章
|
2月前
|
C# 开发者 Windows
基于Material Design风格开源、易用、强大的WPF UI控件库
基于Material Design风格开源、易用、强大的WPF UI控件库
208 0
|
2月前
|
C#
浅谈WPF之装饰器实现控件锚点
使用过visio的都知道,在绘制流程图时,当选择或鼠标移动到控件时,都会在控件的四周出现锚点,以便于修改大小,移动位置,或连接线等,那此功能是如何实现的呢?在WPF开发中,想要在控件四周实现锚点,可以通过装饰器来实现,今天通过一个简单的小例子,简述如何在WPF开发中,应用装饰器,仅供学习分享使用,如有不足之处,还请指正。
93 1
|
9月前
|
缓存 C# 虚拟化
WPF列表性能提高技术
WPF数据绑定系统不仅需要绑定功能,还需要能够处理大量数据而不会降低显示速度和消耗大量内存,WPF提供了相关的控件以提高性能,所有继承自`ItemsControl`的控件都支持该技术。
|
11月前
|
C# Windows
WPF技术之RichTextBox控件
WPF RichTextBox是Windows Presentation Foundation (WPF)中提供的一个强大的文本编辑控件,它可以显示富文本格式的文本,支持多种文本处理操作。
444 0
|
13天前
|
C# Windows
一款开源、免费、现代化风格的WPF UI控件库
一款开源、免费、现代化风格的WPF UI控件库
|
2月前
|
前端开发 C# 容器
浅谈WPF之控件拖拽与拖动
使用过office的visio软件画图的小伙伴都知道,画图软件分为两部分,左侧图形库,存放各种图标,右侧是一个画布,将左侧图形库的图标控件拖拽到右侧画布,就会生成一个新的控件,并且可以自由拖动。那如何在WPF程序中,实现类似的功能呢?今天就以一个简单的小例子,简述如何在WPF中实现控件的拖拽和拖动,仅供学习分享使用,如有不足之处,还请指正。
147 2
|
11月前
|
存储 自然语言处理 C#
WPF技术之Binding
WPF(Windows Presentation Foundation)是微软推出的一种用于创建应用程序用户界面的框架。Binding(绑定)是WPF中的一个重要概念,它用于在界面元素和数据源之间建立关联。通过Binding,可以将界面元素(如文本框、标签、列表等)与数据源(如对象、集合、属性等)进行绑定,从而实现数据的双向传递和同步更新。
180 2
WPF技术之Binding
|
8月前
|
算法 C# UED
浅谈WPF之控件模板和数据模板
WPF不仅支持传统的Windows Forms编程的用户界面和用户体验设计,同时还推出了以模板为核心的新一代设计理念。在WPF中,通过引入模板,将数据和算法的“内容”和“形式”进行解耦。模板主要分为两大类:数据模板【Data Template】和控件模板【Control Template】。
138 8
|
2月前
|
C# 开发者 C++
一套开源、强大且美观的WPF UI控件库
一套开源、强大且美观的WPF UI控件库
269 0
|
11月前
|
前端开发 C# 容器
WPF技术之Command
WPF Command是一种在MVVM(Model-View-ViewModel)模式中用于处理用户界面交互的机制。它可以将用户界面事件(如按钮点击、菜单项选择等)与应用程序逻辑(命令处理)解耦,同时提供了一种便捷的方式来管理和执行命令
209 2