深入浅出WPF 第二部分(23)

最新推荐文章于 2025-04-24 17:38:12 发布

原创最新推荐文章于 2025-04-24 17:38:12 发布 · 595 阅读

0 ·

CC 4.0 BY-SA版权

WPF 专栏收录该内容

50 篇文章

订阅专栏

本文详细介绍了WPF中模板的应用，包括ControlTemplate和DataTemplate的使用方法及实例。通过具体的XAML代码示例展示了如何定制控件外观以及数据展示样式。

第11章深入浅出话模板

11.1 模板的内涵

WPF中的Template分为两大类：

ControlTemplate决定了控件"长成什么样子"，并让程序员有机会在控件原有的内部逻辑基础上扩展自己的逻辑。

DataTemplate是数据内容的表现形式。

总而言之，Template就是外衣，ControlTemplate是控件的外衣，DataTemplate是数据的外衣。

Template的API详解：

DataTemplate的简单实例：

    <ListView x:Name="listView1">
        <ListView.ItemTemplate>
            <DataTemplate>
                <Grid>
                    <StackPanel Orientation="Horizontal">
                        <Rectangle Width="{Binding Path=Value}" Fill="Green" Stroke="Green"></Rectangle>
                        <TextBlock Text="{Binding Path=Value}"/>
                    </StackPanel>
                    <TextBlock Margin="5,0" Text="{Binding Path=Year}"/>
                </Grid>
            </DataTemplate>
        </ListView.ItemTemplate>
    </ListView>

            listView1.ItemsSource = prices;

11.2 数据的外衣DataTemplate

DataTemplate常用的地方有三处，分别是：

ContentControl的ContentTemplate属性，相当于给ContentControl的内容穿衣服。

ItemsControl的ItemTemplate属性，相当于ItemsControl的数据条目穿衣服。

GridViewColumn的CellTemplate属性，相当于给GridViewColumn单元格里的数据穿衣服。

CellTemplate实例：

        <ListView x:Name="listView1" ItemsSource="{Binding}">
            <ListView.DataContext>
                <col:ArrayList>
                    <proj:Data Year="2001" Value="100"/>
                    <proj:Data Year="2002" Value="110"/>
                    <proj:Data Year="2003" Value="90"/>
                    <proj:Data Year="2004" Value="120"/>
                    <proj:Data Year="2005" Value="130"/>
                    <proj:Data Year="2006" Value="100"/>
                    <proj:Data Year="2007" Value="120"/>
                </col:ArrayList>
            </ListView.DataContext>
            <ListView.View>
                <GridView>
                    <GridViewColumn Width="60">
                        <GridViewColumn.Header>
                            <Label Content="Year"/>
                        </GridViewColumn.Header>
                        <GridViewColumn.CellTemplate>
                            <DataTemplate>
                                <Grid HorizontalAlignment="Center">
                                    <Label Content="{Binding Year}" />
                                </Grid>
                            </DataTemplate>
                        </GridViewColumn.CellTemplate>
                    </GridViewColumn>
                    <GridViewColumn Width="60">
                        <GridViewColumn.Header>
                            <Label Content="Value"/>
                        </GridViewColumn.Header>
                        <GridViewColumn.CellTemplate>
                            <DataTemplate>
                                <Grid>
                                    <Label Content="{Binding Value}" />
                                </Grid>
                            </DataTemplate>
                        </GridViewColumn.CellTemplate>
                    </GridViewColumn>
                </GridView>
            </ListView.View>
        </ListView>

namespace CarWpfApplication.Objects
{
    public class Car
    {
        public string Automaker { get; set; }
        public string Name { get; set; }
        public string Year { get; set; }
        public string TopSpeed { get; set; }
    }
}

<UserControl x:Class="CarWpfApplication.UserControls.CarListItemView"
             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" 
             mc:Ignorable="d" 
             d:DesignHeight="100" d:DesignWidth="200">
    <Grid>
        <StackPanel Orientation="Horizontal">
            <Image x:Name="imageLogo" Grid.RowSpan="3" Width="100" Height="100"/>
            <StackPanel Orientation="Vertical">
                <TextBlock x:Name="carName" FontWeight="Bold" Margin="10"/>
                <TextBlock x:Name="carYear" FontWeight="Bold" Margin="10"/>
            </StackPanel>
        </StackPanel>  
    </Grid>
</UserControl>

    public partial class CarListItemView : UserControl
    {
        public CarListItemView()
        {
            InitializeComponent();
        }

        private Car car;

        public Car Car
        {
            get { return car; }
            set 
            { 
                car = value;
                this.carName.Text = car.Name;
                this.carYear.Text = car.Year;
                string strUri = string.Format(@"/Resources/Logos/{0} - Copy.jpg", car.Automaker);
                this.imageLogo.Source = new BitmapImage(new Uri(strUri, UriKind.Relative));
            }
        }
    }

<UserControl x:Class="CarWpfApplication.UserControls.CarDetailView"
             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" 
             mc:Ignorable="d" 
             d:DesignHeight="350" d:DesignWidth="420">
    <Grid>
        <StackPanel Orientation="Vertical">
            <Image x:Name="imagePhoto" Width="420" Height="300"/>
                <StackPanel Orientation="Horizontal" Height="30" Margin="5">
                <StackPanel Orientation="Horizontal" Width="100" >
                    <TextBlock Text="Name:" Margin="5"/>
                    <TextBlock x:Name="carName" Margin="5"/>
                </StackPanel>
                <StackPanel Orientation="Horizontal" Width="100">
                    <TextBlock Text="Year:" Margin="5"/>
                    <TextBlock x:Name="carYear" Margin="5"/>
                </StackPanel>
                <StackPanel Orientation="Horizontal" Width="100" >
                    <TextBlock Text="AutoMaker:" Margin="5"/>
                    <TextBlock x:Name="autoMaker" Margin="5"/>
                </StackPanel>
                <StackPanel Orientation="Horizontal" Width="100" >
                    <TextBlock Text="TopSpeed:" Margin="5"/>
                    <TextBlock x:Name="topSpeed" Margin="5"/>
                </StackPanel>
        </StackPanel>
        </StackPanel>
    </Grid>
</UserControl>

    public partial class CarDetailView : UserControl
    {
        public CarDetailView()
        {
            InitializeComponent();
        }

        private Car car;

        public Car Car
        {
            get { return car; }
            set
            {
                car = value;
                string strUri=string.Format(@"/Resources/Images/{0}.jpg", car.Automaker);
                imagePhoto.Source = new BitmapImage(new Uri(strUri, UriKind.Relative));
                this.carName.Text = car.Name;
                this.carYear.Text = car.Year;
                this.autoMaker.Text = car.Automaker;
                this.topSpeed.Text = car.TopSpeed;
            }
        }
    }

<Window x:Class="CarWpfApplication.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:userControls="clr-namespace:CarWpfApplication.UserControls"
        Title="CarView" Height="380" Width="630" ResizeMode="NoResize">
    <Grid>
        <StackPanel Orientation="Horizontal" Height="470">
            <userControls:CarDetailView x:Name="carDetail"/>
            <ListBox x:Name="carListBox" Width="200" Height="350" Margin="0" VerticalAlignment="Top" SelectionChanged="carListBox_SelectionChanged"/>
        </StackPanel>
    </Grid>
</Window>

    public partial class MainWindow : Window
    {
        public MainWindow()
        {
            InitializeComponent();

            InitialCarList();
        }

        private void InitialCarList()
        {
            List<Car> carList = new List<Car>() 
            {
                new Car(){Automaker="bl", Name="Binli", Year="1900", TopSpeed="340"},
                new Car(){Automaker="fll", Name="Falali", Year="1899", TopSpeed="500"},
                new Car(){Automaker="bsj", Name="Baoshijie", Year="1955", TopSpeed="240"},
                new Car(){Automaker="lsls", Name="Laosilaisi", Year="1966", TopSpeed="340"},
            };

            foreach (var car in carList)
            {
                CarListItemView item = new CarListItemView() { Car = car };
                this.carListBox.Items.Add(item);
            }

            if (this.carDetail.Car == null)
            {

                CarListItemView view = this.carListBox.SelectedItem as CarListItemView;

                if (view == null)
                {
                    this.carListBox.SelectedIndex = 0;
                    view = this.carListBox.SelectedItem as CarListItemView;
                }

                if (view != null)
                    this.carDetail.Car = view.Car;
            }
        }

        private void carListBox_SelectionChanged(object sender, SelectionChangedEventArgs e)
        {
            CarListItemView view = e.AddedItems[0] as CarListItemView;
            if (view != null)
                this.carDetail.Car = view.Car;
        }
    }