WPF MVVM示例自定义模板数据绑定

在触摸屏设备上、由于列表是的信息展示不是非常直观和便捷操作。

所以也就出现了很多用面板控件：类似win10的Metro风格, 所以抽空做了一个WPF面板控件。

话不多上 , 先上一个示例图。

为了便于阅读、于是做了一个简单版本, 提供源代码各位可以下载, 该示例中、用的是GalaSoft Mvvm。不了解的朋友Google一下。

新建一个WPF工程添加一个自定义控件、名称自定义, 一下所有UserControl实现代码： 

<UserControl.Resources>
        <Style x:Key="TextBlockStyle" TargetType="{x:Type TextBlock}">
            <Setter Property="TextWrapping" Value="NoWrap"/>
            <Setter Property="TextTrimming" Value="None"/>
            <Setter Property="HorizontalAlignment" Value="Left"/>
            <Setter Property="FontSize" Value=""/>
            <Setter Property="Margin" Value="10 8 5 0"/>
            <Setter Property="Foreground" Value="#616161"/>
        </Style>
    </UserControl.Resources>
    <Grid>
        <ItemsControl ItemsSource="{Binding DoginfoModelList}">
            <ItemsControl.ItemsPanel>
                <ItemsPanelTemplate>
                    <UniformGrid Columns=""></UniformGrid>
                </ItemsPanelTemplate>
            </ItemsControl.ItemsPanel>

            <ItemsControl.ItemTemplate>
                <DataTemplate>
                    <Border CornerRadius="" Background="White" Margin="">
                        <StackPanel Background="White" Margin="">
                            <Border Height="">
                                <Grid>
                                    <Grid.Background>
                                        <ImageBrush ImageSource="Images/Logo.jpg"  Stretch="Uniform"/>
                                    </Grid.Background>
                                </Grid>
                            </Border>
                            <StackPanel Orientation="Horizontal" HorizontalAlignment="Center">
                                <TextBlock  FontSize="" FontWeight="Bold" VerticalAlignment="Center" Text="{Binding Info}"></TextBlock>
                                <Border Background="Red"  Width="" Height="" VerticalAlignment="Center"  Margin="3 0 0 0" CornerRadius="">
                                    <TextBlock Text="{Binding TypeName}" FontSize="" Foreground="White" HorizontalAlignment="Center"/>
                                </Border>
                            </StackPanel>

                            <Grid>
                                <TextBlock Style="{DynamicResource TextBlockStyle}" Text="{Binding Code}"></TextBlock>
                                <TextBlock Style="{DynamicResource TextBlockStyle}" HorizontalAlignment="Right" Text="{Binding BedNumber}"></TextBlock>
                            </Grid>

                            <TextBlock Style="{DynamicResource TextBlockStyle}" Text="{Binding Doctor}"></TextBlock>
                            <TextBlock Style="{DynamicResource TextBlockStyle}" Text="{Binding Day}"></TextBlock>
                            <TextBlock Style="{DynamicResource TextBlockStyle}" Text="{Binding Time}"></TextBlock>
                        </StackPanel>
                    </Border>
                </DataTemplate>
            </ItemsControl.ItemTemplate>
        </ItemsControl>
    </Grid>

用于后台绑定的数据模板的实体类代码：

 public class DogInfo : ViewModelBase
    {

        #region private
        private string info;
        private string typeName;
        private string code;
        private string bedNumber;
        private string doctor;
        private string day;
        private string time;
        #endregion

        /// <summary>
        ///  主要信息
        /// </summary>
        public string Info
        {
            get { return info; }
            set { info = value; RaisePropertyChanged(); }
        }

        /// <summary>
        /// 显示内容
        /// </summary>
        public string TypeName
        {
            get { return typeName; }
            set { typeName = value; RaisePropertyChanged(); }
        }

        /// <summary>
        /// 编号
        /// </summary>
        public string Code
        {
            get { return code; }
            set { code = value; RaisePropertyChanged(); }
        }

        /// <summary>
        /// 床号
        /// </summary>
        public string BedNumber
        {
            get { return bedNumber; }
            set { bedNumber = value; RaisePropertyChanged(); }
        }

        /// <summary>
        /// 医师
        /// </summary>
        public string Doctor
        {
            get { return doctor; }
            set { doctor = value; RaisePropertyChanged(); }
        }

        /// <summary>
        /// 住院天数
        /// </summary>
        public string Day
        {
            get { return day; }
            set { day = value; RaisePropertyChanged(); }
        }

        /// <summary>
        /// 住院时间
        /// </summary>
        public string Time
        {
            get { return time; }
            set { time = value; RaisePropertyChanged(); }
        }

    }

后台View 实现代码：

public class MainViewModel : ViewModelBase
    {
        /// <summary>
        /// Initializes a new instance of the MainViewModel class.
        /// </summary>
        public MainViewModel()
        {
            DoginfoModelList = new ObservableCollection<DogInfo>();
            InitLoadPageList();
        }

        private void InitLoadPageList()
        {
            for (int i = ; i < ; i++)
            {
                DoginfoModelList.Add(new DogInfo()
                {
                    Info = "小贱贱 男 3岁",
                    TypeName = "急诊",
                    Code = "狗狗编号：L0317",
                    BedNumber = "床号：01",
                    Doctor = "主治医师：贾静",
                    Day = "住院编号：37天",
                    Time = "住院时间：" + DateTime.Now.ToString("yyyy-MM-dd")
                });
            }
        }

        private ObservableCollection<DogInfo> doginfoModelList;

        /// <summary>
        /// 狗狗信息列表
        /// </summary>
        public ObservableCollection<DogInfo> DoginfoModelList
        {
            get { return doginfoModelList; }
            set
            {
                doginfoModelList = value;
                RaisePropertyChanged();
            }
        }
    }

最后, 在首页添加用户控件、在加载时给主窗体进行DataContext绑定代码：

/// <summary>
    /// MainWindow.xaml 的交互逻辑
    /// </summary>
    public partial class MainWindow : Window
    {
        MainViewModel vm;
        public MainWindow()
        {
            InitializeComponent();
            vm = new MainViewModel();
            this.DataContext = vm;
        }

    }

最后的局部显示效果图如下：

 PS:  喜欢的文章点个赞吧,  另外源代码链接：点我下载