We Keep Coding

UWP TreeView crash

I have a TreeView (I almost copied the same code from XAML Controls Gallary):
<TreeView
x:Name="LocalFolderTreeView"
ItemTemplateSelector="{StaticResource FolderTreeTemplateSelector}"
ItemsSource="{x:Bind Tree, Mode=OneWay}"
Visibility="Collapsed" />
And the XAML of ItemTemplateSelector:
<DataTemplate x:Key="FolderTemplate" x:DataType="data:FolderTree">
<TreeViewItem
DoubleTapped="FolderTreeItem_DoubleTapped"
IsDoubleTapEnabled="True"
IsExpanded="False"
ItemsSource="{x:Bind Files}">
<StackPanel Orientation="Horizontal">
<StackPanel.ContextFlyout>
<MenuFlyout Opening="OpenPlaylistFlyout" />
</StackPanel.ContextFlyout>
<SymbolIcon Symbol="Folder" />
<TextBlock Margin="0,0,10,0" />
<TextBlock Text="{x:Bind Path}" />
</StackPanel>
</TreeViewItem>
</DataTemplate>
<DataTemplate x:Key="FileTemplate" x:DataType="data:Music">
<TreeViewItem>
<StackPanel
DoubleTapped="FileItem_DoubleTapped"
IsDoubleTapEnabled="True"
Orientation="Horizontal">
<StackPanel.ContextFlyout>
<MenuFlyout Opening="OpenMusicFlyout" />
</StackPanel.ContextFlyout>
<Image Width="20" Source="Assets/colorful_no_bg.png" />
<TextBlock Margin="0,0,10,0" />
<TextBlock Text="{x:Bind Name}" />
</StackPanel>
</TreeViewItem>
</DataTemplate>
<templateselector:FolderTreeTemplateSelector
x:Key="FolderTreeTemplateSelector"
FileTemplate="{StaticResource FileTemplate}"
FolderTemplate="{StaticResource FolderTemplate}" />
C# of ItemTemplateSelector is
public class FolderTreeTemplateSelector : DataTemplateSelector
{
public DataTemplate FolderTemplate { get; set; }
public DataTemplate FileTemplate { get; set; }
protected override DataTemplate SelectTemplateCore(object item, DependencyObject container)
{
if (item is Models.FolderTree) return FolderTemplate;
if (item is Models.Music) return FileTemplate;
return null;
}
}
It is used here
My ViewModels are defined here.
When I add this to the TreeView, my app crashes. Tree is not null because I also defined GridView that allows me to see it.
ItemsSource="{x:Bind Tree, Mode=OneWay}"
What is wrong?

The default ItemsSource is collection type， but in above code the Tree data source is FolderTree, it will cause argument error, please modify it as collection base on your actual data structure.

Create a treeview from a List<customClass> WPF

I would like to create an TreeView from an List<PhonesFromStudents>.
My custom class is PhonesFromStudents
public class PhonesFromStudents
{
public string Name { get; set; }
public List<string> Phones { get; set; }
}
XAML is :
<TreeView x:Name="tv_source" Grid.Row="2" Grid.Column="1" Margin="0,5" HorizontalAlignment="Stretch" ItemsSource="{Binding ListStudents}" Background="White" BorderBrush="{x:Null}">
<TreeView.ItemTemplate>
<DataTemplate>
<TextBlock Text="{Binding Name}" />
</DataTemplate>
</TreeView.ItemTemplate>
</TreeView>
MainWindows.cs
internal MainWindow(List<PhonesFromStudents> list)
{
InitializeComponent();
this.ListStudents = list;
this.DataContext = this;
}
Example :
2 students
Thomas - iPhone8,iPhone6
Lucas - iPhone4s, S8
i would like to have
Thomas
|_____iPhone8
|_____iPhone6
Lucas
|_____iPhone4s
|_____S8
But I get an empty list from UI.
Can someone help me?
Thanks

Use an HierarchicalDataTemplate:
<TreeView x:Name="tv_source" Grid.Row="2" Grid.Column="1" Margin="0,5"
HorizontalAlignment="Stretch" ItemsSource="{Binding ListStudents}" Background="White" BorderBrush="{x:Null}">
<TreeView.Resources>
<HierarchicalDataTemplate DataType="{x:Type local:PhonesFromStudents}" ItemsSource="{Binding Phones}">
<TextBlock Text="{Binding Name}" />
</HierarchicalDataTemplate>
</TreeView.Resources>
</TreeView>
...and make sure that ListStudents is a public property:
public List<PhonesFromStudents> ListStudents { get; set; }

How to use a Binding of the ViewModel instead of the DataType of a ListView?

Let me begin with apologizing for the perhaps somewhat vague title, I'm having a hard time explaining my problem! Perhaps this is why I'm hardly getting any Google results, with this post being the closest to my problem (I think): How to bind to a property of the ViewModel from within a GridView
Anyways, I have a list of news articles that are being dynamically generated. The user has the option to press a "Star"-button in order to add an article to his/her favorites list. This "Star"-button should thus only be visible when the user is logged in.
I'm trying to achieve this by setting the Visibility of the Button to a property called IsLoggedIn inside my ViewModel. However, because this is happening inside my ListView it's trying to find the property IsLoggedIn inside of Article instead of the ViewModel.
So I guess my questions boils down to: How can I bind to a ViewModel property inside of a Databound ListView?
<ListView ItemsSource="{x:Bind VM.Articles, Mode=OneWay}" ItemClick="DebuggableListView_ItemClick" IsItemClickEnabled="True" SelectionMode="None" Grid.Row="1" VerticalAlignment="Top">
<ListView.ItemTemplate>
<DataTemplate x:DataType="models:Article">
<Grid Margin="0,10,10,10">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="1*"/>
<ColumnDefinition Width="4*"/>
</Grid.ColumnDefinitions>
<Image Source="{Binding Image}" Margin="0,0,10,0" Grid.Column="0" VerticalAlignment="Top" ImageFailed="Image_ImageFailed"/>
<Button Visibility="{x:Bind VM.IsLoggedIn, Converter={StaticResource BooleanToVisibilityConverter}, Mode=OneWay}" FontFamily="Segoe MDL2 Assets" Content="" FontSize="30" Background="Transparent" Grid.Column="1" HorizontalAlignment="Right" VerticalAlignment="Bottom"/>
<StackPanel Grid.Column="1">
<TextBlock TextWrapping="Wrap" FontWeight="Bold" Text="{Binding Title}"/>
<TextBlock TextWrapping="Wrap" Text="{Binding Summary}"/>
</StackPanel>
</Grid>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
Requested Article class:
public sealed class Article
{
public int Id { get; set; }
public int Feed { get; set; }
public string Title { get; set; }
public string Summary { get; set; }
public DateTime PublishDate { get; set; }
public string Image { get; set; }
public string Url { get; set; }
public string[] Related { get; set; }
public Category[] Categories { get; set; }
public bool IsLiked { get; set; }
}
Okay, so currently I got it working by having a property which gets the singleton of my VM, however I'm sure there has to be a cleaner way to get something simple like this working. I've added a sample rar (OneDrive link: https://1drv.ms/u/s!Ar4fOTiwmGYnyWbwRY6rM0eFsL9x) which has a list, a ViewModel, some dummy data and a Visibility property inside the VM. If you can get it working without my dirty method please feel free to commit as an answer.

This type problem can best be solved using relative binding. Rather than binding directly to the current DataContext, i.e. this case the individual item in the ListView's ItemsSource, you can bind to a property of any ancestor element.
Given a simple ViewModel class
public class ViewModel: ViewModelBase
{
private bool _isLoggedIn;
public bool IsLoggedIn
{
get { return _isLoggedIn; }
set
{
_isLoggedIn = value;
RaisePropertyChanged(() => IsLoggedIn);
}
}
public IEnumerable<string> Items
{ get { return new[] {"One", "Two", "Theee", "Four", "Five"}; } }
}
the View can then be defined as
<Window x:Class="ParentBindingTest.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="clr-namespace:ParentBindingTest"
Title="MainWindow"
Width="300" Height="400">
<Window.DataContext>
<local:ViewModel />
</Window.DataContext>
<Window.Resources>
<BooleanToVisibilityConverter x:Key="BooleanToVisibilityConverter" />
</Window.Resources>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<CheckBox Margin="16,8" HorizontalAlignment="Left" Content="Logged In?" IsChecked="{Binding IsLoggedIn, Mode=TwoWay}" />
<ListView Grid.Row="1" Margin="16,8" ItemsSource="{Binding Items}">
<ListView.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal">
<Button Visibility="{Binding Path=DataContext.IsLoggedIn, RelativeSource={RelativeSource AncestorType={x:Type ListView}}, Converter={StaticResource BooleanToVisibilityConverter}}">
<Image Source="Images\remove.png" />
</Button>
<TextBlock Text="{Binding}" />
</StackPanel>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
</Grid>
</Window>
Note how in the item DataTemplate, the TextBlock's Text property is bound directly to the item.
However the Button's Visibility is bound not to a propery of it's own DataContext, but to that of the ListView itself, using relative binding.

ScrollViewer ignores ContentTemplateSelector

I've faced with issue, using ScrollViewer.
Here's sample view models:
public class A
{
public string Text { get; set; }
}
public class B
{
public int Number { get; set; }
}
...and DataTemplateSelector:
public class ViewModelTemplateSelector : DataTemplateSelector
{
public DataTemplate ATemplate { get; set; }
public DataTemplate BTemplate { get; set; }
public override DataTemplate SelectTemplate(object item, DependencyObject container)
{
if (item is A)
return ATemplate;
if (item is B)
return BTemplate;
return base.SelectTemplate(item, container);
}
}
XAML:
<Grid>
<Grid.Resources>
<local:ViewModelTemplateSelector x:Key="ViewModelTemplateSelectorKey">
<local:ViewModelTemplateSelector.ATemplate>
<DataTemplate>
<TextBlock Text="{Binding Text}"/>
</DataTemplate>
</local:ViewModelTemplateSelector.ATemplate>
<local:ViewModelTemplateSelector.BTemplate>
<DataTemplate>
<TextBox Text="{Binding Number}"/>
</DataTemplate>
</local:ViewModelTemplateSelector.BTemplate>
</local:ViewModelTemplateSelector>
</Grid.Resources>
<Grid.RowDefinitions>
<RowDefinition />
<RowDefinition />
<RowDefinition />
</Grid.RowDefinitions>
<ListBox x:Name="ListBox" ItemsSource="{Binding}"/>
<ScrollViewer Grid.Row="1" Content="{Binding SelectedItem, ElementName=ListBox}"
ContentTemplateSelector="{StaticResource ViewModelTemplateSelectorKey}"/>
<ContentControl Grid.Row="2" Content="{Binding SelectedItem, ElementName=ListBox}"
ContentTemplateSelector="{StaticResource ViewModelTemplateSelectorKey}"/>
</Grid>
This is what is going on, when any item is selected in ListBox:
As you can see, ScrollViewer ignores ContentTemplateSelector, while ContentControl does not. ScrollViewer is inherited from ContentControl, and at first look, there's no reason for such behavior.
I know, that if I'll declare implicit data templates for A and B, ScrollViewer will handle them correctly, but this is not an option for my real application.
Is this known bug? Or am I missing something?
UPD.
I've submitted an issue on MS Connect.

I did not test the syntax. If it is wrong just let me know and I will delete
This is what I would try
<ScrollViewer Grid.Row="1">
<ContentControl Content="{Binding SelectedItem, ElementName=ListBox}"
ContentTemplateSelector="{StaticResource ViewModelTemplateSelectorKey}"/>
</ScrollViewer>

This should do the trick:
<ScrollViewer Grid.Row="1">
<ContentPresenter Content="{Binding SelectedItem, ElementName=ListBox}" ContentTemplateSelector="{StaticResource ViewModelTemplateSelectorKey}" />
</ScrollViewer>

Windows Phone Longlistselector ItemsSource Performance

I'm working on an app for Windows Phone (Silverlight WP 8.0) with a custom UserControl containing three LongListSelectors. This UserControl sits inside of a Panorama. When an item is selected from the first list, the user control changes visual states and animates the second list in, and the same for the third. The problem I'm encountering is the long load time between changing the ItemsSource of the list (either explicitly or through binding) and the actual rendering of the items. With a list of about 20 items, the time is at least 500ms, sometimes over 1 second. This seems unreasonable. Here's the XAML I'm working with:
MainPage.xaml:
<phone:Panorama Template="{StaticResource TunrPanorama}">
<!--Panorama item one-->
<phone:PanoramaItem Background="White" Style="{StaticResource MusicPanoramaItemStyle}">
<tunr:LibraryControl DataContext="{Binding}" TrackSelected="LibraryControl_TrackSelected" />
</phone:PanoramaItem>
LibraryControl.xaml:
<Grid x:Name="LayoutRoot">
<Grid.RowDefinitions>
<RowDefinition Height="auto" />
<RowDefinition />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition />
</Grid.ColumnDefinitions>
<StackPanel x:Name="stackPanel" Grid.Row="0" Orientation="Vertical" Height="108">
<!-- Some headers here -->
</StackPanel>
<Grid Grid.Row="1" Margin="12,0,0,0">
<!-- List number 1 -->
<phone:LongListSelector Grid.Row="0" Grid.Column="0" x:Name="music_artists" VerticalAlignment="Stretch" ItemsSource="{Binding ArtistList}" SelectionChanged="music_artists_SelectionChanged" RenderTransformOrigin="0.5,0.5">
<phone:LongListSelector.RenderTransform>
<CompositeTransform/>
</phone:LongListSelector.RenderTransform>
<phone:LongListSelector.ItemTemplate>
<DataTemplate>
<ListBoxItem Margin="0,6,0,6">
<StackPanel>
<TextBlock Text="{Binding}" TextWrapping="NoWrap" Style="{StaticResource PhoneTextExtraLargeStyle}" FontSize="{StaticResource PhoneFontSizeLarge}" Foreground="Black"/>
</StackPanel>
</ListBoxItem>
</DataTemplate>
</phone:LongListSelector.ItemTemplate>
</phone:LongListSelector>
<!-- List number 2 -->
<phone:LongListSelector Grid.Row="0" Grid.Column="0" x:Name="music_albums" LayoutMode="Grid" GridCellSize="190,190" SelectionChanged="music_albums_SelectionChanged" RenderTransformOrigin="0.5,0.5">
<phone:LongListSelector.RenderTransform>
<CompositeTransform/>
</phone:LongListSelector.RenderTransform>
<phone:LongListSelector.ItemTemplate>
<DataTemplate>
<ListBoxItem Margin="6,6,6,6">
<Grid>
<Border Width="178" Height="178" Background="#FF838383" />
</Grid>
</ListBoxItem>
</DataTemplate>
</phone:LongListSelector.ItemTemplate>
</phone:LongListSelector>
<!-- List number 3 -->
<phone:LongListSelector Grid.Row="0" Grid.Column="0" x:Name="music_tracks" SelectionChanged="music_tracks_SelectionChanged">
<phone:LongListSelector.RenderTransform>
<CompositeTransform/>
</phone:LongListSelector.RenderTransform>
<phone:LongListSelector.ItemTemplate>
<DataTemplate>
<ListBoxItem Margin="0,6,0,6">
<StackPanel>
<TextBlock Text="{Binding Title}" TextWrapping="NoWrap" Style="{StaticResource PhoneTextExtraLargeStyle}" FontSize="{StaticResource PhoneFontSizeLarge}" Foreground="Black"/>
</StackPanel>
</ListBoxItem>
</DataTemplate>
</phone:LongListSelector.ItemTemplate>
</phone:LongListSelector>
</Grid>
</Grid>
Here's the code that populates the list:
(DataContext as LibraryViewModel).SelectAlbum(album).ContinueWith((songs) => {
Dispatcher.BeginInvoke(() =>
{
music_tracks.ItemsSource = songs.Result;
VisualStateManager.GoToState(this, "Tracks", true);
});
});
All the SelectAlbum method above does now is return a list of newly created Song instances - no other processing is done, so this should not be any sort of performance hog. But still there is a huge delay in rendering.
I've turned off transitions in my visual state changes to no avail; the list still takes too long to load. I've also experimented by creating a fresh new project with a LLS inside of a Panorama, populating it with a button press to see the delay. It's almost instant. The only difference between that and my project seems to be the UserControl I've nested these lists inside of - can that be the cause of this bad performance?
Any suggestions are very much appreciated!
For good measure, here's the class of the item I'm rendering:
public class SongModel
{
public Guid SongID { get; set; }
//public string SongFingerPrint { get; set; }
public Guid OwnerId { get; set; }
public string SongMD5 { get; set; }
public string Title { get; set; }
public string Artist { get; set; }
public string Album { get; set; }
public int TrackNumber { get; set; }
public int DiscNumber { get; set; }
public int Year { get; set; }
public string Genre { get; set; }
public double Length { get; set; }
}

Why do you use LongListSelector? Have you seen this ?
I mean, if an amount of the items is fixed and you do not use grouping, should be enough to use ListBox. Did you try that?