WPF: DataTemplate Liste in List darstellen
Nabend,
bin gerade beim lernen was WPF betrifft und habe folgende Frag Ich habe ein Testprojekt mal angelegt.
Ich Objekte (SecondElement), diese habe ich in einer Liste (SecondElementListe), diese ist wiederum gespeichert in einem Objekt FirstElement, von denen mehre in einer FirstElementListe stecken:
class SecondElement
{
public string FirstName { get; set; }
public bool IsSelected { get; set; }
public SecondElement()
{
FirstName = "";
IsSelected = false;
}
public SecondElement(string Name, bool selected)
{
FirstName = Name;
IsSelected = selected;
}
}
class SecondElementListe
{
public List<SecondElement> SecondList { get; set; }
public SecondElementListe()
{
SecondList = new List<SecondElement>();
}
public void AddElement(SecondElement SE)
{
this.SecondList.Add(SE);
}
public List<SecondElement> GetCompleSecondtList()
{
return this.SecondList;
}
}
// ------------------------------------------------------------------
class FirstElement
{
public string FirstName { get; set; }
public bool IsSelected { get; set; }
public SecondElementListe SecondList { get; set; }
public FirstElement()
{
FirstName = "";
IsSelected = false;
SecondList = new SecondElementListe();
}
public FirstElement(string Name, bool selected, SecondElementListe liste)
{
FirstName = Name;
IsSelected = selected;
SecondList = liste;
}
}
class FirstElementListe
{
public List<FirstElement> FirstListe { get; set; }
public FirstElementListe()
{
FirstListe = new List<FirstElement>();
}
public void AddElement(FirstElement FE)
{
this.FirstListe.Add(FE);
}
public List<FirstElement> GetCompletFirstList()
{
return this.FirstListe;
}
}
Ich erstelle die folgenden Objekte:
FirstElementListe CompleteList = new FirstElementListe();
private void BuildList()
{
SecondElementListe SL1 = new SecondElementListe();
SecondElement a1 = new SecondElement("S1", false);
SecondElement b1 = new SecondElement("S2", true);
SecondElement c1 = new SecondElement("S3", false);
SecondElement d1 = new SecondElement("S4", true);
SL1.AddElement(a1);
SL1.AddElement(b1);
SL1.AddElement(c1);
SL1.AddElement(d1);
FirstElement FE1 = new FirstElement("Element A", true, SL1);
CompleteList.AddElement(FE1);
// -----------------------------------------------------------
SecondElementListe SL2 = new SecondElementListe();
SecondElement a2 = new SecondElement("S1", true);
SecondElement b2 = new SecondElement("S2", false);
SecondElement c2 = new SecondElement("S3", true);
SecondElement d2 = new SecondElement("S4", false);
SL2.AddElement(a2);
SL2.AddElement(b2);
SL2.AddElement(c2);
SL2.AddElement(d2);
FirstElement FE2 = new FirstElement("Element B", false, SL2);
CompleteList.AddElement(FE2);
}
So wie bekomme ich es jetzt hin das ich in einem DataTemplate beide Listen angezeigt bekomme: Also in einer Listbox:
<ListBox Grid.Column="1" Grid.Row="1" ItemTemplate="{StaticResource testTemplate}" x:Name="LB_Element"></ListBox>
und das DataTemplate dazu:
<DataTemplate x:Key="testTemplate" x:Name="testTemplate" >
<Border Grid.Column="0" x:Name="border" CornerRadius="2" HorizontalAlignment="Left" VerticalAlignment="Center" >
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="40"/>
</Grid.RowDefinitions>
<Grid Grid.Row="0" Margin="2,2,2,0">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<Label Grid.Column="0" Margin="5,0,0,0" Content="Name:"/>
<Label Grid.Column="1" Margin="0,0,10,0" Content="{Binding FirstName}" x:Name="L_FirstElemente"/>
<CheckBox Grid.Column="3" Margin="20,0,5,0" Content="Ausgewählt" IsChecked="{Binding IsSelected}"/>
</Grid>
AB HIER SECONLIST
<Grid Grid.Row="1" HorizontalAlignment="Center" Background="White" Width="300">
<ListBox ItemsSource="{Binding SecondList }" DisplayMemberPath="FirstName" Margin="3" Background="LightGray"/>
</Grid>
Bis HIER
</Grid>
</Border>
</DataTemplate>
Zwischen den beiden roten Markierungen will ich jetzt alle SeconElemente (CheckListBox) eines FirstElements angezeigt bekommen. Wie binde ich die zweite Liste an die erste ? Ich bekomme es nicht hin (Gibt es Evt. ein Template in einem Template ?)
Ich binde aktuell so:
this.LB_Element.ItemsSource = CompleteList.GetCompletFirstList();
Kann mir jemand helfen ? (Ich möchte es erstmal ohne MVVM hinbekommen)
Danke im voraus
Hi BeZi,
Gibt es Evt. ein Template in einem Template ?
Du suchst wahrscheinlich das HierarchicalDataTemplate.
Da es um hierarchische Daten geht, ist evtl. auch für deine Zwecke ein TreeView das geeignetere Steuerelement.
Christian
Weeks of programming can save you hours of planning
Erstmal Danke für die Antwor.
Aber nein ich will keinen Treeview auch wenn es zuerst so aussieht von den Daten her.
Ich will nur eine Liste in der Elemente dargestellt werden in dessen andere Elemente dargestellt werden.
Die frage ist ob ich dazu dann das HierarchicalDataTemplate benutzen muss... und wie ich die Daten binde
Die frage ist ob ich dazu dann das HierarchicalDataTemplate benutzen muss... und wie ich die Daten binde
In der Doku gibt es Beispiele dazu, und und im Forum gibt es schon einige Artikel zum Thema: Forumssuche nach HierarchicalDataTemplate
Christian
Weeks of programming can save you hours of planning
Ich brauche soetwas
HAHA, ich verzeihung für die Zeichnung ging aber nicht besser auf die Schnelle, haha
Ach das ist eine Listbox und das andere sind Radiobuttons
Ich glaube, hier hast du etwas mißverstanden. Das Forum ist nicht dazu da, eine Skizze zu posten und dann zu warten, bis dir jemand den Code schreibt. Wir erwarten ein wenig Eigeninitiative von jedem, und dazu gehört auch, unbekannte Begriffe wie das HierarchicalDataTemplate in der Doku nachzuschlagen und die Beispiele nachzuvollziehen. Wenn's dabei konkrete Probleme gibt, helfen wir gerne weiter.
Bitte beachte [Hinweis] Wie poste ich richtig?, Punkt 1.
Christian
Weeks of programming can save you hours of planning
@MrSparkle - Äh ich habe meinen Beispiel Code ganz am Anfang oben gepostet (Dieser ist LAUFFÄHIG !!!!), ich wollte eigentlich nur klar machen (mit der Zeichnunng) was ich gerne für ein Element umsetzen möchte und ob das HierarchicalDataTemplate überhaupt dann das richtige ist. (Es gibt x Wege etwas umzusetzen, Du kannst nicht einfach sagen lies dir alles von HierarchicalDataTemplate durch, hier die Posts aus dem Forum.... Vielleicht ist es das garnicht was ich brauche, aber vielleicht ist es das....)
Und das ich nur ein Problem habe was die Anbindung der "Subklassen" betrifft.... Ich habe NIE gesagt das mir jemand den Code schreiben soll oder änliches..... Wenn Du den XAML Code unten anschaust wirst du sehen das es fast (mir fehlt ja ein kleiner Teil) der Zeichnung entspricht.
Eine Antwort... "Ja, genau dafür ist es da das HierarchicalDataTemplate das kann/sollte man damit so umsetzen" oder "Ah nein, da solltest du dann doch vielleicht was anderes nehmen".... Hätte vollenst ausgereicht....
Das eintige was ich jetzt weiss das ich zeit verloren habe und mich rechtfertigen muss obwohl ich KEINE "Regel" gebrochen habe... Denn ich ahbe nicht nach Code gefragt sondern ein Bild gepostet um es zu verdeutlichen.
So ich habe jetzt mal das mit HierarchicalDataTemplate versucht, es wird mir auch richtig angezeigt alles.
Ich habe jetzt nur noch das Problem das mir die radiobuttons nicht den Status IsSelected der SecondList weitergeben....
Und ich verstehe wirklich nicht warum.....
Direkt nach dem Start wird mal alles korrekt angezeigt, außer die Auswahl der gesetzten Radiobuttons ( einer in jedem Listeneintrag ist initilisiert). Diese bleiben ALLE auf IsChecked = false. Und ich kann sei verändern.
Wenn ich im Style RelativeSource={RelativeSource TemplatedParent} raus nehme werden mir die richtigen Radiobuttons "gesetzt" aber ich kann sie NICHT mehr verändern....
Kann mir einer Helfen ..... Ich stehe gerade irgendwie aug dem Schlauch....
<Window x:Class="WpfTest_DataTaple.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:src="clr-namespace:WpfTest_DataTaple"
Title="MainWindow" Height="800" Width="1024">
<Window.Resources>
<Style x:Key="CheckBoxListBoxStyle" TargetType="{x:Type ListBox}">
<Setter Property="BorderBrush" Value="Transparent"/>
<Setter Property="KeyboardNavigation.DirectionalNavigation" Value="Cycle" />
<Setter Property="ItemContainerStyle">
<Setter.Value>
<Style TargetType="{x:Type ListBoxItem}" >
<Setter Property="Margin" Value="2, 2, 2, 0" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate>
<Border Background="Transparent">
<Grid Width="40">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<Label Grid.Row="0" Content="{Binding Path=SecondName}" HorizontalAlignment="Center"/>
<RadioButton Grid.Row="1" Content="" HorizontalAlignment="Center"
IsHitTestVisible="False" Focusable="false"
IsChecked="{Binding Path=IsSelected,RelativeSource={RelativeSource TemplatedParent}, Mode=TwoWay}"/>
</Grid>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Setter.Value>
</Setter>
</Style>
<DataTemplate x:Key="MyTemplate" x:Name="MyTemplate" DataType="{x:Type src:SecondElement}">
<StackPanel Orientation="Horizontal">
<RadioButton Margin="4,4,4,4" Grid.Column="2" IsChecked="{Binding Path=IsSelected, Mode=TwoWay}" Content="{Binding Path=SecondName}"/>
</StackPanel>
</DataTemplate>
</Window.Resources>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="60"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="60"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="20"/>
<RowDefinition Height="*"/>
<RowDefinition Height="20"/>
</Grid.RowDefinitions>
<DockPanel Grid.Column="1" Grid.Row="1">
<DockPanel.Resources>
<HierarchicalDataTemplate DataType = "{x:Type src:FirstElement}"
ItemsSource = "{Binding Path=SecondList}">
<Border Margin="4,4,4,4" BorderBrush="SlateGray" BorderThickness="1" Width="300" Height="Auto" CornerRadius="3">
<Border.Style>
<Style TargetType="Border">
<Style.Triggers>
<DataTrigger Binding="{Binding Path=IsFinished}" Value="True">
<Setter Property="Background" Value="Orange" />
</DataTrigger>
</Style.Triggers>
</Style>
</Border.Style>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<Grid Grid.Row="0">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<TextBlock Margin="4" Grid.Column="0" HorizontalAlignment="Center" Text="{Binding Path=FirstName}"/>
<CheckBox Margin="4" Grid.Column="2" HorizontalAlignment="Center" IsChecked="{Binding Path=IsFinished}" Content="Finished"/>
</Grid>
<ListBox Margin="4" Grid.Row="1" Height="Auto" ItemsSource="{Binding SecondList}" ItemTemplate="{StaticResource MyTemplate}"
Style="{StaticResource CheckBoxListBoxStyle}"
SelectedItem="{Binding SecondElement, Mode=TwoWay}">
<ListBox.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel Orientation="Horizontal"/>
</ItemsPanelTemplate>
</ListBox.ItemsPanel>
</ListBox>
</Grid>
</Border>
</HierarchicalDataTemplate >
</DockPanel.Resources>
<WrapPanel>
<ListBox x:Name="TR_Element" />
</WrapPanel>
</DockPanel>
<StackPanel Grid.Row="1" Grid.Column="2">
<Button Click="Button_Click" Content="TestButton"></Button>
</StackPanel>
</Grid>
</Window>
und hier nochmal der Code dazu
public MainWindow()
{
BuildList();
InitializeComponent();
TR_Element.ItemsSource = CompleteList.GetCompletFirstList();
}
private void BuildList()
{
SecondElementListe SL1 = new SecondElementListe();
SecondElement a1 = new SecondElement("100", false);
SecondElement b1 = new SecondElement("75", true);
SecondElement c1 = new SecondElement("50", false);
SecondElement d1 = new SecondElement("25", false);
SecondElement e1 = new SecondElement("10", false);
SecondElement f1 = new SecondElement("0", false);
SL1.AddElement(a1);
SL1.AddElement(b1);
SL1.AddElement(c1);
SL1.AddElement(d1);
SL1.AddElement(e1);
SL1.AddElement(f1);
FirstElement FE1 = new FirstElement("Karte 1", true, SL1.GetCompleSecondtList());
CompleteList.AddElement(FE1);
// -----------------------------------------------------------
SecondElementListe SL2 = new SecondElementListe();
SecondElement a2 = new SecondElement("100", true);
SecondElement b2 = new SecondElement("75", false);
SecondElement c2 = new SecondElement("50", false);
SecondElement d2 = new SecondElement("25", false);
SecondElement e2 = new SecondElement("10", false);
SecondElement f2 = new SecondElement("0", false);
SL2.AddElement(a2);
SL2.AddElement(b2);
SL2.AddElement(c2);
SL2.AddElement(d2);
SL2.AddElement(e2);
SL2.AddElement(f2);
FirstElement FE2 = new FirstElement("Karte 2", false, SL2.GetCompleSecondtList());
CompleteList.AddElement(FE2);
}
private void Button_Click(object sender, RoutedEventArgs e)
{
CompleteList.FirstListe[0].SecondList[2].IsSelected = true;
CompleteList.FirstListe[0].SecondList[2].SecondName = "Test";
}
und
class SecondElement
{
public string SecondName { get; set; }
public bool IsSelected { get; set; }
public SecondElement()
{
SecondName = "";
IsSelected = false;
}
public SecondElement(string Name, bool selected)
{
SecondName = Name;
IsSelected = selected;
}
}
class SecondElementListe
{
public List<SecondElement> SecondList { get; set; }
public SecondElementListe()
{
SecondList = new List<SecondElement>();
}
public void AddElement(SecondElement SE)
{
this.SecondList.Add(SE);
}
public List<SecondElement> GetCompleSecondtList()
{
return this.SecondList;
}
public SecondElement GetSelectedItem()
{
SecondElement tmp = null;
for (int i = 0; i < SecondList.Count; i++)
{
if (SecondList[i].IsSelected)
{
tmp = SecondList[i];
break;
}
}
return tmp;
}
}
class FirstElement
{
public string FirstName { get; set; }
public bool IsFinished { get; set; }
public List<SecondElement> SecondList { get; set; }
public FirstElement()
{
FirstName = "";
IsFinished= false;
SecondList = new List<SecondElement>();
}
public FirstElement(string Name, bool selected, List<SecondElement> liste)
{
FirstName = Name;
IsFinished = selected;
SecondList = liste;
}
}
class FirstElementListe
{
public List<FirstElement> FirstListe { get; set; }
public FirstElementListe()
{
FirstListe = new List<FirstElement>();
}
public void AddElement(FirstElement FE)
{
this.FirstListe.Add(FE);
}
public List<FirstElement> GetCompletFirstList()
{
return this.FirstListe;
}
}
Also es funktioniert alles, bis auf die Radiobuttons innerhalb eines Elements
Zur leichteren Vorstellung mal ein Screenshot
also wenn ich das Bild nu so angucke sieht mir das aus wie eine Listbox, deren DataTemplate ein UserControl generiert, und das UserControl enthält auch eine Listbox, aber horizontal, mit RadioButtons als Items.
Also eher was ohne HierarchicalDataTemplate, aber mit UserControl.
Der frühe Apfel fängt den Wurm.
Hmmm, ja die Frage ist doch nachdem MrSparkle meinte ich solle mir das HierarchicalDataTemplate anschauen, ob ich das dafür brauche.
Das Controls sind richtig, nur die funktionalität funktioniert noch nicht ganz.
Brauche ich ein HierarchicalDataTemplate um eine List inerhalb einer Liste zu befüllen oder nicht ?
Jetzt bin ich etwas verwirrt... Geht mein Ansatz oder geht der so nicht ?
Bei meim Ansatz, mit dem UserControl brauchst du kein HierarchicalDataTemplate ("HDT").
Gut möglich, dasses auch annere Ansätze gibt, und dass man bei denen eins braucht - jdfs. bei dem mittm ucl nicht.
Deinen Ansatz kann ich so vom draufgucken nicht durchblicken - ist mir zuviel Code. Vlt. kannst du ein Sample basteln und gezippt anhängen.
Weil wenn ich was lauffähiges ins VS laden kann, dann blicke ich viel besser durch.
jdfs. post#1 scheint mir, dass du ein Template für ListboxItem anlegst - sowas hab ich neulich auch gemacht in einer Hierarchischen Struktur, und brauchte (wider Erwarten!) kein HDT: Hierarchischer aufbau von Shapes im Canvas
Du musst diesem Template nun nur noch ein geeignetes UserControl für den InnerView einbauen.
so wies mir aussieht.
Der frühe Apfel fängt den Wurm.
Hier wäre das Testprojekt....
Wie ich schon sagte irgendwie binmdet er die Radiobunntons nicht und ich finde den Fehler nicht..... ARGGGGGG
als erstes werde ich mal die Klassen FirstElementListe und SecondElementListe rauswerfen.
Die tun nichts, was eine gewöhnliche ObservableCollection nicht besser könnte - naja - SecondElementListe doch.
Dafür aber fehlt mir ein Mainmodel, also eine Klasse, wo so Listen denn ühaupt mal drinne sind, dass man daran anbinden kann.
Also Entrümpeln hilft auch dabei, zu entdecken, was wirklich fehlt. 😉
Der frühe Apfel fängt den Wurm.
also hier meine Übung dazu.
Habe festgestellt, dass SecondList zwar was anneres macht als olle OC, aber wird halt nirgends benutzt.
egal.
Meine Übung ist auch nicht perfekt, und das ucl ist besser gelungen als wndMain - ist mit Listbox bischen lästig, den ListboxItem abzugewöhnen, das selectete zu highlighten, oder ihnen beizubringen, dieses Highlighting anders zu machen.
Der frühe Apfel fängt den Wurm.
@ErfinderDesRades
Hi. ich wollte mich noch bei Dir bedanken für das Beispiel. Top wirklich
Habe allerdings noch eine Frage.
Wenn ich in der "obersten" ListBox (in dem alle Usercontrols eingebunden sind) das Evenet "SelectionChanged" abfrage dann feuert das gleiche Event auch wenn ich die Radiobuttons (Liste in der Liste) ändere... (Ich kann dieses Verhalten nicht nachvollziehen, was ich aber gut finde und auch benötige).
Wenn ich aber die CheckBox (isFinisched) setze wird das event nbicht gefeuert. Wie funbktioniert das, das das Event feuert wenn ich ein Radiobutton ändere und wie bekomme ich das Verhalten auch der Checkbox hin ?
Danke nochmals für das gute Beispiel, sowas ist einfach TOP
Ich habe das Projekt etwas überarbeitet und nochmal angehängt....
Ach ja gibt es die Möglichkeit das die oberste Liste das element auch selktiert wenn ein Radiobutton geändert wird bzw. die CheckBox IsFinisched ?
👍 😁
das Evenet "SelectionChanged" abfrage Das sollst du nicht tun.
Denn da fummelst duim View herum statt im Viewmodel.
Aber um die Frage zu beantworten: Dieses Event ist wohl ein RoutedEvent, mit RoutingStrategy.Bubbling. Und die werden von Parent zu Parent hoch-durchgereicht - interessiert nicht, denn wie gesagt: solch finden im View statt, und das ist fürs Viewmodel tabu.
Wenn du im Viewmodel auch son bubbling-Verhalten haben willst, dann musste halt entsprechend was coden.
Vielleicht kannst du das CollectionView_CurrentChanged-Event dazu nutzen.
Naja, um der Wahrheit die Ehre zu geben - das mittm Selectionhandling wird einfach schwierig, sauber nach MVVM abzuhandeln.
Daher würde ich empfehlen, das Hervorheben des SelectedItems überhaupt zu unterbinden.
Immerhin werden die Finisched - Elemente schomal grün, und die selctierten SecondElements werden blau - bist du dir sicher, dass da noch 'ne selectiererei zu markieren einen Useability-Gewinn darstellen würde?
Also das Einfachste ist, ItemsControl statt Listbox zu nehmen - dann gibt es kein SelectedItem mehr.
Der frühe Apfel fängt den Wurm.
Die Sache ist folgende.
Ich brauche die Selection weil ich über den Index ein Diagramm (zedgraph - Windows Forms) zeichnen lasse.
Also jeder Eintrag in der ListBox entspricht einem Digramm (oder besser Inhalt der Daten).
Das ist das Problem. Is finished heisst in dem fall das die Daten im Diagramm auch eine andere Farbe erhalten....
Wie ich schon sagte. Ich finde es cool das das event gefeuert wird wenn ich die Radiobuttons ändere... das gleich müsste nur bei der Checkbox funktionieren.....
Aber das hat nicht wirklich Logik.
Weil das SelectdeItem ist nur eines.
Gecheckt werden können aber mehrere Item - welches von denen soll dann als "Selected" gelten?
Der frühe Apfel fängt den Wurm.