treeview binding wpf cannot bind nested property in a class
- by devnet247
Hi all
New to wpf and therefore struggling a bit.
I am putting together a quick demo before we go for the full implementation
I have a treeview on the left with
Continent
Country
City structure
when a user select the city it should populate some textboxes in a tabcontrol on the right hand side
I made it sort of work but cannot make it work with composite objects.
In a nutshell can you spot what is wrong with my zaml or code.
Why is not binding to a my CityDetails.ClubsCount or CityDetails.PubsCount?
What I am building is based on http://www.codeproject.com/KB/WPF/TreeViewWithViewModel.aspx
Thanks a lot for any suggestions or reply
DataModel
public class City
{
public City(string cityName)
{
CityName = cityName;
}
public string CityName { get; set; }
public string Population { get; set; }
public string Area { get; set; }
public CityDetails CityDetailsInfo { get; set; }
}
public class CityDetails
{
public CityDetails(int pubsCount,int clubsCount)
{
PubsCount = pubsCount;
ClubsCount = clubsCount;
}
public int ClubsCount { get; set; }
public int PubsCount { get; set; }
}
ViewModel
public class CityViewModel : TreeViewItemViewModel
{
private City _city;
private RelayCommand _testCommand;
public CityViewModel(City city, CountryViewModel countryViewModel):base(countryViewModel,false)
{
_city = city;
}
public string CityName
{
get { return _city.CityName; }
}
public string Area
{
get { return _city.Area; }
}
public string Population
{
get { return _city.Population; }
}
public City City
{
get { return _city; }
set { _city = value; }
}
public CityDetails CityDetailsInfo
{
get { return _city.CityDetailsInfo; }
set { _city.CityDetailsInfo = value; }
}
}
XAML
<DockPanel>
<DockPanel LastChildFill="True">
<Label DockPanel.Dock="top" Content="Title " HorizontalAlignment="Center"></Label>
<StatusBar DockPanel.Dock="Bottom">
<StatusBarItem Content="Status Bar" ></StatusBarItem>
</StatusBar>
<Grid DockPanel.Dock="Top">
<Grid.ColumnDefinitions>
<ColumnDefinition/>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="2*"/>
</Grid.ColumnDefinitions>
<TreeView Name="tree" ItemsSource="{Binding Continents}">
<TreeView.ItemContainerStyle>
<Style TargetType="{x:Type TreeViewItem}">
<Setter Property="IsExpanded" Value="{Binding IsExpanded,Mode=TwoWay}"/>
<Setter Property="IsSelected" Value="{Binding IsSelected,Mode=TwoWay}"/>
<Setter Property="FontWeight" Value="Normal"/>
<Style.Triggers>
<Trigger Property="IsSelected" Value="True">
<Setter Property="FontWeight" Value="Bold"></Setter>
</Trigger>
</Style.Triggers>
</Style>
</TreeView.ItemContainerStyle>
<TreeView.Resources>
<HierarchicalDataTemplate DataType="{x:Type ViewModels:ContinentViewModel}"
ItemsSource="{Binding Children}">
<StackPanel Orientation="Horizontal">
<Image Width="16" Height="16" Margin="3,0" Source="Images\Continent.png"/>
<TextBlock Text="{Binding ContinentName}"/>
</StackPanel>
</HierarchicalDataTemplate>
<HierarchicalDataTemplate DataType="{x:Type ViewModels:CountryViewModel}"
ItemsSource="{Binding Children}">
<StackPanel Orientation="Horizontal">
<Image Width="16" Height="16" Margin="3,0" Source="Images\Country.png"/>
<TextBlock Text="{Binding CountryName}"/>
</StackPanel>
</HierarchicalDataTemplate>
<DataTemplate DataType="{x:Type ViewModels:CityViewModel}" >
<StackPanel Orientation="Horizontal">
<Image Width="16" Height="16" Margin="3,0" Source="Images\City.png"/>
<TextBlock Text="{Binding CityName}"/>
</StackPanel>
</DataTemplate>
</TreeView.Resources>
</TreeView>
<GridSplitter Grid.Row="0" Grid.Column="1" Background="LightGray"
Width="5" HorizontalAlignment="Stretch" VerticalAlignment="Stretch"/>
<Grid Grid.Column="2" Margin="5" >
<TabControl>
<TabItem Header="Details" DataContext="{Binding Path=SelectedItem.City, ElementName=tree, Mode=OneWay}">
<StackPanel >
<TextBlock VerticalAlignment="Center" FontSize="12" Text="{Binding CityName}"/>
<TextBlock VerticalAlignment="Center" FontSize="12" Text="{Binding Area}"/>
<TextBlock VerticalAlignment="Center" FontSize="12" Text="{Binding Population}"/>
<!-- DONT WORK WHY-->
<TextBlock VerticalAlignment="Center" FontSize="12" Text="{Binding SelectedItem.CityDetailsInfo.ClubsCount}"/>
<TextBlock VerticalAlignment="Center" FontSize="12" Text="{Binding SelectedItem.CityDetailsInfo.PubsCount}"/>
</StackPanel>
</TabItem>
</TabControl>
</Grid>
</Grid>
</DockPanel>
</DockPanel>
