|
Создание подключения к БД MySQL. Получение данных с сервера.
|
Содержание
|
Вывод данных согласно макету (ListView, Image).
|
|
Вывод данных согласно макету (ListView, Image).
Напоминаю как выглядит макет списка продукции
Для создания такого макета используется элемент ListView
В разметке вместо GridView вставляем ListView
<ListView
Grid.Row="1"
Grid.Column="1"
ItemsSource="{Binding ProductList}"
>
</ListView>
Внутри него вставляем макет для элемента списка: пока у нас только прямоугольная рамка со скругленными углами (в этом макете вроде скрулять не надо, возможно осталось от другого шаблона)
<ListView.ItemTemplate>
<DataTemplate>
<Border
BorderThickness="1"
BorderBrush="Black"
CornerRadius="5">
<!-- сюда потом вставить содержимое -->
</Border>
</DataTemplate>
</ListView.ItemTemplate>
Внутри макета вставляем Grid из трёх колонок: для картинки, основного содержимого и стоимости.
<Grid
Margin="10"
HorizontalAlignment="Stretch">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="64"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="auto"/>
</Grid.ColumnDefinitions>
<!-- сюда потом вставить содержимое -->
</Grid>
В первой колонке выводим изображение:
<Image
Width="64"
Height="64"
Source="{Binding ImagePreview,TargetNullValue={StaticResource defaultImage}}" />
Обратите внимание, вместо поля Image я вывожу вычисляемое поле ImagePreview - в геттере проверяю есть ли такая картинка, т.к. наличие данных в базе не означает наличие файла на диске
public Uri ImagePreview {
get {
var imageName = Environment.CurrentDirectory + (Image ?? "");
return System.IO.File.Exists(imageName) ? new Uri(imageName) : null;
}
}
- Файлы подгружаемые с диска должны быть в формате Uri, иначе программа ищет их в ресурсах исполняемого файла
- К имени файла добавляю путь к текущему каталогу
- Если такого файла нет, то возвращаю null, в этом случае срабатывает параметр привязки TargetNullValue - отображать изображение по-умолчанию.
Изображение по-умолчанию задается в ресурсах окна (первый элемент окна)
<Window.Resources>
<BitmapImage
x:Key='defaultImage'
UriSource='./Images/picture.png' />
</Window.Resources>
тут, как раз, указывается путь к изображению в ресурсах (в моём случае в приложении сознад каталог Image и в него ЗАГРУЖЕН файл)
Во второй колонке вывожу основную информацию о продукте: тип + название, ариткул и список материалов.
Так как данные выводятся в несколько строк, то заворачиваю их в StackPanel (тут можно использовать и Grid, но их и так уже много в разметке)
<StackPanel
Grid.Column="1"
Margin="5"
Orientation="Vertical">
<TextBlock
Text="{Binding TypeAndName}"/>
<TextBlock
Text="{Binding ArticleNumber}"/>
<TextBlock
Text="{Binding MaterialString}"/>
</StackPanel>
Вообще выводимый текст можно форматировать, но чтобы не запоминать лишних сущностей можно нарисовать ещё один геттер TypeAndName
public string TypeAndName {
get {
return ProductTypeTitle+" | "+Title;
}
}
Артикул и список материалов выводятся как есть
На данный момент приложение выглядит примерно так
Видно, что размер элемента зависит от содержимого.
Чтобы это исправить нужно добавить в ListView стиль для элемента контейнера, в котором задать горизонтальное выравнивание по ширине:
<ListView
Grid.Row="1"
Grid.Column="1"
ItemsSource="{Binding ProductList}"
>
<ListView.ItemContainerStyle>
<Style
TargetType="ListViewItem">
<Setter
Property="HorizontalContentAlignment"
Value="Stretch" />
</Style>
</ListView.ItemContainerStyle>
...
Теперь окно должно выглядеть как положено:
