Discussion :

[Ticoche]

Bonjour,

Je cherche désespérément un control qui me permettrai d'écrire du texte avec des icones (images spécifique) à l'intérieur ?
L'ordre du texte et des images ainsi que leur nombre est variable, c'est pourquoi je n'arrive pas à créer un bon DataTemplate, sur un TextBlock par exemple.
Des exemple de texte :
exemple 1 : {fleche} Vous pouvez défausser un Permanent ciblé avec un Coût de Main {4} ou plus.
exemple 2 : Toutes les régions sont {eau} et perdent leurs autres types.
exemple 3 : {image} texte {image} texte {image} texte
Le texte {entre} indique qu'il faut le remplacer par une image.

Est-ce possible de faire ça avec les composants existant, ou dois-je créer un userControl par exemple ? Dans tous les cas, je ne vois pas comment faire ?

Merci

[umfred]

Selon moi, tu devrais utiliser un RichTextBox
un exemple qui date un peu https://www.codeproject.com/Articles...chTextBox-at-R (le principe doit rester le même)

[chrismonoye]

Bonjour,
En m'inspirant fortement de ce tuto, on pourrait présenter image et texte dans leur contrôle respectif.
L'ensemble aligné horizontalement dans un StackPanel : code XAML

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
        <ItemsControl Name="icAffichage" >
            <!-- Choix du type de panel utilisé pour contenir tous les éléments alignés horizontalement-->
            <ItemsControl.ItemsPanel>
                <ItemsPanelTemplate>
                    <StackPanel Orientation="Horizontal" Height="30"/>
                </ItemsPanelTemplate>
            </ItemsControl.ItemsPanel>
 
            <!--Modèle : possibilité de Image - Texte sur 2 colonnes X fois de suite-->
            <ItemsControl.ItemTemplate>
                <DataTemplate>
                    <Grid Margin="0">
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="*" />
                            <ColumnDefinition Width="*" />
                        </Grid.ColumnDefinitions>
                        <Image Source="{Binding Image}" />
                        <TextBlock Grid.Column="1" Text="{Binding Texte}" VerticalAlignment="Center" FontFamily="Times New Roman"
                                   FontStretch="Expanded" FontStyle="Oblique" FontWeight="ExtraBlack"  FontSize="20" />
                    </Grid>
                </DataTemplate>
            </ItemsControl.ItemTemplate>
        </ItemsControl>

Et le code utilisateur :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
        string path = $"{Directory.GetCurrentDirectory()}\\Images\\";
        List<Affichage> affichages = new List<Affichage>();
        private void BtnAffiche_Click(object sender, RoutedEventArgs e)
        {
            affichages.Add(new Affichage() { Image = path + "arrow_right.png", Texte = "Vous pouvez défausser un Permanent ciblé avec un Coût de Main " });
            affichages.Add(new Affichage() { Image = path + "Quatre.png", Texte = "ou plus. " });
 
            //affichages.Add(new Affichage() { Image = "", Texte = "Toutes les régions sont " });
            //affichages.Add(new Affichage() { Image = path + "Blue Sphere.png", Texte = "et perdent leurs autres types." });
 
            icAffichage.ItemsSource = affichages;
        }
 
        public class Affichage
        {
            public string Image { get; set; } = string.Empty;
            public string Texte { get; set; } = string.Empty;
        }

Ce qui donne :

[Ticoche]

Bonjour,

Je galère toujours avec ce problème. je voudrais "juste" remplacer un tag par une icone.
Exemple de texte :
{reserve} Vous pouvez défausser une carte de votre Réserve. Si vous le faites : vous pouvez renvoyer un Personnage ou Permanent ciblé avec un Coût de Main {5} ou moins dans la main de son propriétaire.

J'aimerai voir, un texte écrit normalement (style de texte qu'on peut voir sur une carte à jouer Altered), une icone à la place de {reserve} et une autre icone à la place de {5} tout simplement.
Mais c'est la folie, rien ne s'aligne correctement, ou alors le texte ne wrap pas correctement, ou tout se superpose, bref, j'ai toujours un problème quelque part !

J'utilise le OutlineTextControl, trouvé ici :
https://github.com/dotnet/docs-deskt...indow1.xaml.cs

[Ticoche]

Bonjour,
En m'inspirant fortement de ce tuto, on pourrait présenter image et texte dans leur contrôle respectif.
L'ensemble aligné horizontalement dans un StackPanel : code XAML

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
        <ItemsControl Name="icAffichage" >
            <!-- Choix du type de panel utilisé pour contenir tous les éléments alignés horizontalement-->
            <ItemsControl.ItemsPanel>
                <ItemsPanelTemplate>
                    <StackPanel Orientation="Horizontal" Height="30"/>
                </ItemsPanelTemplate>
            </ItemsControl.ItemsPanel>
 
            <!--Modèle : possibilité de Image - Texte sur 2 colonnes X fois de suite-->
            <ItemsControl.ItemTemplate>
                <DataTemplate>
                    <Grid Margin="0">
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="*" />
                            <ColumnDefinition Width="*" />
                        </Grid.ColumnDefinitions>
                        <Image Source="{Binding Image}" />
                        <TextBlock Grid.Column="1" Text="{Binding Texte}" VerticalAlignment="Center" FontFamily="Times New Roman"
                                   FontStretch="Expanded" FontStyle="Oblique" FontWeight="ExtraBlack"  FontSize="20" />
                    </Grid>
                </DataTemplate>
            </ItemsControl.ItemTemplate>
        </ItemsControl>

Et le code utilisateur :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
        string path = $"{Directory.GetCurrentDirectory()}\\Images\\";
        List<Affichage> affichages = new List<Affichage>();
        private void BtnAffiche_Click(object sender, RoutedEventArgs e)
        {
            affichages.Add(new Affichage() { Image = path + "arrow_right.png", Texte = "Vous pouvez défausser un Permanent ciblé avec un Coût de Main " });
            affichages.Add(new Affichage() { Image = path + "Quatre.png", Texte = "ou plus. " });
 
            //affichages.Add(new Affichage() { Image = "", Texte = "Toutes les régions sont " });
            //affichages.Add(new Affichage() { Image = path + "Blue Sphere.png", Texte = "et perdent leurs autres types." });
 
            icAffichage.ItemsSource = affichages;
        }
 
        public class Affichage
        {
            public string Image { get; set; } = string.Empty;
            public string Texte { get; set; } = string.Empty;
        }

Ce qui donne :

J'ai (enfin) réussi à faire fonctionné ton exemple. Cependant j'ai toujours un problème, c'est le retour à la ligne.
Ça fonctionne très bien sur une ligne, mais je dois pouvoir wrapper le texte sur jusqu'à 3 lignes, et avec un texte long je n'ai pas réussis.
Je pense que c'est une solution proche du but ^^
Merci

[Ticoche]

Pour l'instant, je n'ai trouvé aucune solution qui permette d'écrire une phrase avec des images, qui se comporte comme un TextBlock, avec des retours à la ligne suivant son conteneur.
Il n'y a vraiment rien qui permette de faire ça sans devoir créer son propre customControl ?

[chrismonoye]

Bonjour,
Pour du multiligne, le StackPanel ne pouvant convenir, étant unidirectionnel, j'avais pensé, alors, à un flowDocument.
Ce document peut recevoir des objets qu'il ajoute les uns aux autres en passant à la ligne si il le faut.
Je n'arrivais pas à faire quelque chose de MVVM et je n'ai pas poussé plus avant.
Je livre les fichiers tels que, si cela peut aider?

code XAML :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<Window x:Class="WpfFlowDocumentScrollViewerTextesEtImages.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:WpfFlowDocumentScrollViewerTextesEtImages"
        mc:Ignorable="d"
        Title="MainWindow" Height="450" Width="800">
    <Grid>
        <FlowDocumentScrollViewer Name="fdocScrollViewer" Margin="159,69,0,0" FontFamily="Microsoft Sans Serif" FontSize="16"
                                  VerticalScrollBarVisibility="Auto" BorderThickness="1" BorderBrush="DarkBlue" Height="auto" VerticalAlignment="Top" 
                                  HorizontalAlignment="Left" Width="386">  <!--Document="{Binding FlowDocu}"-->
 
            <FlowDocument Name="fdoc" >
                <Paragraph Name="pgraph" Background="WhiteSmoke" Margin="0,0,0,0" >
 
                </Paragraph>
            </FlowDocument>
 
        </FlowDocumentScrollViewer>
    </Grid>
</Window>

A noter que FlowDocumentScrollViewer a une propriété Document pour le lier à une classe flowDocument (=> ViewModel).

code CS :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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
using System.Windows;
using System.Windows.Controls;
using System.Windows.Documents;
using System.Windows.Media;
using System.Windows.Media.Imaging;
 
namespace WpfFlowDocumentScrollViewerTextesEtImages
{
    /// <summary>
    /// Interaction logic for MainWindow.xaml
    /// </summary>
    public partial class MainWindow : Window
    {
        public MainWindow()
        {
            InitializeComponent();
            InlineUIContainerExemple();
        }
 
        void InlineUIContainerExemple()
        {
            //*** construction des textes et images.
            Run run1 = new Run(" Vous pouvez défausser une carte de votre Réserve. Si vous le faites : " +
                               "vous pouvez renvoyer un Personnage ou Permanent ciblé avec un Coût de Main ");
            Run run2 = new Run(" ou moins dans la main");
            Bold bold1 = new Bold(new Run(" de son propriétaire.", pgraph.ContentStart));
            bold1.Foreground = Brushes.Maroon;
 
            Image image1 = new Image();
            image1.Source = new BitmapImage(new Uri("pack://application:,,,/Images/Reserve.png"));
            image1.Height = 18;
 
 
            Image image2 = new Image();
            image2.Source = new BitmapImage(new Uri("pack://application:,,,/Images/Cinq1.png"));
            image2.Height = 18;
 
            //*** Création des InlineUIContainer pour contenir les images.
            InlineUIContainer InlineUIContainer1 = new InlineUIContainer();
            InlineUIContainer InlineUIContainer2 = new InlineUIContainer();
 
            //*** Définir la propriété BaselineAlignment sur « Bottom » afin que les images
            //    s'alignent correctement avec le texte.
            InlineUIContainer1.BaselineAlignment = BaselineAlignment.Bottom;
            InlineUIContainer2.BaselineAlignment = BaselineAlignment.Bottom;
 
            //*** Affecter l'image à son InlineUIContainer.
            InlineUIContainer1.Child = image1;
            InlineUIContainer2.Child = image2;
 
            //*** Ajout du contenu au paragraphe, du paragraphe au flowdocument
            //    et du Flowdocument au FlowDocumentScrollViewer.
            pgraph.Inlines.Add(InlineUIContainer1);
            pgraph.Inlines.Add(run1);
            pgraph.Inlines.Add(InlineUIContainer2);
            pgraph.Inlines.Add(run2);
            pgraph.Inlines.Add(bold1);
 
            fdoc.Blocks.Add(pgraph);
            fdocScrollViewer.Document = fdoc;
        }
    }
}

Les images sont dans un dossier "Images" à la racine du projet et leur propriété "Action de génération" est sur "Ressource".

Le résultat :