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

随机推荐

nodejs fs 模块
件系统操作相关的函数挺多的.首先可以分为两大类. 一类是异步+回调的. 一类是同步的. 在这里只对异步的进行整理,同步的只需要在函数名称后面加上Sync即可 1. 首先是一类最常规的读写函数,函数名称 ...
Mysql 安装问题排查方法
重启了一次服务器后,使用> mysql -u root -p登陆是出现下面的错误: ERROR 2002 (HY000): Can't connect to local MySQL server ...
Instance of 和getClass()区别概述
instance of 运算符和getClass()方法都可以用来检查一个对象所属的类.instance of 运算符仅测试一个对象的类型:getClass()方法与==或!=结合使用,测试两个对象是 ...
常用jQuery代码01
1.点击获得当前元素索引,实现切换相应的图片路径 $(".li").bind("click", function () { var _num = $(this) ...
python装饰器方法
前几天向几位新同事介绍项目,被问起了@login_required的实现,我说这是django框架提供的装饰器方法,验证用户是否登录,只要这样用就行了,因为自己不熟,并没有做过多解释. 今天查看dja ...
101个LINQ示例，包含几乎全部操作
Restriction Operators Where - Simple public void Linq1() { , , , , , , , , , }; var lowNums = from n ...
Average Cost (AVCO) Method
http://accountingexplained.com/financial/inventories/avco-method Average Cost (AVCO) Method Aver ...
更改Magento的base url
Magento的Base URL是用于访问商店页面的URL,您也可以为单独一个store view设置一个Base Url.在改这项值之前请确保您的域名已经指向了网站所在服务器的IP,DNS解析完成后 ...
ligerui ligerTip气泡提示信息
onAfterShowData:function(){ $('.l-grid-row-cell-inner').hover(function (){ $(this).ligerTip({content ...
读propert文件
PropertiesUtil.java package utils; import java.io.BufferedInputStream; import java.io.FileInputStrea ...

.NET: WPF Template

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

随机推荐

热门专题