2016-12-02 1 views
-3

Ich habe Gitter mit mehreren Zeilen und zwei Spalten basierend auf den Daten erstellt. Jetzt habe ich eine Xaml-Zeichenfolge. Wie in meiner Benutzersteuerung beim Laden gerendert wird. Muss aus meinem Viewmodel rendern.Wie soll ich das machen?Wie Render Dynamic Xaml String in Benutzersteuerelement WPF MVVM?

reales Szenario,

werde ich Anzahl von Bildern aus der Datenbank erhalten. Muss in jeder Zeile zwei Bilder anzeigen. Aber ich kann nicht die Anzahl der Zeilen konstant erstellen. Weil es auf den Dynamischen Daten basieren wird. WENN Daten 10 sind, muss ich 5 Zeilen erstellen, weniger bedeutet, dass auch Zeilen reduziert werden.

Also ich plane, Xaml in Viewmodel basierend auf den Daten zu erstellen. Aber wie man es in meiner Benutzerkontrolle rendert. Hier

+0

Dies ist überhaupt nicht notwendig. Anstatt ein Stück XAML zu analysieren, könnten Sie auch die UI-Elemente programmatisch erstellen. Oder fügen Sie Ihrem Ansichtsmodell layoutbezogene Eigenschaften hinzu, und verwenden Sie ein ItemsControl mit einem entsprechenden ItemsPanel und ItemContainerStyle, der an die Eigenschaften des Ansichtsmodells bindet. – Clemens

+0

Erstellen Sie einfach ein benutzerdefiniertes Benutzersteuerelement, um die Bilder aus dem ViewModel zu übernehmen und das gesamte Layout zu verwalten. Das Erstellen einer Benutzeroberfläche in Ihrem ViewModel ist nicht MVVM. – Will

Antwort

2

ist eine Lösung,

Ansicht Modell:

public class ViewModel : PropertyChangedMonitor 
    { 
     ObservableCollection<ImageModel> _imageList; 
     public ViewModel() 
     { 
      _imageList = new ObservableCollection<ImageModel>(); 
      ImageList.Add(new ImageModel { ImageName = "/ImageLoad;component/Images/1.png" }); 
      ImageList.Add(new ImageModel { ImageName = "/ImageLoad;component/Images/2.png" }); 
      ImageList.Add(new ImageModel { ImageName = "/ImageLoad;component/Images/3.png" }); 
      ImageList.Add(new ImageModel { ImageName = "/ImageLoad;component/Images/4.png" }); 
      ImageList.Add(new ImageModel { ImageName = "/ImageLoad;component/Images/5.png" }); 
      Columns = 2; 
     } 



     public ObservableCollection<ImageModel> ImageList 
     { 
      get 
      { 
       return _imageList; 
      } 

     } 


     private int _column; 

     public int Columns 
     { 
      get 
      { 
       return _column; 
      } 
      set 
      { 
       if (_column != value) 
       { 
        _column = value; 
        OnPropertyChanged("Columns"); 
       } 

      } 
     } 
    } 

Bild Model-Klasse:

public class ImageModel 
    { 
     public string ImageName { get; set; } 
    } 

Und Ihre Benutzerverwaltung:

<UserControl x:Class="ImageLoad.ImageDisplay" 
      xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
      xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
      xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
      xmlns:local="clr-namespace:ImageLoad" 
      xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
      xmlns:vm="clr-namespace:ImageLoad" 
      d:DesignHeight="300" 
      d:DesignWidth="300" 
      mc:Ignorable="d"> 
    <UserControl.DataContext> 
     <vm:ViewModel /> 
    </UserControl.DataContext> 
    <Grid> 
     <ItemsControl ItemsSource="{Binding ImageList}"> 
      <ItemsControl.ItemsPanel> 
       <ItemsPanelTemplate> 
        <UniformGrid Columns="{Binding Columns, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}" /> 
       </ItemsPanelTemplate> 
      </ItemsControl.ItemsPanel> 
      <ItemsControl.ItemTemplate> 
       <DataTemplate> 
        <Image Source="{Binding ImageName}" /> 
       </DataTemplate> 
      </ItemsControl.ItemTemplate> 
     </ItemsControl> 
    </Grid> 
</UserControl> 

Hoffe, das wird funktionieren

+0

Dank @MANIKANDAN NAGALAKSHMI. Es klappt. –