DataTemplate和ControlTemplate联系与区别

---恢复内容开始---

正如标题中的两个拼接的单词所说,DataTemplate就是数据显示的模板,而ControlTemplate是控件自身的模板。(个人理解,错误请指出,谢谢)

我们看这二者在两类不同的控件中如何使用:

一:ItemsControl

  我们可以利用ControlTemplate来设置控件外表,用DataTemplate来填充控件内容。

<Page.Resources>
        <DataTemplate x:Key="dataTemplate">
            <Grid>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition></ColumnDefinition>
                    <ColumnDefinition></ColumnDefinition>
                    <ColumnDefinition></ColumnDefinition>
                </Grid.ColumnDefinitions>
                <TextBlock Grid.Column="0"  Text="{Binding Name}"></TextBlock>
                <TextBlock Grid.Column="1"  Text="{Binding Age}"></TextBlock>
                <TextBlock Grid.Column="2"   Text="{Binding Sex}"></TextBlock>
            </Grid>
        </DataTemplate>
    </Page.Resources>
    <Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}">
        
        <ListBox x:Name="itemsControl" Width="300" Height="400" ItemsSource="{Binding Mode=OneWay}" ItemTemplate="{StaticResource dataTemplate}">
            <ListBox.Template>
                <ControlTemplate>
                    <Grid >
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition></ColumnDefinition>
                            <ColumnDefinition></ColumnDefinition>
                            <ColumnDefinition></ColumnDefinition>
                        </Grid.ColumnDefinitions>
                        <Grid.RowDefinitions>
                            <RowDefinition Height="auto"></RowDefinition>
                            <RowDefinition></RowDefinition>
                        </Grid.RowDefinitions>
                        <TextBlock Grid.Row="0" Grid.Column="0" FontSize="20" Text="姓名"></TextBlock>
                        <TextBlock Grid.Row="0" Grid.Column="1" FontSize="20" Text="年龄"></TextBlock>
                        <TextBlock Grid.Row="0" Grid.Column="2" FontSize="20" Text="性别"></TextBlock>
                        <ItemsPresenter   Grid.Row="1" Grid.ColumnSpan="3">
                           
                        </ItemsPresenter>
                        
                    </Grid>
                    
                </ControlTemplate>
            </ListBox.Template>

            
        </ListBox>
        <Button x:Name="button" Content="Button" HorizontalAlignment="Left" Height="56" Margin="102,157,0,0" VerticalAlignment="Top" Width="190" Click="button_Click"/>
    </Grid>
View Code

  对应的隐藏代码如下:

    public class Info
    {
        public string Name { get; set; } = "佚名";
        public int Age { get; set; } = 0;
        public string Sex { get; set; } = "不详";
    }
    public sealed partial class MainPage : Page
    {
        public MainPage()
        {
            this.InitializeComponent();
            
        }

        private void button_Click(object sender, RoutedEventArgs e)
        {
            List<Info> list = new List<Info>();
            list.Add(new Info());
            list.Add(new Info { Age = 15, Name = "小莉", Sex = "" });
            list.Add(new Info { Age = 18, Name = "小桂子", Sex = "" });

            itemsControl.ItemsSource = list;
        }
}
View Code

通过单击button,可以向列表控件中填充内容。

值得注意的是,列表表头在ControlTemplate中设置,而内标内容则是由DataTemplate通过数据绑定动态加载。

程序运行如下:

但是发现列表并没有按照表头的格式展开,这是因为ListBox中ListBoxItem中显示内容的宽度是自适应的。未来美观,我们作如下修改

设置ListBox的属性ItemContainerStyle如下:

<ListBox.ItemContainerStyle>
        <Style TargetType="ListBoxItem">
               <Setter Property="HorizontalContentAlignment" Value="Stretch"></Setter>
                </Style>
</ListBox.ItemContainerStyle>

运行程序就发现如下显示了:

值得一提的是,我们在定义Info类的时候使用了C#6的新语法

public [类型] [变量名]{get;set;} = [初始化值];

 

 

 

好像跑题了。以上是ControlTemplate和DataTemplate在ItemsControl类型控件中的一个示例。而ContentControl类型控件中的用法也类似。唯一区别是在ContentTemplate中的ContentPresenter和ItemsPresenter之间。是哪种控件,就用哪种类型的Presenter。记住,设置了ContentTemplate,一定要设置ContentPresenter或ItemsPresenter,否则数

据不显示。

来点官方的

public sealed class ControlTemplate : Windows.UI.Xaml.FrameworkTemplate

public class DataTemplate : Windows.UI.Xaml.FrameworkTemplate



public class FrameworkTemplate : Windows.UI.Xaml.DependencyObject
    Windows.UI.Xaml 的成员

摘要:
创建元素的元素树。FrameworkTemplate 是那些具有特定模板化行为(包括 ControlTemplate 和 DataTemplate)的类的基类。

通过上面的,你应该已经看出他们的共同点了。

 

至于核心的,在深入的。我也就不懂了。。该请教周家安,林政这些.net界的大牛了。向前辈致敬!

 

转载于:https://www.cnblogs.com/cjw1115/p/4709331.html

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
要自定义WPF步骤条组件,可以使用WPF的控件库和自定义样式来实现。下面是实现的基本步骤: 1. 创建一个自定义控件,可以继承自WPF的控件库中的一种控件,如Control或UserControl。 2. 在控件中添加一个ItemsControl,用于显示步骤条的每个步骤。可以使用ItemsControl的ItemsSource属性来绑定一个集合,并使用ItemTemplate属性来定义每个步骤的外观。 3. 在ItemTemplate中添加一个Border或其他控件来显示步骤的背景。可以使用Trigger或MultiDataTrigger来根据步骤的状态(例如,已完成、进行中、未完成)来更改背景颜色或其他外观属性。 4. 可以为控件添加一些自定义属性和事件,以便更好地控制其行为。例如,可以添加一个CurrentStep属性来指定当前步骤,并使用它来更改步骤的状态。 5. 最后,可以将控件添加到自己的应用程序中,并使用它来显示步骤条。 下面是一个简单的示例代码,用于创建自定义步骤条控件: ```xaml <Style TargetType="{x:Type local:CustomStepBar}"> <Setter Property="Template"> <Setter.Value> <ControlTemplate TargetType="{x:Type local:CustomStepBar}"> <ItemsControl ItemsSource="{TemplateBinding ItemsSource}"> <ItemsControl.ItemTemplate> <DataTemplate> <Border Width="20" Height="20" Margin="5" CornerRadius="10" Background="{Binding Path=Status, Converter={StaticResource StepStatusToBackgroundConverter}}"> <TextBlock Text="{Binding Path=StepNumber}" HorizontalAlignment="Center" VerticalAlignment="Center" /> </Border> </DataTemplate> </ItemsControl.ItemTemplate> <ItemsControl.ItemsPanel> <ItemsPanelTemplate> <StackPanel Orientation="Horizontal" /> </ItemsPanelTemplate> </ItemsControl.ItemsPanel> </ItemsControl> </ControlTemplate> </Setter.Value> </Setter> </Style> ``` 此代码创建了一个自定义控件样式,用于将步骤条组件的外观定义为包含一系列带有文本的圆形边框。将Border的Background属性绑定到步骤的状态,并使用StepStatusToBackgroundConverter转换器来将状态转换为颜色。可以根据需要添加其他代码和样式来自定义控件的外观和行为。 希望这可以帮助你开始创建自己的WPF步骤条组件!
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值