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. 后台数据源代码

 

 public partial class MainWindow : Window
    {
        //数据集合
        private ObservableCollection<DateTime> dates = new ObservableCollection<DateTime>();
        public ObservableCollection<DateTime> Dates
        {
            set
            {
                if (this.dates != value)
                {
                    this.dates = value;

                }
            }
            get { return this.dates; }

        }

        public MainWindow()
        {
            InitializeComponent();

            //将数据源设置为当前类
            this.DataContext = this;

            //初始化数据源
            this.InitDates(DateTime.Now);
        }

        ///  
        /// 此函数产生本月的日期，并且要有前后月的日子
        /// 
        /// 
        void InitDates(DateTime date)
        {
           List<string> WeekDay = new List<string> { "Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday" };

            this.Dates.Clear();
            
            DateTime startDate = new DateTime(date.Year, date.Month, 1);
            int index = WeekDay.IndexOf(startDate.DayOfWeek.ToString());
            //如果1号为周一 1-7号要加载上个月的日子
            if (index == 0)
            {
                index = 7;
            }
            int counter = 0;
            while (counter < 42)
            {            
                var day = startDate.AddDays(-index + counter);                
                this.Dates.Add(day);
                counter++;
            }


        }
    }

 

 3. 界面截图

 

这个截图是没有给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>

然后就可以看到，当你点击日期的时候已经没有选中效果了~~

欢迎讨论~~