C# / VB.NET - [Visual Studio]Interfaccia grafica elaborata

Forum - C# / VB.NET - [Visual Studio]Interfaccia grafica elaborata - Pagina 2

Pagine: [ 1 2 3 4 5 ]

tasx (Dev Team)
Expert

Messaggi: 439
Iscritto: 15/12/2008

Postato alle 9:37
Giovedì, 25/04/2013

Ciao!

Solitamente quando si lavoro con WPF si utilizza il pattern MVVM (Model View ViewModel, http://en.wikipedia.org/wiki/Model_View_ViewModel).
In poche parole separi la View dalla logica(ViewModel) e dai dati(Model)...
nel tuo caso dovresti:
- crearti un viewmodel da applicare alla tua view,
- creare un model che rappresenti una row nella list,
- nel viewmodel istanzi una collection di item del tipo del model(che diventeranno gli item della lista),

es.

model

Codice sorgente - presumibilmente Delphi

public class User 
{
    public string Name { get; set; }
    public string Surname { get; set; }
    public int Age { get; set; }
}

viewmodel
la classe ViewModelBase(o BaseViewModel

devo controllare ma non ne ho tempo) fa parte di una libreria che semplifica un po' il pattern
mvvm(la puoi installare da nuget -> http://nuget.org/packages/MvvmLight/)

Codice sorgente - presumibilmente C++

public class ViewModel : ViewModelBase
{
    public List<User> Users { get; set; }
 
    public ViewModel()
    {
        Users = new List<User>();
    }
 
    public void Save()
    {
         // qui poi puoi salvare come vuoi
         SaveObject(Users);
    }
}

bene ora che hai anche il viewmodel manca solo la view:

Codice sorgente - presumibilmente Plain Text

[...]
<ListView ItemsSource="{Binding Users}">
      <ListView.View>
        <GridView>
          <GridViewColumn Width="140" Header="Name" 
              DisplayMemberBinding="{Binding Name}"  />
          <GridViewColumn Width="140" Header="Surname"  
              DisplayMemberBinding="{Binding Surname}" />
          <GridViewColumn Width="140" Header="Age" 
              DisplayMemberBinding="{Binding Age}" />
        </GridView>
      </ListView.View>
    </ListView>
[...]

ora non ti resta che applicare il viewmodel alla view:

Codice sorgente - presumibilmente C# / VB.NET

// nel file di code behind della view nel costruttore
 
public MainWindow() : Window
{
    public MainWindow()
    {
        InitializeComponent();
 
        // ci sarebbero altri modi più "furbi" e meno da "spaghetti code" per passargli il viewmodel, tuttavia visto che si è all'inizio va benissimo
        // anche così
        this.DataContext = new ViewModel();
    }
}

ciao!!

Roby94 (Member)
Guru

Messaggi: 1170
Iscritto: 28/12/2009

Postato alle 10:20
Giovedì, 25/04/2013

Ok grazie della spiegazione. Prima di leggere il tuo post ero arrivata a questo punto:

Codice sorgente - presumibilmente Plain Text

<Window x:Class="Compilation_CD_WPF.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow" Height="350" Width="500" MinWidth="500" MinHeight="350">
    <Window.Resources>
        <DataTemplate x:Key="checkboxCell">
            <CheckBox Foreground="{x:Null}" OpacityMask="{x:Null}" Margin="0" Background="{x:Null}"/>
        </DataTemplate>
    </Window.Resources>
        <ListView x:Name="musicList" Grid.RowSpan="2" Grid.ColumnSpan="2">
            <ListView.View>
                <GridView>
                    <GridViewColumn Header="Check" Width="35"CellTemplate="{StaticResource checkboxCell}"/>
                    <GridViewColumn Header="Lock" Width="35" CellTemplate="{StaticResource checkboxCell}"/>
                    <GridViewColumn Header="File" Width="100" DisplayMemberBinding="{Binding Path=file}"/>
                    <GridViewColumn Header="Titolo" Width="100" DisplayMemberBinding="{Binding Path=title}"/>
                    <GridViewColumn Header="ID" Width="35" DisplayMemberBinding="{Binding Path=ID}"/>
                </GridView>
            </ListView.View>
        </ListView>
</Window>

con model(che usavo ma non conoscevo la definizione)

Codice sorgente - presumibilmente Delphi

class musicItem
        {
            public string file { get; set; }
            public string title { get; set; }
            public int ID { get; set; }
        }

cosi creo facilmente nuove righe e dovrei anche essere in grado di leggerle, ma non sapevo come accedere ai checkbox
allora ho eliminato i template dei checkbox e ho ridefinito il model

Codice sorgente - presumibilmente Delphi

class musicItem
        {
            public CheckBox check { get; set; }
            public CheckBox locked { get; set; }
            public string file { get; set; }
            public string title { get; set; }
            public int ID { get; set; }
 
            public musicItem()
            {
                this.check = new CheckBox();
                this.check.IsChecked = true;
            }
        }

Cosi a logica funziona ma invece di mostrarmi il controllo mi esegue un to string dello stesso... mi trovo scritto al posto del checkbox "System.Windows.Controls.CheckBox Cntenuto: IsChecked:True"
Mi chiedo il perche XD
mi sapete aiutare?

tasx (Dev Team)
Expert

Messaggi: 439
Iscritto: 15/12/2008

Postato alle 17:05
Giovedì, 25/04/2013

Ciao!
Allora prima di tutto un piccolo accorgimento...
Solitamente gli oggetti che fanno parte del Model dovrebbero essere degli oggetti POCO (http://en.wikipedia.org/wiki/Plain_Old_CLR_Object), ovvero
oggetti "puri" che non dipendono da niente e che che rappresentano il dato in se.
Quindi utilizzare il tipo "Checkbox" dentro alla definizione di un model è definibilie come "antipattern", il tipo
da utilizzare dovrebbe essere "bool". Utilizzando il checkbox nel model la tua implementazione dipende
dalle librerie wpf cosa opposta alla definizione di viewmodel, solo la view deve dipendere dalle librerie che usi
per la visualizzazione dei dati, il viewmodel ed il model devono essere indipendenti da qualunque libreria grafica.

il tuo model dovrebbe diventare:

Codice sorgente - presumibilmente C#

class musicItem
            {
                public bool check { get; set; }
                public bool locked { get; set; }
                public string file { get; set; }
                public string title { get; set; }
                public int ID { get; set; }
     
                public musicItem()
                {
                    this.check = new CheckBox();
                    this.check.IsChecked = true;
                }
            }

e nello xaml:

Codice sorgente - presumibilmente Plain Text

<DataTemplate x:Key="checkboxLockCell">
            <CheckBox IsChecked={Binding locked} Foreground="{x:Null}" OpacityMask="{x:Null}" Margin="0" Background="{x:Null}"/>
        </DataTemplate> 
<DataTemplate x:Key="checkboxCheckCell">
            <CheckBox IsChecked={Binding check} Foreground="{x:Null}" OpacityMask="{x:Null}" Margin="0" Background="{x:Null}"/>
        </DataTemplate>

ciaociao

Dedalux (Member)
Pro

Messaggi: 103
Iscritto: 15/12/2010

Postato alle 23:31
Giovedì, 25/04/2013

Non vorrei contraddire tasx, ma non capisco il passo in cui scrive

Codice sorgente - presumibilmente C# / VB.NET

public musicItem()
{
       this.check = new CheckBox();
       this.check.IsChecked = true;
}

quindi dico quello che so, riguardo ad MVVM, visto che se ne parla:

innanzitutto è essenziale che i ViewModels implementino INotifyPropertyChanged, che permette al motore di databinding di rilevare i cambiamenti e aggiornare il valore di tutte le proprietà in binding con la View.
Di solito si eredita da una classe astratta che implementa appunto INPC, cerca ObservableObject (molti implementano anche INotifyPropertyChanged, ma dipende dalle necessità..).

Quasi sempre questa classe è ereditata anche dai Models, dato che è molto probabile che vengano modificati, e sarà quindi necessario che eventuali ListViews o DataGrids aggiornino il contenuto.

Che si tratti di Model o di ViewModel, le proprietà saranno tipi base o derivati, ma nulla che abbia a che fare con la View. Uno dei principi di MVVM è la separazione dei ruoli, e il layer VM non deve sapere nulla della View, esiste a prescindere da chi andrà ad utilizzarlo.
IsChecked della tua checkbox, nello XAML, andrà bindata alla proprietà bool del DataContext, e si aggiornerà in base alla modalità di update, che di solito è TwoWay, quindi sia cambiamenti da codice che da View, ma dipende dal tipo della proprietà.

Ti da quell'errore perchè cerchi di bindare un oggetto di tipo CheckBox (di cui il VM non dovrebbe nemmeno conoscere l'esistenza) su IsChecked della tua CheckBox, che è invece di tipo bool.

Comunque, per aiutarti a conoscere MVVM, di cui non potrai più fare a meno, ti consiglio di leggere questi (http://community.visual-basic.it/Alessandro/archive/2010/0 ... articoli, che pur essendo MOLTO essenziali, spiegano abbastanza chiaramente il meccanismo.
Io avevo iniziato da quelli.

Se preferisci qualcosa di più completo ci sono:
http://www.codeproject.com/Articles/100175/Model-View-View ...
http://msdn.microsoft.com/en-us/magazine/dd419663.aspx

Se invece sei già a buon punto ti potrebbero interessare quest iargomenti:
Dependency Injection
Inversion Of Control
Factory Pattern
Mediator Pattern

Poi quando hai capito il meccanismo, come per tutti gli argomenti, c'è un oceano di argomenti più specifici e relativi mari di articoli.

Siccome l'argomento non è proprio immediato da comprendere, chiedi pure! :k:

Ultima modifica effettuata da Dedalux il 25/04/2013 alle 23:49

Roby94 (Member)
Guru

Messaggi: 1170
Iscritto: 28/12/2009

Postato alle 14:09
Venerdì, 26/04/2013

Innanzitutto grazie mille ad entrambi :-) Ho capito, almeno la parte di tasx XD comunque immaginavo che a quel punto il

Codice sorgente - presumibilmente C# / VB.NET

public musicItem() {        this.check = new CheckBox();        this.check.IsChecked = true; }

fosse inutile :-)
Dedalux grazie della tua spiegazione, ma mi lascia ancora un po disorientato XD appena avrò modo di leggere i link che mi hai postato magari capirò bene il tuo post XD Grazieee

Edit:
Piccola domandina... se io volessi aggiungere un evento al controllo checkbox a livello di logica lo fare i cosi:

Codice sorgente - presumibilmente Plain Text

<GridView>
                    <GridViewColumn Header="Check" Width="35">
                        <GridViewColumn.CellTemplate>
                            <DataTemplate>
                                <CheckBox IsChecked="{Binding check}" Click="{Binding changeCheck}" Style="{StaticResource checkboxCell}"/>
                            </DataTemplate>
                        </GridViewColumn.CellTemplate>
                    </GridViewColumn>
                    <GridViewColumn Header="Lock" Width="35">
                        <GridViewColumn.CellTemplate>
                            <DataTemplate>
                                <CheckBox IsChecked="{Binding locked}" Click="{Binding changeLocked}" Style="{StaticResource checkboxCell}"/>
                            </DataTemplate>
                        </GridViewColumn.CellTemplate>
                    </GridViewColumn>
                    <GridViewColumn Header="File" Width="100" DisplayMemberBinding="{Binding file}"/>
                    <GridViewColumn Header="Titolo" Width="100" DisplayMemberBinding="{Binding title}"/>
                    <GridViewColumn Header="ID" Width="35" DisplayMemberBinding="{Binding ID}"/>
                </GridView>

Codice sorgente - presumibilmente C#

class musicItem
        {
            public bool check { get; set; }
            public bool locked { get; set; }
            public string file { get; set; }
            public string title { get; set; }
            public int ID { get; set; }
 
            public void changeCheck(object sender, RoutedEventArgs e)
            {
                Trace.WriteLine("change check");
            }
 
            public void changeLocked(object sender, RoutedEventArgs e)
            {
                Trace.WriteLine("change locked");
            }
        }

Ma viene generata un eccezione... mi sapete spiegare come mai? se si potessero implementare gli eventi come ho scritto io sarebbe troppo comodo XD

Ultima modifica effettuata da Roby94 il 26/04/2013 alle 15:24

tasx (Dev Team)
Expert

Messaggi: 439
Iscritto: 15/12/2008

Postato alle 20:49
Venerdì, 26/04/2013

Allora prima di tutto le scuse, nel codice che ti ho postato ho dimenticato di cancellare li istruzioni nel costruttore...

Allora gli oggetti model non dovrebbero contenere logica di business, ma dovrebbero essere solo dei POCO, la logica di business andrebbe implementata nel viewModel....

l'interfaccia InotifyPropertyChanged viene già gestita da questa libreria http://www.galasoft.ch/mvvm/, è sufficiente che tu estendi la classe ViewModelBase nel tuo viewModel e poi quando una property viene cambiata la notifichi così:

Codice sorgente - presumibilmente C++

private int _propertyInt { get; set; }
public int PropertyInt 
{
    get
    {
       return _propertyInt;
    }
    set
    {
        _propertyInt = value;
        RaisePropertyChanged("PropertyInt");
    }
}

ogni volta che la proprietà verra scritta tutti i binding legati ad essa verrano aggiornati....

comunque qui trovi un valido esempio: http://apuntanotas.codeplex.com/SourceControl/changeset/vi ...

per il discorso dei checkbox guarda qui -> http://stackoverflow.com/questions/9293226/how-to-bind-a-c ... viene fatto uso anche della libreria di cui ti parlavo prima(è molto famosa per quanto riguarda il MVVM)....

ciao!

Roby94 (Member)
Guru

Messaggi: 1170
Iscritto: 28/12/2009

Postato alle 21:46
Venerdì, 26/04/2013

Grazie veramente della pazienza, immagino quanto sia pesante la situazione per voi...
Capisco che non posso fare a meno di questa libreria e mi sottometto alla vostra esperienza...
PEro vi chiedo ancora un pochino di pazienza... Allora io ho il mio model che sarà

Codice sorgente - presumibilmente C#

public class MusicItem
    {
        public bool check { get; set; }
        public bool locked { get; set; }
        public string file { get; set; }
        public string title { get; set; }
        public int ID { get; set; }
    }

Che se ho capito bene non viene aggiornato con i dati reali presenti nel listview, correggetemi se sbaglio...
In tal caso ho bisogno di un model che si applica all intera listview che eredita la classe InotifyPropertyChanged che in caso di modifica dei valori a livello di listview "crea un evento" adesso però non avendo mai dovuto usare il model mi chiedo se potete spiegarmi come costituirlo e ancora più importante come implementarlo nel listview esistente..
Grazie in anticipo

Edit:
Chiedo scusa, rileggendo ora i vecchi post mi accorgo che quello che prima era arabo sta iniziando a diventare italiano per me e effettivamente c'è scritto quasi tutto....scusate...
Comunque ricapitolando sono a questo punto:
ListView

Codice sorgente - presumibilmente Plain Text

<ListView x:Name="musicList" ItemsSource="{Binding musicItems}" Margin="10,10,10,5" Grid.RowSpan="2" Grid.ColumnSpan="2">
            <ListView.View>
                <GridView>
                    <GridViewColumn Header="Check" Width="35">
                        <GridViewColumn.CellTemplate>
                            <DataTemplate>
                                <CheckBox IsChecked="{Binding check}" Click="{Binding changeCheck}" Style="{StaticResource checkboxCell}"/>
                            </DataTemplate>
                        </GridViewColumn.CellTemplate>
                    </GridViewColumn>
                    <GridViewColumn Header="Lock" Width="35">
                        <GridViewColumn.CellTemplate>
                            <DataTemplate>
                                <CheckBox IsChecked="{Binding locked}" Style="{StaticResource checkboxCell}"/>
                            </DataTemplate>
                        </GridViewColumn.CellTemplate>
                    </GridViewColumn>
                    <GridViewColumn Header="File" Width="100" DisplayMemberBinding="{Binding file}"/>
                    <GridViewColumn Header="Titolo" Width="100" DisplayMemberBinding="{Binding title}"/>
                    <GridViewColumn Header="ID" Width="35" DisplayMemberBinding="{Binding ID}"/>
                </GridView>
            </ListView.View>
        </ListView>

Model

Codice sorgente - presumibilmente C#

public class MusicItem
    {
        public bool check { get; set; }
        public bool locked { get; set; }
        public string file { get; set; }
        public string title { get; set; }
        public int ID { get; set; }
    }

ViewModel

Codice sorgente - presumibilmente C++

public class ViewMusic : ViewModelBase
    {    
        public List<MusicItem> musicItems { get; set; }
 
        public ViewMusic()
        {
            musicItems = new List<MusicItem>();
        }
    }

Inizializzazione

Codice sorgente - presumibilmente C# / VB.NET

public MainWindow()
        {
            InitializeComponent();
            this.musicList.DataContext = new ViewMusic();
            this.musicList.Items.Add(new MusicItem());//Item di prova
        }

Ora non capisco dove devo fare la verifica con InotifyPropertyChanged e se manca qualcosa per far funzionare il tutto

Ultima modifica effettuata da Roby94 il 26/04/2013 alle 22:44

tasx (Dev Team)
Expert

Messaggi: 439
Iscritto: 15/12/2008

Postato alle 23:23
Venerdì, 26/04/2013

Ciao!

Allora nel viewModel ti consiglio di usare al posto di

Codice sorgente - presumibilmente C# / VB.NET

public List<MusicItem> musicItems { get; set; }

Codice sorgente - presumibilmente C# / VB.NET

public ObservableCollection<MusicItem> musicItems { get; set; }

così i bindings vengono già notificati quando aggiungi o rimuovi qualcosa...

L'interfaccia INotifyPropertyChanged viene già implementata(o comunque gestita) da ViewModelBase, quindi non ti devi preoccupare di implementarla, l'importante è che quando una proprietà viene modificata tu chiami il metodo

Codice sorgente - presumibilmente Plain Text

RaisePropertyChanged("NomeProprietà");

in tal modo i bindings riceveranno la notifica...

Il model che hai scritto va benissimo così

, per i dati funziona così:
quando tu modifichi qualcosa sulla view che è bindato ad un model, la modifica viene rispecchiata sul model, mentre se modifichi qualcosa sul model devi notificarlo o con INotofyPropertyChanged o estendendo la classe ViewModelBase e chiamando il metodo RaisePropertyChanged...

in ultimo per rimanere in linea con il pattern i dati dovresti aggiungerli dal viewModel e non nel costruttore della finestra(View) 8-|

ps: per il checkbox guardati il link del mio post precedente...

Pagine: [ 1 2 3 4 5 ]