Discussion :

[war120]

Bonjour à tous,

J'aurai deux questions.

J'utilise un service locator qui me permet d'avoir les bonne viewsModel en fonction des views à ce niveau, les databinding sur les propriétés fonctionne parfaitement.

1ere problématique:

Depuis la mainView à travers le mainViewsModel je souhaite récupérer mon objet "StackPanel" pour ensuite le manipuler.

Le but c'est de pouvoir gérer dynamiquement les UIElement en les ajoutant au stackPanel (à partir de mon mainViewsModel).

Par ailleurs, à choisir entre un conteneur (stackpanel / contentControl / canvas).

Ma 2eme problématique est l'affichage dynamique et la possibilité de les positionnés dans le conteneur.

En utilisation concrète de l'application quelle conteneur serait le plus adapté ?

ScreenShots en ci-joint.

war120
--
Merci pour votre aide.

[matdur]

Le but c'est de pouvoir gérer dynamiquement les UIElement en les ajoutant au stackPanel (à partir de mon mainViewsModel).

Si tu veux ajouter des éléments dynamiquement il ne faut pas utiliser une StackPanel mais une listbox (ou listview) dans le xaml et binder la propriété ItemsSource sur la liste des éléments du ViewModel

[matdur]

Ma 2eme problématique est l'affichage dynamique et la possibilité de les positionnés dans le conteneur.

En utilisation concrète de l'application quelle conteneur serait le plus adapté ?

Ben ça dépend comment tu veux les afficher.
Si tu veux simplement les aligner horizontalement ou verticalement un StackPanel peut faire l'affaire.
Si tu veux définir les coordonnées X et Y toi même il faut un Canvas.

[matdur]

N'oublie pas qu'avec une ListBox (ou listView etc ..) tu peux spécifier le conteneur (StackPanel, Canvas ...) utilisé lors de l'affichage.

[war120]

Merci matdur,

Je vais essayer ta solution avec la listbox.

Donc pour les items ajoutés dans la listebox (UI element), en fonction des besoins, je pourrai récupérer mon item et de là, le manipuler dans le canvas.

Si j'ai bien compris ?

Problématique: Comment depuis la mainview (où j'instancierai ma canvas) manipuler l'objet Canvas dans ma mainViewModel pour modifié ses enfants, puisque je voudrai modifier mon canvas en fonction des notifications que je recevrai , elle étends de InotifyPropertyChanged.

war120

[Thomas Lebrun]

Il te suffit d'exposer une propriété, dans ton VM, qui sera une collection qui va être mise à jour en fonction de tes notifications. Ensuite, tu bindes cette collection à la propriété Children de ton Canvas/Grid/Panel/etc...

[matdur]

Regarde le lien suivant, je pense qu'il répond à tes questions
http://social.msdn.microsoft.com/For...7-71d20832e3ae

[war120]

Merci pour vos réponses, je vais essayer sa.

[Nathanael Marchand]

Manipuler des éléments de la UI dans le VM c'est bof, ca sort du principe du mvvm

[war120]

Que me conseillez-vous alors PitMaverick78 ?

[Thomas Lebrun]

Que me conseillez-vous alors PitMaverick78 ?

Faire ce que j'ai dit: manipuler des collections qui seront bindées à l'IHM.

[war120]

Bonsoir,

J'ai essayer de binder une ObservableCollection de type UIElement sur la listebox, puis j'ai définis un conteneur de type Canvas en itemshost.

Première impression :

Je peux en effet, ajouter des vues dans la collection, mais aucunes vues n'est visible.

MainView.xaml

Code :

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

1
2
3
4
5
6
7
8
 
<ListBox ItemsSource="{Binding Path=Items}">
        <ListBox.Template>
            <ControlTemplate TargetType="{x:Type ListBox}">
                <Canvas Name="myCanvas" IsItemsHost="True" />
            </ControlTemplate>
        </ListBox.Template>
    </ListBox>

MainViewModel.cs

Code :

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
 
        private ObservableCollection<UIElement> _items;
        public ObservableCollection<UIElement> Items
        {
            get
            {
                return this._items;
            }
 
            set 
            {
                this._items = new ObservableCollection<UIElement>();
                this._items.Add(new LoginView());
            }
 
        }

Le loginView est un UserControl.
J'ai également essayé de récuperer l'élément (loginView) depuis ma collection pour modifier son attribut Visible, mais aucun affichage.

Merci pour votre aide
--
war120

[Thomas Lebrun]

Il ne faut pas binder une collection de UIElement mais une collection d'objets métier. Ensuite, tu définis un DataTemplate qui sera appliqué sur ton ItemsControl. Sur cet objet métier, tu as 2 propriété, X et Y, qui te permettent de définir le Canvas.Top et Canvas.Let

[matdur]

Tout a fait d'accord avec avec Thomas un ViewModel ne devrait exposer que d'autres "ViewModel" ou alors des "Model" mais en aucun cas des éléments des l'interface graphique.

Dans ton cas il faut que tu crées un ItemViewModel

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
public class ItemViewModel
	{
		public double X
		{
			get;
			set;
		}
 
		public double Y
		{
			get;
			set;
		}
	}

et le ViewModel principale expose une collection de ItemViewModel

public ObservableCollection<ItemViewModel> Items
{
get;
set;

}

et la manière dont les items sont affichés est définie dans le xaml via un DataTemplate

[war120]

Merci pour votre soutien.

L'exemple de matdur:

- la définition de deux variables X et Y pour le positionnement.

J'ai ajouté une propriété Element de type UserControl :

Code :

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

pubic UserControl Element { get; set; }

Pour tester, j'ai donc initialisé l'observableCollection puis insérer un nouveau itemViewModel dans mon mainViewModel.

Code :

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

1
2
3
 
this._items = new ObservableCollection<ItemViewModel>();
this._items.Add(new ItemViewModel { X = 80, Y=10, Element= new LoginView()});

Modification du mainview.xaml :

Code :

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
 
    <ItemsControl ItemsSource="{Binding Items}">
        <ItemsControl.ItemsPanel>
            <ItemsPanelTemplate>
                <Canvas IsItemsHost="True" Width="auto" Height="auto"/>
            </ItemsPanelTemplate>
        </ItemsControl.ItemsPanel>
        <ItemsControl.ItemTemplate>
            <DataTemplate>
                <UserControl />  //récupération de la propriété Element 
            </DataTemplate>
        </ItemsControl.ItemTemplate>
        <ItemsControl.ItemContainerStyle>
            <Style>
                <Setter Property="Canvas.Left" Value="{Binding X}" />
                <Setter Property="Canvas.Top" Value="{Binding Y}" />
            </Style>
        </ItemsControl.ItemContainerStyle>
    </ItemsControl>

Problématique:

A ce niveau, je n'arrive pas à binder le UserControl (coté xaml) par rapport à celle que je définis dans la class ItemViewModel.

J'ai essayé avec la propriété content, mais il s'affiche pas

Merci pour votre aide
--
war120

[Thomas Lebrun]

t'as essayé un truc du genre:

Code :

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

1
2
3
<DataTemplate>
                <UserControl Canvas.Left="{Binding X}" Canvas.Top="{Binding Y}" Content="{BindingElement" /> //récupération de la propriété Element 
            </DataTemplate>

[war120]

oui, j'ai essayé mais aucun affichage.

[Thomas Lebrun]

_items, c'est bien une propriété ? Tu fais bien le raise du propertychange ?