MVVM WPF 从绑定到模型嵌套属性的文本框中向 DataGrid 添加新项 class

MVVM WPF Add new item to the DataGrid from Textboxes which are bound to the nested properties of the Model class

我是 WPF 和 MVVM 模式的新手,我尝试创建一个简单的 WPF 项目来查询 I 型钢型材数据库并通过 DataGrid 将其显示给用户。成功完成后,我现在进入下一部分:让用户通过填写​​一组文本框将新的钢材配置文件添加到 DataGrid。

型号

namespace SectionGuardWPF.MVVM.Model
{
    public class IProfileModel : ObservableObject
    {
        #region Private Fields
        public short _recno;
        public string _name;
        public string _staadName;
        public double _ax;
        public double _d;
        public double _bf;
        public double _tf;
        public double _tw;
        public double _iz;
        public double _ix;
        public double _ct;
        public double _iy;
        public double _zx;
        public double _zy;
        #endregion

        #region Public Properties
        /// <summary>
        /// Properties are given NotifyPropertyChanged method to allow for a change in property to be notified
        /// </summary>

        public short RECNO
        {
            get { return _recno; }
            set
            {
                _recno = value;
                OnPropertyChanged();
            }
        }
        public string Name
        {
            get { return _name; }
            set
            {
                _name = value;
                OnPropertyChanged();
            }
        }
...
// Repeated for the other fields

ObservableObject:实现INotifyPropertyChanged

的基础class
namespace SectionGuardWPF.Core
{
    public class ObservableObject : INotifyPropertyChanged
    {
        /// <summary>
        /// Raised when a property on this object has a new value.
        /// </summary>
        public event PropertyChangedEventHandler PropertyChanged;

        /// <summary>
        /// Raises this object's PropertyChanged event.
        /// </summary>
        protected void OnPropertyChanged([CallerMemberName] string name = null) // If you use the CallerMemberName attribute, calls to the NotifyPropertyChanged method don't have to specify the property name as a string argument
        {
            PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(name));
        }
    }
}

中继命令

namespace SectionGuardWPF.Core
{
    class RelayCommand : ICommand
    {
        private Action<object> _execute;
        private Func<object, bool> _canExecute;

        public event EventHandler CanExecuteChanged
        {
            add { CommandManager.RequerySuggested += value; }
            remove { CommandManager.RequerySuggested -= value; }
        }

        public RelayCommand(Action<object> execute, Func<object,bool> canExecute=null)
        {
            _execute = execute;
            _canExecute = canExecute;
        }

        public bool CanExecute(object parameter)
        {
            return _canExecute == null || _canExecute(parameter);
        }
        
        public void Execute(object parameter)
        {
            _execute(parameter);
        }
    }
}

查看模型

namespace SectionGuardWPF.MVVM.ViewModel
{
    public class IProfilesViewModel:ObservableObject
    {
        #region Private Fields
        private readonly string _connectionString = //Hidden
        private ObservableCollection<IProfileModel> _iProfiles;
        private ICommand _getIProfilesCommand;
        private ICommand _addNewIProfileCommand;
        private IProfileModel _iProfile = new IProfileModel();
        #endregion

        #region Constructor
        public IProfilesViewModel()
        {
            // Set default Profile Database for the DataGrid upon View instantiation
            IProfiles = GetIProfiles();
        }
        #endregion

        #region Public Properties and Commands
        /// <summary>
        /// Public properties of the IProfilesViewModel Class (used for view binding with IProfilesSubView)
        /// </summary>
        public ObservableCollection<IProfileModel> IProfiles
        {
            get { return _iProfiles; }
            set
            {
                _iProfiles = value;
                OnPropertyChanged();
            }
        }
        public IProfileModel IProfile
        {
            get { return _iProfile; }
            set
            {
                _iProfile = value;
                OnPropertyChanged();
            }
        }
        public ICommand GetIProfilesCommand
        {
            get
            {
                if (_getIProfilesCommand == null)
                {
                    _getIProfilesCommand = new RelayCommand(
                        param => GetIProfiles()
                    );
                }
                return _getIProfilesCommand;
            }
        }
        public ICommand AddNewIProfileCommand
        {
            get
            {
                if (_addNewIProfileCommand == null)
                {
                    _addNewIProfileCommand = new RelayCommand(
                        param => AddNewIProfile()
                    );
                }
                return _addNewIProfileCommand;
            }
        }
        #endregion

        #region Private Methods
        private ObservableCollection<IProfileModel> GetIProfiles()
        {
            TableDataProvider tableDataProvider = new TableDataProvider(_connectionString);
            tableDataProvider.QueryString = "SELECT * FROM [I Shape]";

            IEnumerable<IProfileModel> iProfiles = tableDataProvider.Query<IProfileModel>();
            ObservableCollection<IProfileModel> iProfileObsvCol = new ObservableCollection<IProfileModel>(iProfiles);
            return iProfileObsvCol;
        }

        private void AddNewIProfile()
        {
            IProfiles.Add(
                new IProfileModel
                {
                    RECNO = IProfile.RECNO,
                    Name = IProfile.Name,
                    StaadName = IProfile.StaadName,
                    AX = IProfile.AX,
                    D = IProfile.D,
                    Bf = IProfile.Bf,
                    Tf = IProfile.Tf,
                    Tw = IProfile.Tw,
                    Ix = IProfile.Ix,
                    Iy = IProfile.Iy,
                    Iz = IProfile.Iz,
                    Ct = IProfile.Ct,
                    Zx = IProfile.Zx,
                    Zy = IProfile.Zy
                }
                );
        }

        #endregion
    }
}

查看

<UserControl x:Class="SectionGuardWPF.MVVM.View.IProfilesSubView"
             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:local="clr-namespace:SectionGuardWPF.MVVM.View"
             xmlns:viewModel= "clr-namespace:SectionGuardWPF.MVVM.ViewModel"
             xmlns:view="clr-namespace:SectionGuardWPF.MVVM.View"
             mc:Ignorable="d" 
             d:DesignHeight="580" d:DesignWidth="1300">

    <UserControl.DataContext>
        <viewModel:IProfilesViewModel/>
    </UserControl.DataContext>

    <Grid>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="620"/>
            <ColumnDefinition/>
        </Grid.ColumnDefinitions>

        <DataGrid x:Name="ProfilesDataGrid"
                      x:FieldModifier="public"
                      ItemsSource="{Binding IProfiles, Mode=TwoWay}">

        </DataGrid>

        <Border Grid.Column="1"
                CornerRadius="20"
                Background ="White"
                Margin="10">
            <Grid Margin="10">
                <Grid.RowDefinitions>
                    <RowDefinition Height="50"/>
                    <RowDefinition/>
                    <RowDefinition Height="150"/>
                </Grid.RowDefinitions>

                <TextBlock Text="I-Profiles Data Viewer"
                   VerticalAlignment="Center"
                   HorizontalAlignment="Left"
                   Margin="20,0,0,0"
                   Foreground="Black"
                   FontSize="22"/>

                <Grid Grid.Row="1">
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition/>
                        <ColumnDefinition/>
                    </Grid.ColumnDefinitions>

                    <Grid.RowDefinitions>
                        <RowDefinition/>
                        <RowDefinition/>
                        <RowDefinition/>
                        <RowDefinition/>
                        <RowDefinition/>
                        <RowDefinition/>
                        <RowDefinition/>
                    </Grid.RowDefinitions>

                    <TextBlock Text="RECNO"
                               VerticalAlignment="Center"
                               HorizontalAlignment="Left"
                               Margin="20,0,0,0"
                               Foreground="#1A80FA"
                               Grid.Column="0"
                               Grid.Row="0"
                               FontSize="14"/>

                    <TextBox x:Name="RECNOTextBox"
                             Margin="0,0,20,0"
                             VerticalAlignment="Center"
                             HorizontalAlignment="Right"
                             Style="{StaticResource ParameterTextbox}"
                             Grid.Column="0"
                             Grid.Row="0"
                             Text="{Binding IProfile.RECNO, UpdateSourceTrigger=PropertyChanged, Mode=TwoWay}"/>

                    <TextBlock Text="Name"
                               VerticalAlignment="Center"
                               HorizontalAlignment="Left"
                               Margin="20,0,0,0"
                               Foreground="#1A80FA"
                               Grid.Column="0"
                               Grid.Row="1"
                               FontSize="14"/>

                    <TextBox x:Name="NameTextBox"
                             Margin="0,0,20,0"
                             VerticalAlignment="Center"
                             HorizontalAlignment="Right"
                             Style="{StaticResource ParameterTextbox}"
                             Grid.Column="0"
                             Grid.Row="1"
                             Text="{Binding IProfile.Name, UpdateSourceTrigger=PropertyChanged, Mode=TwoWay}"/>

                    <TextBlock Text="StaadName"
                               VerticalAlignment="Center"
                               HorizontalAlignment="Left"
                               Margin="20,0,0,0"
                               Foreground="#1A80FA"
                               Grid.Column="0"
                               Grid.Row="2"
                               FontSize="14"/>

                    <TextBox x:Name="StaadNameTextBox"
                             Margin="0,0,20,0"
                             VerticalAlignment="Center"
                             HorizontalAlignment="Right"
                             Style="{StaticResource ParameterTextbox}"
                             Grid.Column="0"
                             Grid.Row="2"
                             Text="{Binding IProfile.StaadName, UpdateSourceTrigger=PropertyChanged, Mode=TwoWay}"/>

                    <TextBlock Text="AX"
                               VerticalAlignment="Center"
                               HorizontalAlignment="Left"
                               Margin="20,0,0,0"
                               Foreground="#1A80FA"
                               Grid.Column="0"
                               Grid.Row="3"
                               FontSize="18"/>

                    <TextBox x:Name="AXTextBox"
                             Margin="0,0,20,0"
                             VerticalAlignment="Center"
                             HorizontalAlignment="Right"
                             Style="{StaticResource ParameterTextbox}"
                             Grid.Column="0"
                             Grid.Row="3"
                             Text="{Binding IProfile.AX, UpdateSourceTrigger=PropertyChanged, Mode=TwoWay}"/>

                    <TextBlock Text="D"
                               VerticalAlignment="Center"
                               HorizontalAlignment="Left"
                               Margin="20,0,0,0"
                               Foreground="#1A80FA"
                               Grid.Column="0"
                               Grid.Row="4"
                               FontSize="18"/>

                    <TextBox x:Name="DTextBox"
                             Margin="0,0,20,0"
                             VerticalAlignment="Center"
                             HorizontalAlignment="Right"
                             Style="{StaticResource ParameterTextbox}"
                             Grid.Column="0"
                             Grid.Row="4"
                             Text="{Binding IProfile.D, UpdateSourceTrigger=PropertyChanged, Mode=TwoWay}"/>

                    <TextBlock Text="Bf"
                               VerticalAlignment="Center"
                               HorizontalAlignment="Left"
                               Margin="20,0,0,0"
                               Foreground="#1A80FA"
                               Grid.Column="0"
                               Grid.Row="5"
                               FontSize="18"/>

                    <TextBox x:Name="BfTextBox"
                             Margin="0,0,20,0"
                             VerticalAlignment="Center"
                             HorizontalAlignment="Right"
                             Style="{StaticResource ParameterTextbox}"
                             Grid.Column="0"
                             Grid.Row="5"
                             Text="{Binding IProfile.Bf, UpdateSourceTrigger=PropertyChanged, Mode=TwoWay}"/>

                    <TextBlock Text="Tf"
                               VerticalAlignment="Center"
                               HorizontalAlignment="Left"
                               Margin="20,0,0,0"
                               Foreground="#1A80FA"
                               Grid.Column="0"
                               Grid.Row="6"
                               FontSize="18"/>

                    <TextBox x:Name="TfTextBox"
                             Margin="0,0,20,0"
                             VerticalAlignment="Center"
                             HorizontalAlignment="Right"
                             Style="{StaticResource ParameterTextbox}"
                             Grid.Column="0"
                             Grid.Row="6"
                             Text="{Binding IProfile.Tf, UpdateSourceTrigger=PropertyChanged, Mode=TwoWay}"/>

                    <TextBlock Text="Tw"
                               VerticalAlignment="Center"
                               HorizontalAlignment="Left"
                               Margin="20,0,0,0"
                               Foreground="#1A80FA"
                               Grid.Column="1"
                               Grid.Row="0"
                               FontSize="18"/>

                    <TextBox x:Name="TwTextBox"
                             Margin="0,0,20,0"
                             VerticalAlignment="Center"
                             HorizontalAlignment="Right"
                             Style="{StaticResource ParameterTextbox}"
                             Grid.Column="1"
                             Grid.Row="0"
                             Text="{Binding IProfile.Tw, UpdateSourceTrigger=PropertyChanged, Mode=TwoWay}"/>

                    <TextBlock Text="Ix"
                               VerticalAlignment="Center"
                               HorizontalAlignment="Left"
                               Margin="20,0,0,0"
                               Foreground="#1A80FA"
                               Grid.Column="1"
                               Grid.Row="1"
                               FontSize="18"/>

                    <TextBox x:Name="IxTextBox"
                             Margin="0,0,20,0"
                             VerticalAlignment="Center"
                             HorizontalAlignment="Right"
                             Style="{StaticResource ParameterTextbox}"
                             Grid.Column="1"
                             Grid.Row="1"
                             Text="{Binding IProfile.Ix, UpdateSourceTrigger=PropertyChanged, Mode=TwoWay}"/>

                    <TextBlock Text="Iy"
                               VerticalAlignment="Center"
                               HorizontalAlignment="Left"
                               Margin="20,0,0,0"
                               Foreground="#1A80FA"
                               Grid.Column="1"
                               Grid.Row="2"
                               FontSize="18"/>

                    <TextBox x:Name="IyTextBox"
                             Margin="0,0,20,0"
                             VerticalAlignment="Center"
                             HorizontalAlignment="Right"
                             Style="{StaticResource ParameterTextbox}"
                             Grid.Column="1"
                             Grid.Row="2"
                             Text="{Binding IProfile.Iy, UpdateSourceTrigger=PropertyChanged, Mode=TwoWay}"/>

                    <TextBlock Text="Iz"
                               VerticalAlignment="Center"
                               HorizontalAlignment="Left"
                               Margin="20,0,0,0"
                               Foreground="#1A80FA"
                               Grid.Column="1"
                               Grid.Row="3"
                               FontSize="18"/>

                    <TextBox x:Name="IzTextBox"
                             Margin="0,0,20,0"
                             VerticalAlignment="Center"
                             HorizontalAlignment="Right"
                             Style="{StaticResource ParameterTextbox}"
                             Grid.Column="1"
                             Grid.Row="3"
                             Text="{Binding IProfile.Iz, UpdateSourceTrigger=PropertyChanged, Mode=TwoWay}"/>

                    <TextBlock Text="Ct"
                               VerticalAlignment="Center"
                               HorizontalAlignment="Left"
                               Margin="20,0,0,0"
                               Foreground="#1A80FA"
                               Grid.Column="1"
                               Grid.Row="4"
                               FontSize="18"/>

                    <TextBox x:Name="CtTextBox"
                             Margin="0,0,20,0"
                             VerticalAlignment="Center"
                             HorizontalAlignment="Right"
                             Style="{StaticResource ParameterTextbox}"
                             Grid.Column="1"
                             Grid.Row="4"
                             Text="{Binding IProfile.Ct, UpdateSourceTrigger=PropertyChanged, Mode=TwoWay}"/>

                    <TextBlock Text="Zx"
                               VerticalAlignment="Center"
                               HorizontalAlignment="Left"
                               Margin="20,0,0,0"
                               Foreground="#1A80FA"
                               Grid.Column="1"
                               Grid.Row="5"
                               FontSize="18"/>

                    <TextBox x:Name="ZxTextBox"
                             Margin="0,0,20,0"
                             VerticalAlignment="Center"
                             HorizontalAlignment="Right"
                             Style="{StaticResource ParameterTextbox}"
                             Grid.Column="1"
                             Grid.Row="5"
                             Text="{Binding IProfile.Zx, UpdateSourceTrigger=PropertyChanged, Mode=TwoWay}"/>

                    <TextBlock Text="Zy"
                               VerticalAlignment="Center"
                               HorizontalAlignment="Left"
                               Margin="20,0,0,0"
                               Foreground="#1A80FA"
                               Grid.Column="1"
                               Grid.Row="6"
                               FontSize="18"/>

                    <TextBox x:Name="ZyTextBox"
                             Margin="0,0,20,0"
                             VerticalAlignment="Center"
                             HorizontalAlignment="Right"
                             Style="{StaticResource ParameterTextbox}"
                             Grid.Column="1"
                             Grid.Row="6"
                             Text="{Binding IProfile.Zy, UpdateSourceTrigger=PropertyChanged, Mode=TwoWay}"/>
                </Grid>

                <StackPanel Grid.Row="2"
                            Orientation="Horizontal">

                    <Button x:Name="AddButton"
                            Style="{StaticResource AddButton}"
                            Content="Add"
                            Background="#28C941"
                            Height="50"
                            Width="150"
                            Margin="85,0,0,0"
                            Command="{Binding AddNewIProfileCommand}"/>
                    <Button x:Name="EditButton"
                            Style="{StaticResource AddButton}"
                            Content="Edit"
                            Background="#FFBD2E"
                            Height="50"
                            Width="150"
                            Margin="20,0,0,0"/>
                    <Button x:Name="DeleteButton"
                            Style="{StaticResource AddButton}"
                            Content="Delete"
                            Background="#FF6059"
                            Height="50"
                            Width="150"
                            Margin="20,0,0,0"/>

                </StackPanel>
                
            </Grid>
        </Border>
    </Grid>
</UserControl>

我的模型class是一个叫做IProfileModel的class,代表I型轮廓,我做的是继承自ObservableObjectclass 以便它可以使用 NotifyPropertyChanged 方法,我已经使模型的属性 class 实现了 OnPropertyChanged() 方法。

在我看来,我已将 DataGrid 的源绑定到 IProfiles,这是一个存储 IProfileModel 实例的 ObservableCollection。每个TextBox对应IProfileModelclass中的一个属性,因此每个TextBox的Text属性绑定到[=25]各自的嵌套属性 =] 属性 的 ViewModel。 “添加”按钮绑定到名为 AddNewIProfileCommand

的 ViewModel 中的相应 ICommand

在我的 ViewModel 中,我使用名称 IProfile 添加了 IProfileModel 作为其属性之一,TextBox.Text 属性绑定到 [=25] 的嵌套属性=] 如视图的 XAML 所示。至于 AddNewIProfileCommand,我已将其对应于一个名为 AddNewIProfile() 的私有方法,该方法将添加一个新的 IProfileModel 对象,其属性将引用 [=25= 的嵌套属性] 属性 绑定到文本框。

编辑: 我想补充一点,AddNewIProfile() 会将新的 IProfileModel 对象添加到绑定到 DataGrid

IProfiles

我的主要问题是,每当我修改文本框然后单击按钮将配置文件添加到 DataGrid 时,新添加到 DataGrid 的条目总是 IProfileModel 和空 属性 值(IProfileModel 的所有字符串属性均为 null,所有数字类型属性均为 0)。似乎修改文本框不会更改 IProfile 的嵌套属性,即使我已将 UpdateSourceTrigger 设置为 PropertyChanged 并将 Mode 设置为 Two WayIProfile 本身是继承自 ObservableObject class.

IProfileModel class

最后,我知道我的问题与此 非常相似,但我遵循了那里的建议并尝试匹配他们的解决方案,但不知何故我无法让它工作。 谢谢!

编辑: 在按下“添加”按钮后添加了一些之前 - 之后的 DataGrid 图片:

编辑: ParameterTextbox Style 是 Cédric Moers 在评论中指出的错误原因:

<Style TargetType="{x:Type TextBox}"
           x:Key="ParameterTextbox">
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type TextBox}">
                    <Border CornerRadius="5"
                            Background="White"
                            Width="180"
                            Height="35"
                            BorderThickness="3"
                            BorderBrush="#EAEAEA">
                        <Grid>
                            <Rectangle StrokeThickness="1"/>
                            <TextBox Margin="1"
                                     Text="{TemplateBinding Text}"
                                     BorderThickness="0"
                                     Background="Transparent"
                                     VerticalContentAlignment="Center"
                                     Padding="5"
                                     Foreground="Black"
                                     x:Name="SearchBox"/>

                            
                        </Grid>
                    </Border>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

我试图重现你的问题,但我不得不删除样式,因为你没有提供它们。我这边好用,可能是风格问题?

请删除文本框 (ParameterTextbox) 的样式,然后看看它是否有效。如果你能给我样式的源代码,我可以看一下。也许您正在覆盖文本 属性.

在发现样式问题后进行编辑

这里是您想要以简约方式实现的样式示例。

<UserControl.Resources>
    <ControlTemplate x:Key="RoundedTextBoxCt">
        <Border 
            Width="{TemplateBinding Width}"                    
            Height="{TemplateBinding Height}"                                    
            BorderBrush="{TemplateBinding BorderBrush}"              
            BorderThickness="{TemplateBinding BorderThickness}"          
            Background="{TemplateBinding Background}"          
            x:Name="Bd" 
            CornerRadius="5">
            <ScrollViewer
                Padding="{TemplateBinding Padding}"                        
                VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}" 
                Foreground="{TemplateBinding Foreground}"
                x:Name="PART_ContentHost"/>
        </Border>
    </ControlTemplate>
    
    <Style x:Key="ParameterTextBox" TargetType="TextBox">
        <Setter Property="Width"                    Value="180"/>
        <Setter Property="Height"                   Value="35"/>
        <Setter Property="VerticalContentAlignment" Value="Center"/>
        <Setter Property="Padding"                  Value="5"/>
        <Setter Property="Foreground"               Value="Black"/>
        <Setter Property="BorderBrush"              Value="#EAEAEA"/>
        <Setter Property="BorderThickness"          Value="3"/>
        <Setter Property="Background"               Value="White"/>
        <Setter Property="Template" Value="{StaticResource RoundedTextBoxCt}"/>
    </Style>
    
    ...
    
</UserControl.Resources>

我将控件模板作为一个单独的资源,这样 'rounded textbox' 可以放在一些 'shared' 程序集中,您也可以将它用于其他项目。

它是极简主义的,正如您需要的那样。如果你想要一个完整的文本框,从这里复制样式并修改它:https://docs.microsoft.com/en-us/dotnet/desktop/wpf/controls/textbox-styles-and-templates?view=netframeworkdesktop-4.8 它可能看起来很可怕,但大多数时候它只需要修改一些规则。一旦掌握了它,就很容易了。

不是使用 setters,甚至是单独的控件模板资源,您可以在控件模板中硬编码所有内容,在文本框的控件模板的 setter 中风格,但这取决于你。

祝你好运!