So I have a task of building a mail application for school. I am having a problem with one of the parts.
I have a TreeView and a ListBox. TreeView has few items in it (Inbox, trash, draft). Now what I am trying to do, is that when I select and TreeView item certain ListBox Items will appear in the ListBox. (purpose of the ListBox is to show the mails in that "folder").
I have been looking into this, and there are some suggestions with ListAray and DataBinding, but I am very new and have no idea how to implement any of those.
What I have at this poit is:
<TreeView Grid.Row="2" Grid.ColumnSpan="1" VerticalAlignment="Stretch" HorizontalAlignment="Left" Margin="10,10,0,10" Name="treeView1" Width="100" FontSize="14" SelectedItemChanged="treeView1_SelectedItemChanged">
<TreeViewItem Header="Prejeto" IsSelected="True">
<TreeViewItem Header="Prebrano" />
<TreeViewItem Header="Neprebrano" />
</TreeViewItem>
<TreeViewItem Header="Poslano" />
<TreeViewItem Header="Osnutki" />
<TreeViewItem Header="Izbrisano" />
<TreeViewItem Header="Nezaželeno" />
<TreeViewItem />
</TreeView>
XAML ListBox:
<ListBox Name="seznamSporocil" Grid.Column="1" Grid.Row="2" HorizontalAlignment="Left" Margin="10,10,0,10" VerticalAlignment="Stretch" Width="100" FontWeight="Bold" FontFamily="Arial" MouseDoubleClick="seznamSporocil_MouseDoubleClick" />
SelectedItemChanged:
private void treeView1_SelectedItemChanged(object sender, RoutedPropertyChangedEventArgs<object> e)
{
}
When working with WPF, data binding is your best friend. Just bind ItemsSource of list box with some collection property of tree view's selected item.
Update.
Here's the complete sample (just create WPF Application project).
Model:
public class MailFolder
{
public string Name { get; set; }
public ObservableCollection<MailItem> Items
{
get
{
return items ?? (items = new ObservableCollection<MailItem>());
}
}
private ObservableCollection<MailItem> items;
public ObservableCollection<MailFolder> SubFolders
{
get
{
return subFolders ?? (subFolders = new ObservableCollection<MailFolder>());
}
}
private ObservableCollection<MailFolder> subFolders;
}
public class MailItem
{
public string Subject { get; set; }
}
XAML:
<Window x:Class="WpfApplication1.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="clr-namespace:WpfApplication1"
Title="MainWindow" Height="350" Width="525">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition />
<ColumnDefinition />
</Grid.ColumnDefinitions>
<TreeView x:Name="MailTreeView" ItemsSource="{Binding}">
<TreeView.Resources>
<HierarchicalDataTemplate DataType="{x:Type local:MailFolder}" ItemsSource="{Binding SubFolders}">
<TextBlock Text="{Binding Name}"/>
</HierarchicalDataTemplate>
</TreeView.Resources>
</TreeView>
<ListBox Grid.Column="1" ItemsSource="{Binding Path=SelectedItem.Items, ElementName=MailTreeView}">
<ListBox.ItemTemplate>
<DataTemplate DataType="{x:Type local:MailItem}">
<TextBlock Text="{Binding Subject}"/>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
</Grid>
</Window>
And this is data context setup:
public partial class MainWindow : Window
{
public MainWindow()
{
InitializeComponent();
DataContext = new[]
{
new MailFolder
{
Name = "Prejeto",
SubFolders =
{
new MailFolder
{
Name = "Prebrano",
Items =
{
new MailItem { Subject = "A" },
new MailItem { Subject = "B" },
new MailItem { Subject = "C" },
}
},
new MailFolder
{
Name = "Neprebrano",
Items =
{
new MailItem { Subject = "D" },
new MailItem { Subject = "E" },
}
},
},
Items =
{
new MailItem { Subject = "M" },
new MailItem { Subject = "N" },
}
},
new MailFolder
{
Name = "Poslano",
Items =
{
new MailItem { Subject = "F" },
new MailItem { Subject = "G" },
}
},
new MailFolder
{
Name = "Osnutki",
Items =
{
new MailItem { Subject = "H" },
}
},
new MailFolder
{
Name = "Izbrisano",
Items =
{
new MailItem { Subject = "I" },
new MailItem { Subject = "J" },
new MailItem { Subject = "K" },
}
},
new MailFolder
{
Name = "Nezaželeno",
Items =
{
new MailItem { Subject = "L" },
}
}
};
}
}
Note, that if you want to reflect changes, made to properties of your model classes, you need to implement INotifyPropertyChanged interface.
Related
The problem might look similar to this
But I don't have an issue with updating the TreeView if the ObservableCollection is modified in the same window (as in the case of the linked post).
I have a TreeView located in my MainWindow. I use a HierarchicalDataTemplate for the TreeView, basically the TreeView is structured into three levels of hierarchy: Group, Report, Node
For each level of the TreeView, I have created simple Model classes, each class will have a Name property and an ObservableCollection of its children class as second property (e.g., Group class will have a Name and a ReportList property, whilst Report class will have a Name and NodeList property)
In the ViewModel of my MainWindow, I have an ObservableCollection of the Group objects (I named it Groups) that is bound to the TreeView. I also have a RelayCommand method that will add a new Group object to the Groups collection (Let's call it the ImportReport Method). If I bind the RelayCommand to the button inside the MainWindow, everything worked fine, the TreeView is updated immediately with new Group Object each time I press the button.
However, this becomes an issue when I have another window, let's call it ImportWindow. In ImpportWindow, I have a button. Probably this is the cause of the issue, but I use the same ViewModel for both the ImportWindow and the MainWindow so that they can share the Groups property that is bound to the TreeView in the MainWindow. My goal is to perform addition to the TreeView from the second window by pressing a button from there. Now, If I move the binding of the ImportReport command to the button in ImportWindow instead, then try to run the code, pressing the button on ImportWindowdoesn't update the TreeView at all. I have debugged the code and the Groups ObservableCollection in the ViewModel indeed recorded a new addition but the TreeView doesn't display the new Group object.
Any explanation to this? Thanks!
MainWindow
<Window x:Class="StressReportWPF.MainWindow"
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:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:local="clr-namespace:StressReportWPF"
xmlns:ribbon="clr-namespace:System.Windows.Controls.Ribbon;assembly=System.Windows.Controls.Ribbon"
xmlns:viewModel="clr-namespace:StressReportWPF.ViewModel"
xmlns:data="clr-namespace:StressReportWPF.DataElements"
mc:Ignorable="d"
Title="StressReportApp"
Height="750"
Width="1000">
<Window.DataContext>
<viewModel:MainViewModel/>
</Window.DataContext>
<Window.Resources>
<HierarchicalDataTemplate DataType="{x:Type data:DisplayGroup}"
ItemsSource="{Binding ReportList}">
<TextBlock Text="{Binding DisplayGroupName}"/>
</HierarchicalDataTemplate>
<HierarchicalDataTemplate DataType="{x:Type data:DisplayReport}"
ItemsSource="{Binding NodeList}">
<TextBlock Text="{Binding DisplayReportName}"/>
</HierarchicalDataTemplate>
<DataTemplate DataType="{x:Type data:DisplayNode}">
<TextBlock Text="{Binding DisplayNodeName}"/>
</DataTemplate>
</Window.Resources>
<Border Background="#e7f4fe">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="75"/>
<RowDefinition/>
</Grid.RowDefinitions>
...
<Grid Grid.Row="1">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="250"/>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<Border Grid.Column="0"
Margin="0,20,20,20"
Background="#dde6ed"
BorderBrush="Black"
BorderThickness="1">
<ScrollViewer>
<TreeView Background="Transparent"
ItemsSource="{Binding Groups, UpdateSourceTrigger=PropertyChanged}">
</TreeView>
</ScrollViewer>
</Border>
<Border Grid.Column="1"
Margin="20,20,0,20"
Background="White"
BorderBrush="Black"
BorderThickness="1">
<ContentControl Margin="0"
Content="{Binding CurrentView}">
</ContentControl>
</Border>
</Grid>
</Grid>
</Border>
ImportWindow
<Window x:Class="StressReportWPF.ImportWindow"
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:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:local="clr-namespace:StressReportWPF"
xmlns:viewModel="clr-namespace:StressReportWPF.ViewModel"
xmlns:data="clr-namespace:StressReportWPF.DataElements"
xmlns:i="http://schemas.microsoft.com/xaml/behaviors"
mc:Ignorable="d"
Title="ImportWindow" Height="450" Width="800"
Background="#dde6ed">
<Window.Resources>
<BooleanToVisibilityConverter x:Key="BoolToVisConverter"/>
<DataTemplate x:Key="GroupComboBoxTemplate">
<TextBlock Text="{Binding DisplayGroupName}"/>
</DataTemplate>
</Window.Resources>
<Window.DataContext>
<viewModel:MainViewModel/>
</Window.DataContext>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="500"/>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
...
<Grid Grid.Column="1">
<Grid.RowDefinitions>
<RowDefinition Height="200"/>
<RowDefinition Height="150"/>
<RowDefinition/>
</Grid.RowDefinitions>
...
<Button Grid.Row="2"
HorizontalAlignment="Center"
VerticalAlignment="Center"
Height="40"
Width="100"
Content="Import"
Style="{StaticResource StandardButtonStyle}"
Command="{Binding ImportCommand}">
<i:Interaction.Triggers>
<i:EventTrigger EventName="Click">
<i:CallMethodAction MethodName="Close"
TargetObject="{Binding RelativeSource={RelativeSource
Mode=FindAncestor,
AncestorType=Window}}" />
</i:EventTrigger>
</i:Interaction.Triggers>
</Button>
</Grid>
</Grid>
ViewModel
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using StressReportWPF.Core;
using StressReportWPF.DataElements;
using System.Collections.ObjectModel;
using System.Windows.Input;
using StressReportWPF.Views;
namespace StressReportWPF.ViewModel
{
public class MainViewModel: ObservableObject
{
#region ViewModel-related Properties
public RelayCommand HomePageViewCommand { get; set; }
public RelayCommand LoadCaseAssignmentViewCommand { get; set; }
public RelayCommand JointNumberAssignmentViewCommand { get; set; }
public HomePageViewModel HomePageVM { get; set; }
public LoadCaseAssignmentViewModel LoadCaseAssignmentVM { get; set; }
public JointNumberAssignmentViewModel JointNumberAssignmentVM { get; set; }
private object _currentView;
public object CurrentView
{
get { return _currentView; }
set
{
_currentView = value;
OnPropertyChanged();
}
}
#endregion
private ICommand _importCommand;
public ICommand ImportCommand
{
get
{
if (_importCommand == null)
{
_importCommand = new RelayCommand(
param => ImportReport()
);
}
return _importCommand;
}
}
private ICommand _importWindowCommand;
public ICommand ImportWindowCommand
{
get
{
if (_importWindowCommand == null)
{
_importWindowCommand = new RelayCommand(
param => ShowImportWindow()
);
}
return _importWindowCommand;
}
}
#region Data Properties
private readonly ObservableCollection<DisplayGroup> _groups = new ObservableCollection<DisplayGroup>();
public ObservableCollection<DisplayGroup> Groups
{
get { return _groups; }
}
public bool IsNewGroupCreated { get; set; }
public object SelectedGroup { get; set; }
private DisplayGroup _newGroup = new DisplayGroup();
public DisplayGroup NewGroup
{
get { return _newGroup; }
set
{
_newGroup = value;
OnPropertyChanged();
}
}
#endregion
public MainViewModel()
{
HomePageVM = new HomePageViewModel();
LoadCaseAssignmentVM = new LoadCaseAssignmentViewModel();
JointNumberAssignmentVM = new JointNumberAssignmentViewModel();
CurrentView = HomePageVM;
HomePageViewCommand = new RelayCommand(o =>
{
CurrentView = HomePageVM;
});
LoadCaseAssignmentViewCommand = new RelayCommand(o =>
{
CurrentView = LoadCaseAssignmentVM;
});
JointNumberAssignmentViewCommand = new RelayCommand(o =>
{
CurrentView = JointNumberAssignmentVM;
});
// Set a temporary Group list
List<DisplayGroup> testGroupList = new List<DisplayGroup>();
List<DisplayNode> testNodeList = new List<DisplayNode>();
List<DisplayReport> testReportList = new List<DisplayReport>();
DisplayNode nodeA = new DisplayNode();
nodeA.DisplayNodeName = "Node A";
DisplayNode nodeB = new DisplayNode();
nodeB.DisplayNodeName = "Node B";
DisplayNode nodeC = new DisplayNode();
nodeC.DisplayNodeName = "Node C";
testNodeList.AddRange(new List<DisplayNode> { nodeA, nodeB, nodeC }) ;
ObservableCollection<DisplayNode> testNodeObsCol = new ObservableCollection<DisplayNode>(testNodeList);
DisplayReport reportA = new DisplayReport();
reportA.DisplayReportName = "Report A";
reportA.NodeList = testNodeObsCol;
DisplayReport reportB = new DisplayReport();
reportB.DisplayReportName = "Report B";
reportB.NodeList = testNodeObsCol;
DisplayReport reportC = new DisplayReport();
reportC.DisplayReportName = "Report C";
reportC.NodeList = testNodeObsCol;
testReportList.AddRange(new List<DisplayReport> { reportA, reportB, reportC });
ObservableCollection<DisplayReport> testReportObsCol = new ObservableCollection<DisplayReport>(testReportList);
DisplayGroup groupA = new DisplayGroup();
groupA.DisplayGroupName = "Group A";
groupA.ReportList = testReportObsCol;
DisplayGroup groupB = new DisplayGroup();
groupB.DisplayGroupName = "Group B";
groupB.ReportList = testReportObsCol;
DisplayGroup groupC = new DisplayGroup();
groupC.DisplayGroupName = "Group C";
testGroupList.AddRange(new List<DisplayGroup> { groupA, groupB, groupC });
foreach (var item in testGroupList)
{
Groups.Add(item);
}
}
public void ShowImportWindow()
{
//ImportViewModel importVM = new ImportViewModel();
//importVM.Groups = this.Groups;
ImportWindow importWindow = new ImportWindow();
//importWindow.DataContext = importVM;
importWindow.Show();
}
public void ImportReport()
{
if (IsNewGroupCreated)
{
DisplayGroup newGroup = new DisplayGroup();
newGroup.DisplayGroupName = "Group D";
Groups.Add(newGroup);
}
else
{
}
}
}
}
I'm new to WPF and MVVM ... i created a class WorkstationItem
public class WorkstationItem
{
public WorkstationItem() { }
public string Name { get; set; }
public string OS { get; set; }
public List<UpdateItem> Updates { get; set; }
}
UpdateItem is another class:
public class UpdateItem
{
public UpdateItem() { }
public string Title { get; set; }
public string KB { get; set; }
}
I create some dummy data:
private List<WorkstationItem> workstations = new List<WorkstationItem>();
workstations.Add(new WorkstationItem
{
Name = "PC01",
OS = "Windows Server 2019",
Updates = new List<UpdateItem>{
new UpdateItem { Title = "Test", KB = "KB123123" },
new UpdateItem { Title = "Test2", KB = "KB123123" }
}
});
workstations.Add(new WorkstationItem
{
Name = "PC02",
OS = "Windows Server 2016",
Updates = new List<UpdateItem>{
new UpdateItem { Title = "Test5", KB = "KB123123" },
new UpdateItem { Title = "Test3", KB = "KB123123" }
}
});
Now i show the workstations in a listbox:
<ListBox x:Name="lbPCs" ItemsSource="{Binding WorkstationItemList}">
<ListBox.ItemTemplate>
<DataTemplate>
<Grid >
<Grid.ColumnDefinitions>
<ColumnDefinition Width="100"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="40"/>
</Grid.RowDefinitions>
<StackPanel Grid.Column="0">
<TextBlock Text="{Binding Name}" FontSize="12" FontWeight="Bold" />
<TextBlock Text="{Binding OS}" FontSize="9" />
</StackPanel>
</Grid>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
ViewModel:
public ObservableCollection<WorkstationItem> WorkstationItemList { get; set; }
WorkstationManager workstationmanager = WorkstationManager.GetInstance();
WorkstationItemList = new ObservableCollection<WorkstationItem>();
foreach (var k in workstationmanager.GetUpdatelist())
{
WorkstationItemList.Add(k);
}
This is working fine ... but how can i show the List<UpdateItem> Updates in another list in relation to the selected workstation?
So i select a workstation in list1 and want to show the related updates in list2?
Thanks in advance!
Basically add another ListBox or ItemsControl that refers to SelectedItem of the existing ListBox and bind to the SelectedItem's Updates collection; roughly like (untested):
<ListBox ItemsSource="{Binding ElementName=lbPCs, Path=SelectedItem.Updates}">
<ListBox .ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal">
<!-- TODO improve alignment+layout -->
<TextBlock Text="{Binding KB}" />
<TextBlock Text="{Binding Title}" />
</StackPanel>
</DataTemplate>
<ListBox .ItemTemplate>
</ListBox>
In case you want to do something more complex with the selected item but to display its Updates, it might be more appropriate to bind the SelectedItem of lbPCs to some new ViewModel property and to bind the new ListBox' itemsource to that VM property's Updates collection.
It looks a little more complicated than it actually may be, but I had to use the ListView inside Listview the window. I brought in a DataTemplate as a Resource, but the problem is I can't access anything in the resource section, foreach and do go and check but I thought I didn't know where to start, I'll have to get the selectedIndex of a ListView (maybe with messagebox, say you clicked xxx index). I used this example, how Can I do it?
Update:
My XAML Window Resource
<Window.Resources>
<DataTemplate x:Key="InsideListTemplate">
<StackPanel Orientation="Vertical">
<Grid MinWidth="300" MinHeight="20">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="50"/>
<ColumnDefinition Width="100*"/>
</Grid.ColumnDefinitions>
<Border Background="{x:Static SystemParameters.WindowGlassBrush}" Grid.ColumnSpan="5" Opacity=".8"/>
<!--0-->
<Grid Grid.Row="0" Grid.Column="0" MinWidth="50" MaxWidth="70" HorizontalAlignment="Left" Margin="3,0,0,0">
<TextBlock Margin="5,0,0,0" Text="{Binding CodeNumber}" VerticalAlignment="Center" HorizontalAlignment="Center" TextAlignment="Center"/>
</Grid>
<!--1-->
<Grid Grid.Row="0" Grid.Column="3" MinWidth="300" MaxHeight="50" MinHeight="20" HorizontalAlignment="Left" Margin="5,0,0,0">
<Grid>
<TextBox Text="{Binding Code}"/>
</Grid>
</Grid>
</Grid>
</StackPanel>
</DataTemplate>
<DataTemplate x:Key="CodeListTemplate">
<StackPanel Orientation="Horizontal">
<Grid Background="{x:Static SystemParameters.WindowGlassBrush}" MinHeight="296" MinWidth="400" MaxHeight="296" MaxWidth="400">
<StackPanel Orientation="Vertical" VerticalAlignment="Center">
<TextBlock Text="{Binding CodeGroupName}" Foreground="White" TextAlignment="Center" HorizontalAlignment="Center" VerticalAlignment="Center"/>
</StackPanel>
</Grid>
<ListView HorizontalAlignment="Stretch" Background="#FFBB9B45" HorizontalContentAlignment="Stretch" MinWidth="100" MinHeight="25" MaxHeight="300" ItemsSource="{Binding CodeList}" ItemTemplate="{StaticResource InsideListTemplate}"/>
</StackPanel>
</DataTemplate>
</Window.Resources>
Main Listview
<ListView x:Name="KodListeleri" Visibility="Visible" Grid.Row="1" Background="CadetBlue" Margin="20,20,20,20" Foreground="#FFFBF7F7" BorderBrush="Transparent" ItemTemplate="{StaticResource CodeListTemplate}" VirtualizingStackPanel.IsVirtualizing="False"/>
Classes
public sealed class CodeLibrary
{
public int CodeGroupNumber { get; set; }
public string CodeGroupName { get; set; }
public List<Codes> CodeList { get; set; }
}
public class Codes
{
public int CodeNumber { get; set; }
public string Code { get; set; }
}
Last add some value
List<CodeLibrary> AllCodesList = new List<CodeLibrary>();
private void Window_Loaded(object sender, RoutedEventArgs e)
{
AllCodesList.Add(new CodeLibrary()
{
CodeGroupNumber = 1,
CodeGroupName = "My Code Group 1",
CodeList = new List<Codes>
{
new Codes {CodeNumber = 1, Code = "Code 1"},
new Codes {CodeNumber = 2, Code = "Code 2"},
new Codes {CodeNumber = 3, Code = "Code 3"},
new Codes {CodeNumber = 4, Code = "Code 4"},
new Codes {CodeNumber = 5, Code = "Code 5"},
new Codes {CodeNumber = 6, Code = "Code 6"},
new Codes {CodeNumber = 7, Code = "Code 7"},
new Codes {CodeNumber = 8, Code = "Code 8"},
new Codes {CodeNumber = 9, Code = "Code 9"},
new Codes {CodeNumber = 10, Code = "Code 10"},
new Codes {CodeNumber = 11, Code = "Code 11"},
new Codes {CodeNumber = 12, Code = "Code 12"},
new Codes {CodeNumber = 13, Code = "Code 13"},
new Codes {CodeNumber = 14, Code = "Code 14"},
new Codes {CodeNumber = 15, Code = "Code 15"},
new Codes {CodeNumber = 16, Code = "Code 16"},
new Codes {CodeNumber = 17, Code = "Code 17"},
new Codes {CodeNumber = 18, Code = "Code 18"},
new Codes {CodeNumber = 19, Code = "Code 19"},
new Codes {CodeNumber = 20, Code = "Code 20"},
}
}
);
KodListeleri.ItemsSource = AllCodesList;
}
It must look like this:
The quickest way to do this is to give the ListView a SelectionChanged event handler:
<ListView
SelectionChanged="CodeListView_SelectionChanged"
ItemsSource="{Binding CodeList}"
ItemTemplate="{StaticResource InsideListTemplate}"
...
And here's what the handler looks like in the window class:
private void CodeListView_SelectionChanged(object sender,
SelectionChangedEventArgs e)
{
var listView = sender as ListView;
var selectedCodes = listView.SelectedItem as Codes;
if (selectedCodes != null)
{
// Do stuff with selectedCodes
}
}
But you can do it MVVM style instead:
public sealed class CodeLibrary
{
public int CodeGroupNumber { get; set; }
public string CodeGroupName { get; set; }
public List<Codes> CodeList { get; set; }
private Codes _selectedCodes;
public Codes SelectedCodes {
get { return _selectedCodes; }
set {
if (value != _selectedCodes) {
_selectedCodes = value;
// Do other stuff here if you want
MessageBox.Info("You selected " + _selectedCodes.Code);
}
}
}
}
XAML:
<ListView
SelectedItem
ItemsSource="{Binding CodeList}"
ItemTemplate="{StaticResource InsideListTemplate}"
...
XAML goes like this:
<UserControl.Resources>
<!-- templates -->
<HierarchicalDataTemplate x:Key="ProjectSteps" ItemsSource="{Binding Steps}">
<TextBlock Text="{Binding Name}" />
</HierarchicalDataTemplate>
<HierarchicalDataTemplate x:Key="ProjectsOverview" ItemTemplate="{StaticResource ProjectSteps}">
<TextBlock Text="{Binding Name}" />
</HierarchicalDataTemplate>
</UserControl.Resources>
<TreeView HorizontalAlignment="Stretch" ItemsSource="{Binding Projects, UpdateSourceTrigger=PropertyChanged}" ItemTemplate="{StaticResource ProjectsOverview}">
</TreeView>
Projects is a property on my ViewModel, and it comes from this class:
public class ProjectsRepository : IProjectsRepository {
public IEnumerable<Project> GetProjects() {
return new List<Project> {
new Project {
Name = "Proj1",
Steps = new List<Step> {
new Step { Name = "Step1" },
new Step { Name = "Step2" },
new Step { Name = "Step3" }
}
},
new Project {
Name = "Proj2",
Steps = new List<Step> {
new Step { Name = "OtherStep1" },
new Step { Name = "OtherStep2" },
new Step { Name = "OtherStep3" },
new Step { Name = "OtherStep4" }
}
} };
}
}
First level items (Proj1, Proj2) are displayed, but the second level items (so each Step or OtherStep) are not. I can't even see the dropdown indicator next to the project name, so it seems that the second ProjectSteps template is not rendered anywhere. Suggestions?
Instead of in ProjectSteps set ItemsSource in ProjectsOverview
<HierarchicalDataTemplate x:Key="ProjectsOverview" ItemsSource="{Binding Steps}"
Recently I started building my own big Windows 8 Store App.
Working on UI I started replicating some good UIs.
One I met very interesting animation of inserting new elements in list view in standard Mail app. When you click on chain it expands and shows all messages in chain.
Here is captured video.
I have no idea what technique did they use to achieve this animation and behavior.
Can anyone help me, explain or give example how can I achieve such behavior? Thanks.
The mail app is written in JavaScript, so it won't help you much to know how it was done since this UI stack is quite different than the XAML one. The thing though is that the list controls are likely animated the same way, so you only need to add/remove some items in the list to get the expansion/collapse effect.
I played with it for a bit and this is what I came up with that uses ListView's ItemTemplateSelector property to define a few different item templates.
<Page
x:Class="App82.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:App82"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d">
<Page.Resources>
<local:CollapsibleListItemTemplateSelector
x:Key="collapsibleListItemTemplateSelector">
<local:CollapsibleListItemTemplateSelector.BasicItemTemplate>
<DataTemplate>
<Border
Margin="5"
Height="50"
VerticalAlignment="Stretch"
BorderBrush="ForestGreen"
BorderThickness="2,0,0,0">
<StackPanel
Margin="10,0,0,0">
<TextBlock
FontWeight="Bold"
Text="{Binding Title}" />
<TextBlock
Text="{Binding Gist}" />
</StackPanel>
</Border>
</DataTemplate>
</local:CollapsibleListItemTemplateSelector.BasicItemTemplate>
<local:CollapsibleListItemTemplateSelector.ExpandedItemTemplate>
<DataTemplate>
<Border
Margin="15,5,5,5"
Height="50"
VerticalAlignment="Stretch"
BorderBrush="Yellow"
BorderThickness="2,0,0,0">
<StackPanel
Margin="10,0,0,0">
<TextBlock
FontWeight="Bold"
Text="{Binding Title}" />
<TextBlock
Text="{Binding Gist}" />
</StackPanel>
</Border>
</DataTemplate>
</local:CollapsibleListItemTemplateSelector.ExpandedItemTemplate>
<local:CollapsibleListItemTemplateSelector.CollapsibleItemTemplate>
<DataTemplate>
<Border
Margin="5"
Height="50"
VerticalAlignment="Stretch"
BorderBrush="DodgerBlue"
BorderThickness="2,0,0,0">
<StackPanel
Margin="10,0,0,0"
Orientation="Horizontal">
<TextBlock
FontWeight="Bold"
Text="{Binding ChildItems.Count}" />
<TextBlock
FontWeight="Bold"
Text=" Items" />
</StackPanel>
</Border>
</DataTemplate>
</local:CollapsibleListItemTemplateSelector.CollapsibleItemTemplate>
</local:CollapsibleListItemTemplateSelector>
</Page.Resources>
<Grid
Background="{StaticResource ApplicationPageBackgroundThemeBrush}">
<ListView
x:Name="ListView"
ItemTemplateSelector="{StaticResource collapsibleListItemTemplateSelector}"
ItemClick="OnItemClick"
IsItemClickEnabled="True" />
</Grid>
</Page>
Code behind:
using System.Collections;
using System.Collections.Generic;
using System.Collections.ObjectModel;
using App82.Common;
using Windows.UI.Xaml;
using Windows.UI.Xaml.Controls;
namespace App82
{
public sealed partial class MainPage : Page
{
public MainPage()
{
this.InitializeComponent();
var items = new ObservableCollection<BindableBase>();
var item1 = new BasicItem { Title = "Item 1", Gist = "This item has some content that is not fully shown..." };
var item2 = new ExpandedItem { Title = "Item 2", Gist = "This item has some content that is not fully shown..." };
var item3 = new ExpandedItem { Title = "Item 3", Gist = "This item has some content that is not fully shown..." };
var item4 = new ExpandedItem { Title = "Item 4", Gist = "This item has some content that is not fully shown..." };
var item5 = new BasicItem { Title = "Item 5", Gist = "This item has some content that is not fully shown..." };
var itemGroup1 = new CollapsibleItem(items, new[] { item2, item3, item4 });
items.Add(item1);
items.Add(itemGroup1);
items.Add(item5);
this.ListView.ItemsSource = items;
}
private void OnItemClick(object sender, ItemClickEventArgs e)
{
var collapsibleItem = e.ClickedItem as CollapsibleItem;
if (collapsibleItem != null)
collapsibleItem.ToggleCollapse();
}
}
public class CollapsibleListItemTemplateSelector : DataTemplateSelector
{
public DataTemplate BasicItemTemplate { get; set; }
public DataTemplate CollapsibleItemTemplate { get; set; }
public DataTemplate ExpandedItemTemplate { get; set; }
protected override Windows.UI.Xaml.DataTemplate SelectTemplateCore(object item, Windows.UI.Xaml.DependencyObject container)
{
if (item is ExpandedItem)
return ExpandedItemTemplate;
if (item is BasicItem)
return BasicItemTemplate;
//if (item is CollapsibleItem)
return CollapsibleItemTemplate;
}
}
public class BasicItem : BindableBase
{
#region Title
private string _title;
public string Title
{
get { return _title; }
set { this.SetProperty(ref _title, value); }
}
#endregion
#region Gist
private string _gist;
public string Gist
{
get { return _gist; }
set { this.SetProperty(ref _gist, value); }
}
#endregion
}
public class ExpandedItem : BasicItem
{
}
public class CollapsibleItem : BindableBase
{
private readonly IList _hostCollection;
#region IsExpanded
private bool _isExpanded;
public bool IsExpanded
{
get { return _isExpanded; }
set
{
if (this.SetProperty(ref _isExpanded, value))
{
if (_isExpanded)
Expand();
else
Collapse();
}
}
}
#endregion
#region ChildItems
private ObservableCollection<BasicItem> _childItems;
public ObservableCollection<BasicItem> ChildItems
{
get { return _childItems; }
set { this.SetProperty(ref _childItems, value); }
}
#endregion
public CollapsibleItem(
IList hostCollection,
IEnumerable<BasicItem> childItems)
{
_hostCollection = hostCollection;
_childItems = new ObservableCollection<BasicItem>(childItems);
}
public void ToggleCollapse()
{
IsExpanded = !IsExpanded;
}
private void Expand()
{
int i = _hostCollection.IndexOf(this) + 1;
foreach (var childItem in ChildItems)
{
_hostCollection.Insert(i++, childItem);
}
}
private void Collapse()
{
int i = _hostCollection.IndexOf(this) + 1;
for (int index = 0; index < ChildItems.Count; index++)
{
_hostCollection.RemoveAt(i);
}
}
}
}