.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只能通过控件的既有属性来简单改变外观, ...

随机推荐

PHP5 mysqli 教程
mysqli提供了面向对象和面向过程两种方式来与数据库交互,分别看一下这两种方式. 1．面向对象在面向对象的方式中,mysqli被封装成一个类,它的构造方法如下: __construct ([ st ...
mysql sql技巧篇
1.left join 需要注意的事项以左表为基准,匹配右表,如果右表匹配了两条,那么,就生成两条记录,而这两条记录的坐表信息都是一样的. 之前误以为,右表不会影响记录的条数.select 部分,不 ...
java并发编程-线程池的使用
参考文章:http://www.cnblogs.com/dolphin0520/p/3932921.html 深入剖析线程池实现原理将从下面几个方面讲解: 1.线程池状态 2.任务的执行 3.线程池 ...
将数据导入hive，将数据从hive导出
一:将数据导入hive(六种方式) 1.从本地导入 load data local inpath 'file_path' into table tbname; 用于一般的场景. 2.从hdfs上导入数 ...
Cocos2d-JS轻量级开发
官方提供了另外一种使用cocos2d js的方式,更适合web开发者,只要引用一个js就可以了 1.下载Cocos2d-JS Lite Version(去下载>>) 下载下来的将是一个完整 ...
ArcGIS API for Silverlight地图加载众多点时，使用Clusterer解决重叠问题
原文:ArcGIS API for Silverlight地图加载众多点时,使用Clusterer解决重叠问题问题:如果在地图上加载成百上千工程点时,会密密麻麻,外观不是很好看,怎么破? 解决方法: ...
sell-- 英文网站产品显示404？
1. 简介: 通过在主页(header.jsp)查询B22212,在localhost本地, cn和us查询的结果search.jsp中显示都是没有找到! 但是在外网(www),cn能够查询到,并展示 ...
将option添加到select框
var select=document.createElement("select"); select.setAttribute("class","f ...
http://blog.csdn.net/qiutongyeluo/article/details/52468081
http://blog.csdn.net/qiutongyeluo/article/details/52468081
Proxy settings in TortoiseSVN and command line svn client
The server file is created when you install TortoiseSVN, Eclipse or command-line Subversion. Use the ...

.NET: WPF Template

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

随机推荐

热门专题