Binding d'une image sur le background d'un Textblock

Version imprimable

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:

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:

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

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
 
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.

01/09/2011, 21h20
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 :ccool:
01/09/2011, 22h25
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
01/09/2011, 22h31
jacquesprogram

Et pourquoi pas un contrôle Image, avec par-dessus ton Textblock sans aucun fond ? (tu peux en faire un UserControl ;) )
01/09/2011, 22h35
yonpo
Citation:

Envoyé par djmic

Est ce que celà reste possible avec le label?

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

Citation:

Envoyé par djmic

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

Voici un exemple :
Code:

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
01/09/2011, 22h39
yonpo

Citation:

Envoyé par jacquesprogram

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....
01/09/2011, 23h52
binoo
Salut,

Citation:

Envoyé par yonpo

Citation:

Envoyé par jacquesprogram

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:

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

Citation:
Envoyé par binoo
La solution la plus simple consiste quand même à utiliser la propriété Background du TextBlock :
Code:

1 2 3 4 5 <TextBlock Text="blabla..." > <TextBlock.Background> <ImageBrush ImageSource="Images\image1.jpg" /> </TextBlock.Background> </TextBlock>
Bien vu :ccool: (même si je reste partisan de mon idée) :mrgreen:

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:

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:

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

Citation:

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

et ensuite je sais pas comment utiliser mon converter.

Merci

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:

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:

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

03/09/2011, 18h45
djmic

je récupère cette erreur :

Citation:

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

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:

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:

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,

03/09/2011, 19h48
djmic

Impeccable ca fonctionne très bien :)