此例子来自《深入浅出WPF》,刘铁猛。

VS2010

源码1:不使用Bingding

源码2:使用Binding

下面展示一些代码:

主窗体XAML代码:

<Window x:Class="WpfApplication1.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="clr-namespace:WpfApplication1"
Title="MainWindow" Height="350" Width="623" ResizeMode="NoResize">
<Window.Resources>
<local:AutomakerToLogoPathConverter x:Key="a2l"></local:AutomakerToLogoPathConverter>
<local:NameToPhotoPathConverter x:Key="n2p"></local:NameToPhotoPathConverter> <DataTemplate x:Key="carDetailViewTemplate">
<Border BorderBrush="Black" BorderThickness="1" CornerRadius="6">
<StackPanel Margin="5">
<Image Width="400" Height="250" Source="{Binding Name,Converter={StaticResource n2p}}"></Image>
<StackPanel Orientation="Horizontal" Margin="5,0">
<TextBlock Text="Name:" FontWeight="Bold" FontSize="20"></TextBlock>
<TextBlock Text="{Binding Name}" FontSize="20" Margin="5,0"></TextBlock>
</StackPanel>
<StackPanel Orientation="Horizontal" Margin="5,0">
<TextBlock Text="Automaker:" FontWeight="Bold"></TextBlock>
<TextBlock Text="{Binding Automaker}" Margin="5,0"></TextBlock>
<TextBlock Text="Year:" FontWeight="Bold"></TextBlock>
<TextBlock Text="{Binding Year}" Margin="5,0"></TextBlock>
<TextBlock Text="Top Speed:" FontWeight="Bold"></TextBlock>
<TextBlock Text="{Binding TopSpeed}" Margin="5,0"></TextBlock>
</StackPanel>
</StackPanel>
</Border>
</DataTemplate>
<DataTemplate x:Key="carListItemViewTemplate">
<Grid Margin="2">
<StackPanel Orientation="Horizontal">
<Image Source="{Binding Automaker,Converter={StaticResource a2l}}" Grid.RowSpan="3" Width="64" Height="64"></Image>
<StackPanel Margin="5,10">
<TextBlock Text="{Binding Name}" FontSize="16" FontWeight="Bold"></TextBlock>
<TextBlock Text="{Binding Year}" FontSize="14"></TextBlock>
</StackPanel>
</StackPanel>
</Grid>
</DataTemplate>
</Window.Resources>
<StackPanel Orientation="Horizontal" Margin="5">
<UserControl ContentTemplate="{StaticResource carDetailViewTemplate}" Content="{Binding SelectedItem,ElementName=listBoxCars}"></UserControl>
<ListBox x:Name="listBoxCars" Width="180" Margin="5,0" ItemTemplate="{StaticResource carListItemViewTemplate}"></ListBox>
</StackPanel>
</Window>

XAML文件

主窗体XAML文件的后台:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Data;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Imaging;
using System.Windows.Navigation;
using System.Windows.Shapes; namespace WpfApplication1
{
/// <summary>
/// MainWindow.xaml 的交互逻辑
/// </summary>
public partial class MainWindow : Window
{
public MainWindow()
{
InitializeComponent();
InitialCarList();
} private void InitialCarList()
{
List<Car> carList = new List<Car>()
{
new Car(){Automaker="VolksWagen",Name="Beetle",Year="",TopSpeed=""},
new Car(){Automaker="VolksWagen",Name="Golf GTI",Year="",TopSpeed=""},
new Car(){Automaker="VolksWagen",Name="Jetta",Year="",TopSpeed=""},
new Car(){Automaker="VolksWagen",Name="Pheaton",Year="",TopSpeed=""}
};
listBoxCars.ItemsSource = carList;
}
}
}

后台代码

实体Car类:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Data;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Imaging;
using System.Windows.Navigation;
using System.Windows.Shapes; namespace WpfApplication1
{
/// <summary>
/// MainWindow.xaml 的交互逻辑
/// </summary>
public partial class MainWindow : Window
{
public MainWindow()
{
InitializeComponent();
InitialCarList();
} private void InitialCarList()
{
List<Car> carList = new List<Car>()
{
new Car(){Automaker="VolksWagen",Name="Beetle",Year="",TopSpeed=""},
new Car(){Automaker="VolksWagen",Name="Golf GTI",Year="",TopSpeed=""},
new Car(){Automaker="VolksWagen",Name="Jetta",Year="",TopSpeed=""},
new Car(){Automaker="VolksWagen",Name="Pheaton",Year="",TopSpeed=""}
};
listBoxCars.ItemsSource = carList;
}
}
}

Car类

下面是两个Converter:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Windows.Data;
using System.Windows.Media.Imaging; namespace WpfApplication1
{
class AutomakerToLogoPathConverter:IValueConverter
{
#region IValueConverter 成员 public object Convert(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
{
string uriStr = string.Format(@"/Resources/Logos/{0}.jpg",(string)value);
return new BitmapImage(new Uri(uriStr, UriKind.Relative));
} public object ConvertBack(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
{
throw new NotImplementedException();
} #endregion
}
}

AutomakerToLogoPathConverter

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Windows.Data;
using System.Windows.Media.Imaging; namespace WpfApplication1
{
class NameToPhotoPathConverter:IValueConverter
{
#region IValueConverter 成员 public object Convert(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
{
string uriStr = string.Format(@"/Resources/Images/{0}.jpg",(string)value);
return new BitmapImage(new Uri(uriStr, UriKind.Relative));
} public object ConvertBack(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
{
throw new NotImplementedException();
} #endregion
}
}

NameToPhotoPathConverter

下面是文档结构:

WPF的模版的更多相关文章

  1. WPF Template模版之DataTemplate与ControlTemplate【一】

    WPF Template模版之DataTemplate与ControlTemplate[一] 标签: Wpf模版 2015-04-19 11:52 510人阅读 评论(0) 收藏 举报  分类: -- ...

  2. WPF Template模版之寻找失落的控件【三】

    “井水不犯河水”常用来形容两个组织之间界限分明.互不相干,LogicTree与控件内部这颗小树之间就保持着这种关系.换句话说,如果UI元素树上有个X:Name=“TextBox1”的控件,某个控件内部 ...

  3. WPF Template模版之DataTemplate与ControlTemplate的关系和应用【二】

    1. DataTemplate和ControlTemplate的关系 学习过DataTemplate和ControlTemplate,你应该已经体会到,控件只是数据的行为和载体,是个抽象的概念,至于它 ...

  4. 【转】WPF Template模版之DataTemplate与ControlTemplate的关系和应用(二)

    1. DataTemplate和ControlTemplate的关系 学习过DataTemplate和ControlTemplate,你应该已经体会到,控件只是数据的行为和载体,是个抽象的概念,至于它 ...

  5. 【转】WPF Template模版之DataTemplate与ControlTemplate(一)

    WPF系统不但支持传统的Winfrom编程的用户界面和用户体验设计,更支持使用专门的设计工具Blend进行专业设计,同时还推出了以模板为核心的新一代设计理念. 1. 模板的内涵 作为表现形式,每个控件 ...

  6. WPF三大模板简介(Z)

    WPF三大模板简介   WPF支持以下类型的模板: (1) 控件模板.控件模板可以将自定义模板应用到某一特定类型的所有控件,或是控件的某一实例.决定控件外观的是ControlTemplate,它决定了 ...

  7. WPF三大模板简介

    WPF支持以下类型的模板: (1) 控件模板.控件模板可以将自定义模板应用到某一特定类型的所有控件,或是控件的某一实例.决定控件外观的是ControlTemplate,它决定了控件“长成什么样子”,因 ...

  8. 在普通的"类库"项目中添加 WPF 的 Window 对象

    最近开发一个 WPF 项目, 在此项目中有个类库工程, 在开发的过程中发现在类库工程中竟然添加不了 WPF 窗口对象和一些其他的 WPF 对象,在新建窗口中选 WPF 类型,只有一个 “用户控件(WP ...

  9. WPF/Silverlight HierarchicalDataTemplate 模版的使用(转)

    上一篇 对Wpf/Silverlight Template 进行了总结,本篇继续上一篇,主要是介绍 HierarchicalDataTemplate 的使用方法.HierarchicalDataTem ...

随机推荐

  1. Android 获取WIFI MAC地址的方法

    1. 经常用法,调用Android的API:WifiManager <uses-permission android:name="android.permission.ACCESS_W ...

  2. Html学习笔记4

    <span style="font-size:18px;">超链接: 1 标签 语法: <a href="链接跳转后的地址 " >链接文 ...

  3. hdu4504java

    import java.util.*;  class   Main{ public static void main(String[] args) { Scanner cin=new Scanner( ...

  4. 卸载AMH 5.0面板的具体办法

    安装AMH 5.0面板只有YES.NO和EXIT,和AMH 4.X的安装.卸载.退出有点不同,那么如何卸载AMH 5.0面板呢? 1.root登录ssh 2.输入如下命令: killall php-f ...

  5. django开发框架之jumpserver

    发现一个不错的开源堡垒机 jumpserver: https://github.com/ibuler/jumpserver 最开始看的是jumpserver2.0.0 版本,具体的实现方式是: 1. ...

  6. Linux重复执行上一条命令

    执行刚刚执行的一条命令: !! 执行最近一个以指定字符串开头的命令(比如man) !man !m 引用上一个命令的最后一个参数 !$ <ESC>, .

  7. JSON 学习总结 <一>:什么是JSON

    JSON的相关资料和博客很多,JSON无处不用,最近项目中一直要用到JSON,今天没有加班,就写下,算是对自己的总结,对JSON又一次深入的认识. 废话不多了,直接进入今天的主题: 如题:今天就介绍下 ...

  8. 移动设备日期选择插件(基于JQUERY)

    上周花了2个小时写的一个日期选择插件,比较适合移动端的设备.先看个效果图吧.如果刚好是你需要的就往下吧,不需要的也可以继续..... 其实网络上已经有的了类似的成熟插件,比如基于mobiscroll, ...

  9. Codeforces Round #310 (Div. 2)--B

    http://codeforces.com/problemset/problem/556/B 题意:给定n个数字且都小于n,然后每次循环第2k+1个数字+1,第2k个数字减一,k=0,1,2...n/ ...

  10. (转)Hibernate 的应用(Hibernate 的结构)?

    //首先获得 SessionFactory 的对象 SessionFactory sessionFactory = new Configuration().configure(). buildSess ...