Umschaltung zwischen DataTemplates

  • WPF

Es gibt 8 Antworten in diesem Thema. Der letzte Beitrag () ist von florian03.

    Umschaltung zwischen DataTemplates

    Hallo,

    nachdem nun die Frage nach den Settings geklärt wurde und ich Benutzereinstellungen speichern kann, würde ich diese gerne sinnfoll anwenden.
    Ich habe in meinem Projekt eine Listbox, die mit einem DataTemplate "bestückt" ist:

    XML-Quellcode

    1. ​<ListBox Grid.Row="1" Margin="0,10,0,0" ItemsSource="{Binding AllSnippetsView}" SelectedItem="{Binding SelectedSnippet}">
    3. <ListBox.GroupStyle>
    4. <GroupStyle>
    5. <GroupStyle.ContainerStyle>
    6. <Style TargetType="{x:Type GroupItem}">
    7. <Setter Property="Margin" Value="0,0,0,5"/>
    8. <Setter Property="Template">
    9. <Setter.Value>
    10. <ControlTemplate TargetType="{x:Type GroupItem}">
    11. <Expander IsExpanded="True"
    12. BorderThickness="1,1,1,5">
    13. <Expander.Header>
    14. <DockPanel Margin="0,0,10,0">
    15. <TextBlock FontSize="15" FontWeight="Bold"
    16. Text="{Binding Name.Name}"
    17. Margin="5,0,20,0"
    18. />
    19. <TextBlock FontSize="15" HorizontalAlignment="Right" FontWeight="Bold"
    20. Text="{Binding Path=ItemCount}"/>
    21. </DockPanel>
    22. </Expander.Header>
    23. <Expander.Content>
    24. <ItemsPresenter Margin="0,6,0,0"/>
    25. </Expander.Content>
    26. </Expander>
    27. </ControlTemplate>
    28. </Setter.Value>
    29. </Setter>
    30. </Style>
    31. </GroupStyle.ContainerStyle>
    32. </GroupStyle>
    33. </ListBox.GroupStyle>
    34. <ListBox.ItemTemplate>
    35. <DataTemplate>
    36. <StackPanel Grid.Column="1" Margin="5">
    37. <TextBlock FontSize="14" FontWeight="Bold" Text="{Binding Path=Name}" />
    38. <StackPanel Orientation="Horizontal">
    39. <TextBlock FontSize="13" >
    40. <Run FontWeight="DemiBold" Text="Tags: "/>
    41. <Run Text="{Binding Tags, Mode=OneWay}"/>
    42. </TextBlock>
    43. </StackPanel>
    44. </StackPanel>
    45. </DataTemplate>
    46. </ListBox.ItemTemplate>
    48. <ListBox.ContextMenu>
    49. <ContextMenu>
    50. <MenuItem Icon="{StaticResource EditSnippet}" Command="{Binding EditSnippetCommand}" Header="Bearbeiten"></MenuItem>
    51. <MenuItem Icon="{StaticResource Delete}" Header="Löschen" Command="{Binding DeleteSnippetCommand}"></MenuItem>
    52. </ContextMenu>
    53. </ListBox.ContextMenu>
    55. </ListBox>


    Jetzt möchte ich dem Benutzer in den Settings die Wahl geben, wie die Elemente in der Listbox dargestellt werden.
    Ich habe auch schon ein Zweites DataTemplate erstellt. Dies möchte ich anzeigen wenn ein Property im ViewModel "true" ist.

    Ich wollte es mit DataTemplates umsetzen, habe es aber leider nicht hinbekommen.
    Die Lösung wird wieder relativ einfach sein - ich komme aber einfach nicht drauf ;(

    Wenn jemand einen Denkanstoß hätte, würde ich mich sehr freuen.

    Viele Grüße
    Florian
    ----

    WebApps mit C#: Blazor

    Hallo

    florian03 schrieb:

    Dies möchte ich anzeigen wenn ein Property im ViewModel "true" ist.

    Das musst du bitte genauer Definieren. Möchtest du ein anderes DataTemplate verwenden wenn der Wert "True" ist oder willst du ein anderes Template benutzen wenn der Datentyp Boolean ist.

    Grüße
    Sascha
    If _work = worktype.hard Then Me.Drink(Coffee)
    Seht euch auch meine Tutorialreihe <WPF Lernen/> an oder abonniert meinen YouTube Kanal.

    ## Bitte markiere einen Thread als "Erledigt" wenn deine Frage beantwortet wurde. ##

    Hallo,

    wieder Mal zu ungenau beschrieben... - sorry!

    Also ich habe eine Listbox, in der Objekte (in meinem Fall CodeSnippets) angezeigt werden.
    In meinem Standard Datatemplate verbraucht ein Objekt in der Listbox relativ viel Platz - deswegen habe ich in den Settings einen Boolean Wert hinzugefügt ("UseSmallDatatemplate")
    Dieses Setting ist als Property in meinem ViewModel hinterlegt. Wenn das Property den Wert 'true' hat, dann soll das Datatemplate für die schmale Darstellung der Snippets verwendet werden - bei 'false' das ganz mormale Datatemplate.

    Ich denke das war jetzt verständlich
    Viele Grüße
    Florian
    ----

    WebApps mit C#: Blazor

    Achso.

    Na das geht einfach indem du mittels Trigger den Content umschaltest.

    Du machst also in dein DataTempplate ein ContentControl und setzt mittels Trigger den Content je nach Wert.

    Schau mal hier: stackoverflow.com/questions/71…witching-based-on-trigger

    Grüße
    Sascha
    If _work = worktype.hard Then Me.Drink(Coffee)
    Seht euch auch meine Tutorialreihe <WPF Lernen/> an oder abonniert meinen YouTube Kanal.

    ## Bitte markiere einen Thread als "Erledigt" wenn deine Frage beantwortet wurde. ##

    Hallo, erstmal vielen Dank für deine Antwort.

    Habe es mal versucht umzusetzten, hat auch so weit geklappt mit den Resourcen und DataTemplates, allerdings funktioniert nun mein Binding nicht mehr.
    Die Properties an die ich binde "werden anscheinend nicht gefunden".

    Ich habe mal den Code von dem Listview hier (in gekürzter Form):

    XML-Quellcode

    1. <ListBox Grid.Row="1" Margin="0,10,0,0" ItemsSource="{Binding AllSnippetsView}" SelectedItem="{Binding SelectedSnippet}">
    2. <ListBox.GroupStyle>
    3. <GroupStyle>
    4. <GroupStyle.ContainerStyle>
    5. <Style TargetType="{x:Type GroupItem}">
    6. <Setter Property="Margin" Value="0,0,0,5"/>
    7. <Setter Property="Template">
    8. <Setter.Value>
    9. <ControlTemplate TargetType="{x:Type GroupItem}">
    10. <Expander IsExpanded="True"
    11. BorderThickness="1,1,1,5">
    12. <Expander.Header>
    13. <DockPanel Margin="0,0,10,0">
    14. <TextBlock FontSize="15" FontWeight="Bold"
    15. Text="{Binding Name.Name}"
    16. Margin="5,0,20,0"
    17. />
    18. <TextBlock FontSize="15" HorizontalAlignment="Right" FontWeight="Bold"
    19. Text="{Binding Path=ItemCount}"/>
    20. </DockPanel>
    21. </Expander.Header>
    22. <Expander.Content>
    23. <ItemsPresenter Margin="0,6,0,0"/>
    24. </Expander.Content>
    25. </Expander>
    26. </ControlTemplate>
    27. </Setter.Value>
    28. </Setter>
    29. </Style>
    30. </GroupStyle.ContainerStyle>
    31. </GroupStyle>
    32. </ListBox.GroupStyle>
    34. <ListBox.ItemTemplate>
    36. <DataTemplate>
    37. <ContentControl DataContext="{Binding Mode=OneWay}">
    39. <ContentControl.Resources>
    40. <DataTemplate x:Key="normalListView">
    41. <StackPanel Grid.Column="1" Margin="5">
    42. <TextBlock FontSize="14" FontWeight="Bold" Text="{Binding Path=Name}" />
    43. <StackPanel Orientation="Horizontal">
    44. <TextBlock FontSize="13" >
    45. <Run FontWeight="DemiBold" Text="Tags: "/>
    46. <Run Text="{Binding Tags, Mode=OneWay}"/>
    47. </TextBlock>
    48. </StackPanel>
    49. </StackPanel>
    50. </DataTemplate>
    51. <DataTemplate x:Key="slimListView">
    52. <TextBlock Margin="5" FontSize="14" FontWeight="Bold" Text="{Binding Path=Name}" />
    53. </DataTemplate>
    54. </ContentControl.Resources>
    56. <ContentControl.Style>
    57. <Style TargetType="{x:Type ContentControl}">
    58. <Setter Value="{StaticResource normalListView}" Property="ContentTemplate" />
    59. <Style.Triggers>
    60. <DataTrigger Binding="{Binding }" Value="True">
    61. <Setter Value="{StaticResource slimListView}" Property="ContentTemplate" />
    62. </DataTrigger>
    63. </Style.Triggers>
    64. </Style>
    65. </ContentControl.Style>
    66. </ContentControl>
    67. </DataTemplate>
    69. <!--<DataTemplate>
    70. <StackPanel Grid.Column="1" Margin="5">
    71. <TextBlock FontSize="14" FontWeight="Bold" Text="{Binding Path=Name}" />
    72. <StackPanel Orientation="Horizontal">
    73. <TextBlock FontSize="13" >
    74. <Run FontWeight="DemiBold" Text="Tags: "/>
    75. <Run Text="{Binding Tags, Mode=OneWay}"/>
    76. </TextBlock>
    77. </StackPanel>
    78. </StackPanel>
    79. </DataTemplate>-->
    80. </ListBox.ItemTemplate>
    82. </ListBox>

    (Der auskommentierte Abschnitt ist das ursprüngliche DataTemplate, wo das Binding super funktioniert hat.)

    Hier auch mal der Code des ViewModels:
    Spoiler anzeigen
    ​

    C#-Quellcode

    1. ​using Microsoft.Win32;
    2. using SnippetLibrary.Context;
    3. using SnippetLibrary.Model;
    4. using SnippetLibrary.View.DialogViews;
    5. using SnippetLibrary.ViewModel.DialogViewModels.SpecialDialogs;
    6. using SnippetLibrary.ViewModel.Infrastructure;
    7. using SnippetLibrary.ViewModel.ModelViewModels;
    8. using System;
    9. using System.Collections.Generic;
    10. using System.Collections.ObjectModel;
    11. using System.ComponentModel;
    12. using System.IO;
    13. using System.Linq;
    14. using System.Text;
    15. using System.Threading.Tasks;
    16. using System.Windows;
    17. using System.Windows.Data;
    18. using System.Windows.Input;
    20. namespace SnippetLibrary.ViewModel.WorkspaceViewModels
    21. {
    22. public class MainWorkspaceViewModel : ViewModelBase
    23. {
    24. public MainWorkspaceViewModel()
    25. {
    26. if (IsInDesignMode)
    27. {
    28. //CreateExampleDatas!!!
    29. }
    30. else
    31. {
    32. AllSnippets = new ObservableCollection<SnippetViewModel>();
    33. }
    35. Init();
    36. }
    38. private void Init()
    39. {
    40. SelectedSnippet = AllSnippets.FirstOrDefault();
    42. AllSnippetsView = CollectionViewSource.GetDefaultView(AllSnippets);
    43. AllSnippetsView.Filter = AllSnippetsView_Filter;
    44. AllSnippetsView.SortDescriptions.Add(new SortDescription("Name", ListSortDirection.Ascending));
    45. AllSnippetsView.GroupDescriptions.Add(new PropertyGroupDescription("Language"));
    46. }
    48. #region Snippet, SelectedSnippet, View
    49. //Snippet, SelectedSnippet, View
    51. private ObservableCollection<SnippetViewModel> _AllSnippets;
    52. public ObservableCollection<SnippetViewModel> AllSnippets
    53. {
    54. get { return _AllSnippets; }
    55. set { _AllSnippets = value; RaisePropertyChanged(); }
    56. }
    58. private SnippetViewModel _SelectedSnippet;
    59. public SnippetViewModel SelectedSnippet
    60. {
    61. get { return _SelectedSnippet; }
    62. set { _SelectedSnippet = value; RaisePropertyChanged(); }
    63. }
    65. private ICollectionView _AllSnippetsView;
    66. public ICollectionView AllSnippetsView
    67. {
    68. get { return _AllSnippetsView; }
    69. set { _AllSnippetsView = value; RaisePropertyChanged(); }
    70. }
    72. #endregion
    74. #region Filterlogic
    75. //Filterlogic
    77. private string _FilterText;
    78. public string FilterText
    79. {
    80. get
    81. {
    82. return _FilterText;
    83. }
    84. set
    85. {
    86. _FilterText = value; AllSnippetsView.Refresh(); RaisePropertyChanged();
    87. }
    88. }
    90. private bool AllSnippetsView_Filter(object obj)
    91. {
    92. if (String.IsNullOrEmpty(FilterText)) return true;
    94. SnippetViewModel currentSnippet = (SnippetViewModel)obj;
    95. string lowerFilterText = FilterText.ToLower();
    97. if (currentSnippet.Name.ToLower().Contains(lowerFilterText)) return true;
    98. if (currentSnippet.Language.Name.ToLower().Contains(lowerFilterText)) return true;
    99. if (currentSnippet.Tags.ToLower().Contains(lowerFilterText)) return true;
    101. return false;
    102. }
    103. #endregion
    105. #region Other
    106. //Other
    108. private bool _IsFileOpen;
    109. public bool IsFileOpen
    110. {
    111. get { return _IsFileOpen; }
    112. set { _IsFileOpen = value; RaisePropertyChanged(); }
    113. }
    115. private string _OpenFileName;
    116. public string OpenFileName
    117. {
    118. get { return _OpenFileName; }
    119. set { _OpenFileName = value; RaisePropertyChanged(); RaisePropertyChanged("WindowTitle"); }
    120. }
    122. public string WindowTitle
    123. {
    124. get
    125. {
    126. string s = "SnippetLibrary";
    127. if (IsFileOpen)
    128. {
    129. s += " - " + new FileInfo(OpenFileName).Name;
    130. }
    131. else
    132. {
    133. s += " - keine Datei geöffnet";
    134. }
    135. return s;
    136. }
    137. }
    139. #endregion
    141. //Settings
    143. public bool S_UImainWorkspace_SimpleListBoxStyle
    144. {
    145. get { return false; } //Boolean.Parse( SettingsContext.Instance.GetSettingValue("UImainWorkspace_SimpleListBoxStyle"))
    146. }
    148. }
    149. }



    Das ganze Projekt kann auch gerne auf GitHub angesehen werden: https://github.com/florian03-1/SnippetLibrary

    Viele Grüße
    Florian
    ----

    WebApps mit C#: Blazor

    Davon hab ich noch nichts gehört - was nartürlich nichts heißen muss :)
    Nach einer kurzen Internetrescherche habe ich allerdings nichts nützliches für mich gelesen.

    Die Lösung, die in Post 5 gepostet habe funktioniert auch soweit - also man kann zwichen den beiden Templates umschalten.
    Allerdings funktioniert hier das Binding nicht mehr - sprich es wird z.B. das Property ​Name nicht mehr angezeigt.

    Wenn da jemand einen Tipp hat was ich übersehe...

    Viele Grüße
    Florian
    ----

    WebApps mit C#: Blazor

    florian03 schrieb:

    Allerdings funktioniert hier das Binding nicht mehr

    Da spiele ich gerne "Erzieher" und frage mal: Was sagt die Ausgabe bezüglich Binding Errors??

    Grüße
    Sascha
    If _work = worktype.hard Then Me.Drink(Coffee)
    Seht euch auch meine Tutorialreihe <WPF Lernen/> an oder abonniert meinen YouTube Kanal.

    ## Bitte markiere einen Thread als "Erledigt" wenn deine Frage beantwortet wurde. ##