list

articles/wpf_listbox.md

@@ -4,6 +4,8 @@
 
 # Вывод данных согласно макета (ListBox, Image).
 
+## Вывод списком
+
 В реальных проектах **DataGrid** используется редко. Обычно используется компонент **ListBox**. Пример из задания одного из прошедших демо-экзаменов:
 
 ![](../img/product_list_layout.jpg)
@@ -19,7 +21,8 @@
 <ListBox 
     Grid.Row="1"
     Background="White"
-    ItemsSource="{Binding catList}">
+    ItemsSource="{Binding catList}"
+>
     <!-- 
         сюда потом вставить ListBox.ItemTemplate 
     -->
@@ -34,7 +37,8 @@
         <Border 
             BorderThickness="1" 
             BorderBrush="Black" 
-            CornerRadius="5">
+            CornerRadius="5"
+        >
 
             <!-- сюда потом вставить содержимое: grid из трёх колонок -->
 
@@ -48,8 +52,8 @@
 ```xml
 <Grid 
     Margin="10" 
-    HorizontalAlignment="Stretch">
-
+    HorizontalAlignment="Stretch"
+>
     <Grid.ColumnDefinitions>
         <ColumnDefinition Width="64"/>
         <ColumnDefinition Width="*"/>
@@ -67,10 +71,10 @@
 <Image
     Width="64" 
     Height="64"
-    Source="{Binding ImageBitmap,TargetNullValue={StaticResource defaultImage}}" />
+    Source="{Binding imageBitmap,TargetNullValue={StaticResource defaultImage}}" />
 ```
 
-Обратите внимание, в классе **Cat** нет поля *ImageBitmap*. Для получения картинки я использую вычисляемое свойство *ImageBitmap* - в геттере проверяю есть ли такая картинка, т.к. наличие названия в модели не означает наличие файла на диске. Если файла нет, то возвращается `null` и рисуется картинка по-умолчанию, которую надо зашить в ресурсы приложения.
+Обратите внимание, в классе **Cat** нет поля *imageBitmap*. Для получения картинки я использую вычисляемое свойство *imageBitmap* - в геттере проверяю есть ли такая картинка, т.к. наличие названия в модели не означает наличие файла на диске. Если файла нет, то возвращается `null` и рисуется картинка по-умолчанию, которую надо зашить в ресурсы приложения.
 
 >В реальных проектах, конечно, изображения получают с сервера, но на демо-экзамене на реализацию этого функционала времени нет, поэтому картинки кладутся в каталог с проектом (не в ресурсы, а в каталог с исполняемым файлом). Нам нужно найти картинки для нашей предметной области и добавить в поле _photo_
 
@@ -79,15 +83,25 @@
 ```cs
 public class Cat
 {
-    public Uri? ImageBitmap {
+    ...
+
+    public Uri? imageBitmap {
         get {
             var imageName = Environment.CurrentDirectory + "/img/" + (photo ?? "");
+
             return System.IO.File.Exists(imageName) ? new Uri(imageName) : null;
         }
     }
 }
 ```
 
+Что здесь происходит?
+
+* Свойство `Environment.CurrentDirectory` возвращает путь к исполняемому файлу, т.е. что-то типа `<путь к проекту>/bin/debug/net-8`
+* затем к нему добавляется подкаталог `img`, т.е. все ваши картинки должны быть в этом подкаталоге
+* и в конце добавляется содержимое поля `photo` (его надо добавить в модель и в поставщике данных заполнить названиями существующих файлов изображений)
+* перед возвращением результата проверяется есть ли такой файл на диске
+
 Изображение по-умолчанию задается в ресурсах окна
 
 ```xml
@@ -100,6 +114,7 @@ public class Cat
 
 тут, как раз, указывается путь к изображению в ресурсах (в моём случае в приложении создан каталог `Images`)
 
+---
 
 **Во второй** колонке вывожу основную информацию о кошке: _кличку_ и _породу_.
 
@@ -115,10 +130,12 @@ public class Cat
         Text="{Binding name}"/>
 
     <TextBlock 
-        Text="{Binding breed}"/>
+        Text="{Binding breed.title}"/>
 </StackPanel>
 ```
 
+---
+
 **В третьей** колонке выводим возраст
 
 ```xml
@@ -127,7 +144,7 @@ public class Cat
     Text="{Binding age}"/>
 ```
 
-На данный момент приложение выглядит примерно так
+На данный момент приложение должно выглядеть примерно так (я поле _photo_ не заполнил, поэтому у всех заглушка по-умолчанию)
 
 ![](../img/cs005.png)
 
@@ -156,11 +173,13 @@ public class Cat
 
 ![](../img/cs006.png)
 
-# Вывод данных "плиткой"
+---
+
+## Вывод данных "плиткой"
 
 Такое задание было на одном из прошлых чемпионатов, вполне вероятно что появится и на демо-экзамене.
 
-Компоненты **ListBox** и **ListView** по умолчанию инкапсулируют все элементы списка в специальную панель **VirtualizingStackPanel**, которая располагает все элементы по вертикали. Но с помощью свойства **ItemsPanel** можно переопределить панель элементов внутри списка. 
+Компоненты **ListBox** и **ListView** по умолчанию инкапсулируют все элементы списка в специальную панель **VirtualizingStackPanel**, которая располагает все элементы по вертикали. Но с помощью свойства **ItemsPanel** можно переопределить тип панели элементов внутри списка. 
 
 Мы будем использовать уже знакомую вам **WrapPanel**:
 
@@ -207,6 +226,12 @@ public class Cat
         ...
 ```
 
+---
+
+## Задание
+
+Реализовать вывод списком в проекте "кошки" (плиткой пока не надо)
+
 Предыдущая лекция | &nbsp; | Следующая лекция
 :----------------:|:----------:|:----------------:
 [Поиск, сортировка](./wpf_search_sort.md) | [Содержание](../readme.md#тема-8-оконные-приложения) | [Стили, триггеры и темы](./wpf_style.md)