将ViewModel绑定到UserControl到StackPanel

时间:2015-05-28 16:18:35

标签: c# wpf xaml mvvm user-controls

所以我现在有一些硬编码的数据,但打算查询SQL数据库以填充一些字段。

我想根据需要使用ContactExpander UserControls填充此StackPanel:

<ScrollViewer Height="350" VerticalScrollBarVisibility="Auto" CanContentScroll="True">
    <DockPanel>
        <StackPanel Name="ContactStackPanel" Margin ="16">
            <!-- Autopopulate the usercontrols here -->
        </StackPanel>
    </DockPanel>
</ScrollViewer>

ContactViewModel如下:

namespace Outreach_Alpha2
{
    class ContactViewModel : ViewModelBase
    {
        //Declare contact variables
        private string _title;
        private string _firstName;
        private string _middleInitial;
        private string _lastName;
        private string _position;
        private string _email;
        private string _phoneNumber;
        private string _phoneExtension;
        private string _faxNumber;


        public string ContactHeader { get; set; }
        public ObservableCollection<string> TitleSource { get; set; }

        //First Name
        //Set regex
        public string Title
        {
            get { return _title; }
            set
            {
                if (_title != value)
                {
                    Validator.ValidateProperty(value, new ValidationContext(this, null, null) { MemberName = "Title" });
                    _title = value;
                    OnPropertyChanged("Title");
                }
            }
        }

        //First Name
        [Required(AllowEmptyStrings = false)]
        [RegularExpression(@"\b^[A-Z][a-zA-Z '&-]*[A-Za-z]$\b", ErrorMessage = @"Invalid First Name.")]
        public string FirstName
        {
            get { return _firstName; }
            set
            {
                if (_firstName != value)
                {
                    Validator.ValidateProperty(value, new ValidationContext(this, null, null) { MemberName = "FirstName" });
                    _firstName = value;
                    OnPropertyChanged("FirstName");
                }
            }
        }

        //MiddleInitial
        //Set regex
        public string MiddleInitial
        {
            get { return _middleInitial; }
            set
            {
                if (_middleInitial != value)
                {
                    Validator.ValidateProperty(value, new ValidationContext(this, null, null) { MemberName = "MiddleInitial" });
                    _middleInitial = value;
                    OnPropertyChanged("MiddleInitial");
                }
            }
        }

        //Last Name
        [Required(AllowEmptyStrings = false)]
        [RegularExpression(@"\b^[A-Z][a-zA-Z '&-]*[A-Za-z]$\b", ErrorMessage = @"Invalid last name.")]
        public string LastName
        {
            get { return _lastName; }
            set
            {
                if (_lastName != value)
                {
                    Validator.ValidateProperty(value, new ValidationContext(this, null, null) { MemberName = "LastName" });
                    _lastName = value;
                    OnPropertyChanged("LastName");
                }
            }
        }

        //Position
        //Set regex
        public string Position
        {
            get { return _position; }
            set
            {
                if (_position != value)
                {
                    Validator.ValidateProperty(value, new ValidationContext(this, null, null) { MemberName = "Position" });
                    _position = value;
                    OnPropertyChanged("Position");
                }
            }
        }

        //Email
        //Set regex
        public string Email
        {
            get { return _email; }
            set
            {
                if (_email != value)
                {
                    Validator.ValidateProperty(value, new ValidationContext(this, null, null) { MemberName = "Email" });
                    _email = value;
                    OnPropertyChanged("Email");
                }
            }
        }

        //Phone Number
        //Set regex
        public string PhoneNumber
        {
            get { return _phoneNumber; }
            set
            {
                if (_phoneNumber != value)
                {
                    Validator.ValidateProperty(value, new ValidationContext(this, null, null) { MemberName = "PhoneNumber" });
                    _phoneNumber = value;
                    OnPropertyChanged("PhoneNumber");
                }
            }
        }

        //Phone Extension
        //Set regex
        public string PhoneExtension
        {
            get { return _phoneExtension; }
            set
            {
                if (_phoneExtension != value)
                {
                    Validator.ValidateProperty(value, new ValidationContext(this, null, null) { MemberName = "PhoneExtension" });
                    _phoneExtension = value;
                    OnPropertyChanged("PhoneExtension");
                }
            }
        }

        //Fax Number
        //Set regex
        public string FaxNumber
        {
            get { return _faxNumber; }
            set
            {
                if (_faxNumber != value)
                {
                    Validator.ValidateProperty(value, new ValidationContext(this, null, null) { MemberName = "FaxNumber" });
                    _faxNumber = value;
                    OnPropertyChanged("FaxNumber");
                }
            }
        }
    }
}

ContactExpander UserControl模板如下:

<UserControl x:Class="Outreach_Alpha2.ContactExpander"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
             xmlns:telerik="http://schemas.telerik.com/2008/xaml/presentation"
             xmlns:outreach="clr-namespace:Outreach_Alpha2"
             mc:Ignorable="d"
             d:DesignHeight="225" d:DesignWidth="400">
    <Border BorderBrush="Black" BorderThickness="1" CornerRadius="1" Margin="1">
        <telerik:RadExpander Header="{Binding Path=ContactHeader}">
            <StackPanel>
                <DockPanel>
                    <StackPanel>
                        <Label Content="Name" FontWeight="Bold" Margin="0, 26, 0, 0"/>
                        <Label Content="Position" FontWeight="Bold"/>
                        <Label Content="Email" FontWeight="Bold"/>
                        <Label Content="Phone" FontWeight="Bold"/>
                        <Label Content="Fax" FontWeight="Bold"/>
                    </StackPanel>
                    <StackPanel>
                        <DockPanel>
                            <Label Content="Title" Width="50" Margin="1" HorizontalContentAlignment="Center"/>
                            <Label Content="First" Width="125" Margin="1" HorizontalContentAlignment="Center"/>
                            <Label Content="MI" Width="30" Margin="1" HorizontalContentAlignment="Center"/>
                            <Label Content="Last" Width="125" Margin="1" HorizontalContentAlignment="Center"/>
                        </DockPanel>
                        <DockPanel HorizontalAlignment="Left">
                            <!-- Title -->
                            <ComboBox Width="50" Margin="1" 
                                      SelectedValue="{Binding Path=Title, 
                                                              Mode=TwoWay}" 
                                      ItemsSource="{Binding Path=TitleSource, 
                                                            Mode=TwoWay}"/>
                            <!-- First Name -->
                            <TextBox Width="125" Margin="1" 
                                     Text="{Binding Path=FirstName, 
                                                    Mode=TwoWay, 
                                                    NotifyOnValidationError=True, 
                                                    ValidatesOnExceptions=True}" />
                            <!-- Middle Initial -->
                            <TextBox Width="30" Margin="1" 
                                     Text="{Binding Path=MiddleInitial, 
                                                    Mode=TwoWay}"/>
                            <!-- Last Name -->
                            <TextBox Width="127" Margin="1" 
                                     Text="{Binding Path=LastName, 
                                                    Mode=TwoWay, 
                                                    NotifyOnValidationError=True, 
                                                    ValidatesOnExceptions=True}"/>
                        </DockPanel>
                        <!-- Position -->
                        <TextBox Margin="2" Text="{Binding Path=Position, 
                                                           Mode=TwoWay}"/>
                        <!-- Email -->
                        <TextBox Margin="2" Text="{Binding Path=Email, 
                                                           Mode=TwoWay, 
                                                           NotifyOnValidationError=True, 
                                                           ValidatesOnExceptions=True}"/>
                        <DockPanel>
                            <!-- Phone Number -->
                            <telerik:RadMaskedNumericInput Margin="2" BorderBrush="LightGray" 
                                                           Value="{Binding Path=PhoneNumber, 
                                                                           Mode=TwoWay, 
                                                                           NotifyOnValidationError=True, 
                                                                           ValidatesOnExceptions=True}" />
                            <Label Content="Ext." FontWeight="Bold"/>
                            <!-- Phone Extension -->
                            <telerik:RadMaskedNumericInput Margin="2" Mask="" BorderBrush="LightGray" 
                                                           Text="{Binding Path=PhoneExtension, 
                                                                          Mode=TwoWay, 
                                                                          NotifyOnValidationError=True, 
                                                                          ValidatesOnExceptions=True}"/>
                        </DockPanel>
                        <!-- Fax Number -->
                        <telerik:RadMaskedNumericInput Margin="2" BorderBrush="LightGray" 
                                                       Value="{Binding Path=FaxNumber, 
                                                                       Mode=TwoWay, 
                                                                       NotifyOnValidationError=True, 
                                                                       ValidatesOnExceptions=True}"/>
                    </StackPanel>
                </DockPanel>
                <Border BorderBrush="Black" BorderThickness="0,0,0,1" Margin="0 6" />
                <Button Content="Edit" Width="50" FontWeight="Bold" Margin="1"/>
            </StackPanel>
        </telerik:RadExpander>
    </Border>
</UserControl>

这是ContactExpander UserControl的代码隐藏:

namespace Outreach_Alpha2
{
    /// <summary>
    /// Interaction logic for ContactExpander.xaml
    /// </summary>
    public partial class ContactExpander : UserControl
    {
        public ContactExpander()
        {
            InitializeComponent();
            this.DataContext = new ContactViewModel();
        }
    }
}

我有一个包含以下内容的自定义结构:

public class ContactInfo
{
    public String FirstName { get; set; }
    public String MiddleInitial { get; set; }
    public String LastName { get; set; }
    public String Title { get; set; }
    public String Position { get; set; }
    public long PhoneNumber { get; set; }
    public int PhoneExtension { get; set; }
    public long FaxNumber { get; set; }
    public String Email { get; set; }
    public String CurrentUser { get; set; }
}

我填充这些字段:

var contactList = new List<ContactInfo>()
{
    new ContactInfo(){ FirstName = "John", MiddleInitial = "", LastName = "Doe", Title = "Dr.", Position = "CEO", PhoneNumber = 8005551234, PhoneExtension = 1234, FaxNumber = 3615559876, Email = "john.doe@abc.com", CurrentUser = ""},
    new ContactInfo(){ FirstName = "Jane", MiddleInitial = "", LastName = "Doe", Title = "Mrs.", Position = "", PhoneNumber = 8005551235, PhoneExtension = 1234, Email = "jane.doe@abc.com", CurrentUser = ""},
};

我只是不知道从哪里开始。我不知道如何使用绑定到ViewModel的自动填充ContactExpander UserControl,我不知道如何使用自动填充的ContactExpanders自动填充Stackpanel。

0 个答案:

没有答案