Texte barré dans un ListView avec Binding

**altropus** · 15/12/2011, 17h15

Bonjour,

J'ai un ListView avec Binding sur une source de données.

J'arrive à modifié la couleur des textes en fonction de la valeur d'un champ de la liste (cf. dans le code ci-dessous : Style.Triggers et DataTrigger).

Mais je n'arrive pas à obtenir un texte barré (du type TextDecoration Strikethrough) en fonction de la valeur du même champ.

Est-ce possible ?

Si oui comment ?

Code xaml :

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
 
...
<UserControl.Resources>
	<Style x:Key="ListViewItemContainerStyle" TargetType="{x:Type ListViewItem}">
		<Style.Triggers>
			<DataTrigger Binding="{Binding State}" Value="R">
				<Setter Property="Foreground" Value="#FF888888" />
			</DataTrigger>
			<DataTrigger Binding="{Binding State}" Value="X">
				<Setter Property="Foreground" Value="#FF990000" />
			</DataTrigger>
		</Style.Triggers>
	</Style>   
</UserControl.Resources>		
 
<ListView Grid.Column="0" Grid.Row="4" x:Name="listView" 
				   ItemsSource="{Binding ListArticles}" 
				   ItemContainerStyle="{DynamicResource ListViewItemContainerStyle}" 
				   ScrollViewer.CanContentScroll="True" ScrollViewer.VerticalScrollBarVisibility="Auto">
	<ListView.View>
		<GridView AllowsColumnReorder="true" x:Name="gridView">
			<GridViewColumn Width="60" DisplayMemberBinding="{Binding Id}">
				<GridViewColumnHeader x:Name="SortId" Click="SortCommand" Tag="id">Numéro</GridViewColumnHeader>
			</GridViewColumn>
			<GridViewColumn Width="210" DisplayMemberBinding="{Binding Title}">
				<GridViewColumnHeader x:Name="SortTitle" Click="SortCommand" Tag="title">Titre</GridViewColumnHeader>
			</GridViewColumn>
			<GridViewColumn Width="120" DisplayMemberBinding="{Binding Path=State, Converter={StaticResource ConverterState}}">
				<GridViewColumnHeader x:Name="SortState" Click="SortCommand" Tag="state">Etat</GridViewColumnHeader>
			</GridViewColumn>
		</GridView>
	</ListView.View>
</ListView>
...

Merci d'avance,
Cordiaement

**GuruuMeditation** · 15/12/2011, 17h47

Il y a plusieurs façons, tu peux faire un Templateitem pour les éléments. Dans ce template, tu peux faire un binding de textdecoration vers ton champ, avec un converter qui pour convertir ton champs en striketrought ou en normal.

**NejNej** · 15/12/2011, 17h49

cette ligne ne marche pas?

Code :

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

1
2
 
<Setter Property="TextBlock.TextDecorations" Value="Strikethrough"/>

**GuruuMeditation** · 15/12/2011, 18h35

Je ne pense pas que ça va marcher, car il ne va pas voir le Texblock, car il est construit implicitement (à vérifier).
Sinon, il faut passer par un template et là on peut mettre un trigger sur le texblock, vu qu'il est explicite :

Code XAML :

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
 
 <GridViewColumn Width="210">
                        <GridViewColumnHeader x:Name="SortTitle"
                                              Tag="title">Titre</GridViewColumnHeader>
                        <GridViewColumn.CellTemplate>
                            <DataTemplate>
                                <TextBlock Text="{Binding Title}">
                                    <TextBlock.Style>
                                        <Style>
                                            <Style.Triggers>
                                                 <DataTrigger Binding="{Binding State}"
                                                              Value="X">
 
                    <Setter Property="TextBlock.TextDecorations"
                                                    Value="Strikethrough" />
                                                     </DataTrigger>
                                            </Style.Triggers>
                                        </Style>
                                    </TextBlock.Style>
 
                                </TextBlock>
                            </DataTemplate>
                        </GridViewColumn.CellTemplate>
                    </GridViewColumn>

Ou encore, passer par un behavior, pour rendre le bazar plus flexible

**altropus** · 16/12/2011, 10h13

Bonjour,

Je vous remercie de vos réponses, j'ai testé les différentes propositions mais il semble qu'aucune ne fonctionne.

Cordialement.

**micka132** · 16/12/2011, 16h16

Est ce que tu pourras nous montrer l'implementation que ta réaliser avec l'idée de GuruuMeditation ?
J'ai du mal a voir pourquoi ca méthode ne fonctionne pas!

**MABROUKI** · 17/12/2011, 04h47

Bonjour altropus
More simplistic solution.Utilise un datatemplate pour la cellule que tu veux "strike" ou "underligne"
Remplace DisplayMemberBinding par CellTemplate.
Et simplement renvoie le binding dans un DataTemplate qui va servir de modele à ta cellule (un DockPanel et un TextBlock bien binde).
Et cette fois-ci ton DataTrigger a quelque chose à croquer .......le TextBlock.
Bref voici comment j'ai ai essay de replique tes donnes:
-une classe exemple Personne.
-un usercontrol
-un winform de test.
code behind classe personne:

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
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
 
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Collections.ObjectModel;
 
namespace WpfApplication1
{
    public class Personne
    {
        public string Id { get; set; }
        public string Title { get; set; }
        public string State { get; set; }
    }
 
    public class Personnes:ObservableCollection<Personne >
    {
        private Personne o;
        public Personnes()
        {
            Random rnd =new Random();
            for (int i = 0; i < 21; i++)
            {
                o = new Personne();
		        o.Id = "Item" + (i + 1).ToString();
		        o.Title = "Titre" +  (10*i + 1).ToString();
                if (rnd.Next(0,20) < 10)
	                {
                		 o.State="R";
	                }else
	                {
                        o.State = "X";
	                }
                this.Add(o); 
            }
 
        }
    }
}

xam du usercontrol:

Code xaml :

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
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
 
<UserControl x:Class="WpfApplication1.UserControl1"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="clr-namespace:WpfApplication1"
    Height="300" Width="300">
    <UserControl.Resources>
        <local:Personnes x:Key="ListArticles"></local:Personnes>
        <!--garde ton ListViewItemContainerStyle tel quel-->
        <Style 
            x:Key="ListViewItemContainerStyle" 
            TargetType="{x:Type ListViewItem}">
            <Style.Triggers>
                <DataTrigger 
                        Binding="{Binding State}" 
                        Value="R">
                    <Setter 
                        Property="Foreground" 
                        Value="#FF888888" />
                </DataTrigger>
                <DataTrigger 
                        Binding="{Binding State}" 
                        Value="X">
                    <Setter 
                        Property="Foreground" 
                        Value="#FF990000" />
                </DataTrigger>
 
            </Style.Triggers>
        </Style>
        <!--rajoute ce DataTemplate pour la cell Id si tu veux la "striker"-->
        <DataTemplate 
            x:Key="myCellTemplate"> 
            <DockPanel>
                <TextBlock 
                    x:Name="tbName"
                    Width="60" 
                    FontSize="16"
                    Text="{Binding Id}"/>
            </DockPanel>
            <DataTemplate.Triggers>
                <DataTrigger 
                    Binding="{Binding Path=State}"
                    Value="R">
                    <Setter 
                        TargetName="tbName"
                        Property="TextDecorations" 
                        Value="Strikethrough"/>
                </DataTrigger>
                <DataTrigger 
                    Binding="{Binding Path=State}" 
                    Value="X">
                    <Setter 
                        TargetName="tbName"
                        Property="TextDecorations" 
                        Value="Underline"/>
                </DataTrigger>
            </DataTemplate.Triggers>
        </DataTemplate>
    </UserControl.Resources>
    <!--DisplayMemberBinding pour ID is out
           et remplace par CellTemplate-->
    <Grid>
        <Grid.DataContext>
            <Binding Source="{StaticResource ListArticles}"/>
        </Grid.DataContext>
        <ListView 
            x:Name="listView" 
		   ItemsSource="{Binding  }" 
		   ItemContainerStyle="{DynamicResource ListViewItemContainerStyle}" 
		   ScrollViewer.CanContentScroll="True"
           ScrollViewer.VerticalScrollBarVisibility="Auto">
 
            <ListView.View>
                <GridView 
                    AllowsColumnReorder="true" 
                    x:Name="gridView">
                    <GridViewColumn
                        x:Name="Id"
                        Width="60" 
                        CellTemplate="{StaticResource myCellTemplate}">
                        <GridViewColumnHeader 
                            x:Name="SortId" 
                            Content="Numéro">
                        </GridViewColumnHeader>
                    </GridViewColumn>
                    <GridViewColumn 
                        Width="120" 
                        DisplayMemberBinding="{Binding Path=Title}">
                        <GridViewColumnHeader 
                            x:Name="SortTitle" 
                            Content="Title">
                        </GridViewColumnHeader>
                    </GridViewColumn>
                    <GridViewColumn 
                        Width="120" 
                        DisplayMemberBinding="{Binding Path=State}">
                        <GridViewColumnHeader 
                            x:Name="SortState" 
                            Content="State" >
                        </GridViewColumnHeader>
                    </GridViewColumn>
                </GridView>
            </ListView.View>
        </ListView>
    </Grid>
</UserControl>

xaml du winform:

Code xaml :

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

1
2
3
4
5
6
7
8
9
10
11
 
 
<Window x:Class="WpfApplication1.Window1"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="clr-namespace:WpfApplication1"
    Title="Window1" Height="300" Width="300">
    <Grid>
        <local:UserControl1></local:UserControl1>
    </Grid>
</Window>

extrait msdn doc:

Vous pouvez également spécifier une Binding dans la définition d'un DataTemplate que vous utilisez pour appliquer un style aux cellules d'une colonne. Dans l'exemple suivant, le DataTemplate identifié avec une ResourceKey définit la Binding pour un GridViewColumn. Notez que cet exemple ne définit pas le DisplayMemberBinding car cela substituerait la liaison spécifiée par DataTemplate

exemple code msdn suivant cette citation:

Code xaml :

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

1
2
3
4
5
6
7
8
9
10
 
<DataTemplate x:Key="myCellTemplateMonth">
  <DockPanel>
    <TextBlock Foreground="DarkBlue" HorizontalAlignment="Center">
      <TextBlock.Text>
        <Binding Path="Month"/>
      </TextBlock.Text>
    </TextBlock>
  </DockPanel>
</DataTemplate>

bon code.........

Texte barré dans un ListView avec Binding

Windows Presentation Foundation

Discussions similaires

Partager

Partager