плитка

articles/cs_layout.md

@@ -163,6 +163,66 @@ public string TypeAndName {
 
 ![](../img/01067.png)
 
+# Вывод данных "плиткой"
+
+Такое задание было на одном из прошлых соревнований WorldSkills, вполне вероятно что появится и на демо-экзамене.
+
+Компоненты **ListBox** и **ListView** по умолчанию инкапсулируют все элементы списка в специальную панель **VirtualizingStackPanel**, которая располагает все элементы по вертикали. Но с помощью свойства **ItemsPanel** можно переопределить панель элементов внутри списка. 
+
+Мы будем использовать уже знакомую вам **WrapPanel**:
+
+```xml
+<ListView.ItemsPanel>
+    <ItemsPanelTemplate>
+        <WrapPanel 
+            HorizontalAlignment="Center" />
+    </ItemsPanelTemplate>
+</ListView.ItemsPanel>
+```
+
+>Атрибут *HorizontalAlignment* используем, чтобы "плитки" центрировались.
+
+![](../img/01072.png)
+
+Как видим, элементы списка отображаются горизонтальным списком, но нет переноса. Для включения переноса элементов нужно в **ListView** отключить горизонтальный скролл, добавив атрибут `ScrollViewer.HorizontalScrollBarVisibility="Disabled"`:
+
+![](../img/01073.png)
+
+Свойство *ItemContainerStyle* уже не нужно и его можно убрать.
+
+Размеры наших элементов по-прежнему зависят от содержимого - тут надо править шаблон **ItemTemplate**.
+
+Итоговая разметка для вывода "плиткой" должна выглядеть примерно так:
+
+```xml
+<ListView
+    ItemsSource="{Binding ProductList}"
+    x:Name="ListView"
+    ScrollViewer.HorizontalScrollBarVisibility="Disabled" 
+>
+    <ListView.ItemsPanel>
+        <ItemsPanelTemplate>
+            <WrapPanel 
+                HorizontalAlignment="Center" />
+        </ItemsPanelTemplate>
+    </ListView.ItemsPanel>
+
+    <!--ListView.ItemContainerStyle>
+        <Style 
+            TargetType="ListViewItem">
+            <Setter 
+                Property="HorizontalContentAlignment"
+                Value="Stretch" />
+        </Style>
+    </-->
+    
+    
+    <ListView.ItemTemplate>
+        ...
+    </ListView.ItemTemplate>
+</ListView>    
+```
+
 <table style="width: 100%;"><tr><td style="width: 40%;">
 <a href="../articles/cs_mysql_connection2.md">Создание подключения к БД MySQL. Получение данных с сервера.
 </a></td><td style="width: 20%;">

readme.md

@@ -67,8 +67,6 @@ http://sergeyteplyakov.blogspot.com/2014/01/microsoft-fakes-state-verification.h
 
 # МДК. 05.01 Проектирование и дизайн информационных систем
 
-<!-- 56+92=148, 34+72=106 -->
-
 ## Тема 5.1.1. Основы проектирования информационных систем
 
 <!-- https://sites.google.com/site/anisimovkhv/learning/pris/lecture -->
@@ -124,11 +122,15 @@ http://sergeyteplyakov.blogspot.com/2014/01/microsoft-fakes-state-verification.h
 
 1. [Создание подключения к БД MySQL. Получение данных с сервера.](./articles/cs_mysql_connection2.md)
 
-2. [Вывод данных согласно макету (ListView, Image).](./articles/cs_layout.md)
+2. [Вывод данных согласно макету (ListView, Image). Вывод данных плиткой.](./articles/cs_layout.md)
+
+<!-- сюда же добавить разметку "плиткой" -->
 
 3. [Пагинация, сортировка, фильтрация, поиск](./articles/cs_pagination.md)
 
-4. [Подсветка элементов по условию. Дополнительные выборки.Массовая смена цены продукции.](./articles/cs_coloring.md)
+<!-- datepicker -->
+
+4. [Подсветка элементов по условию. Дополнительные выборки. Массовая смена цены продукции.](./articles/cs_coloring.md)
 
 5. [Создание, изменение продукции](./articles/cs_edit_product.md)
 
@@ -180,6 +182,8 @@ kerio
 
 1. [API. PHP-сервер. GET-запрос.](./articles/api_php.md)
 
+<!-- переделать на asp.net -->
+
 ## Тема 5.1.6. C#, разбор задания.
 
 <!-- 1. [Сессия 1. Создание БД. Импорт данных. Окно авторизации](./articles/wsr_1.md) -->
@@ -247,12 +251,6 @@ vmware vSphere
 
  -->
 
-## Продвинутый SQL
-
-1. Представления (View)
-2. Триггеры (на примере продажи продукции)
-3. Транзакции
-
 ## Документация
 
 1. [Руководство пользователя](./articles/user_manual.md)