菲佣WPF——4(关于DataTemplate(2)动态控件添加神器)

 

动态控件添加，基本UI开发都需要使用。我看过很多人写，都停留在WinFrom开发时代的直接操作控件来实现动态添加控件。到了WPF依然很多人在这样操作。

（不是说这样写错误，但是这违背了UI和逻辑分离的思想，不利于后期维护。深有体会。当看到后台密密麻麻的添加子控件，心情瞬间崩溃)

我们先来看下UI和逻辑不分离的代码（简单粗暴实现代码)：

XAML代码：

<Window x:Class="WpfApplication4.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:local="clr-namespace:WpfApplication4"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow" Height="350" Width="525">
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="60"/>
            <RowDefinition Height="*"/>
        </Grid.RowDefinitions>
        <Button Content="Add" Width="50" Grid.Row="0" Click="Button_Click_1" />
        <WrapPanel x:Name="wpContainer" Width="525" Height="300" Grid.Row="1"/>
    </Grid>
</Window>

XAML.cs代码:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Data;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Imaging;
using System.Windows.Navigation;
using System.Windows.Shapes;

namespace WpfApplication4
{
    /// <summary>
    /// MainWindow.xaml 的交互逻辑
    /// </summary>
    public partial class MainWindow : Window
    {
        #region << Constructor >>
        public MainWindow()
        {
            InitializeComponent();
            //this.DataContext = new MainWindowsViewModel();
        }
        #endregion

        #region << Method >>
        private void Button_Click_1(object sender, RoutedEventArgs e)
        {
            this.wpContainer.Children.Add(GetChild("NewChild"));
        }

        private StackPanel GetChild(string name)
        {
            StackPanel container = new StackPanel();
            container.Width = 300;
            container.Orientation = Orientation.Horizontal;

            TextBlock tb = new TextBlock();
            tb.Width = 120;
            tb.Height = 60;
            tb.Margin = new Thickness(4, 4, 4, 4);
            tb.Text = name;

            Button btnRead = new Button();
            btnRead.Content = "Read";
            btnRead.Width = 80;
            btnRead.Height = 60;
            btnRead.Margin = new Thickness(4, 4, 4, 4);

            Button btnWrite = new Button();
            btnWrite.Content = "Write";
            btnWrite.Width = 80;
            btnWrite.Height = 60;
            btnWrite.Margin = new Thickness(4, 4, 4, 4);

            container.Children.Add(tb);
            container.Children.Add(btnRead);
            container.Children.Add(btnWrite);

            return container;

        }
        #endregion
    }
}

上面的实现动态添加控件。我直接使用路由事件（我可不想把控件传到ViewModel中，所以没用Command)
只是简单的添加，不调整布局，无样式。就有许多代码了。当我们动态添加的控件过于复杂。或者前台美工想调整布局。觉得是灾难；

下面是我们使用下DataTemplate的动态添加控件。（容器使用ListView.容器样式默认（只是为了实现动态，不关心样式))

XAML代码:

<Window x:Class="WpfApplication4.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:local="clr-namespace:WpfApplication4"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow" Height="350" Width="525">
    <Window.Resources>
        <DataTemplate x:Key="itemTemplate">
            <StackPanel Orientation="Horizontal">
                <TextBlock Text="NewChild" Width="120" Height="60" Margin="4,4,4,4"/>
                <Button Content="Read" Width="80" Height="60" Margin="4,4,4,4"/>
                <Button Content="Write" Width="80" Height="60" Margin="4,4,4,4"/>
            </StackPanel>
        </DataTemplate>
    </Window.Resources>
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="60"/>
            <RowDefinition Height="*"/>
        </Grid.RowDefinitions>
        <Button Content="Add" Width="50" Grid.Row="0" Command="{Binding ClickCommand}"/>
        <ListView x:Name="wpContainer" Width="525" Height="300" Grid.Row="1" ItemTemplate="{StaticResource ResourceKey=itemTemplate}" ItemsSource="{Binding ItemList}" />
    </Grid>
</Window>

 

XAML.cs代码：

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Data;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Imaging;
using System.Windows.Navigation;
using System.Windows.Shapes;

namespace WpfApplication4
{
    /// <summary>
    /// MainWindow.xaml 的交互逻辑
    /// </summary>
    public partial class MainWindow : Window
    {
        #region << Constructor >>
        public MainWindow()
        {
            InitializeComponent();
            this.DataContext = new MainWindowsViewModel();
        }
        #endregion
    }
}

后台代码很干净

ViewModel代码:

using System;
using System.Collections.Generic;
using System.Collections.ObjectModel;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using System.Windows;
using System.Windows.Input;

namespace WpfApplication4
{
    public class MainWindowsViewModel:NotifyObject
    {
        #region << Property >>
        public ObservableCollection<string> ItemList
        {
            get;
            set;
        }
        public ICommand ClickCommand { get; set; }
        #endregion
        #region << Constructor >>
        public MainWindowsViewModel()
        {
            ItemList = new ObservableCollection<string>();
            ClickCommand = new DeletegateCommand(Click);
        }
        #endregion

        #region << Method >>
        public void Click()
        {
            ItemList.Add("xx");
        }
        #endregion

    }
}

ViewModel代码也很干净。

相对来说，很多的代码都移到了前台页面中。所有逻辑层的代码相对来说较少。

动态添加 只要有ItemTemplate属性的控件都可以使用。（基本上)

这样写的话，主要任务就交给了美观（LIstView样式的调整)