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="15"/>
            <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="8"></UniformGrid>
                </ItemsPanelTemplate>
            </ItemsControl.ItemsPanel>

            <ItemsControl.ItemTemplate>
                <DataTemplate>
                    <Border CornerRadius="5" Background="White" Margin="10">
                        <StackPanel Background="White" Margin="1">
                            <Border Height="80">
                                <Grid>
                                    <Grid.Background>
                                        <ImageBrush ImageSource="Images/Logo.jpg"  Stretch="Uniform"/>
                                    </Grid.Background>
                                </Grid>
                            </Border>
                            <StackPanel Orientation="Horizontal" HorizontalAlignment="Center">
                                <TextBlock  FontSize="20" FontWeight="Bold" VerticalAlignment="Center" Text="{Binding Info}"></TextBlock>
                                <Border Background="Red"  Width="40" Height="20" VerticalAlignment="Center"  Margin="3 0 0 0" CornerRadius="2">
                                    <TextBlock Text="{Binding TypeName}" FontSize="15" 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 = 0; i < 32; 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:  喜歡的文章點個贊吧,  另外源代碼連接：點我下載