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

随机推荐

ant
condition逻辑判断: <project name="testCondition"> <target name="test"> & ...
yii2高级版账号密码问题
yii2高级版默认后台没有密码,生成账号密码步骤: 1. CREATE TABLE `user` ( `id` int(11) NOT NULL AUTO_INCREMENT, `username` ...
install zabbix-agent on CENTOS
in ubuntu--https://www.digitalocean.com/community/tutorials/how-to-install-zabbix-on-ubuntu-configur ...
【转】MySQL USE NAMES 'UTF8'
先说MySQL的字符集问题.Windows下可通过修改my.ini内的 # CLIENT SECTION [mysql] default-character-set=utf8 # SERVER SEC ...
Let's Encrypt这个免费的证书签发服务
使用的是Let's Encrypt这个免费的证书签发服务,按照这里的教程一步步照着来,很快就完成了. 迁移过程总体来说比较顺利,只是遇到了两个不大不小的坑.一个是域名的跳转问题,迁移完成以后对于所有h ...
node.js使用util实现简单继承
/** * Created by zzq on 2015/5/15. */ var util = require('util'); var Person = function(){ var myD=' ...
默认的app.js
我们通过npm start 默认入口是app.js,如果想默认入口改为main.js,可以修改项目下的/bin/www文件把app修改main var app = require('../app');
[LeetCode]题解（python）：118-Excel Sheet Column Title
题目来源 https://leetcode.com/problems/excel-sheet-column-title/ Given a positive integer, return its co ...
Bone Collector
if(j>=w[i]) dp[i][j] = max(dp[i-1][j-w[i]]+v[i], dp[i-1][j]); else dp[i][j]=dp[i-1][j]; i 1 2 3 4 ...
dubbo的简单使用
整个过程大致是这样的 1.注册中心使用zookeeper,地址为192.168.192.128:2181! 2.首先服务方所在的服务器是127.0.0.1:8081 服务方提供的接口: public ...

.NET: WPF Template

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

随机推荐

热门专题