[XAML MVVM] ListView - Mise à jour d'une ObservableCollection.

Version imprimable

Bonjour à tous,

J'ai un souci avec la mise à jour d'une ObervableCollection vers la Vue.

Lors du remplissage de la vue j'ai pas de souci, la listview se met bien a jour.

Dans ma vue j'ai une Listview que j'ai Implémente ainsi:

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
75
76
77
78
79
80
81
82
83
84
85
86
87
                        <ListView Margin="10" 
                              Name="GRD_Datas" 
                              Height="340"
                              ItemsSource="{Binding GRD_DatasAll_Collection }"
                              SelectedItem="{Binding GRD_DatasAll_Selected}">
                        <ListView.ItemContainerStyle>
                            <Style TargetType="ListViewItem">
                                <Setter Property="HorizontalContentAlignment" Value="Stretch" />
                            </Style>
                        </ListView.ItemContainerStyle>
                        <ListView.View>
                            <GridView>
                                <GridViewColumn Header="{Binding GRD_Header_Idx_Text, FallbackValue='idx'}"
                                                Width="30">
                                    <GridViewColumn.CellTemplate>
                                        <DataTemplate>
                                            <Grid Background="{Binding Path=mColor}">
                                                <TextBlock HorizontalAlignment="Center"
                                                           Height="13"
                                                           VerticalAlignment="Top"
                                                           TextWrapping="Wrap"
                                                           Text="{Binding Path=mIdx}"/>
                                            </Grid>
                                        </DataTemplate>
                                    </GridViewColumn.CellTemplate>
                                </GridViewColumn>
 
                                <GridViewColumn Header="{Binding GRD_Header_Name_Text, FallbackValue= 'Alarm name'}" 
                                                    Width="230" >
                                    <GridViewColumn.CellTemplate>
                                        <DataTemplate >
                                            <Grid Background="{Binding Path=mColor}">
                                                <TextBlock  HorizontalAlignment="Right" 
                                                            Height="13"  
                                                            VerticalAlignment="Top" 
                                                            TextWrapping="Wrap"
                                                            Text="{Binding Path=mName}"/>
                                            </Grid>
                                        </DataTemplate>
                                    </GridViewColumn.CellTemplate>
                                </GridViewColumn>
 
                                <GridViewColumn Header="{Binding GRD_Header_Severity_Text, FallbackValue='Severity'}" 
                                                    Width="100">
                                    <GridViewColumn.CellTemplate>
                                        <DataTemplate >
                                            <Grid Background="{Binding Path=mColor}">
                                                <TextBlock  HorizontalAlignment="Right" 
                                                            Height="13"  
                                                            VerticalAlignment="Top" 
                                                            TextWrapping="Wrap"
                                                            Text="{Binding Path=mSeverity}"/>
                                            </Grid>
                                        </DataTemplate>
                                    </GridViewColumn.CellTemplate>
                                </GridViewColumn>
                                <GridViewColumn Header="{Binding GRD_Header_Date_Text, FallbackValue='Date'}" 
                                                    Width="120">
                                    <GridViewColumn.CellTemplate>
                                        <DataTemplate >
                                            <Grid Background="{Binding Path=mColor}">
                                                <TextBlock  HorizontalAlignment="Right" 
                                                            Height="13"  
                                                            VerticalAlignment="Top" 
                                                            TextWrapping="Wrap"
                                                            Text="{Binding Path=mDate}"/>
                                            </Grid>
                                        </DataTemplate>
                                    </GridViewColumn.CellTemplate>
                                </GridViewColumn>
                                <GridViewColumn Header="{Binding GRD_Header_Type_Text, FallbackValue='Type'}" 
                                                    Width="100">
                                    <GridViewColumn.CellTemplate>
                                        <DataTemplate >
                                            <Grid Background="{Binding Path=mColor}">
                                                <TextBlock  HorizontalAlignment="Right" 
                                                            Height="13"  
                                                            VerticalAlignment="Top" 
                                                            TextWrapping="Wrap"
                                                            Text="{Binding Path=mType}"/>
                                            </Grid>
                                        </DataTemplate>
                                    </GridViewColumn.CellTemplate>
                                </GridViewColumn>
                            </GridView>
                        </ListView.View>
                    </ListView>

GRD_DatasAll_Collection est déclaré ainsi dans ma VueModele:

Code:

1
2
3
4
5
6
7
8
9
 Public Property GRD_DatasAll_Collection As ObservableCollection(Of MyHistory)
        Get
            Return Modele.GRD_DatasAll_Collection
        End Get
        Set(value As ObservableCollection(Of MyHistory))
            Modele.GRD_DatasAll_Collection = value
            OnPropertyChanged("GRD_DatasAll_Collection")
        End Set
    End Property

Dans Modele j'ai bien sur:

Code:

Public Property GRD_DatasAll_Collection As ObservableCollection(Of MyHistory)

MyHistory est une classe de ce type :

Code:

1
2
3
4
5
6
7
8
9
Public Class MyHistory
    Public Property mIdx As Integer
    Public Property mSeverity As String
    Public Property mSeverityLevel As ALARM_LEVEL
    Public Property mName As String
    Public Property mType As String
    Public Property mDate As String
    Public Property mColor As SolidColorBrush = Brushes.White
End Class

Donc lorsque je rempli la collection, pas de souci.

Mais j'ai besoin de modifier par exemple la couleur de background des Cellules.

Je parcours la collection afin de changer mColor.

Ainsi:

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
    Public Sub HistoRef()
 
        Dim Color As SolidColorBrush
        Dim i As Integer
            For i = 0 To GRD_DatasAll_Collection.Count - 1
 
                If CHK_Colorref_Checked Then
                    Select Case GRD_DatasAll_Collection(i).mSeverityLevel
                        Case ALARM_LEVEL.vbUrgent
                            Color = AppOptions.UrgColor
                        Case ALARM_LEVEL.vbNonUrgent
                            Color = AppOptions.NUrgColor
                        Case ALARM_LEVEL.vbInfo
                            Color = AppOptions.InfoColor
                        Case ALARM_LEVEL.vbEvent
                            Color = AppOptions.EventColor
                        Case Else
                            Color = Brushes.White
                    End Select
                Else
                    Color = Brushes.White
                End If
                GRD_DatasAll_Collection(i).mColor = Color
 
            Next
           'J'ai tenté de rajouter cela, mais cela ne change rien.
            OnPropertyChanged("GRD_DatasAll_Collection")
 
    End Sub

CHK_Colorref_Checked est le retour d'une checkbox.checked.
Soir je met le background blanc ou de la couleur suivant ce que j'ai dans mon ".ini" --> AppOptions

Pourquoi cela ne se met pas à jour.

J'ai remarqué que si je bouge un paramètre dans le XAML à la volé, là il y a bien un rafraîchissement et donc une prise en compte de la nouvelle couleur qu'il y a dans la collection.

Merci de votre aide.

12/09/2019, 15h29
Sankasssss

Bonjour,

Tous les propriétés de votre class MyHistory doivent avoir dans le SET votre ligne OnPropertyChanged afin de pouvoir notifier le changement à la vue
12/09/2019, 17h19
Pol63

ou utiliser des dependency property qui prennent en charge la notification

observable collection permet juste de notifier d'un changement au niveau de la collection (ajout/suppression..) et donc de refléter ce changement sur l'itemscontrol (ajout/suppresion.. auto sur le listview)

bonjour

Citation:

Mais j'ai besoin de modifier par exemple la couleur de background des Cellules.

Je parcours la collection afin de changer mColor.

Encore une entorse au MVVM ou model dirigée par les données ...
Tu veux modifier la couleur de background (dans l'UI) de tes Textblocks en fonction de la valeur de la prop CLR SeverityLevel (de type enum Alarm_Level) qui est définie dans ton Model de données (voir ci-après ItemModel) ...
Pour ce faire il faut un converter :EnumToBrushConverter

l"exemple de code qui suit fait le boulot sans aucun code dans l'UI et même mieux ,un ComboBox "incruste" dans le Listview le modifie en vol !!!
1/ code du class Data:

Code:

1
2
3
4
5
6
7
Public Class Item
    Inherits ModelBase
    Public Property Id As String
    Public Property Name As String
    Public Property SeverityLevel As String
 
End Class

2/ code du class ModelBase:

Code:

1
2
3
4
5
6
7
8
9
10
Imports System.ComponentModel
 
Public Class ModelBase
    Implements INotifyPropertyChanged
 
    Public Event PropertyChanged(sender As Object, e As System.ComponentModel.PropertyChangedEventArgs) Implements System.ComponentModel.INotifyPropertyChanged.PropertyChanged
    Public Sub OnPropertyChanged(nomProp As String)
        RaiseEvent PropertyChanged(Me, New PropertyChangedEventArgs(nomProp))
    End Sub
End Class

3/ code du class ItemModel:

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
Public Class ItemModel
    Inherits ModelBase
    Private it As New Item()
    Public Sub New()
 
    End Sub
    Public Property Id As Integer
        Get
            Return it.Id
        End Get
        Set(value As Integer)
            it.Id = value
            OnPropertyChanged("ID")
        End Set
    End Property
    Public Property Name As String
        Get
            Return it.Name
        End Get
        Set(value As String)
            it.Name = value
            OnPropertyChanged("Name")
        End Set
    End Property
    Public Property SeverityLevel As Alarm_Level
        Get
            Return it.SeverityLevel
        End Get
        Set(value As Alarm_Level)
            it.SeverityLevel = value
            OnPropertyChanged("SeverityLevel")
        End Set
    End Property
 
 
End Class

4/ code du class AllModelItems:

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
Imports System.Collections.ObjectModel
Public Class AllModelItems
    Inherits ModelBase
    Public Sub New()
        m_allItemsModel = New ObservableCollection(Of ItemModel)
        LoadData()
    End Sub
    Private m_allItemsModel As ObservableCollection(Of ItemModel)
    Public Property AllItemsModel As ObservableCollection(Of ItemModel)
        Get
            Return m_allItemsModel
        End Get
        Set(value As ObservableCollection(Of ItemModel))
            m_allItemsModel = value
            OnPropertyChanged("AllItems")
        End Set
    End Property
    Private m_SelecteItemModel As ItemModel
    Public Property SelecteItemModel As ItemModel
        Get
            Return m_SelecteItemModel
        End Get
        Set(value As ItemModel)
            m_SelecteItemModel = value
            OnPropertyChanged("SelecteItemModel")
        End Set
    End Property
 
    Private Sub LoadData()
        m_allItemsModel.Add(New ItemModel() With {.Id = 101, .Name = "item1", .SeverityLevel = Alarm_Level.vbInfo})
        m_allItemsModel.Add(New ItemModel() With {.Id = 102, .Name = "item2", .SeverityLevel = Alarm_Level.vbNonUrgent})
        m_allItemsModel.Add(New ItemModel() With {.Id = 103, .Name = "item3", .SeverityLevel = Alarm_Level.vbNormal})
        m_allItemsModel.Add(New ItemModel() With {.Id = 104, .Name = "item4", .SeverityLevel = Alarm_Level.vbUrgent})
        m_allItemsModel.Add(New ItemModel() With {.Id = 105, .Name = "item5", .SeverityLevel = Alarm_Level.vbEvent})
        m_allItemsModel.Add(New ItemModel() With {.Id = 106, .Name = "item6", .SeverityLevel = Alarm_Level.vbInfo})
        m_allItemsModel.Add(New ItemModel() With {.Id = 107, .Name = "item7", .SeverityLevel = Alarm_Level.vbNormal})
        m_allItemsModel.Add(New ItemModel() With {.Id = 108, .Name = "item8", .SeverityLevel = Alarm_Level.vbNormal})
        m_allItemsModel.Add(New ItemModel() With {.Id = 109, .Name = "item9", .SeverityLevel = Alarm_Level.vbNormal})
    End Sub
 
 
End Class

les class "auxiliauires" de service:

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
Public Enum Alarm_Level
    vbNormal
    vbInfo
    vbEvent
    vbNonUrgent
    vbUrgent
 
 
End Enum
 
Public Class AppOptions
    Public Shared Property UrgColor As String = "Red"
    Public Shared Property NUrgColor As String = "LimeGreen"
    Public Shared Property InfoColor As String = "Yellow"
    Public Shared Property EventColor As String = "Orange"
    Public Shared Property NormalColor As String = "Transparent"
    Public Sub New()
    End Sub
End Class
 
Public Class EnumToBrushConverter
    Implements IValueConverter
 
 
    Public Function Convert(value As Object, targetType As System.Type, parameter As Object, culture As System.Globalization.CultureInfo) As Object Implements System.Windows.Data.IValueConverter.Convert
        Dim enumValue As Alarm_Level = CType(value, Alarm_Level)
        Dim myColor As Color
        Select Case enumValue
            Case Alarm_Level.vbNormal
                myColor = ColorConverter.ConvertFromString(AppOptions.NormalColor)
            Case Alarm_Level.vbInfo
                myColor = ColorConverter.ConvertFromString(AppOptions.InfoColor)
            Case Alarm_Level.vbEvent
                myColor = ColorConverter.ConvertFromString(AppOptions.EventColor)
            Case Alarm_Level.vbNonUrgent
                myColor = ColorConverter.ConvertFromString(AppOptions.NUrgColor)
            Case Alarm_Level.vbUrgent
                myColor = ColorConverter.ConvertFromString(AppOptions.UrgColor)
        End Select
        Return New SolidColorBrush(myColor)
 
    End Function
 
    Public Function ConvertBack(value As Object, targetType As System.Type, parameter As Object, culture As System.Globalization.CultureInfo) As Object Implements System.Windows.Data.IValueConverter.ConvertBack
        Throw New Exception("not implemented")
    End Function
End Class
 
'ce class est donné à titre d'illustration comment modifilier
'le drapeau UI Alarm_Level à partir du ListView
Public Class ListSeverityLevels
    Inherits List(Of Alarm_Level)
 
    Public Sub New()
        Dim ar() As Integer = [Enum].GetValues(GetType(Alarm_Level))
        Me.AddRange(ar)
    End Sub
End Class

et le code xaml de la vue (aucun code behind):

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
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
<Window x:Class="WinTest"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="clr-namespace:WpfDataTrigger" 
    Title="WinTest" Height="350" Width="525">
    <Window.Resources>
        <local:AllModelItems x:Key="data"/>
        <local:EnumToBrushConverter x:Key="cnv"/>
        <local:ListSeverityLevels x:Key="severities"/>
    </Window.Resources>
 
    <!--IsSynchronizedWithCurrentItem="True" est INDISPENSABLE pour le Combo-->
    <Grid   DataContext="{Binding   Source={StaticResource data}}">
        <ListView 

            Margin="10" 
            x:Name="lv" 
            Height="340"
            IsSynchronizedWithCurrentItem="True"
            ItemsSource="{Binding Path=AllItemsModel}"
            SelectedItem="{Binding SelectedModel}">
            <ListView.ItemContainerStyle>
                <Style TargetType="ListViewItem">
                    <Setter Property="HorizontalContentAlignment" Value="Stretch" />
                </Style>
            </ListView.ItemContainerStyle>
            <ListView.View>
                <GridView>
                    <GridViewColumn
                        Header="Id">
                        <GridViewColumn.CellTemplate>
                            <DataTemplate>
                                <Grid Width="100">
 
                                    <TextBlock 
                                        Background="{Binding Path=SeverityLevel, Converter={StaticResource cnv}}"  
                                        HorizontalAlignment="Center"
                                        VerticalAlignment="Top"
                                        TextWrapping="Wrap"
                                        Text="{Binding Path=Id}"/>
                                </Grid>
                            </DataTemplate>
                        </GridViewColumn.CellTemplate>
                    </GridViewColumn>
 
                    <GridViewColumn 
                        Header="Name" >
                        <GridViewColumn.CellTemplate>
                            <DataTemplate >
                                <Grid Width="100">
                                    <TextBlock  
                                        Background="{Binding Path=SeverityLevel, Converter={StaticResource cnv}}"  
                                        HorizontalAlignment="Right" 
                                        VerticalAlignment="Top" 
                                        TextWrapping="Wrap"
                                        Text="{Binding Path=Name}"/>
                                </Grid>
                            </DataTemplate>
                        </GridViewColumn.CellTemplate>
                    </GridViewColumn>
                    <GridViewColumn 
                        Header="SeverityLevel" >
                        <GridViewColumn.CellTemplate>
                            <DataTemplate >
                                <Grid Width="100">
                                    <TextBlock  
                                        Background="{Binding Path=SeverityLevel, Converter={StaticResource cnv}}"  
                                        HorizontalAlignment="Right" 
                                        VerticalAlignment="Top" 
                                        TextWrapping="Wrap"
                                        Text="{Binding Path=SeverityLevel}"/>
                                </Grid>
                            </DataTemplate>
                        </GridViewColumn.CellTemplate>
                    </GridViewColumn>
                    <GridViewColumn 
                        Header="Choix SeverityLevel" >
                        <GridViewColumn.CellTemplate>
                            <DataTemplate >
                                <Grid Width="100">
                                    <ComboBox 
                                     x:Name="cbo"
                                      HorizontalAlignment="Left" 
                                      VerticalAlignment="Top" 
                                      SelectedIndex="0"
                                      SelectedItem="{Binding ElementName=lv,Path=SelectedItem.SeverityLevel}"
                                      ItemsSource="{Binding Source={StaticResource severities}}">
                                    </ComboBox>
 
                                </Grid>
                            </DataTemplate>
                        </GridViewColumn.CellTemplate>
                    </GridViewColumn>
                </GridView>
            </ListView.View>
        </ListView>
    </Grid>
</Window>

bon code....

06/03/2020, 11h22
megamario

Bonjour,

Je tien malgré tout ce temps à vous remercier, j'ai semble t'il pas eue de notification des réponses ou j'ai zapper complètement, ce qui peut m'arriver aussi ;), mais comme ce n'est pas dans mes habitudes, ou en tout cas pas volontaire, je préfère vous le signaler.
Je râle suffisamment quand je vois une demande qui n'est pas suivis par le demandeur, c'est rageant pour ceux qui prennent le temps d'aider. Donc toutes mes excuses.

Je savais que j'avais demandé une aide à ce sujet, mais depuis tout ce temps j'avais modifié un peu ma façon de faire.
Toutefois j'ai eu une modification qui entraîne aussi de modifier le texte de l'une des colonnes, (gestion des langues).

J'ai donc de nouveau été confronté à la non mise à jour des cellules lors de modification, mais en voyant vos réponses j'ai pris en compte vos remarques et cela fonctionne parfaitement, merci beaucoup.