win8/Metro开发系四 win8 自定义用户控件创

首先还是那句话，我不是大牛，这些只是简单的记录一下学习的过程，没有太多面向对象和设计模式的思维，只偏基础，不喜莫笑；个人观点如果有不足之处，还望多多指教！由于学的不是太深入这里大多数是面向控件和开发介绍；以使快速了解和开发

因为原来做的是web开发所以，那上面的习惯就嫁接到metro开发上来了，比如原来的模板页，和用户自定义控件

觉得复用起来挺方面,

声明可能这种实现的方式很多win8种可能还有更好的实现，只是我还没研究

所以今天的话题就来了，把我知道的一种实现方式分享给大家

徒弟：师傅，我想做一个信息发布的metro界面，可是很多重复的界面都长得一个德行，我还得重新绘制么很麻烦,一想起来那么麻烦我就不想写了

师傅：懒徒弟，程序员不可以这样的，越不想写就越做不出来，往往一动手就会发现有很多简单的方法，比如为师传授你一个妙法-----用户自定义控件

ok这样创建一个userContol控件复用的板式就可以放在这里面，然后你就可以复用

徒弟：我看上面还有个模板化控件，那是什么东西

师傅：百度说如果你用现有控件组合成一个页面用用户控件，如果你重新定义新的控件用模板化控件，不知道本质上有什么很大的区别，你自己问问度娘啊

徒弟：好我来试试吧

于是开始做起来了

徒弟：我建好了，我想绑定信息，想整成win8的德行,用listView咋显示的那么丑，师傅对于此事你怎么看

师傅：嗯你前面应该数据绑定的应该没有好好看，listView有个默认的Panel就那位，你可以定制自己的Panel用ItemsPanel

徒弟：哦原来这样，那师傅你对用户控件里面,这个用户控件我基本上整好了，我在多个页面复用它，我怎么能绑定自如呢

师傅：我给这个用户控件需要绑定变动的元素都给他抽象到用户控件的model里面来对用户控件,进行绑定，然后每个不同的数据源过来都要经过Convert转换成我所需要的类型就Ok了

徒弟：这样啊，师傅，对用户控件的ListView的事件在使用控件的页面怎么触发这个事件的问题，你怎么看！

师傅：这个你声明一个公共事件但触发这个事件的时候调用这个时间委托，把参数传递过去，在调用页面注册这个事件就Ok了

徒弟：哦做好了信息发布，师傅要不要给大家看一看

师傅：嗯你做的你自己看吧

userControl.xaml

View Code

<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

View Code

 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     }

效果图：

转载于:https://www.cnblogs.com/cxing/archive/2012/11/03/xingUserControl.html