首先还是那句话,我不是大牛,这些只是简单的记录一下学习的过程,没有太多面向对象和设计模式的思维,只偏基础,不喜莫笑;个人观点如果有不足之处,还望多多指教!由于学的不是太深入这里大多数是面向控件和开发介绍;以使快速了解和开发
因为原来做的是web开发所以,那上面的习惯就嫁接到metro开发上来了,比如原来的模板页,和用户自定义控件
觉得复用起来挺方面,
声明可能这种实现的方式很多win8种可能还有更好的实现,只是我还没研究
所以今天的话题就来了,把我知道的一种实现方式分享给大家
徒弟:师傅,我想做一个信息发布的metro界面,可是很多重复的界面都长得一个德行,我还得重新绘制么很麻烦,一想起来那么麻烦我就不想写了
师傅:懒徒弟,程序员不可以这样的,越不想写就越做不出来,往往一动手就会发现有很多简单的方法,比如为师传授你一个妙法-----用户自定义控件
ok这样创建一个userContol控件复用的板式就可以放在这里面,然后你就可以复用
徒弟:我看上面还有个模板化控件,那是什么东西
师傅:百度说如果你用现有控件组合成一个页面用用户控件,如果你重新定义新的控件用模板化控件,不知道本质上有什么很大的区别,你自己问问度娘啊
徒弟:好我来试试吧
于是开始做起来了
徒弟:我建好了,我想绑定信息,想整成win8的德行,用listView咋显示的那么丑,师傅对于此事你怎么看
师傅:嗯你前面应该数据绑定的应该没有好好看,listView有个默认的Panel就那位,你可以定制自己的Panel用ItemsPanel
徒弟:哦原来这样,那师傅你对用户控件里面,这个用户控件我基本上整好了,我在多个页面复用它,我怎么能绑定自如呢
师傅:我给这个用户控件需要绑定变动的元素都给他抽象到用户控件的model里面来对用户控件,进行绑定,然后每个不同的数据源过来都要经过Convert转换成我所需要的类型就Ok了
徒弟:这样啊,师傅,对用户控件的ListView的事件在使用控件的页面怎么触发这个事件的问题,你怎么看!
师傅:这个你声明一个公共事件但触发这个事件的时候调用这个时间委托,把参数传递过去,在调用页面注册这个事件就Ok了
徒弟:哦做好了信息发布,师傅要不要给大家看一看
师傅:嗯你做的你自己看吧
userControl.xaml
![](https://i-blog.csdnimg.cn/blog_migrate/8f900a89c6347c561fdf2122f13be562.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/961ddebeb323a10fe0623af514929fc1.gif)
<UserControl x:Class="sfloor.NewControl" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:local="using:sfloor" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" mc:Ignorable="d" d:DesignHeight="300" d:DesignWidth="400"> <Grid> <ScrollViewer HorizontalScrollBarVisibility="Auto" VerticalScrollBarVisibility="Hidden"> <ListView x:Name="dataListView" ItemClick="OnItemCilck" IsItemClickEnabled="True" SelectionChanged="dataListView_SelectionChanged"> <ListView.ItemTemplate> <DataTemplate> <StackPanel Orientation="Vertical" Width="300" Height="300"> <Rectangle Height="3" Width="9" Fill="Red"></Rectangle> <Rectangle Height="1" Width="300" Fill="Red"></Rectangle> <TextBlock x:Name="title" Text="{Binding title}" FontSize="30"></TextBlock> <TextBlock x:Name="body" TextWrapping="Wrap" Text="{Binding body}"></TextBlock> </StackPanel> </DataTemplate> </ListView.ItemTemplate> <ListView.ItemsPanel> <ItemsPanelTemplate> <WrapGrid Orientation="Vertical" MaximumRowsOrColumns="2"></WrapGrid> </ItemsPanelTemplate> </ListView.ItemsPanel> </ListView> </ScrollViewer> </Grid> </UserControl>
userControl.cs
public sealed partial class NewContol1 : UserControl { public ObservableCollection<ArticleModel> o; public delegate void dataListViewSelectionChanged(object sender, SelectionChangedEventArgs e); public event dataListViewSelectionChanged OnSelectionChanged; public delegate void UserItemClickHandler(object sender, ItemClickEventArgs e); public event UserItemClickHandler itemClick; public NewContol1() { this.InitializeComponent(); this.dataListView.ItemsSource = this.o; } public NewContol1(ObservableCollection<ArticleModel> o) { this.InitializeComponent(); this.o = o; this.dataListView.ItemsSource = this.o; // this.dataListView.ItemsSource. } private void OnItemCilck(object sender, ItemClickEventArgs e) { itemClick(sender, e); } private void dataListView_SelectionChanged(object sender, SelectionChangedEventArgs e) { // (sender as ListView).ItemTemplate..Items; OnSelectionChanged(sender, e); } }
ArticleModel.cs
![](https://i-blog.csdnimg.cn/blog_migrate/8f900a89c6347c561fdf2122f13be562.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/961ddebeb323a10fe0623af514929fc1.gif)
1 /// <summary>辅助诗歌转换实体类 2 /// 3 /// </summary> 4 public class ArticleModel 5 { 6 public string title 7 { 8 get; 9 set; 10 } 11 public string body 12 { 13 get; 14 set; 15 } 16 public string mark1 { get; set; } 17 public string mark2 { get; set; } 18 19 20 }
效果图: