C＃，WPF，绑定List <string> 到DataGrid

Question

I have trouble to bind a List to a DataGrid. It should be as simple as possible. I'm new to WPF and this is for my personal education.

I have a View(Editor),ViewModel(VMText) and a Data(JustText) class.

My source so far:

JustText.cs

namespace Model
{
    public class Text
    {
        private string _code;
        public string Code
        {
            get { return _code;  }
            set { _code = value; }
        }

        public Text()
        {
            _code = "Hello World!\nHow you doin'?";
        }
    } 
}

VMText.cs

namespace ViewModel
{
    public class VMText
    {    
        private Model.Text _code;

        public List<string> Code
        {            
            get { return new List<string>(_code.Code.Split('\n'));        }
            set { _code.Code = System.String.Join("\n", value.ToArray()); }
        }

        private View.Editor editor;

        public VMText(View.Editor editor)
        {
            _code = new Model.Text();
            this.editor = editor; 
        }
    }
}

Editor.xaml

<Window x:Class="View.Editor"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:View"
        mc:Ignorable="d"
        Title="Editor" Height="240.024" Width="269.895">
    <Grid Background="#FF292929" Margin="0,0,-6.8,0.4">
        <DataGrid x:Name="dataGrid" 
                  HorizontalAlignment="Left" 
                  Margin="0,0,0,0" 
                  VerticalAlignment="Top"
                  Width="200pt"
                  Height="100pt"
                  DataContext="{Binding vmText}">
            <DataGrid.Columns>
                <DataGridTextColumn Binding="{Binding Code, UpdateSourceTrigger=PropertyChanged}" Foreground="Black" Width="60" Header="Test" IsReadOnly="false" />
            </DataGrid.Columns>
        </DataGrid>
    </Grid>
</Window>

Editor.xaml.cs

namespace View
{
    public partial class Editor : Window
    {
        private ViewModel.VMText vmText;

        #region Constructor

        public Editor()
        {
            InitializeComponent();

            vmText = new ViewModel.VMText(this);
            DataContext = vmText;
        }

        #endregion
    }
}

I just want to show List which is created in VMText in one column in the DataGrid

Answer 1

If you really want to use the grid to edit the items in Code , you need to rewrite your viewmodel to make that possible. You can't give the grid a collection of strings. You have to give it a collection of some class that has a string property . That's the way WPF works.

If you don't want to edit them, just put IsReadOnly="True" on the column and they'll be read-only.

Also, all your bindings look like you're guessing haphazardly at what everything means.

So here's an example of how to do what I think you're trying to do. I eliminated your Model.Text class to simplify things. You're in deep enough without it.

ViewModels.cs

namespace ViewModel
{
    #region ViewModelBase
    public class ViewModelBase : INotifyPropertyChanged
    {
        #region INotifyPropertyChanged
        public event PropertyChangedEventHandler PropertyChanged;

        protected void OnPropertyChanged([CallerMemberName] String propName = null)
            => PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propName));
        #endregion INotifyPropertyChanged
    }
    #endregion ViewModelBase


    //  This is the class we'll put in the grid. 
    public class CodeItem : ViewModelBase
    {
        private String _value = default(String);
        public String Value
        {
            get { return _value; }
            set
            {
                if (value != _value)
                {
                    _value = value;
                    OnPropertyChanged();
                }
            }
        }
    }

    public class VMText : ViewModelBase
    {
        public String CodeString
        {
            get {
                return String.Join("\n", Codes.Select(ci => ci.Value));
            }
            set
            {
                var q = (value ?? "")
                            .Split(new[] { '\n' })
                            .Select(s => new CodeItem { Value = s });
                Codes = new ObservableCollection<CodeItem>(q);
            }
        }

        #region Codes Property
        private ObservableCollection<CodeItem> _codes = default(ObservableCollection<CodeItem>);
        public ObservableCollection<CodeItem> Codes
        {
            get { return _codes; }
            set
            {
                if (value != _codes)
                {
                    _codes = value;
                    OnPropertyChanged();
                }
            }
        }
        #endregion Codes Property
    }
}

MainWindow.xaml.cs

public MainWindow()
{
    InitializeComponent();

    DataContext = new ViewModel.VMText
    {
        CodeString = "Hello World!\nHow you doin'?"
    };
}

MainWindow.xaml

<!-- 
Heights and widths in XAML aren't expressed in "pt" units.
That's CSS. Give XAML a floating point value with no unit specified.

Added AutoGenerateColumns="False" so you don't get a clone of the column 
with "Value" for a header. 
-->
<DataGrid 
    x:Name="dataGrid" 
    HorizontalAlignment="Left" 
    Margin="0,0,0,0" 
    VerticalAlignment="Top"
    ItemsSource="{Binding Codes}"
    AutoGenerateColumns="False"
    Width="200"
    Height="100"
    >
    <DataGrid.Columns>
        <!-- 
        Removed UpdateSourceTrigger=PropertyChanged because it has no effect. 
        Removed IsReadOnly="false" because it's the default already. 
        -->
        <DataGridTextColumn 
            Binding="{Binding Value}" 
            Width="120" 
            Header="Test"

            />
    </DataGrid.Columns>
</DataGrid>

Answer 2

I guess you simply want to display the strings in the Code source collection property of the view model in the DataGrid.

You should then bind the ItemsSource property of the DataGrid to the Code source property of the view model and then bind the DataGridTextColumn to the strings in the Code list itself. You just have to modify the XAML markup of your view a bit to be able to see the strings. Try this:

<DataGrid x:Name="dataGrid" 
              HorizontalAlignment="Left" 
              Margin="0,0,0,0" 
              VerticalAlignment="Top"
              Width="200pt"
              Height="100pt"
              ItemsSource="{Binding Code}"
              AutoGenerateColumns="False">
    <DataGrid.Columns>
        <DataGridTextColumn Binding="{Binding}" 
                                Foreground="Black" Width="60" Header="Test" IsReadOnly="false" />
    </DataGrid.Columns>
</DataGrid>

Answer 3

You should implement INotifyPropertyChanged to notify binding that property changed. Also for the collections look at ObservableCollection instead of List .

Answer 4

Bind VMText.Code to DataGrid ItemSource. You don't need to Inicialize DataGrid DataContract in View when you do it in code behind.

ViewModel

namespace ViewModel
{
    public class VMText : INotifyPropertyChanged
    {
        public VMText(View.Editor editor)
        {
            _code = new Model.Text();
            this.editor = editor; 
        }

        public List<string> Code
        {            
            get
            {
                return new List<string>(_code.Code.Split('\n'));
            }
            set
            {
                _code.Code = System.String.Join("\n", value.ToArray());
                NotifyPropertyChanged("Code");
            }
        }

        private void NotifyPropertyChanged(String propertyName)
        {
            if (PropertyChanged != null)
            {
                PropertyChanged(this, new PropertyChangedEventArgs(propertyName));
            }
        }

        public event PropertyChangedEventHandler PropertyChanged;

        private Model.Text _code;

        private View.Editor editor;
    }
}

View

<Window x:Class="View.Editor"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:local="clr-namespace:View"
    mc:Ignorable="d"
    Title="Editor" Height="240.024" Width="269.895">
<Grid Background="#FF292929" Margin="0,0,-6.8,0.4">
    <DataGrid x:Name="dataGrid" 
              HorizontalAlignment="Left" 
              Margin="0,0,0,0" 
              VerticalAlignment="Top"
              Width="200pt"
              Height="100pt"
              ItemsSource="{Binding Code}>
        <DataGrid.Columns>
            <DataGridTextColumn Binding="{Binding Code"
                                Foreground="Black" Width="60"
                                Header="Test"
                                IsReadOnly="false" />
        </DataGrid.Columns>
    </DataGrid>
</Grid>