Discussion :

[djmic]

Bonjour à tous,

Voilà je voulais tout d'abord savoir si celà était possible de mettre une image en background d'un textblock.

Pour l'instant j'ai ceci pour mes textblock que j'aimerai modifier pour avoir un backGroundImage

Code xaml :

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

1
2
3
4
5
6
7
8
9
10
11
 
<Style x:Key="TextBlockStyle" TargetType="{x:Type TextBlock}">
      <Style.Triggers>
             <DataTrigger Binding="{Binding Path=Tire}" Value="False">
                        <Setter Property="Foreground" Value="Red"></Setter>
             </DataTrigger>
             <DataTrigger Binding="{Binding Path=Tire}" Value="True">
                        <Setter Property="Foreground" Value="Yellow"></Setter>
             </DataTrigger>
      </Style.Triggers>
</Style>

J'ai déjà mon Converter pour l'url de l'image

Code :

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

1
2
 
<conv:ImageConverter x:Key="imgConvert"></conv:ImageConverter>

Code c# :

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
 
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Windows.Data;
using System.Windows.Media.Imaging;
 
namespace LottoVerification.Converter
{
    class ImageConverter:IValueConverter
    {
        public object Convert(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
        {
            string picture = (string)value;
            return new BitmapImage(new Uri(Environment.GetFolderPath(Environment.SpecialFolder.CommonApplicationData) + "\\LottoVerification\\images\\" + picture));
 
        }
 
        public object ConvertBack(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
        {
            return null;
        }
    }
}

Merci pour vos réponses.

[yonpo]

Salut,

Le controle TextBlock n'accepte que du texte comme contenu (via la propriété du même nom)

Utilises un Label qui a la propriété Content et qui permet de mettre ce que tu veux dedans

[djmic]

le problème est que je puisse laisser du texte tout en mettant une image en arrière-plan.

Est ce que celà reste possible avec le label?

Si c'est possible, comment puis-je faire?
Merci

[jacquesprogram]

Et pourquoi pas un contrôle Image, avec par-dessus ton Textblock sans aucun fond ? (tu peux en faire un UserControl )

[yonpo]

Est ce que celà reste possible avec le label?

Oui, puisque tu peux mettre ce que tu souhaite (images, textes, graphiques, tableaux, boutons, ...)

Si c'est possible, comment puis-je faire?
Merci

Voici un exemple :

Code xaml :

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

1
2
3
4
5
6
7
 
<Label>
            <StackPanel>
                <Image Source="Images/MonImages.png"/>
                <TextBlock Text="Bonjour" />
            </StackPanel>
</Label>

Tu peux bien sûr binder ces propriétés

[yonpo]

Et pourquoi pas un contrôle Image, avec par-dessus ton Textblock sans aucun fond ? (tu peux en faire un UserControl )

Mouais un peu galère. On fait ça en Winforms mais c'est tellement plus simple de faire ce genre de chose avec WPF.

En plus un contrôle Image ne reçoit qu'une image comme contenu....

[binoo]

Salut,

Et pourquoi pas un contrôle Image, avec par-dessus ton Textblock sans aucun fond ? (tu peux en faire un UserControl )

Mouais un peu galère. On fait ça en Winforms mais c'est tellement plus simple de faire ce genre de chose avec WPF.

En plus un contrôle Image ne reçoit qu'une image comme contenu....

Quelque part ton exemple fais ça. Tu utilises une Image et un TextBlock. Sauf que tu as mis le tout dans un StackPanel, ce qui fait que l'Image et le TextBlock vont s'empiler. L'image ne sera donc pas en background du TextBlock. Mettre tout dans une Grid ferait l'affaire par contre.


La solution la plus simple consiste quand même à utiliser la propriété Background du TextBlock :

Code xml :

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

1
2
3
4
5
        <TextBlock Text="blabla..." >
          <TextBlock.Background>
            <ImageBrush ImageSource="Images\image1.jpg"  />
          </TextBlock.Background>
        </TextBlock>

[yonpo]

La solution la plus simple consiste quand même à utiliser la propriété Background du TextBlock :

Code xml :

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

1
2
3
4
5
        <TextBlock Text="blabla..." >
          <TextBlock.Background>
            <ImageBrush ImageSource="Images\image1.jpg"  />
          </TextBlock.Background>
        </TextBlock>

Bien vu (même si je reste partisan de mon idée)

[djmic]

c'est effectivement sur la solution de binoo que j'étais parti,

mais je n'arrive pas à le mettre en place.

j'ai donc le template du label que j'ai modifé

Code xaml :

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

1
2
3
4
5
6
7
<DataTemplate>
	<Label Content="{Binding Path=Numero}" Style="{StaticResource LabelStyle}">
		<Label.Background>
			<ImageBrush ImageSource="{StaticResource ImageStyle}"></ImageBrush>
		</Label.Background>
	</Label>                                           
</DataTemplate>

et mon style

Code xaml :

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

1
2
3
4
5
6
7
8
9
10
11
 
<Style x:Key="ImageStyle" TargetType="{x:Type ImageBrush}">
                <Style.Triggers>
                    <DataTrigger Binding="{Binding Path=Tire}" Value="True">
                        <Setter Property="ImageSource" Value="boule_jaune.png"></Setter>       
                    </DataTrigger>
                    <DataTrigger Binding="{Binding Path=Tire}" Value="False">
                        <Setter Property="ImageSource" Value="boule_rouge.png"></Setter>
                    </DataTrigger>
                </Style.Triggers>
            </Style>

j'ai tout d'abord l'erreur suivant au niveau du style

Error 1 'ImageBrush' type must derive from FrameworkElement or FrameworkContentElement

et ensuite je sais pas comment utiliser mon converter.

Merci

[jmix90]

Coucou,

Ce qu'il faut que tu fasses c'est un Trigger sur le Label pour changer son background si besoin. Le voici en quelque sorte:

Code XML :

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
<Style x:Key="LabelStyle" TargetType="{x:Type Label}">
	<Style.Triggers>
		<DataTrigger Binding="{Binding Path=Tire}" Value="True">
			<Setter Property="Background" >
				<Setter.Value>
					<ImageBrush ImageSource="boule_jaune.png"/>
				</Setter.Value>
			</Setter>			
		</DataTrigger>
		<DataTrigger Binding="{Binding Path=Tire}" Value="False">
			<Setter Property="Background" >
				<Setter.Value>
					<ImageBrush ImageSource="boule_rouge.png"/>
				</Setter.Value>
			</Setter>		
		</DataTrigger>
	</Style.Triggers>
</Style>

Le mieux étant encore de mettre les brush en resources plutôt que de les réinstancier à chaque fois mais cela fonctione très bien comme cela

EDIT: ton Label ressemblera alors à cela (pense à bien mettre ton ancien LabelStyle à jour aussi):

Code XML :

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

1
2
3
4
<DataTemplate>
	<Label Content="{Binding Path=Numero}" 
	    Style="{StaticResource LabelStyle}"/>                                         
</DataTemplate>

[djmic]

je récupère cette erreur :

Value 'boule_jaune.png' cannot be assigned to property 'ImageSource'. Value does not fall within the expected range.

n'est-ce pas du à la non-utilisation d'un converter?

Merci

[jmix90]

Hello,

Tu utilises bien les extraits de code que je t'ai fourni ?

Peut-tu donner le code que tu utilises ?

Cela devrait marcher normalement...

Sinon tu peux peut-être utiliser ce code:

Code C# :

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
public class ImageConverter:IValueConverter
{
    public object Convert(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
    {
        bool tire = (bool)value;
		if(tire)
			return new BitmapImage(new Uri(Environment.GetFolderPath(Environment.SpecialFolder.CommonApplicationData)
			+ "\\LottoVerification\\images\\boule_jaune" ));
		else 
			return new BitmapImage(new Uri(Environment.GetFolderPath(Environment.SpecialFolder.CommonApplicationData)
			+ "\\LottoVerification\\images\\boule_rouge.png" ));
    }
 
    public object ConvertBack(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
    {
        return null;
    }
}

et ce XAML:

Code XML :

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

1
2
3
4
5
6
7
<DataTemplate>
	<Label Content="{Binding Path=Numero}" >
		<Label.Background>
			<ImageBrush ImageSource={Binding Tire, Converter={StaticResource ImageConverter}}"/>
		</Label.Background>
	</Label>		
</DataTemplate>

Bon courage,

[djmic]

Impeccable ca fonctionne très bien