WPF: 随便一个面板都可以绑定集合数据,不是非DataGrid莫属地~~看看自定义控件外观

主要介绍如何用任意的Panel去绑定集合数据,这样就可以根据Panel的特性去展示数据了(StackPanel,WrapPanel,ListBox)。。。
好了 废话不说 代码先行(注视都在代码里)

 
1. UI界面布局,也是重要的实现细节
<Window x:Class="TestWPF2.MainWindow"

        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

        Title="MainWindow" Height="350" Width="525">

    <Grid>

        <Grid.Resources>

            <!--定义每一项的模板,这里可以加任何你想要的trigger,style。。。-->

            <DataTemplate x:Key="DayControl">

                <StackPanel Orientation="Vertical" >

                    <TextBlock Text="{Binding Path=Month, StringFormat={}{0}月}" TextAlignment="Center" VerticalAlignment="Center" />

                    <TextBlock Text="{Binding Path=Day, StringFormat={}{0}日}" TextAlignment="Center" VerticalAlignment="Center" />                   

                </StackPanel>

            </DataTemplate>

            <!--绑定集合一般把它用CollectionViewSource托管一下,这个东西可以方便的排序啊分组啊过滤啊什么的~~其乐无穷-->

            <CollectionViewSource x:Key="DateSource" Source="{Binding Path=Dates}"></CollectionViewSource>

        </Grid.Resources>



        <!--

        //       这里可以把滚动条禁掉,让外界看不到listbox的影子,而且还可以作一个ListBoxItem的template,

        //        这样一来连ListBoxItem特有的选中啊之类的特性也去掉,可以在resources里加个style:见文末
        -->

        <ListBox ItemTemplate="{StaticResource DayControl}" Width="400" Grid.Column="1" 

                 ItemsSource="{Binding Source={StaticResource DateSource}}" 

                 ScrollViewer.HorizontalScrollBarVisibility="Disabled" 

                 ScrollViewer.VerticalScrollBarVisibility="Disabled" >

            <ListBox.ItemsPanel>

                <ItemsPanelTemplate>

                    <!--这里我用了UniformGrid,懒得去布局了,大家可以把它换成任何你想要的panel,试试看~~-->

                    <UniformGrid  Columns="7" Rows="6"></UniformGrid>

                </ItemsPanelTemplate>

            </ListBox.ItemsPanel>



        </ListBox>

    </Grid>

</Window>



 
 2. 后台数据源代码
 
              
                
1 public partial class MainWindow : Window
2 {
3 // 数据集合
4 private ObservableCollection < DateTime > dates = new ObservableCollection < DateTime > ();
5 public ObservableCollection < DateTime > Dates
6 {
7 set
8 {
9 if ( this .dates != value)
10 {
11 this .dates = value;
12
13 }
14 }
15 get { return this .dates; }
16
17 }
18
19 public MainWindow()
20 {
21 InitializeComponent();
22
23 // 将数据源设置为当前类
24 this .DataContext = this ;
25
26 // 初始化数据源
27 this .InitDates(DateTime.Now);
28 }
29
30 ///  
31 /// 此函数产生本月的日期,并且要有前后月的日子
32 ///
33 ///
34 void InitDates(DateTime date)
35 {
36 List < string > WeekDay = new List < string > { " Sunday " , " Monday " , " Tuesday " , " Wednesday " , " Thursday " , " Friday " , " Saturday " };
37
38 this .Dates.Clear();
39
40 DateTime startDate = new DateTime(date.Year, date.Month, 1 );
41 int index = WeekDay.IndexOf(startDate.DayOfWeek.ToString());
42 // 如果1号为周一 1-7号要加载上个月的日子
43 if (index == 0 )
44 {
45 index = 7 ;
46 }
47 int counter = 0 ;
48 while (counter < 42 )
49 {
50 var day = startDate.AddDays( - index + counter);
51 this .Dates.Add(day);
52 counter ++ ;
53 }
54
55
56 }
57 }
 
 3. 界面截图
  WPF: 随便一个面板都可以绑定集合数据,不是非DataGrid莫属地~~看看自定义控件外观
这个截图是没有给ListBoxItem重定义Style的,可以试试把这段代码放到Resource里面
   <Style TargetType="ListBoxItem">
                <Setter Property="Template">
                    <Setter.Value>
                        <ControlTemplate TargetType="ListBoxItem">
                            <StackPanel Width="50" Background="LightCyan" Height="50" HorizontalAlignment="Left" VerticalAlignment="Top">
                                <ContentPresenter ></ContentPresenter>
                            </StackPanel>
                        </ControlTemplate>
                    </Setter.Value>
                </Setter>
            </Style>
然后就可以看到,当你点击日期的时候已经没有选中效果了~~
欢迎讨论~~
 
 

你可能感兴趣的:(datagrid)