Skip to content

Commit

Permalink
window
Browse files Browse the repository at this point in the history
  • Loading branch information
kolei committed May 6, 2024
1 parent e5c55c5 commit 0072ffb
Show file tree
Hide file tree
Showing 5 changed files with 208 additions and 36 deletions.
70 changes: 47 additions & 23 deletions articles/exam.md
Original file line number Diff line number Diff line change
@@ -1,25 +1,49 @@
# Примерное содержание экзамена

>Состав и критерии оценок ещё могут измениться
Написать **РАБОЧЕЕ** (то есть приложение собирается и запускается) оконное (WPF или Avalonia) приложение, отображающее данные в табличном виде, с возможностью фильтрации, поиска и сортировки данных:

1. Создать модель (класс) по заданной предметной области (определяется преподавателем перед началом экзамена). **Обязательно** использовать типы: *целое*, *вещественное*, *дата*, *строка*. Одно из строковых полей должно быть словарным - 1 балл (если не используется один из перечисленных типов данных, то балл не начисляется).
1. Создать набор данных (10 записей) для модели в заданном формате (CSV или JSON - определяется случайным образом перед началом экзамена) - 0,5 балла
1. Написать класс **CSVDataProvider** или **JSONDataProvider**, загружающий данные из файла с набором данных - 1,4 балла (Если не уверены, что сможете сделать загрузку данных, то реализуйте класс **LocalDataProvider**)
1. вывести логотип компании - 0,1 балла (доступа в интернет при выполнении задания не будет, в качестве логотипа можно использовать любую загогулину, нарисованную в paint)
1. вывести на экран таблицу с набором данных из поставщика данных - 1 балл
1. реализовать динамическое формирование отображаемого набора данных по нескольким критериям с автоматической перерисовкой таблицы (**INotifyPropertyChanged**) - 1 балл
1. реализовать поиск по текcтовому полю - 1 балл
1. сделать сортировку по полю - 1 балл
1. сделать фильтрацию по словарному полю или по условию (определяется преподавателем перед началом экзамена) - 1 балл
1. Написать пояснительную записку в **README.MD** (написать название предметной области, используемый тип данных, скриншот окна с логотипом, набор данных, оформленный как `код`) - 0,5 балла
1. Опубликовать в репозитории - 0,5 балла, проверка **только результатов, опубликованных в репозитории**

>Предметная область, формат данных, тип фильтрации определяются перед экзаменом генератором случайных чисел
Итого 9 баллов:
- менее 3-х баллов, оценка "2"
- 3..4.9 балла, оценка "3"
- 5..7.4 баллов, оценка "4"
- 7.5 и более баллов, оценка "5"
>Состав и критерии оценок могут измениться
Написать **РАБОЧЕЕ** (то есть приложение собирается и запускается) оконное приложение, отображающее список данные (**ListBox**), с возможностью фильтрации, поиска и сортировки данных:

Проверяются **только результаты, опубликованные в репозитории**

Предметная область, тип фильтрации и вид списка определяются перед экзаменом генератором случайных чисел

1. Создать модель (класс) по заданной предметной области. **Обязательно** использовать типы: _целое_, _вещественное_, _дата_, _строка_, _логическое_. Одно из строковых полей должно быть словарным - `1` балл <!-- 1 -->

- несоответствие полей модели предметной области: штраф `0,2` балла
- отсутствие типа данных: штраф `0,2` балла

1. Создать набор данных (10 записей) для модели в заданном формате и написать класс поставщика данных **LocalDataProvider**, **CSVDataProvider** или **JSONDataProvider**: до `1.5` баллов <!-- 2.5 -->

- **программный список** (определен в дата провайдере): `0,5` баллов
- **CSV** (загрузка из внешнего файла): `1` балл
- **JSON** (загрузка из внешнего файла): `1,5` балла

1. вывести логотип компании - `0,5` балла (доступа в интернет при выполнении задания не будет, в качестве логотипа можно использовать любую загогулину, нарисованную в `paint`) <!-- 3 -->

1. вывести на экран список (**ListBox**) с набором данных из поставщика данных (тип списка **StackPanel** или **WrapPanel** выбирает преподаватель) - `1` балл <!-- 4 -->

1. реализовать поиск по текcтовому полю - `1` балл <!-- 5 -->

1. сделать сортировку по полю - `1` балл <!-- 6 -->

1. сделать фильтрацию по словарному полю или по условию (определяется преподавателем перед началом экзамена) - `1` балл <!-- 7 -->

1. Написать пояснительную записку в **README.MD** (название предметной области, **скриншот**, **набор данных, оформленный как `код`**) - `0,5` балла <!-- 7.5 -->

Штраф за отсутствующий элемент `0,2` балла

1. Единый стиль переменных во всём приложении (**CamelCase** или **camelCase**): `0.5` балла <!-- 8 -->

1. Самоочевидные названия переменных и названий визуальных объектов: `0.5` балла <!-- 8.5 -->

1. Файловая структура проекта (_для каждого класса свой файл_, _название файла соответствует классу_, _классы модели в отдельном каталоге_): `0.5` балла <!-- 9 -->

Штраф `0,2` балла за критерий

Итого `9` баллов:

- менее `2`-х баллов, оценка "2"
- `2 ... 3,9` балла, оценка "3"
- `4 ... 5,9` баллов, оценка "4"
- `6` и более баллов, оценка "5"
96 changes: 88 additions & 8 deletions articles/wpf_style.md
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
Предыдущая лекция | &nbsp; | Следующая лекция
:----------------:|:----------:|:----------------:
[Вывод данных согласно макета (ListBox, Image)](./articles/wpf_listbox.md) | [Содержание](../readme.md#тема-8-оконные-приложения) | [Стили, триггеры и темы](./wpf_style.md)
[Вывод данных согласно макета (ListBox, Image)](./articles/wpf_listbox.md) | [Содержание](../readme.md#тема-8-оконные-приложения) | [Создание окон. Модальные окна](./wpf_window.md)

>Два инициативных студента по итогам прошлой лекции решили сделать переключение вида отображения "список" и "плитка" кнопкой. Нарыли интересную тему про стили...
Expand Down Expand Up @@ -461,26 +461,74 @@ public partial class MainWindow : Window

## Переключение вида списка

1. Переносим настройки **ListBox** в ресурсы окна:
1. Переносим настройки **ListBox** в ресурсы окна (в том числе и шаблон элемента списка):

```xml
<Window.Resources>
<Style
x:Key="StackStyle"
TargetType="ListBox">
<Setter Property="ItemsPanel">
TargetType="ListBox"
>
<Setter
Property="ItemsPanel"
>
<Setter.Value>
<ItemsPanelTemplate>
<StackPanel
Orientation="Vertical"/>
</ItemsPanelTemplate>
</Setter.Value>
</Setter>

<Setter
Property="ItemTemplate"
>
<Setter.Value>
<DataTemplate>
<Border
BorderThickness="2"
BorderBrush="DarkRed"
CornerRadius="4"
Margin="4"
>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="64"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="auto"/>
</Grid.ColumnDefinitions>

<Image
Width="64"
Height="64"
Source="{Binding ImageBitmap}"/>

<StackPanel
Grid.Column="1"
Orientation="Vertical"
Margin="5,2,0,5"
>
<TextBlock Text="{Binding name}"/>
<TextBlock Text="{Binding surname}"/>
</StackPanel>

<TextBlock
Grid.Column="2"
Text="{Binding age}"
Margin="0,2,10,0"/>
</Grid>
</Border>
</DataTemplate>
</Setter.Value>
</Setter>
</Style>
<Style
x:Key="WrapStyle"
TargetType="ListBox">
<Setter Property="ItemsPanel">
TargetType="ListBox"
>
<Setter
Property="ItemsPanel"
>
<Setter.Value>
<ItemsPanelTemplate>
<WrapPanel
Expand All @@ -489,6 +537,38 @@ public partial class MainWindow : Window
</ItemsPanelTemplate>
</Setter.Value>
</Setter>

<Setter
Property="ItemTemplate"
>
<Setter.Value>
<DataTemplate>
<Border
BorderThickness="1"
BorderBrush="Black"
CornerRadius="5"
Margin="5"
>
<StackPanel
Orientation="Vertical"
>
<Image
Width="200"
Source="{Binding ImageBitmap}"/>
<TextBlock
Text="{Binding name}"
HorizontalAlignment="Center"/>
<TextBlock
Text="{Binding surname}"
HorizontalAlignment="Center"/>
<TextBlock
Text="{Binding age}"
HorizontalAlignment="Center"/>
</StackPanel>
</Border>
</DataTemplate>
</Setter.Value>
</Setter>
</Style>
</Window.Resources>
```
Expand All @@ -502,7 +582,7 @@ public partial class MainWindow : Window
...
```

Убираем настройки для `<ListBox.ItemsPanel>` а для `<ListBox.ItemContainerStyle>` возвращаем:
Убираем настройки для `<ListBox.ItemsPanel>` и `<ListBox.ItemTemplate>`, а для `<ListBox.ItemContainerStyle>` возвращаем (хотя он нужен только для стека и его тоже можно перенести в соответствующий стиль):

```xml
<ListBox.ItemContainerStyle>
Expand Down Expand Up @@ -538,4 +618,4 @@ public partial class MainWindow : Window

Предыдущая лекция | &nbsp; | Следующая лекция
:----------------:|:----------:|:----------------:
[Вывод данных согласно макета (ListBox, Image)](./articles/wpf_listbox.md) | [Содержание](../readme.md#тема-8-оконные-приложения) | [Стили, триггеры и темы](./wpf_style.md)
[Вывод данных согласно макета (ListBox, Image)](./articles/wpf_listbox.md) | [Содержание](../readme.md#тема-8-оконные-приложения) | [Создание окон. Модальные окна](./wpf_window.md)
72 changes: 72 additions & 0 deletions articles/wpf_window.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,72 @@
Предыдущая лекция | &nbsp; | Следующая лекция
:----------------:|:----------:|:----------------:
[Стили, триггеры и темы](./wpf_style.md) | [Содержание](../readme.md#тема-8-оконные-приложения) | [Создание окон. Модальные окна](./wpf_window.md)

# Создание окна

Более менее сложные проекты не помещаются в одно окно. WPF позволяет добавлять дополнительные окна в проект, либо использовать технологию со страницами (а-ля браузер).

На этой лекции реализуем первый вариант - создание дополнительного окна и выведем в него подробную информацию об объекте.

>Вспоминаем, что мы должны соблюдать файловую структуру проекта, т.е. все однотипные объекты распихивать по соответствующим папкам.
Создадим папку `Windows` в проекте и в неё добавим окно:

![](../img/01071.png)

Название окна должно быть осмысленным и с суффиксом *Window*. У меня получилось *DetailWindow*

>Можно в каталог `Windows` перетащить и главное окно **MainWindow**. Только в этом случае надо в разметке приложения (`App.xaml`) добавить название каталога:
>
>```xml
><Application
> x:Class="mysql.App"
> xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
> xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
> xmlns:local="clr-namespace:mysql"
> StartupUri="Windows/MainWindow.xaml">
> ^^^^^^^^
>...
Опять же, все окна должны иметь нормальные заголовки. В разметке окна поменяйте атрибут *Title* элемента **Window** (это надо сделать и для основного окна)
Верстку я расписывать не буду - придумайте сами (при выводе списка объектов "плиткой" мы показываем только основную информацию об объекте, в окне с детальной информацией можно показать всё).
В коде окна `DetailWindow.xaml.cs` в конструктор добавьте параметр:
```cs
// для получения данных из класса окна нам
// нужно СВОЙСТВО, определяем его
public Cat currentCat {get; set;}
// конструктор класса окна
public DetailWindow(Cat currentCat)
^^^^^^^^^^^^^^
{
// и инициализируем в конструкторе
this.currentCat = currentCat;
InitializeComponent();
}
```
Для открытия окна с детальной информацией будем использовать двойной клик на элементе списка в основном окне (обработчик события _MouseDoubleClick_ добавьте в **ListBox** самостоятельно)

```cs
private void caListBox_MouseDoubleClick(
object sender,
MouseButtonEventArgs e)
{
// в создаваемое окно передаем выбранного котика
var detailWindow = new DetailWindow(
catListBox.SelectedItem as Cat);

detailWindow.ShowDialog();
}
```

Метод _ShowDialog_ открывает **модальное** окно (пока оно открыто фокус ввода не может вернуться на основное окно).

Если модальность не важна (логика задачи допускает открытие нескольких окон), то можно использовать метод _Show_.

Добавьте в окно с детальной информацией кнопку "OK" и добавьте ей свойство `IsCancel="true"`, чтобы окно закрывалось по клавише "Escape".
Binary file added img/01071.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
6 changes: 1 addition & 5 deletions readme.md
Original file line number Diff line number Diff line change
Expand Up @@ -155,6 +155,7 @@
1. [Поиск, сортировка](./articles/wpf_search_sort.md)
1. [Вывод данных согласно макета (ListBox, Image)](./articles/wpf_listbox.md)
1. [Стили, триггеры и темы](./articles/wpf_style.md)
1. [Создание окон. Модальные окна](./articles/wpf_window.md)
1. Создание WPF-приложений по индивидуальным заданиям (подготовка к экзамену)<!-- 8(66) -->

### Лабораторные работы
Expand All @@ -177,11 +178,6 @@

<!--
вывод "плиткой" от WorldSkills
https://nationalteam.worldskills.ru/skills/sozdanie-spiskov-listview-poisk-i-filtratsiya-dannykh/
там же есть рисование графиков и работа с вордом
https://nationalteam.worldskills.ru/skills/programmnye-resheniya-dlya-biznesa/
Expand Down

0 comments on commit 0072ffb

Please sign in to comment.