WPF - Podstawy wzorca MVVM Cz 1.- Bindowanie z Listy do DataGrid

Podczas tworzenia aplikacji desktopowych w platformie WPF coraz częściej stosuje się wzorzec tzw Model -  View - ViewModel. Dzięki takiemu rozwiązaniu logika biznesowa może zostać przeniesiona bez zbędnych modyfikacji na przykład do platformy ASP.NET czy Windows Phone itp.

Przykładowe okno WPF na którym będziemy pracować: Datagrid, 3 Buttony, 2 TextBoxy i Combobox

W celu wykonania prostego projektu należy stworzyć trzy foldery: Model - gdzie będzie znajdowała się prosta logika biznesowa, ViewModel - tam znajduje się kod C#, który obsługuje widok okien WPF lub Kontrolek użytkownika. View - zawierał będzie pliki .xaml :

Abyśmy mogli pracować na jakimś prostym modelu stworzymy sobie w folderze Model klasę Worker, która będzie zawierała właściwości takie jak Imię, Nazwisko, status pracownika w firmie (programista, tester, manager), następnie stworzymy repozytorium tych pracowników aby wyświetlić ją w DataGrid w oknie głównym:

public enum eStatus
    {
        CodeWriter,
        Tester,
        TeamManager
    }

    public class Worker
    {
        public int WorkerId { get; set; }

        public string Name { get; set; }

        public string Surname { get; set; }

        public eStatus WorkerStatus { get; set; }
}

Repozytorium pracowników:

public class WorkerRepository
    {
        private List<Worker> _studentList;

        public IEnumerable<Worker> GetAll()
        {
            return _studentList;
        }
           
        //Tu możemy dodać inne metody dodawanie usuwanie Pracowników z listy itd.  

        public WorkerRepository()
        {
            _studentList = new List<Worker>()
            {
                new Worker{
                    WorkerId = 1,
                    Name = "Paweł",
                    Surname = "Kowalski",
                    WorkerStatus = eStatus.CodeWriter
                }
                  //Tu możemy dodać kolejnych pracowników
            };
        }
}

Przejdźmy teraz do Folderu ViewModel, gdzie stworzymy najpierw widok pojedynczego wiersza, który zostanie wykorzystany w oknie głównym.

public class WorkerRowViewModel
    {
        public int WorkerId { get; set; }

        public string Name { get; set; }

        public string Surname { get; set; }
        
        public string WorkerStatus { get; set; }
    }

Stwórzmy następnie ViewModel dla głównego okna wstępnie stworzymy Listę  z której wartości pobierał będzie nasz DataGrid z okna głównego.  Warto zwrócić uwagę na Lamda Expression (Select), gdzie sprytnie możemy "przekonwertować" na inny typ w tym przypadku WorkerRowViewModel, który przed chwilą stworzyliśmy.

public class MainWidnowViewModel
    {
        private WorkerRepository _repository;

        public List<WorkerRowViewModel> WorkerList
        {
            get
            {
                _repository = new WorkerRepository();
                var tmpval = _repository.GetAll().Select(x => new WorkerRowViewModel
                {
                    WorkerId = x.WorkerId,
                    Name = x.Name,
                    Surname = x.Surname,
                    WorkerStatus = x.WorkerStatus.ToString()
                }).ToList();

                return tmpval;
            }
        }
    }

Jak teraz pobrać dane do okna ? Musimy przejść teraz do kodu MainWindow.xaml, gdzie znajduje się nasz DataGrid i musimy zaimplementować tzw. Bindowanie wartości z listy WorkerList z klasy MainWindowViewModel. Po pierwsze dodajemy przestrzeń nazw klasy MainWindowViewModel w sekcji Window w pliku MainWindow.xaml:

xmlns:local="clr-namespace:testblog.ViewModel"

Następnie tworzymy zasoby statyczne  do których będziemy odwoływać się w DataGridzie:

<Grid>
        <Grid.Resources>
            <views:MainWindowViewModel x:Key="MainWindowView"/>
        </Grid.Resources>
//Ciąg dalszy kodu...
</Grid>

Przechodzimy do sedna czyli samo bindowanie w DataGrid:

<DataGrid Name="DGrStudentsTable" Grid.Column="1" Margin="5" Grid.ColumnSpan="2" 
                   CanUserAddRows="False" AutoGenerateColumns="False"
                  ItemsSource="{Binding Source={StaticResource MainWindowViewM}, Path=WorkerList}">
            <DataGrid.Columns>
                <DataGridTextColumn Header="Id" Binding="{Binding WorkerId}"/>
                <DataGridTextColumn Header="Temat" Binding="{Binding Name}"/>
                <DataGridTextColumn Header="Nazwisko" Binding="{Binding Surname}"/>
                <DataGridTextColumn Header="Satus Pracownika" Binding="{Binding WorkerStatus}"/>
            </DataGrid.Columns>
</DataGrid>

Gotowe! Okno DataGrid już wyświetla wartości z listy:

Zapraszam na kolejną cześć, gdzie poznamy szybki i łatwy sposób przekonwertować wartości z enum w kolumnie Status Pracownika na przejrzysty string przy pomocy klasy Dictionary.

Pod linkiem znajduje się cały projekt z 3-częściowego kursu: 

Pobierz projekt MVVM