MVVM visualizzare Row di DataGrid colorata in base ad un valore contenuto in un Campo

Question

Buongiorno.

Situazione: WPF + MVVM + EF

chi mi ha seguito conosce la situazione che espongo velocemente:

sto visualizzando una lista in una DataGrid. Questa è la Property nel ViewModel che bindo alla DataGrid

public ObservableCollection<EFSMS> SMSRicevuti
        {
            get;
            set;
        }

uno dei campi (Messaggio) può contenere alcune parole come "Allarme", "Mancaza Rete", "All", ecc...

Vorrei che in presenza di queste parole, mi compaia lo sfondo della Row di un colore particolare, per esempio Rosso...

Attenzione, mi andrebbe bene anche visualizzare un'immagine in una Colonna dedicata "ImgStato" che se non esistono queste parole, mi dia l'immagine "Y" altrimenti l'immagine "X".

a me serve avere la segnalazione in qualche modo della presenza di particolari parole.

Se la soluzione comporta di uscire dall'ambito del MVVM, non fa niente: basta che risolvo il problema... poi pian piano si sistema in ambito MVVM.

Qualche idea?

Grazie

---

Pranzo Stefano

Answer 1

Ciao,

nessuna "uscita" dall'ambito MVVM, la soluzione è fare binding della proprietà che ti fa da discriminante (campo "Messaggio") e poi utilizzare un Converter che ritorni, in base al valore della stringa il colore da applicare alla Row.

Tutto qui :)

ciao!

.Omar

---

Omar Damiani

Answer 2

Grazie Omar.

Il binding già lo faccio e funziona.

Il converter va fatto lato XAML?

lato Xaml ho fatto così il binding:

<DataGridTextColumn Binding="{Binding Path=Messaggio}"  Width="Auto"  Header="Messaggio" />

dove va il converter? qualche esempio? qualche link di studio?

Grazie

---

Pranzo Stefano

Answer 3

Questo è un esempio piuttosto esaustivo:

http://blogs.imeta.co.uk/FMoreno/archive/2008/11/07/498.aspx

Il converter è una classe che crei a parte e poi utilizzi nello XAML come risorsa.

Nell'esempio c'è tutto spiegato.

Fammi sapere!

ciao!

.Omar

---

Omar Damiani

Answer 4

Non sto capendo bene.

la Columns della DataGrid è così fatta:

<DataGridTextColumn Binding="{Binding Path=Messaggio}"  Width="Auto"  Header="Messaggio" TextBlock.FontSize="10"/>

quindi vedo benissimo il Messaggio.

la classe "Converter" come la faccio se ho una serie di "Parole" da cercare?
Le parole non sono fisse. Sarà l'utente ad indicare quali "Parole" usare come "Parola di ricerca" nel testo del messaggio. Le "Parole" sono memorizzate in una Tabella che carico in una Collection per essere usata dal "filtro".

un esempio per la classe Converter o Filtro?

---

Pranzo Stefano

Answer 5

Ciao,

ti ho buttato giù un piccolo esempio :

<Window x:Class="WpfApplication1.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:my="clr-namespace:WpfApplication1" 
        Title="MainWindow" Height="350" Width="525"
                     DataContext="{Binding RelativeSource={RelativeSource Self}}">
    <Control.Resources>
        <my:TextColorConvert x:Key="ConvertitoreColoreBordo"/>
        <my:TextImageConvert x:Key="ConvertitoreImmagine"/>
    </Control.Resources>
    <Grid>
        <DataGrid AutoGenerateColumns="False" Name="dataGrid1" ItemsSource="{Binding SMSRicevuti}" Margin="0,0,0,75">
            <DataGrid.Columns>
                <DataGridTextColumn Header="Numero" Binding="{Binding Numero}" Width="50" />
                <DataGridTemplateColumn Header="Messaggio" Width="100*">
                    <DataGridTemplateColumn.CellTemplate>
                        <DataTemplate>
                            <TextBox x:Name="TextBox" Padding="5,0,5,0" Text="{Binding Messaggio}">
                                <TextBox.BorderBrush>
                                    <MultiBinding Converter="{StaticResource ConvertitoreColoreBordo}">
                                        <MultiBinding.Bindings>
                                            <Binding Path="Parole" RelativeSource="{RelativeSource AncestorType={x:Type Window}}" NotifyOnTargetUpdated="True" />
                                            <Binding Path="Messaggio"/>
                                        </MultiBinding.Bindings>
                                    </MultiBinding>
                                </TextBox.BorderBrush>
                            </TextBox>
                        </DataTemplate>
                    </DataGridTemplateColumn.CellTemplate>
                </DataGridTemplateColumn>
                <DataGridTemplateColumn Header="" Width="100*">
                    <DataGridTemplateColumn.CellTemplate>
                        <DataTemplate>
                            <Image Height="30" Width="50">
                                <Image.Source>
                                    <MultiBinding Converter="{StaticResource ConvertitoreImmagine}">
                                            <MultiBinding.Bindings>
                                                <Binding Path="Parole" RelativeSource="{RelativeSource AncestorType={x:Type Window}}" NotifyOnTargetUpdated="True" />
                                                <Binding Path="Messaggio"/>
                                            </MultiBinding.Bindings>
                                        </MultiBinding>
                                </Image.Source>
                            </Image>
                        </DataTemplate>
                    </DataGridTemplateColumn.CellTemplate>
                </DataGridTemplateColumn>                
                </DataGrid.Columns>
        </DataGrid>
        <ListBox Height="69" HorizontalAlignment="Left" Margin="0,242,0,0" Name="listBox1" VerticalAlignment="Top" Width="503" ItemsSource="{Binding Parole}" />
    </Grid>
</Window>

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Data;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Imaging;
using System.Windows.Navigation;
using System.Windows.Shapes;
using System.ComponentModel;
using System.Globalization;

namespace WpfApplication1
{
    /// <summary>
    /// Logica di interazione per MainWindow.xaml
    /// </summary>
    public partial class MainWindow : Window, INotifyPropertyChanged
    {
        public MainWindow()
        {
            //creo una lista di messaggi per simulare il tuo source
            SMSRicevuti = new List<SMSRicevuti>();
            SMSRicevuti.Add(new SMSRicevuti() { Numero = "123456", Messaggio = "PeRicolo" });
            SMSRicevuti.Add(new SMSRicevuti() { Numero = "123456", Messaggio = "ALLARME" });//normale
            SMSRicevuti.Add(new SMSRicevuti() { Numero = "123456", Messaggio = "pERIcolo" });
            SMSRicevuti.Add(new SMSRicevuti() { Numero = "123456", Messaggio = "Guai" });
            SMSRicevuti.Add(new SMSRicevuti() { Numero = "123456", Messaggio = "ciao" });//normale
            SMSRicevuti.Add(new SMSRicevuti() { Numero = "123456", Messaggio = "attento c'è pericolo" });
            SMSRicevuti.Add(new SMSRicevuti() { Numero = "123456", Messaggio = "hai combinato un guaio" });//normale
            SMSRicevuti.Add(new SMSRicevuti() { Numero = "123456", Messaggio = "Guai a te!" });
            //creo una lista di stringhe per simulare l'input dell'utente
            Parole = new List<string>();
            Parole.Add("Guai");
            Parole.Add("Attenzione");
            Parole.Add("PeriCOLO");
            InitializeComponent();            
        }

        //proprietà da bindare sul datagrid
        public List<SMSRicevuti> SMSRicevuti { get; set; }

        //proprietà da bindare per inserire l'input dell'utente (per praticità ho bindato un listBox)
        public List<string> Parole { get; set; }

        public event PropertyChangedEventHandler PropertyChanged;
        protected void OnPropertyChanged(string propertyName)
        {
            PropertyChangedEventHandler propertyChanged = this.PropertyChanged;
            if (propertyChanged != null)
                propertyChanged(this, new PropertyChangedEventArgs(propertyName));
        }
    }

    //classe che simula i messaggi
    public class SMSRicevuti
    {
        public string Messaggio { get; set; }
        public string Numero { get; set; }
    }

    //multiconverter
    
    //converto il testo in colore per il bordo
    public class TextColorConvert : IMultiValueConverter
    {
        public object Convert(object[] value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
        {
            //secondo binding dello XMAL (proprietà "SMSRicevuti[x].Messaggio")
            string testo = value[1].ToString();
            //primo binding dello XMAL (proprietà "Parole")
            List<string> parole = (List<string>)value[0];
            //controllo se nel testo sono presenti le parole (splittate da uno spazio e rese "maiscole") che corrispondono alle parole inserite dall'utente
            if (testo.Split(' ').Any(p => parole.Select(c=>c.ToUpper()).Contains(p.ToUpper())))
                return Brushes.Red;
            else
                return null;
        }

        public object[] ConvertBack(object value, Type[] targetTypes, object parameter, CultureInfo culture)
        {
            return new object[] { value };
        }
    }

    //converto il testo nell'immagine più adatta
    public class TextImageConvert : IMultiValueConverter
    {
        public object Convert(object[] value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
        {
            if (new TextColorConvert().Convert(value, targetType, parameter, culture) != null)
                return new BitmapImage(new Uri(Environment.CurrentDirectory + @"\pericolo.png"));//si corrispondono
            else
                return new BitmapImage(new Uri(Environment.CurrentDirectory + @"\nopericolo.png"));//non corrispondono
        }

        public object[] ConvertBack(object value, Type[] targetTypes, object parameter, CultureInfo culture)
        {
            return new object[] { value };
        }
    }

}

nell'esempio c'è un datagrid bindato nell'itemsource alla proprietà SMSRicevuti, nella prima colonna c'è bindato il numero, mentre nella seconda un textBox, nel quale ho bindato (multibinding con converter) il colore del bordo a null in caso il testo non comprenda le parole inserite dall'utente (proprietà "Parole" bindata come prova di concetto ad una listbox), in caso contrario un bordo rosso. nella terza colonna invece ho bindato (sempre nello stesso modo) un'immagine che varia ovviamente in base al risultato del confronto.

spero che ti possa essere utile per capire meglio, comunque se hai bisogno chiedi pure.

ciao.

EDIT : non dovrebbe essere difficile portarlo in mvvm :)

Answer 6

Mi trovo fuori. a primo impatto mi sembra chiaro. sicuramente non è un problema portarlo in MVVM..

Domattina lo porto sul progetto..

Per ora grazie.. Vi tengo informati.

---

Pranzo Stefano

Answer 7

Ciao.

Se vuoi puoi aspettare un consiglio migliore. Io in genere faccio così, ma non sono un guru... magari esiste una soluzione migliore e più pulita/performante/semplice... nel caso ne approfitterei anche io per imparare qualcosa di nuovo!

Ciao a presto.

Answer 8

Allora.. eccomi qua...vediamo di mettere tutto in pratica..

Ho creato classi separate:

TextColorCoverter.cs
TextImageConverte.cs
nella classe ViewModel che viene bindata ho fatto una property List<string> Parole(){....}. Nel costruttore della classe, aggiunge alcune "Parole" per provare.

nello XAML della Window metto i dati nelle risorse, il namespace e nella DataGrid i due DataGridTemplateColumn, sia per il colore che per l'immagine.

eseguendo...mi arriva subito un errore nella classe TextImvageConvert.cs al rigo "  List<string> parole = (List<string>)value[0]; ".

premetto che il tutto sta in un UserControl .

nello XAML e precisamente nella DataGrid non ho capito questa parte:

<MultiBinding.Bindings>
          <Binding Path="Parole" RelativeSource="{RelativeSource AncestorType={x:Type Window}}" NotifyOnTargetUpdated="True" />
        <Binding Path="Messaggio"/>
</MultiBinding.Bindings>

in questo campo (Image) viene fatto un multibinding sulle parole e sul messaggio.... cosa centra X:Type Window?

Grazie per le spiegazioni e gli aiuti.

---

Pranzo Stefano

Answer 9

noto con piacere che hai localizzato subito l'errore! :)

utilizzando un binding all'interno di un datatemplate di un controllo già bindato ad un'altro source, è necessario usare relativeSource per indicare che la proprietà da bindare nel datatemplate non appartiene a SMSRicevuti (come in questo caso). AncestorType={x:Type Window} ti permette di ricercare il contesto risalendo l'albero fino al tipo specificato, quindi nel tuo caso usando x:Type Window stai andando a cercare la proprietà "Parole" dentro la Window, quindi, se non si trova li, il binding fallisce e nel convertitore non avrai la lista delle parole.

Per risolvere indica al posto di "Window" il tipo che nel DataContext contiene il ViewModel con la proprietà "Parole" (credo UserControl e FORSE dovrai anche utilizzare DataContext.Parole al posto di Parole nello xaml).

Non mi è chiaro se mi chiedevi chiarimenti anche sul multiBinding :)

Ciao.

Answer 10

Chiaro Uranio.

Quindi se viene bindato Parole, basta togliere la parte relativa a RelativeSource..dato che il dataContext..è collegato alla ViewMode.

comunque ho sempre lo stesso  errore  sulla riga " List<string> parole = (List<string>)value[0]; " che non ho comunicato nel precedente messaggio:

Impossibile eseguire il cast di oggetti di tipo 'MS.Internal.NamedObject' sul tipo 'System.Collections.Generic.List'[System.String]

---

Pranzo Stefano

Answer 11

Chiaro Uranio.

Quindi se viene bindato Parole, basta togliere la parte relativa a RelativeSource..dato che il dataContext..è collegato alla ViewMode.

comunque ho sempre lo stesso  errore  sulla riga " List<string> parole = (List<string>)value[0]; " che non ho comunicato nel precedente messaggio:

Impossibile eseguire il cast di oggetti di tipo 'MS.Internal.NamedObject' sul tipo 'System.Collections.Generic.List'[System.String]

---

Pranzo Stefano

scusami non ho capito la prima frase :(

comunque ti faccio un esempio con userControl :

UserControl1.xaml

<UserControl x:Class="WpfApplication1.UserControl1"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
             mc:Ignorable="d" 
             d:DesignHeight="300" d:DesignWidth="300"
             xmlns:my="clr-namespace:WpfApplication1" >
    <Control.Resources>
        <my:TextColorConvert x:Key="ConvertitoreColoreBordo"/>
        <my:TextImageConvert x:Key="ConvertitoreImmagine"/>
    </Control.Resources>
    <Grid>
        <DataGrid AutoGenerateColumns="False" Name="dataGrid1" ItemsSource="{Binding}" Margin="0,0,0,75">
            <DataGrid.Columns>
                <DataGridTextColumn Header="Numero" Binding="{Binding Numero}" Width="50" />
                <DataGridTemplateColumn Header="Messaggio" Width="100*">
                    <DataGridTemplateColumn.CellTemplate>
                        <DataTemplate>
                            <TextBox x:Name="TextBox" Padding="5,0,5,0" Text="{Binding Messaggio}">
                                <TextBox.BorderBrush>
                                    <MultiBinding Converter="{StaticResource ConvertitoreColoreBordo}">
                                        <MultiBinding.Bindings>
                                            <Binding Path="DataContext.Parole" RelativeSource="{RelativeSource AncestorType={x:Type Window}}" NotifyOnTargetUpdated="True" />
                                            <Binding Path="Messaggio"/>
                                        </MultiBinding.Bindings>
                                    </MultiBinding>
                                </TextBox.BorderBrush>
                            </TextBox>
                        </DataTemplate>
                    </DataGridTemplateColumn.CellTemplate>
                </DataGridTemplateColumn>
                <DataGridTemplateColumn Header="" Width="100*">
                    <DataGridTemplateColumn.CellTemplate>
                        <DataTemplate>
                            <Image Height="30" Width="50">
                                <Image.Source>
                                    <MultiBinding Converter="{StaticResource ConvertitoreImmagine}">
                                        <MultiBinding.Bindings>
                                            <Binding Path="DataContext.Parole" RelativeSource="{RelativeSource AncestorType={x:Type Window}}" NotifyOnTargetUpdated="True" />
                                            <Binding Path="Messaggio"/>
                                        </MultiBinding.Bindings>
                                    </MultiBinding>
                                </Image.Source>
                            </Image>
                        </DataTemplate>
                    </DataGridTemplateColumn.CellTemplate>
                </DataGridTemplateColumn>
            </DataGrid.Columns>
        </DataGrid>
    </Grid>
</UserControl>

MainWindow.xaml

<Window x:Class="WpfApplication1.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:my="clr-namespace:WpfApplication1" 
        Title="MainWindow" Height="350" Width="525">
    
    <Grid>
        <my:UserControl1 DataContext="{Binding SMSRicevuti}"></my:UserControl1>
        <ListBox Height="69" HorizontalAlignment="Left" Margin="0,242,0,0" Name="listBox1" VerticalAlignment="Top" Width="503" ItemsSource="{Binding Parole}" />
    </Grid>
</Window>

MainWindow.cs

public partial class MainWindow : Window
    {
        public MainWindow()
        {
            InitializeComponent();
            this.DataContext = new MyViewModel();
        }
    }

MyViewModel.cs

public class MyViewModel : INotifyPropertyChanged
    {
        public MyViewModel()
        {
            //creo una lista di messaggi per simulare il tuo source
            SMSRicevuti = new List<SMSRicevuti>();
            SMSRicevuti.Add(new SMSRicevuti() { Numero = "123456", Messaggio = "PeRicolo" });
            SMSRicevuti.Add(new SMSRicevuti() { Numero = "123456", Messaggio = "ALLARME" });
            SMSRicevuti.Add(new SMSRicevuti() { Numero = "123456", Messaggio = "pERIcolo" });
            SMSRicevuti.Add(new SMSRicevuti() { Numero = "123456", Messaggio = "Guai" });
            SMSRicevuti.Add(new SMSRicevuti() { Numero = "123456", Messaggio = "ciao" });//normale
            SMSRicevuti.Add(new SMSRicevuti() { Numero = "123456", Messaggio = "attento c'è pericolo" });
            SMSRicevuti.Add(new SMSRicevuti() { Numero = "123456", Messaggio = "hai combinato un guaio" });//normale
            SMSRicevuti.Add(new SMSRicevuti() { Numero = "123456", Messaggio = "Guai a te!" });
            //creo una lista di stringhe per simulare l'input dell'utente
            Parole = new List<string>();
            Parole.Add("Guai");
            Parole.Add("Attenzione");
            Parole.Add("PeriCOLO");
        }

        //proprietà da bindare sul datagrid
        public List<SMSRicevuti> SMSRicevuti { get; set; }

        //proprietà da bindare per inserire l'input dell'utente (per praticità ho bindato un listBox)
        public List<string> Parole { get; set; }

        public event PropertyChangedEventHandler PropertyChanged;
        protected void OnPropertyChanged(string propertyName)
        {
            PropertyChangedEventHandler propertyChanged = this.PropertyChanged;
            if (propertyChanged != null)
                propertyChanged(this, new PropertyChangedEventArgs(propertyName));
        }
    }

ora, come potrai notare ho bindato il datacontext della window a un MyViewModel (in MinWindow.cs), mentre nel datacontext dell'usercontrol ho impostato la proprietà SMSRicevuti del viewModel (in MainWindow.xaml). nel datagrid dell'usercontrol ho impostato solo il binding in modo da bindare tutto il datacontext (già SMSRicevuti) ed ho usato il relativeSource con il tipo Window per poter risalire verso la Window che contiene nel datacontext il viewmodel (che a sua volta contiene la proprietà Parole).

non so se sono stato chiaro, a volte mi spiego da cani!

EDIT :

questo invece sarebbe stato lo xaml dell'userControl se non avessi passato il datacontext attraverso lo xaml di MainWindow all'usercontrol (quindo creato il datacontext con DataContext = new MyViewModel() nel costruttore dell'usercontrol) :

<UserControl x:Class="WpfApplication1.UserControl1"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
             mc:Ignorable="d" 
             d:DesignHeight="300" d:DesignWidth="300"
             xmlns:my="clr-namespace:WpfApplication1" >
    <Control.Resources>
        <my:TextColorConvert x:Key="ConvertitoreColoreBordo"/>
        <my:TextImageConvert x:Key="ConvertitoreImmagine"/>
    </Control.Resources>
    <Grid>
        <DataGrid AutoGenerateColumns="False" Name="dataGrid1" ItemsSource="{Binding SMSRicevuti}" Margin="0,0,0,75">
            <DataGrid.Columns>
                <DataGridTextColumn Header="Numero" Binding="{Binding Numero}" Width="50" />
                <DataGridTemplateColumn Header="Messaggio" Width="100*">
                    <DataGridTemplateColumn.CellTemplate>
                        <DataTemplate>
                            <TextBox x:Name="TextBox" Padding="5,0,5,0" Text="{Binding Messaggio}">
                                <TextBox.BorderBrush>
                                    <MultiBinding Converter="{StaticResource ConvertitoreColoreBordo}">
                                        <MultiBinding.Bindings>
                                            <Binding Path="DataContext.Parole" RelativeSource="{RelativeSource AncestorType={x:Type UserControl}}" NotifyOnTargetUpdated="True" />
                                            <Binding Path="Messaggio"/>
                                        </MultiBinding.Bindings>
                                    </MultiBinding>
                                </TextBox.BorderBrush>
                            </TextBox>
                        </DataTemplate>
                    </DataGridTemplateColumn.CellTemplate>
                </DataGridTemplateColumn>
                <DataGridTemplateColumn Header="" Width="100*">
                    <DataGridTemplateColumn.CellTemplate>
                        <DataTemplate>
                            <Image Height="30" Width="50">
                                <Image.Source>
                                    <MultiBinding Converter="{StaticResource ConvertitoreImmagine}">
                                        <MultiBinding.Bindings>
                                            <Binding Path="DataContext.Parole" RelativeSource="{RelativeSource AncestorType={x:Type UserControl}}" NotifyOnTargetUpdated="True" />
                                            <Binding Path="Messaggio"/>
                                        </MultiBinding.Bindings>
                                    </MultiBinding>
                                </Image.Source>
                            </Image>
                        </DataTemplate>
                    </DataGridTemplateColumn.CellTemplate>
                </DataGridTemplateColumn>
            </DataGrid.Columns>
        </DataGrid>
    </Grid>
</UserControl>

come potrai notare cambia il "x:Type Window" e diventa "x:Type UserControl", mentre nel binding del datagrid ricompare SMSRicevuti in quanto il DataContext è tutto il ViewModel (quindi specifico la proprietà)

Answer 12

Scusa il ritardo.

Seguendo l'esempio col DataContext, funziona a meraviglia.

Grazie mille.

---

Pranzo Stefano