Comment créer un template en WPF

Bonjour,

Je viens de me lancer dans le wpf et je cherche à affiché des images dans ce style là :

img1, img2, img3
img4, img5, img6

etc...

Ces images ont toutes la même dimension la seule chose qui change ce sont leurs marges, leurs noms et leurs sources.
J'essaye de suivre une architecture mvvm.
Donc j'essaye de faire un template en XAML pour afficher toutes ces images mais les exemples que j'ai pu trouver sur la toile utilisent des listes et les listes affichent de haut en bas et non de gauche à droite.

Donc ma question est la suivante :

Comment faire un template XAML en bindant certaines propriétés qui doivent être différentes d'une image à l'autre.
En c# c'est facile à faire avec mais du coup je respecte plus vraiment la séparation de la la vue logique et graphique.

Pourriez-vous m'orienter sur de la doc pour débutant/intermédiaire car je trouve de tout sur le net avec plus ou moins de bonne explications et la doc msdn elle est pas terrible je trouve pour comprendre.

Merci

Tu peux utiliser un ItemsControl (ou une ListBox si tu veux sélectionner un item) et lui donner en ItemsPanelTemplate une UniformGrid avec 3 colonnes ; et un ItemTemplate qui se bindera sur les propriétés de chaque Item.

1 pièce(s) jointe(s)

J'ai fait un projet application WPF, nommé ListShow, auquel j'ai ajouté les packages Nuget pour MVVMLight de Laurent Bugnion. Le package complet devrait normalement ajouter le ViewModelLocator au App.xaml de l'application. Voici mon fichier MainViewModel.cs (qui porte aussi une classe Model.CustomDataItem) :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
using System.Collections.Generic;
using System.Collections.ObjectModel;
using System.Windows;
using System.Windows.Data;
using System.Windows.Input;
using System.Windows.Media;
using GalaSoft.MvvmLight;
using GalaSoft.MvvmLight.CommandWpf;
using ListShow.Model;
 
namespace ListShow.ViewModel
{
    /// <summary>
    /// This class contains properties that the main View can data bind to.
    /// <para>
    /// Use the <strong>mvvminpc</strong> snippet to add bindable properties to this ViewModel.
    /// </para>
    /// <para>
    /// You can also use Blend to data bind with the tool's support.
    /// </para>
    /// <para>
    /// See http://www.galasoft.ch/mvvm
    /// </para>
    /// </summary>
    public class MainViewModel : ViewModelBase
    {
        /// <summary>
        /// Initializes a new instance of the MainViewModel class.
        /// </summary>
        public MainViewModel()
        {
            var colors = new Color[]
            {
                Colors.Brown,
                Colors.Red,
                Colors.Orange,
                Colors.Yellow,
                Colors.Green,
                Colors.Blue,
                Colors.Purple
            };
 
            var items = new ObservableCollection<CustomDataItem>();
            for (int i = 0; i < 20; ++i) items.Add(
                new CustomDataItem
                {
                    Text = $"Item {i}",
                    BackgroundColor = colors[i % colors.Length],
                    InnerColor = colors[(i + 3) % colors.Length]
                });
 
            Items = new CollectionView(items);
 
            Header = "Hello!";
        }
 
        public CollectionView Items { get; private set; }
 
        public ICommand CloseCommand { get; private set; } = new RelayCommand(() => Application.Current.Shutdown());
 
        private string _header;
        public string Header { get { return _header; } set { Set(ref _header, value); } }
    }
}
 
namespace ListShow.Model
{
    public class CustomDataItem
    {
        public string Text { get; set; }
        public Color BackgroundColor { get; set; }
        public Color InnerColor { get; set; }
    }
}

Le fichier MainWindow.xaml pour l'affichage des données dans une grille :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
<Window x:Class="ListShow.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:ListShow"
        xmlns:model="clr-namespace:ListShow.Model"
        mc:Ignorable="d"
        DataContext="{Binding Main, Source={StaticResource Locator}}"
        Title="MainWindow" Height="350" Width="525">
    <DockPanel>
        <Border DockPanel.Dock="Top" Padding="5">
            <TextBlock Text="{Binding Header}" TextAlignment="Center" VerticalAlignment="Center" FontSize="18" FontWeight="Bold"/>
        </Border>
        <Border DockPanel.Dock="Bottom">
            <Grid>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="*"/>
                    <ColumnDefinition Width="Auto"/>
                </Grid.ColumnDefinitions>
                <Border Grid.Column="1" Padding="5">
                    <Button Content="Close" Command="{Binding CloseCommand}"/>
                </Border>
            </Grid>
        </Border>
        <ScrollViewer HorizontalScrollBarVisibility="Auto" VerticalScrollBarVisibility="Visible">
            <Grid>
                <Grid.RowDefinitions>
                    <RowDefinition Height="Auto"/>
                    <RowDefinition Height="*"/>
                </Grid.RowDefinitions>
                <ItemsControl ItemsSource="{Binding Items, Mode=OneWay}">
                    <ItemsControl.ItemsPanel>
                        <ItemsPanelTemplate>
                            <UniformGrid Columns="3"/>
                        </ItemsPanelTemplate>
                    </ItemsControl.ItemsPanel>
                    <ItemsControl.ItemTemplate>
                        <DataTemplate DataType="model:CustomDataItem">
                            <Border Height="50" MinWidth="150">
                                <Border.Background>
                                    <SolidColorBrush Color="{Binding BackgroundColor}"/>
                                </Border.Background>
                                <TextBlock Text="{Binding Text}" HorizontalAlignment="Center" VerticalAlignment="Center">
                                    <!-- Décommenter le bloc en-dessous pour ajouter une couleur de backgroung au TextBlock basé sur une propriété de l'item -->
                                    <!--<TextBlock.Background>
                                        <SolidColorBrush Color="{Binding InnerColor}"/>
                                    </TextBlock.Background>-->
                                </TextBlock>
                            </Border>
                        </DataTemplate>
                    </ItemsControl.ItemTemplate>
                </ItemsControl>
            </Grid>
        </ScrollViewer>
    </DockPanel>
</Window>

Une image du résultat :

Pièce jointe 285541

En espérant que ça t'aide pour comprendre comment procéder.

Merci pour cet exemple je vais le lire attentivement.

J'ai mis beaucoup de fioritures mais la partie qui t'intéresse vraiment dans le xaml est le contenu du ScrollViewer, avec la Grid et sa UniformGrid comme template du panneau d'affichage ; il te faudra ensuite mettre un DataTemplate approprié pour afficher correctement tes images.