Элементы управления | Содержание | Фильтрация данных

Каркас приложения. Модель данных. Привязка данных. Табличный вывод.

Каркас приложения.

На прошлых занятиях и лекциях мы разработали каркас для наших будущих приложений. Рассмотрим его ещё раз:

В левой колонке (1) у нас будет элемент StackPanel, объединяющий все три строки. В нём будут находится логотип компании и основное меню приложения. Эта колонка имеет фиксированную ширину.
В верхней строке правой колонки (2) будет расположено контекстное меню для элементов фильтрации, поиска и т.д. Эта строка имеет высоту "Auto", т.е. будет зависеть от содержимого.
В середине второй колонки (3) будет расположен основной список с данными: элементы DataGrid или ListView
В нижней строке второй колонки (4) в перспективе будем располагать счётчики, пагинаторы и т.п. (высота тоже "auto")

Разметка выглядит так:

<Grid ShowGridLines="True">
    <Grid.RowDefinitions>
        <RowDefinition Height="auto"/>
        <RowDefinition />
        <RowDefinition Height="auto"/>
    </Grid.RowDefinitions>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="200"/>
        <ColumnDefinition/>
    </Grid.ColumnDefinitions>

    <!-- типа логотип компании -->
    <Image 
        Source="/Img/simon.png" 
        Grid.RowSpan="2"/>

    <StackPanel 
        Orientation="Vertical"
        Grid.RowSpan="3"
        VerticalAlignment="Bottom">
        <Button 
            x:Name="ExitButton"
            Content="Выход" 
            Click="ExitButton_Click"
            Height="50"/>
    </StackPanel>

    <WrapPanel
        Orientation="Horizontal"
        Grid.Column="1"
        MinHeight="50">
        <!-- минимальную высоту я тут поставил, чтобы верхнюю строку сетки было видно. В реальном приложении она не нужна -->
    </WrapPanel>
</Grid>

Для того, чтобы картинки были видны в рантайме нужно их поместить а ресурсы:

Модель данных

В следующем году мы будем получать данные из базы данных, а пока будем экспериментировать на "кошках". Заодно оформим получение данных в виде интерфейса.

В заданиях WorldSkills есть требование логически выделять модели. Поэтому создадим в проекте папку Model (в контекстном меню решения выбрать добавить - создать папку)

Создадим класс Кошка (в контекстном меню папки Model выбрать Добавить - класс):

namespace WpfTemplate.Model
{
    public class Cat
    {
        public string name { get; set; }
        public int age{ get; set; }
        public string color { get; set; }
        // порода
        public string breed { get; set; }
        public string photo { get; set; }
    }
}

Студия не добавляет модификатор доступа классам - допишите public

Для работы с данными создадим интерфейс IDataProvider (поставщик данных) и класс LocalDataProvider, реализующий этот интерфейс

В интерфейсе нам пока нужен только один метод: получение списка кошек

namespace WpfTemplate.Model
{
    interface IDataProvider
    {
        IEnumerable<Cat> getCats();
    }
}

Метод GetCats класса LocalDataProvider возвращает список кошек, созданный программно

public class LocalDataProvider : IDataProvider
{
    public IEnumerable<Cat> getCats()
    {
        return new Cat[]{
            new Cat{
                age=1,
                breed="Дворняжка", 
                color="Белый", 
                name="Ириска"},
            new Cat{
                age=2,
                breed="Шотландская вислоухая", 
                color="Коричневый", 
                name="Изи"},
            new Cat{
                age=3,
                breed="Сиамский", 
                color="Цветной", 
                name="Макс"}
        };
    }
}

В пространстве имен проекта создадим класс Globals, в котором объявим публичную статическую переменную dataProvider типа IDataProvider:
```
class Globals
{
    public static IDataProvider dataProvider;
}
```
Это нужно, чтобы поставщик данных был виден в любом месте проекта.

В конструкторе главного окна (MainWindow.xaml.cs) присвоим глобальной переменной dataProvider экземпляр класса LocalDataProvider и сохраним список кошек в свойстве CatList

public IEnumerable<Cat> catList { get; set; }
   
public MainWindow()
{
    InitializeComponent();
    DataContext = this;
    Globals.dataProvider = new LocalDataProvider();
    CatList = Globals.dataProvider.getCats();
}

private void ExitButton_Click(object sender, RoutedEventArgs e)
{
    Application.Current.Shutdown();
}

Привязка данных. Табличный вывод

Теперь, имея данные для отображения, мы можем разместить в разметке элемент DataGrid и "привязать" к нему данные:

 <DataGrid
    Grid.Row="1"
    Grid.Column="1"
    CanUserAddRows="False"
    AutoGenerateColumns="False"
    ItemsSource="{Binding catList}">
    <DataGrid.Columns>
        <DataGridTextColumn
            Header="Кличка"
            Binding="{Binding name}"/>
        <DataGridTextColumn
            Header="Возраст"
            Binding="{Binding age}"/>
        <DataGridTextColumn
            Header="Цвет"
            Binding="{Binding color}"/>
        <DataGridTextColumn
            Header="Порода"
            Binding="{Binding breed}"/>
    </DataGrid.Columns>
</DataGrid>

Атрибут CanUserAddRows="False" запрещает элементу DataGrid добавлять строки с таблицу
Атриут AutoGenerateColumns="False" запрещает автоматическое формирование столбцов таблицы - мы вручную описываем те столбцы, которые хотим видеть.
Атрибут ItemsSource="{Binding catList}" "привязывает" к таблице источник данных - наш список кошек.
В колонках таблицы мы уже "привязываемся" к свойствам класса источника данных

Приложение должно выглядеть примерно так:

Элементы управления | Содержание | Фильтрация данных

wpf_template.md 8.4 KB Permalink History Raw

Каркас приложения. Модель данных. Привязка данных. Табличный вывод.