.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只能通过控件的既有属性来简单改变外观, ...
随机推荐
- 【转】设计模式（三）建造者模式Builder（创建型）
(http://blog.csdn.net/hguisu/article/details/7518060) 1. 概述 在软件开发的过程中,当遇到一个"复杂的对象"的创建工作,该对 ...
- Redis学习笔记(6)-SortedSet
package cn.com; import java.util.HashMap; import java.util.Map; import java.util.Set; import redis.c ...
- Qt的学习资料比起其它C/C++的GUI组件来说已经算很全的了
Qt的学习资料比起其它C/C++的GUI组件来说已经算很全的了.Google的话能解决很多问题,如果没搜到资料的话,如果不是问题太过具体或者奇葩,那就是搜索方法的问题.中文教程中,Qt学习之路系列很不 ...
- 【Android开发学习笔记】【第二课】Activity学习
什么是Activity,就是我们所看到的 需要理解以下四句话: 1.一个Activity就是一个类,并且这个类需要集成Activity: 2.需要重写OnCreat方法 3.每个Activity都需要 ...
- 用Quartz处理定时执行的任务
这次做的项目中,有一部分功能需要实现定时执行.呃,这样说可能有点笼统,打个比方吧.例如用户在登录的时候,连续输错3次密码后,系统会将该用户冻结,不再允许该用户登录系统,等到了晚上零晨时分,再为所有被冻 ...
- [LeetCode]题解（python）：050-Pow(x, n)
题目来源 https://leetcode.com/problems/powx-n/ Implement pow(x, n). 题意分析 Input: x,n Output:pow(x,n) Cond ...
- block 反向传值回调
/** * block 反向传值回调 */ //在第二个控制器中 // (1)声明block,在基类中已写好 // (2)写好传值方法 //(1) typedef void (^Return ...
- C++经典编程题＃6：分配病房
总时间限制: 1000ms 内存限制: 65536kB 描述 某个科室的病房分为重症和普通,只有当病人的疾病严重程度超过了入住重症病房的最低严重值,才可以安排入住重症病房. 现在要求设计一个程序, ...
- jq 拖拽
1.尼玛, move事件的时候忘了加ev,找了一个多小时 <!DOCTYPE html> <html> <head lang="en"> < ...
- [开源]STM32F103RBT6最小系统，LEDx2，KEYx4
STM32F103RBT6最小系统,调试通过,可以SWD模式下载程序,支持串口,一键下载. stm32f103rbt6最小系统链接:http://pan.baidu.com/s/1qYCHeHY 密码 ...