C#, WPF, bind List<string> to 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

Looks like you need to set the ItemsSource property on the DataGrid. — momar
– momar, Commented Dec 29, 2016 at 14:33
public List<string> Code {...} is you collection of data for DataGrid, so Bind it in <DataGrid x:Name="dataGrid" ... ItemsSource="{Binding Code}"> — Dawid Wekwejt
– Dawid Wekwejt, Commented Dec 29, 2016 at 14:54
1) ItemsSource="{Binding Code}". Don't set DataContext on the grid at all; it inherits that from the view. 2) That ItemsSource binding won't replace Code; it'll edit the items in Code, which happens to be impossible the way you've written it. With the viewmodel that you have, all you can do is display the items in Code. So Code needs to change: It has to be an ObservableCollection of a class that has a property the grid can edit. — 15ee8f99-57ff-4f92-890c-b56153
– 15ee8f99-57ff-4f92-890c-b56153, Commented Dec 29, 2016 at 14:59

surfmuggle · Accepted Answer · 2023-12-20 15:58:06Z

16

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 
        Header="Test" IsReadOnly="false" 
        Binding="{Binding}" 
        Foreground="Black" 
        Width="60" />
   </DataGrid.Columns>
</DataGrid>

edited Dec 20, 2023 at 15:58

surfmuggle

6,0468 gold badges59 silver badges97 bronze badges

answered Dec 29, 2016 at 16:46

mm8

170k10 gold badges71 silver badges102 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

dipa2016 Over a year ago

Thank you, this is working. I tried it with Binding="{Binding Path =.}, too and it is working too. But it is still 'try and error'. I have to figure out the concept of binding.

mm8 Over a year ago

{Binding} is short for {Binding Path =.}: msdn.microsoft.com/en-us/library/ms750413(v=vs.110).aspx. Please remember to accept an answer and vote helpful ones up.

Ishikawa Over a year ago

Thanks, I couldn't understand why I got an additional column called Length... this was caused by the missing AutoGenerateColumns="False" property on the DataGrid.

Johnny · Accepted Answer · 2016-12-29 14:38:43Z

3

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

edited Dec 29, 2016 at 14:38

answered Dec 29, 2016 at 14:33

Johnny

9,6192 gold badges33 silver badges38 bronze badges

Comments

Dawid Wekwejt · Accepted Answer · 2016-12-29 15:08:56Z

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>

Collectives™ on Stack Overflow

C#, WPF, bind List<string> to DataGrid

3 Answers 3

3 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related