.NET: WPF Template

Data Template:

要做一个listBox，里面有车子的简单信息，点了里面的item后就会显示详细信息。

car class:

 using System;
 using System.Collections.Generic;
 using System.Linq;
 using System.Text;
 using System.Threading.Tasks;

 namespace WpfApplication1
 {
     public class Car
     {
         public string Automaker { get; set; }
         public string Name { get; set; }
         public string Year { get; set; }
         public string TopSpeed { get; set; }
     }
 }

carListItemView.xaml:

 <UserControl x:Class="WpfApplication1.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="50" d:DesignWidth="300">
     <Grid Margin="2">
         <StackPanel Orientation="Horizontal">
             <Image x:Name="imageLogo" Grid.RowSpan="3" Width="64" Height="64"/>
             <StackPanel Margin="5, 10">
                 <TextBlock x:Name="textBlockName" FontSize="16" FontWeight="Bold"/>
                 <TextBlock x:Name="textBlockYear" FontSize="14"/>
             </StackPanel>
         </StackPanel>
     </Grid>
 </UserControl>

carListItemView.xaml.cs:

 using System;
 using System.Collections.Generic;
 using System.Linq;
 using System.Text;
 using System.Threading.Tasks;
 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>
     /// Interaction logic for CarListItemView.xaml
     /// </summary>
     public partial class CarListItemView : UserControl
     {
         private Car car;
         public CarListItemView()
         {
             InitializeComponent();
         }
         public Car Car
         {
             get { return car; }
             set
             {
                 car = value;
                 this.textBlockName.Text = car.Name;
                 this.textBlockYear.Text = car.Year;
                 string uriStr = string.Format(@"/Resource/Logos/{0}.jpg", car.Automaker);
                 this.imageLogo.Source = new BitmapImage(new Uri(uriStr, UriKind.Relative));
             }
         }
     }
 }

carDetailView.xaml:

 <UserControl x:Class="WpfApplication1.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="500" d:DesignWidth="500">
     <Border BorderBrush="Black" BorderThickness="1" CornerRadius="6">
         <StackPanel Margin="5">
             <Image x:Name="imagePhoto" Width="200" Height="250"/>
             <StackPanel Orientation="Horizontal" Margin="5, 0">
                 <TextBlock Text="Name:" FontWeight="Bold" FontSize="20"/>
                 <TextBlock x:Name="textBlockName" FontSize="20" Margin="5, 0"/>
             </StackPanel>
             <StackPanel Orientation="Horizontal" Margin="5, 0">
                 <TextBlock Text="Automaker:" FontWeight="Bold"/>
                 <TextBlock x:Name="textBlockAutomaker" Margin="5, 0"/>
                 <TextBlock Text="Year:" FontWeight="Bold"/>
                 <TextBlock x:Name="textBlockYear" Margin="5, 0"/>
                 <TextBlock Text="Top Speed:" FontWeight="Bold"/>
                 <TextBlock x:Name="textBlockTopSpeed" Margin="5, 0"/>
             </StackPanel>
         </StackPanel>
     </Border>
 </UserControl>

carDetailView.xaml.cs

 using System;
 using System.Collections.Generic;
 using System.Linq;
 using System.Text;
 using System.Threading.Tasks;
 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>
     /// Interaction logic for CarDetailView.xaml
     /// </summary>
     public partial class CarDetailView : UserControl
     {
         public CarDetailView()
         {
             InitializeComponent();
         }
         private Car car;
         public Car Car
         {
             get { return car; }
             set
             {
                 car = value;
                 this.textBlockName.Text = car.Name;
                 this.textBlockYear.Text = car.Year;
                 this.textBlockTopSpeed.Text = car.TopSpeed;
                 this.textBlockAutomaker.Text = car.Automaker;
                 string uriStr = string.Format(@"/Resource/Logos/{0}.jpg", car.Name);
                 this.imagePhoto.Source = new BitmapImage(new Uri(uriStr, UriKind.Relative));
             }
         }
     }
 }

MainWindow.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">
     <StackPanel Orientation="Horizontal" Margin="5">
         <local:CarDetailView x:Name="detailView"/>
         <ListBox x:Name="listBoxCars" Width="180" Margin="5, 0"
                  SelectionChanged="listBoxCars_SelectionChanged"/>
     </StackPanel>
 </Window>

MainWindow.xaml.cs:

 using System;
 using System.Collections.Generic;
 using System.Linq;
 using System.Text;
 using System.Threading.Tasks;
 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>
     /// Interaction logic for MainWindow.xaml
     /// </summary>
     public partial class MainWindow : Window
     {
         public MainWindow()
         {
             InitializeComponent();
             InitialCarList();
         }

         private void InitialCarList()
         {
             List<Car> carList = new List<Car>()
             {
                 "},
                 "},
             };

             foreach(Car car in carList)
             {
                 CarListItemView view = new CarListItemView();
                 view.Car = car;
                 this.listBoxCars.Items.Add(view);
             }
         }

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

这种方式的编程跟传统Win Form的编程方法并没有什么区别，只是语言换成了xaml，思维方式并没有改变，还是事件驱动

转换下思维，listBox里的item作为target绑定car类的source，对于detailView里也是一样。用数据绑定的方式来做，xaml需要写好data template, 而cs文件就非常简单了，因为不需要关心UI

car.cs

 using System;
 using System.Collections.Generic;
 using System.Linq;
 using System.Text;
 using System.Threading.Tasks;
 using System.Globalization;
 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 WpfApplication2
 {
     public class Car
     {
         public string Automaker { get; set; }
         public string Name { get; set; }
         public string Year { get; set; }
         public string TopSpeed { get; set; }
     }

     public class AutomakerToLogoPathConverter : IValueConverter
     {
         public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
         {
             string uriStr = string.Format(@"/Resource/Logos/{0}.jpg", (string)value);
             return new BitmapImage(new Uri(uriStr, UriKind.Relative));
         }
         public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
         {
             throw new NotImplementedException();
         }
     }
     public class NameToPhotoPathConverter : IValueConverter
     {
         public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
         {
             string uriStr = string.Format(@"/Resource/Logos/{0}.jpg", (string)value);
             return new BitmapImage(new Uri(uriStr, UriKind.Relative));
         }
         public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
         {
             throw new NotImplementedException();
         }
     }
 }

MainWindow.xaml:

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

MainWindow.xaml.cs:

 using System;
 using System.Collections.Generic;
 using System.Linq;
 using System.Text;
 using System.Threading.Tasks;
 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 WpfApplication2
 {
     /// <summary>
     /// Interaction logic for MainWindow.xaml
     /// </summary>
     public partial class MainWindow : Window
     {
         public MainWindow()
         {
             InitializeComponent();
             InitialCarList();
         }
         private void InitialCarList()
         {
             List<Car> carList = new List<Car>()
             {
                 "},
                 "},
             };
             this.listBoxCars.ItemsSource = carList;
         }
     }
 }

.NET: WPF Template的更多相关文章

WPF Template模版之DataTemplate与ControlTemplate【一】
WPF Template模版之DataTemplate与ControlTemplate[一] 标签: Wpf模版 2015-04-19 11:52 510人阅读评论(0) 收藏举报分类: -- ...
WPF Template模版之寻找失落的控件【三】
“井水不犯河水”常用来形容两个组织之间界限分明.互不相干,LogicTree与控件内部这颗小树之间就保持着这种关系.换句话说,如果UI元素树上有个X:Name=“TextBox1”的控件,某个控件内部 ...
WPF Template模版之DataTemplate与ControlTemplate的关系和应用【二】
1. DataTemplate和ControlTemplate的关系学习过DataTemplate和ControlTemplate,你应该已经体会到,控件只是数据的行为和载体,是个抽象的概念,至于它 ...
【转】WPF Template模版之DataTemplate与ControlTemplate的关系和应用（二）
1. DataTemplate和ControlTemplate的关系学习过DataTemplate和ControlTemplate,你应该已经体会到,控件只是数据的行为和载体,是个抽象的概念,至于它 ...
【转】WPF Template模版之DataTemplate与ControlTemplate（一）
WPF系统不但支持传统的Winfrom编程的用户界面和用户体验设计,更支持使用专门的设计工具Blend进行专业设计,同时还推出了以模板为核心的新一代设计理念. 1. 模板的内涵作为表现形式,每个控件 ...
WPF Template
ControlTemplate ControlTemplate:用于定义控件的结构和外观,这样可以将控件外观与控件功能分离开. 在xaml中ControlTemplate通常配置到Style中,通过S ...
wpf template的code写法
this.Template = XamlReader.Load ("<ControlTemplate xmlns='http://schemas.microsoft.com/clien ...
WPF:在ControlTemplate中使用TemplateBinding
A bit on TemplateBinding and how to use it inside a ControlTemplate. Introductio Today I'll try to w ...
WPF学习（10）模板
在前面一篇我们粗略说了Style和Behaviors,如果要自定义一个个性十足的控件,仅仅用Style和Behaviors是不行的,Style和Behaviors只能通过控件的既有属性来简单改变外观, ...

随机推荐

C++ 读写文件流
1. 读文件流 string readpro(const char* path) { ifstream infile(path); char buf[1024]; string mess ...
关于Hive的调优（本身，sql，mapreduce）
1.关于hive的优化 ->大表拆分小表 ->过滤字段 ->按字段分类存放 ->外部表与分区表 ->外部表:删除时只删除元数据信息,不删除数据文件多人使用多个外部表操作 ...
利用HTML5的canvas制作万花筒动画特效
<!DOCTYPE HTML> <html> <head> <style> #canvas{ background-color:#cccccc; } & ...
【Java 基础篇】【第五课】类的构造函数
Java 也有自己的构造函数,如同c++一样有两个特征: 1.构造函数的名字和类的名字相同 2.构造函数没有返回值下面来看一下这个例子: public class test { public sta ...
设计模式：组合模式（Composite）
定义:将对象组合树形结构以表示“部分-整体”的层次结构.组合模式使得用户对单个对象和组合对象使用具有一致性. 结构图: Component类: abstract class Component ...
常用yum命令
yum list 查询所有可用软件包 yum search 关键字查询和关键字相关的包 yum -y install 包名加上-y自动回答yes yum -y update 包名升级 yum ...
不允许修改SQLserver2008r2表中字段的属性问题
SQLserver2008r2修改表中字段的属性时弹出点击工具->选项,取消阻止保存要求重新创建表的更改
table表格某一td内容太多导致样式混乱的解决方案
对于有很多条目的数据,通常采用table元素来快速实现,某一个td的内容太多的话就会导致样式混乱难看. 解决方案要让table的宽度固定可以给table元素设置table-layout:fixed; ...
webApi中参数传递
webApi中参数传递一:无参数的get方法: 前端: function GetNoParam() { //为了统一:我们都采用$.ajax({}) 方法; $.ajax({ url: '/a ...
http://blog.csdn.net/littlechang/article/details/8642149
http://blog.csdn.net/littlechang/article/details/8642149

.NET: WPF Template

.NET: WPF Template的更多相关文章

随机推荐

热门专题