WPF XAML bind resource key to property - wpf

I have a set of icons stored in a file named Icons.xaml in MyProject/Resource.
<!-- Icons.xaml -->
<DrawingImage x:Key="CounterClockWiseDirection">...</DrawingImage>
<DrawingImage x:Key="ClockWiseDirection">...</DrawingImage>
In my ViewModel there's a property named ClockWiseDirection which should control this image.
<!-- MyControUC.xaml -->
<ListBox ItemsSource="{Binding ItemList}" SelectedItem="{Binding SelectedItemFromList}">
<ListBox.ItemTemplate>
<DataTemplate>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="70*" />
<ColumnDefinition Width="10*" />
<ColumnDefinition Width="10*" />
<ColumnDefinition Width="10*" />
</Grid.ColumnDefinitions>
<TextBlock Grid.Column="0" Text="{Binding Name}" />
<Image Grid.Column="1" />
<Image Grid.Column="2" Source="{StaticResource CurrentItem.ClockWiseDirection}" />
<Image Grid.Column="3" />
</Grid>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
This obviously doesn't work, I'm quite new to WPF so I'm bit confused about the solution to use/look.

It seems like you are trying to return a resource key from the view model. You might as well return the actual DrawingImage instead and bind to it in your XAML markup:
Source="{Binding ClockWiseDirection}"
If the resource that is defined in your Icons.xaml ResourceDictionary is in scope, you could get a reference to it by calling FindResource and cast the result:
ClockWiseDirection = `FindResource("CounterClockWiseDirection") as DrawingImage;`
The other option is to create a ResourceDictionary object dynamically and get the resource from there:
ResourceDictionary rd = new ResourceDictionary() { Source = new Uri("Themes/generic.xaml", UriKind.RelativeOrAbsolute) };
ClockWiseDirection = rd["CounterClockWiseDirection"] as DrawingImage;

Related

How can I set the binding for a control's property (which is inside DataTemplate and UserControl) to use the ItemSource's given property?

I would like to make a UserControl which have a DataTemplate, and inside that DataTemplate there are controls. I would like to bind to those nested (inside the DataTemplate) controls' properties so I can set them when I reuse this UserControl. The nested controls will use the ItemSource's properties but the property names of the ItemSource's properties could be different.
The UserControl:
<UserControl x:Class="ContextMenu.BaseFilterUserControl"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
mc:Ignorable="d"
x:Name="Self">
<Grid Margin="10">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="80" />
<ColumnDefinition Width="auto" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="70" />
</Grid.RowDefinitions>
<TextBlock Grid.Column="0"
VerticalAlignment="Center"
HorizontalAlignment="Right"
Margin="10"
Text="Owners" />
<Button Grid.Column="1"
VerticalAlignment="Center"
HorizontalAlignment="Center"
Margin="10"
Click="FilteButtonClicked"
Width="40"
Height="40"
x:Name="FilterButton">
<Popup x:Name="FilterBoxPopup"
PlacementTarget="{Binding ElementName=FilterButton}"
Placement="Bottom"
StaysOpen="False">
<Border BorderBrush="Black"
Background="White"
Margin="2">
<ListView ItemsSource="{Binding ElementName=Self, Path=FilterList}"
x:Name="FilterListView"
Height="300"
Width="150">
<ListView.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal">
<!--<CheckBox IsChecked="{Binding IsChecked}" />-->
<!--<TextBlock Text="{Binding Name}" />-->
<!--This is where I don't know how to properly bind eg. the above control, things I tried:-->
<!--<TextBlock Text="{Binding ElementName=FilterListView, Path=FilterElementName}" />-->
<!--<TextBlock Text="{Binding ElementName=Self, Path=DataContext.FilterElementName}" />-->
<!--<TextBlock Text="{Binding ElementName=FilterListView, Path=DataContext.FilterElementName}" />-->
</StackPanel>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
</Border>
</Popup>
</Button>
<TextBlock Grid.Column="3"
VerticalAlignment="Center"
HorizontalAlignment="Left"
Margin="10"
Text="{Binding ElementName=Self, Path=SelectedNames}" />
</Grid>
</UserControl>
This how the UserControl is used, the FilterElementName="Name" is what I would like to set, depending on the list binded with FilterList list:
<local:BaseFilterUserControl FilterList="{Binding Owners}"
FilterElementName="Name"
SelectedNames="{Binding SelectedNames}"/>
In this case the Owners is a simple IReadOnlyList of an Owner class. The Owner class has a string Name property. But I will use this UserControl again with different list eg. where I would like to use the Versions list's Release property (for the TextBlock inside the UserControl):
<local:BaseFilterUserControl FilterList="{Binding Versions}"
FilterElementName="Release"
SelectedNames="{Binding SelectedReleases}"/>
The ListView is properly populated with items, so the FilterList DependencyProperty is working. But the nested controls are only working when I hard code the bindings:
<TextBlock Text="{Binding Name}" />
For this to work you would need to bind the Path-property of your TextBlocks Text-Binding to the FilterElementName property of your UserControl. Unfortunately the Path property of the Binding class is not a DependencyProperty and therefore not bindable.
One way to to achieve your goal would be to use the DisplayMemberPath property of the ListView, which is bindable:
<ListView x:Name="FilterListView"
Width="150"
Height="300"
ItemsSource="{Binding ElementName=Self, Path=FilterList}"
DisplayMemberPath="{Binding ElementName=self, Path=FilterElementName}"/>
If this approach does not work because you need to specify a more complex ItemTemplate, another way would be create a property of type DataTemplate in your UserControl, use that as ItemTemplate in the ListView and specify it from outside like so:
<local:BaseFilterUserControl FilterList="{Binding Versions}"
SelectedNames="{Binding SelectedReleases}">
<local:BaseFilterUserControl.ItemTemplate>
<DataTemplate>
<TextBlock Text="{Binding Release}" />
</DataTemplate>
</local:BaseFilterUserControl.ItemTemplate>
</local:BaseFilterUserControl>

Why does a String DataTemplate cause a stack overflow exception?

I have a couple of DataTemplates defined in the resources of a ContentControl:
<DataTemplate DataType="{x:Type sys:String}">
<Label Content="{Binding}" HorizontalContentAlignment="Center" />
</DataTemplate>
<DataTemplate DataType="{x:Type dmodels:CBClient}"> <!-- Client Details Template -->
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<TextBlock Grid.Column="0" Text="Client Details" Background="{StaticResource brush_Client}" Foreground="White" Margin="0,0,1,0" VerticalAlignment="Center" />
<TextBlock Grid.Column="1" Text="Id:" Background="{StaticResource brush_Client}" Foreground="White" />
<TextBlock Grid.Column="2" Text="{Binding Path=ClientId}" Background="{StaticResource brush_Client}" Foreground="White" Margin="0,0,1,0" />
<Button Grid.Column="3" Style="{StaticResource EditButton}" />
</Grid>
</DataTemplate>
If I return a CBClient object, I get the proper display from the defined DataTemplate.
If I return a string, I get a StackOverflowException.
If I eliminate the String DataTemplate and return a string, I get the string displayed, but not formatted as I want it.
What am I doing wrong? Do I have to wrap the basic string return into a full class, and expose a message property? Is there no way to combine complex objects with integral types for DataTemplates?
Thanks.
J
You introduced a complication by using a Label. It automatically generates a textblock if you bind to a string. Binding in that way has an odd effect if you rely on it automatically adding the textblock. I should think it's because it sees an object rather than a string from the type of the property you're binding.
You could just do:
<DataTemplate DataType="{x:Type sys:String}">
<Label HorizontalContentAlignment="Center">
<TextBlock Text="{Binding}" />
</Label>
</DataTemplate>

WPF and MVVM - changing themes dynamically

I'm working on a WPF project using MVVM and I'm trying to implement a feature that changes the theme dynamically. The theming info is located in separate xaml files (ie Theme1.xaml, Theme2.xaml). I want to do the actual theme changing in the ViewModel class rather than in the code behind file of View.xaml for various reasons.
I've tried a couple ideas but can't get anything to work:
I tried binding the ResourceDictionary of View to a variable in ViewModel but am told that a binding cannot be set on the Source property of type ResourceDictionary
I don't have any sort of View object in my ViewModel class on which to call a "UpdateTheme" method
Any ideas on how I can change the MergedDictionary reference in my View class from the ViewModel class?
Thanks!
I have worked with the same time problem earlier here what i did in my case may be it can help you out.
Copy all you theme files (theme1.xaml, theme2.xaml...) into Themes folder at you exe path. and try with below sample code. using Bindings
C#:
private void ChangeTheme(FileInfo _SelectTheme)
{
App.Current.Resources.Clear();
App.Current.Resources.Source = new Uri(_SelectTheme.FullName, UriKind.Absolute);
}
private ObservableCollection<FileInfo> _files;
public ObservableCollection<FileInfo> Files
{
get { return _files; }
set { _files = value; OnChanged("Files"); }
}
public MainWindow()
{
this.InitializeComponent();
Dispatcher.BeginInvoke(DispatcherPriority.Background, new Action(() =>
{
var localthemes = new System.IO.DirectoryInfo("Themes").GetFiles();
if (Files == null)
Files = new ObservableCollection<FileInfo>();
foreach (var item in localthemes)
{
Files.Add(item);
}
SelectedTheme = Files[0];
}));
this.DataContext = this;
}
public event PropertyChangedEventHandler PropertyChanged;
public void OnChanged(string name)
{
if (PropertyChanged != null)
PropertyChanged(this, new PropertyChangedEventArgs(name));
}
XAML:
<Window x:Class="WPFTheme.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
x:Name="Window"
Title="MainWindow"
Width="640"
Height="480">
<Grid x:Name="LayoutRoot" Background="{DynamicResource DisabledForegroundBrush}">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="0.285*" />
<ColumnDefinition Width="0.365*" />
<ColumnDefinition Width="0.35*" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="0.132*" />
<RowDefinition Height="0.162*" />
<RowDefinition Height="0.403*" />
<RowDefinition Height="0.168*" />
<RowDefinition Height="0.135*" />
</Grid.RowDefinitions>
<Button Width="57"
Margin="15,13,0,10.872"
HorizontalAlignment="Left"
Content="Enabled" />
<Button Width="72"
Margin="0,14,17.12,10.872"
HorizontalAlignment="Right"
Content="Disabled"
IsEnabled="False" />
<TextBlock Grid.Column="1"
Width="69"
Margin="11.88,15,0,27.872"
HorizontalAlignment="Left"
Text="TextBlock"
TextWrapping="Wrap" />
<TextBox Grid.Column="1"
Width="64"
Height="21"
Margin="9.88,0,0,4.872"
HorizontalAlignment="Left"
VerticalAlignment="Bottom"
Text="TextBox"
TextWrapping="Wrap" />
<TextBox Grid.Column="1"
Height="21"
Margin="88.88,0,35.8,3.872"
VerticalAlignment="Bottom"
IsEnabled="False"
Text="TextBox Disabled"
TextWrapping="Wrap" />
<CheckBox Grid.Row="1"
Width="71"
Height="14"
Margin="11,7.128,0,0"
HorizontalAlignment="Left"
VerticalAlignment="Top"
Content="CheckBox" />
<CheckBox Grid.Row="1"
Width="71"
Height="14"
Margin="0,8.128,15.12,0"
HorizontalAlignment="Right"
VerticalAlignment="Top"
Content="Disabled"
IsEnabled="False" />
<ComboBox Grid.Column="2"
Width="94"
Margin="8.2,18,0,11.872"
HorizontalAlignment="Left"
ItemsSource="{Binding Files}"
SelectedItem="{Binding SelectedTheme,
Mode=TwoWay,
UpdateSourceTrigger=PropertyChanged}" />
<ComboBox Grid.Column="2"
Width="94"
Margin="0,17,14,12.872"
HorizontalAlignment="Right"
IsEnabled="False"
ItemsSource="{Binding Files}" />
<DataGrid Grid.Row="2"
Grid.Column="1"
Margin="8.88,6.876,7.8,62.862"
AutoGenerateColumns="True"
ItemsSource="{Binding Files}" />
<DatePicker Grid.Row="2"
Height="23"
Margin="10,0,15,147"
VerticalAlignment="Bottom" />
<GroupBox Grid.Row="2"
Grid.Column="2"
Margin="6.2,2.876,6,5.862"
Header="GroupBox">
<ScrollViewer Margin="6,0.723,1,1" ScrollViewer.HorizontalScrollBarVisibility="Visible">
<ListBox Width="161"
Height="108"
ItemsSource="{Binding Files}" />
</ScrollViewer>
</GroupBox>
<ListView Grid.Row="2"
Grid.Column="1"
Height="59"
Margin="12.88,0,5.8,-4.138"
VerticalAlignment="Bottom"
ItemsSource="{Binding Files}">
<ListView.View>
<GridView>
<GridViewColumn Header="File Name">
<GridViewColumn.CellTemplate>
<DataTemplate>
<TextBlock Text="{Binding Name}" />
</DataTemplate>
</GridViewColumn.CellTemplate>
</GridViewColumn>
</GridView>
</ListView.View>
</ListView>
<ProgressBar x:Name="progressBar"
Grid.Row="1"
Grid.Column="1"
Height="20"
Margin="5.88,6.128,61.8,0"
VerticalAlignment="Top"
Value="50" />
<RadioButton Grid.Row="1"
Width="64"
Margin="11,25.128,0,29.124"
HorizontalAlignment="Left"
Content="RadioButton" />
<RadioButton Grid.Row="1"
Width="51"
Margin="0,25.128,33.12,29.124"
HorizontalAlignment="Right"
Content="RadioButton"
IsEnabled="False" />
<Slider Grid.Row="1"
Grid.Column="1"
Margin="11.88,34.128,38.8,15.124"
AutoToolTipPlacement="BottomRight"
Maximum="{Binding Maximum,
ElementName=progressBar}"
Minimum="{Binding Minimum,
ElementName=progressBar}"
Value="{Binding Value,
ElementName=progressBar}" />
<TabControl Grid.Row="1"
Grid.Column="2"
Margin="7.2,9.128,9,0.124">
<TabItem Header="TabItem">
<Grid Background="#FFE5E5E5" />
</TabItem>
<TabItem Header="TabItem">
<Grid Background="#FFE5E5E5" />
</TabItem>
</TabControl>
<TreeView Grid.Row="3"
Margin="8,5.138,12.12,1.79"
ItemsSource="{Binding Files}" />
<ToolBar Grid.Row="4"
Grid.ColumnSpan="2"
Margin="10,9.21,104.8,17">
<Button />
<CheckBox />
<ComboBoxItem />
<MenuItem />
<Separator />
<TabItem />
</ToolBar>
</Grid>
</Window>
I handle Theme switching at start-up in my application like this.
Application.Current.Resources.MergedDictionaries.Clear();
Application.Current.Resources.MergedDictionaries.Add(Themes.Where(p => p.Value.ThemeName == "MyTheme").SingleOrDefault().Value.Theme);
I first clear the Dictionaries to remove any preset Theme. I do this as I use a default theme in the editor, and then during run-time switch depending on the users configuration.
I restart the application to load the new theme, but as you save the states etc in your ViewModel you should be able to reload the UI without having to completely restart the application. This was however not an requirement for my project, so I never went that far.
You could probably just pass on the name of your theme from the View, and then parse it using logic from your ViewModel.
Your problem is that you are trying to change the View directly from your ViewModel, which is not allowed. You need to come up with a more passive solution based on property bindings.
My approach would be have a small piece of code the your main view's code-behind that switches resource files in your merged dictionaries, and the way it does this can be disctated by the value of a property in your ViewModel that it is bound to. A small amount of code-behind to support View-centric behaviour is allowed in MVVM.

Source versus DataContext in XAML

Which of these methods is best?
<Window.Resources>
<sys:Int16 x:Key="MyValue">123</sys:Int16>
</Window.Resources>
<StackPanel>
<!-- method 1 -->
<TextBlock Text="{Binding}" DataContext="{StaticResource MyValue}" />
<!-- method 2 -->
<TextBlock Text="{Binding, Source={StaticResource MyValue}}" />
</StackPanel>
As with many "which is better" questions. I would say that "it depends" on the context.
They both exist because they both can serve a purpose in different contexts. Given only what you have shown above, I would choose Example 2.
When you set the DataContext, however, all of its children will inherit that DataContext. So maybe instead you are using a Button. And within you Button, you want to jazz it up a bit and display the text four times each with a different color. As you can see below, I would then choose Example 1.
Example 1: (note the DataContext is on the button, and the TextBlocks don't need the Source like they do in Example 2)
<Button DataContext="{StaticResource MyValue}" Height="Auto" Width="Auto" HorizontalAlignment="Center" VerticalAlignment="Center">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition />
<ColumnDefinition />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition />
<RowDefinition />
</Grid.RowDefinitions>
<TextBlock Grid.Row="0" Grid.Column="0" Text="{Binding}" Foreground="Red" />
<TextBlock Grid.Row="1" Grid.Column="0" Text="{Binding}" Foreground="Blue" />
<TextBlock Grid.Row="0" Grid.Column="1" Text="{Binding}" Foreground="Yellow"/>
<TextBlock Grid.Row="1" Grid.Column="1" Text="{Binding}" Foreground="Green" />
</Grid>
</Button>
Example 2:
<Button Height="Auto" Width="Auto" HorizontalAlignment="Center" VerticalAlignment="Center">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition />
<ColumnDefinition />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition />
<RowDefinition />
</Grid.RowDefinitions>
<TextBlock Grid.Row="0" Grid.Column="0" Text="{Binding, Source={StaticResource MyValue}}" Foreground="Red" />
<TextBlock Grid.Row="1" Grid.Column="0" Text="{Binding, Source={StaticResource MyValue}}" Foreground="Blue" />
<TextBlock Grid.Row="0" Grid.Column="1" Text="{Binding, Source={StaticResource MyValue}}" Foreground="Yellow"/>
<TextBlock Grid.Row="1" Grid.Column="1" Text="{Binding, Source={StaticResource MyValue}}" Foreground="Green" />
</Grid>
</Button>
When you're binding to a simple object that only has one representation like an Int16 in your case, you're probably only going to bind and display that value once, and thus option 2 makes most sense.
A good rule of thumb... if you find yourself setting the 'Source' to the same thing more than one binding, you should probably just bind the DataContext of a common parent FrameworkElement.
I would say that if I had to choose between the two, I would go with method 2. DataContext is really more for Databinding an item to a more complex underlying object and eases the databinding of many data values.
Just out of curiosity, why are you doing it this way? Does your code change the value of MyValue at some point? Is there no better way for you to do it for some reason?
The DataContenxt DependencyProperty allows you to easily bind across all of proeprties for a DependencyObject.
The Source DependenceyProperty of a Binding allows you to point that specific binding to the source you want, regardless of the DataContext.
This becomes really helpful when you are doing more complex bindings for ListViews. For instance:
<Window.Resources>
<local:MyConverter x:Key="MyConverter" />
</Window.Resources>
<Grid>
<ComboBox ItemsSource="{Binding Source={StaticResource MyConverter}, Path=DisplayValues}" DataContenxt={Binding ElementName=lvwItems Path=SelectedItem} SelectedItem="{Binding Converter={StaticResource MyConverter}"/>
<ListView Name="lvwItems"......
The above example just shows off that I set the itemssource to a property in the 'MyConverter' called DisplayValues, the datacontext is what I am working with on that combobox though, which is handling the SelectedItem property of the ListView named 'lvwItems'.
Hope this helps.

TreeView, ObjectDataProvider, HierarchicalDataTemplate, xsd2Code not showing anything

I have an object hierarchy created with xsd2code. The object hierarchy
consist of a root object of type Project which contains an ObservableCollection
of Folder named folder which is a recursive object containing ObservableCollection
of Folder named folder and File named file
I want to bind this object hierarchy to a TreeView thru an ObjectDataProvider
and control the display thru HierarchicalDataTemplate definitions
The ObjectDataProvider and DataTemplates are defined in a resource merged in App.xaml like this
<HierarchicalDataTemplate x:Key="projectTemplate"
DataType="{x:Type model:Project}"
ItemsSource="{Binding Path=folder}"
>
<Grid ToolTip="{Binding Path=Name}">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="16" />
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Image Source="Images/folder_documents_512.ico" Grid.Column="0"/>
<TextBlock Grid.Column="1" Margin="6,0,0,0"
Text="{Binding Path=Name}"
/>
</Grid>
</HierarchicalDataTemplate>
<HierarchicalDataTemplate
DataType="{x:Type model:Folder}"
ItemsSource="{Binding Path=file}">
<Grid ToolTip="{Binding Path=name}">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="16" />
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Image Source="Images/folder_vectors_512.ico" Grid.Column="0"/>
<TextBlock Grid.Column="1" Margin="6,0,0,0"
Text="{Binding Path=name}"
/>
</Grid>
</HierarchicalDataTemplate>
<DataTemplate
DataType="{x:Type model:File}">
<Grid ToolTip="{Binding Path=name}">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="16" />
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Image Source="Images/article-24.png" Grid.Column="0"/>
<TextBlock Grid.Column="1" Margin="6,0,0,0"
Text="{Binding Path=name}"
/>
</Grid>
</DataTemplate>
<ObjectDataProvider
x:Key="project"
>
</ObjectDataProvider>
The TreeView is defined like this
<TreeView x:Name="tvProject"
ItemsSource="{Binding Source={StaticResource project}}"
>
The global processing is : I load the object hierarchy from an Xml file (xsd2code functionality). As I can see in debug my object hierarchy is clean.
Then, I bind the object hierarchy to the ObjectDataProvider in code like this
ObjectDataProvider dp = Application.Current.FindResource("project") as ObjectDataProvider;
dp.ObjectInstance = _project;
Well, nothing appears in the TreeView.
What am I missing ?
I resolved my issue,
First, I had to bound a collection to the ObjectDataProvider and not just a single object. I donĀ“t think this is an ObjectDataProvider requirement but more a requirement for HierarchicalDataTemplate.
ObjectDataProvider dp = Application.Current.FindResource("project") as ObjectDataProvider;
ArrayList ocp = new ArrayList();
ocp.Add(_project);
dp.ObjectInstance = ocp;
Then I had to chain the reference to the different DataTemplates thru the ItemTemplate property like this:
First on the TreeView
<TreeView x:Name="tvProject"
ItemsSource="{Binding Source={StaticResource project}}"
ItemTemplate="{StaticResource projectTemplate}"
>
And then in the diferent DataTemplate
<DataTemplate x:Key="fileTemplate"
DataType="{x:Type model:File}">
<Grid ToolTip="{Binding Path=name}">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="16" />
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Image Source="Images/article-24.png" Grid.Column="0"/>
<TextBlock Grid.Column="1" Margin="6,0,0,0"
Text="{Binding Path=name}"
/>
</Grid>
</DataTemplate>
<HierarchicalDataTemplate x:Key="folderTemplate"
DataType="{x:Type model:Folder}"
ItemsSource="{Binding Path=file}"
ItemTemplate="{StaticResource fileTemplate}">
<Grid ToolTip="{Binding Path=name}">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="16" />
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Image Source="Images/folder_vectors_512.ico" Grid.Column="0"/>
<TextBlock Grid.Column="1" Margin="6,0,0,0"
Text="{Binding Path=name}"
/>
</Grid>
</HierarchicalDataTemplate>
<HierarchicalDataTemplate x:Key="projectTemplate"
DataType="{x:Type model:Project}"
ItemsSource="{Binding Path=folder}"
ItemTemplate="{StaticResource folderTemplate}"
>
<Grid ToolTip="{Binding Path=Name}">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="16" />
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Image Source="Images/folder_documents_512.ico" Grid.Column="0"/>
<TextBlock Grid.Column="1" Margin="6,0,0,0"
Text="{Binding Path=Name}"
/>
</Grid>
</HierarchicalDataTemplate>
Now it works
EDIT
Since Collection can give back different types (i.e Folder and File)
you need a template selector
public class FileSystemObjectTemplateSelector : DataTemplateSelector
{
public override DataTemplate
SelectTemplate(object item, DependencyObject container)
{
FrameworkElement element = container as FrameworkElement;
if (element != null && item != null && item is FileSystemObject)
{
if (item is File)
return Application.Current.FindResource("fileTemplate") as DataTemplate;
if (item is Folder)
return Application.Current.FindResource("folderTemplate") as DataTemplate;
}
return null;
}
}
and the call it in the XAML
<local:FileSystemObjectTemplateSelector x:Key="FileSystemObjectTemplateSelector" />
<HierarchicalDataTemplate x:Key="folderTemplate"
DataType="{x:Type model:Folder}"
ItemsSource="{Binding Path=fsObjects, Converter={StaticResource SortFoldersAndFiles}}"
ItemTemplateSelector="{StaticResource FileSystemObjectTemplateSelector}" >
</HierarchicalDataTemplate>

Resources