wpf DataTemplate 和 ControlTemplate 区别,应用举例

在WPF中,模版(ControlTemplate ) ControlTemplate用于定义控件的内部结构和外观,它决定了控件的"长成什么样子",并允许开发者在控件原有的内部逻辑基础上扩展自己的逻辑。DataTemplate则专注于数据内容的展示方式,即数据如何被可视化呈现。

cs 复制代码
示例实现
1. 定义歌曲类
首先,我们定义一个Song类,用于表示歌曲数据。

public class Song  
{  
    public string Title { get; set; }  
    public string Artist { get; set; }  
    // 可以添加更多属性,如专辑、时长等  
}
2. 创建DataTemplate
在XAML中,我们为Song类创建一个DataTemplate,用于定义每首歌曲在播放列表中的显示方式。

<Window.Resources>  
    <DataTemplate x:Key="SongDataTemplate">  
        <StackPanel Orientation="Horizontal" Margin="5">  
            <TextBlock Text="{Binding Title}" FontSize="16" FontWeight="Bold"/>  
            <TextBlock Text=" - " Margin="2,0,0,0"/>  
            <TextBlock Text="{Binding Artist}" FontSize="14"/>  
        </StackPanel>  
    </DataTemplate>  
</Window.Resources>


3. 创建ControlTemplate
接下来,我们为播放列表控件(例如ListBox)创建一个ControlTemplate,以改变其整体外观。这里为了简化,我们只改变背景色和滚动条样式,但你可以根据需要添加更多自定义内容
<Window.Resources>  
    <!-- 之前的DataTemplate定义 -->  
  
    <ControlTemplate x:Key="PlaylistControlTemplate" TargetType="ListBox">  
        <Border Background="LightGray" Padding="10">  
            <ScrollViewer HorizontalScrollBarVisibility="Auto" VerticalScrollBarVisibility="Auto">  
                <ItemsPresenter/>  
            </ScrollViewer>  
        </Border>  
    </ControlTemplate>  
</Window.Resources>

4. 应用Template
现在,我们在XAML布局中应用这两个模版。首先,为ListBox设置ControlTemplate,然后为其ItemTemplate设置之前定义的DataTemplate。
<Grid>  
    <ListBox x:Name="PlaylistListBox"  
             Template="{StaticResource PlaylistControlTemplate}"  
             ItemTemplate="{StaticResource SongDataTemplate}">  
        <!-- 这里通过数据绑定填充歌曲列表 -->  
    </ListBox>  
</Grid>
相关推荐
WPF工业上位机10 小时前
匠心研智造,同心赴新程-WPF硬件通讯之串口&Socket
wpf
爱炸薯条的小朋友17 小时前
C#由窗体原子表溢出造成的软件闪退,根本原因补充
开发语言·c#·wpf
晚风一隅1 天前
阿里云盘古存储系统:EB级分布式存储的架构革命与技术突破
wpf
步步为营DotNet2 天前
深挖.NET 11:.NET Aspire 在云原生应用状态管理的创新与实践
云原生·.net·wpf
He BianGu2 天前
【项目】WPF VisionMaster 4.0 项目介绍和开发文档
c#·wpf·流程图·开发文档·机器视觉·visionmaster
He BianGu2 天前
【笔记】在WPF中PriorityBinding的详细介绍
笔记·wpf
bugcome_com2 天前
WPF + Prism 技术指南与实战项目(一、自行搭建)
wpf·prism
她说彩礼65万4 天前
WPF Border
wpf
He BianGu4 天前
【笔记】在WPF中在IValueConverter 时“无法返回有效值该怎么做”
笔记·wpf
海兰4 天前
使用 OpenTelemetry 与 Elastic APM 追踪 MCP 服务器工具调用
运维·服务器·elasticsearch·wpf