virtualizing treeview in silverlight - silverlight-4.0

I am using silverlight toolkit treeview to show set of data. It has 1000 elements and some of the child elements have as much as 500 child elements as well. It takes almost a minute to load the data and show it in treeview. Does the tree view have virtualization? If it does, could some one point me to a sample or code snippet please?
Following is the XAML
<controls:TreeView Grid.Column="0" VerticalAlignment="Stretch"
ItemsSource="{Binding People}" >
<controls:TreeView.ItemTemplate>
<common:HierarchicalDataTemplate ItemsSource="{Binding Children}">
<StackPanel>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="10*"/>
<ColumnDefinition Width="90*"/>
</Grid.ColumnDefinitions>
<CheckBox IsChecked="{Binding TwoState}" Grid.Column="0"/>
<TextBlock Grid.Column="1" Text="{Binding Name}"/>
</Grid>
</StackPanel>
</common:HierarchicalDataTemplate>
</controls:TreeView.ItemTemplate>
</controls:TreeView>
Following is the person class I use
public class Person:INotifyPropertyChanged
{
public string Name { get; set; }
public int Age { get; set; }
public bool TwoState { get; set; }
public ObservableCollection<Person> Children { get; set; }
public Person()
{
TwoState = false;
Children = new ObservableCollection<Person>();
}
public event PropertyChangedEventHandler PropertyChanged;
private void NotifyPropertyChanged(string info)
{
if (PropertyChanged != null)
{
PropertyChanged(this, new PropertyChangedEventArgs(info));
}
}
}

you should take a look at Bea Costa's article on the matter.
check out her blog here. as of 3.5, silverlight has opt-in virtualization for the tree view. one of the things that will speed up your performance is loading child nodes on demand. she covers this in her article.
basically, it boils down to this: you should only load into the UI, what you need to.

Related

Retrieve add from azure mobile services

I want to retrieve data from azure mobile service using this code:
//class
class country
{
public string id { get; set; }
public string country_name { get; set; }
public int country_id { get; set; }
}
These are my global variables:
private MobileServiceCollection<country, country> items;
private IMobileServiceTable<country> todoTable = App.MobileService.GetTable<country>();
private async void Button_Click_1(object sender, RoutedEventArgs e)
{
items = await todoTable.Where(todoItem=>todoItem.country_name=="pakistan").ToCollectionAsync(;
mygridview.ItemsSource = items;
}
// mydridview is the name of gridview.
mygridview.ItemsSource = items;
But it only Show azureapp.code.country but not the data.
Note: azureapp is the name of application and country is the name of class and also the name of table in azure.
Your code here above is good, it should actually works.
I think that actually you are displaying in your XAML view the object pointer and not a field. Could you please try to refer to an attribute of the class "Country" in your gridview code?
Thank you MandrX i will be forever in your debt. When i change the gridview to listView your binding technique worked. Thanks again.
<ListView Name="mylistview" Margin="27,299,41,62">
<ListView.ItemTemplate>
<DataTemplate>
<StackPanel Margin="0, 20, 0, 0">
<TextBlock Text="{Binding country_name }" />
<TextBlock Text="{Binding country_id}" />
</StackPanel>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>

Binding multiple sources in listview

I am trying to learn XAML with WINRT and I have a question about binding and viewmodels.
I have an two classes EmployeeList and DownloadableEmployee:
public sealed class EmployeeList
{
public IReadOnlyList<DownloadableEmployee> DownloadableEmployees { get; }
}
public sealed class DownloadableEmployee
{
public System.Boolean IsSelected { get; set; }
public System.String Name { get; }
//method
public IAsyncOperation<IRandomAccessStreamWithContentType> GetEmployeePicAsync();
}
I have binded the EmployeeList to a Multi Selectable ListView displaying employee Names and Pictures. A user can now select / deselect individual employee in the ListView.
To achieve that, I've have created a DownloadableItem class that acts as a ViewModel which is binded to my listview EmployeeLV.
public class DownloadableItemVM
{
public string Name
{
get;
private set;
}
public IRandomAccessStreamWithContentType EnmployeePic
{
get;
private set;
}
public DownloadableItem(string name, IRandomAccessStreamWithContentType thumbnail)
{
Name = name;
Thumbnail = thumbnail;
}
}
ObservableCollection<DownloadableItemVM> employeesToDownload = new ObservableCollection<DownloadableItemVM>();
// set source to ListView
EmployeeLV.ItemsSource = employeesToDownload;
foreach (DownloadableEmployee item in EmployeeList.DownloadableEmployees)
{
IRandomAccessStreamWithContentType stream = await item.GetEmployeePicAsync();
employeesToDownload.Add(new DownloadableItemVM(item.Name, stream));
}
My List View
<ListView x:Name="employeeLV" SelectionMode="Multiple" >
<ListView.ItemTemplate>
<DataTemplate>
<StackPanel>
<Image Source="{Binding Thumbnail}"/>
<TextBlock Text="{Binding Name}"/>
</StackPanel>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
Question XAML experts:
My ListView already binds to my custom View Model class DownloadableItemVM and properly displays the name and photo of each employee.
But now I have a problem because I need to "bind" each selected item in My ListView back to DownloadableEmployee.IsSelected such that when a user selects an employee, their "IsSelected" gets set to true and vice versa when they deselect.
How should I go about doing this?
Why not to have all DownloadableEmployee object inside your DownloadableItemVM, and bind to name, picture, etc. through this object ? E.g.
public class DownloadableItemVM
{
...
public DownloadableEmployee Employee
{
get;
private set;
}
...
public DownloadableItem(DownloadableEmployee employee, IRandomAccessStreamWithContentType thumbnail)
{
Employee= employee;
Thumbnail = thumbnail;
}
...
}
<ListView x:Name="employeeLV" SelectionMode="Multiple" >
<ListView.ItemTemplate>
<DataTemplate>
<StackPanel>
<Image Source="{Binding Thumbnail}"/>
<TextBlock Text="{Binding Employee.Name}"/>
</StackPanel>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
With this approach you can reach your IsSelected prop through Employee object. Is this suitable for you ?

Crash When Reordering Items in a ListView (Windows Store App using XAML)

I have an app that uses nested list views bound to ObservableCollections. The parent list views are used for grouping items, and each group contains a ListView of items. I used ListViews and ObservableCollections because I wanted users to be able reorder the groups, and also reorder the items within the group. I do not need them to move items between groups, though I may try that later. (:
The problem is after you reorder a group, if you try and drag an item out of the re-ordered group onto another group the app will crash in Windows.UI.XML.dll, and I can't for the life of me figure out how to prevent it. I don't want people to do that, but I also need it to not crash if they try.
I was able to reproduce this using a very lightweight app.
This is the class with the ObservableCollections:
public class GroupList
{
public ObservableCollection<Group> Groups { get; set; }
public GroupList()
{
Groups = new ObservableCollection<Group>();
Group group1 = new Group("Group 1");
group1.Items.Add(new Item("Item 1"));
group1.Items.Add(new Item("Item 2"));
group1.Items.Add(new Item("Item 3"));
Groups.Add(group1);
Group group2 = new Group("Group 2");
group2.Items.Add(new Item("Item 4"));
group2.Items.Add(new Item("Item 5"));
group2.Items.Add(new Item("Item 6"));
Groups.Add(group2);
Group group3 = new Group("Group 3");
group3.Items.Add(new Item("Item 7"));
group3.Items.Add(new Item("Item 8"));
group3.Items.Add(new Item("Item 9"));
Groups.Add(group3);
}
}
public class Group
{
public string GroupName { get; set; }
public ObservableCollection<Item> Items { get; set; }
public Group(string groupName)
{
this.GroupName = groupName;
this.Items = new ObservableCollection<Item>();
}
}
public class Item
{
public event PropertyChangedEventHandler PropertyChanged = null;
public string ItemName { get; set; }
public Item(string itemName)
{
this.ItemName = itemName;
}
}
This is the XAML for the page:
<Grid Background="White">
<ListView Name="groupListView" ItemsSource="{Binding}" CanDragItems="True" CanReorderItems="True" AllowDrop="True" IsSwipeEnabled="True" SelectionMode="None">
<ListView.ItemTemplate>
<DataTemplate>
<StackPanel>
<Border BorderBrush="Black" BorderThickness="1">
<TextBlock Foreground="Red" Text="{Binding GroupName}"/>
</Border>
<ListView Name="itemListView" ItemsSource="{Binding Items}" CanDragItems="True" CanReorderItems="True" AllowDrop="True" IsSwipeEnabled="True" SelectionMode="None">
<ListView.ItemTemplate>
<DataTemplate>
<StackPanel>
<Border BorderBrush="Black" BorderThickness="1">
<TextBlock Foreground="Blue" Text="{Binding ItemName}"/>
</Border>
</StackPanel>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
</StackPanel>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
</Grid>
And this is the code-behind for the page:
public sealed partial class MainPage : Page
{
private GroupList groupList = new GroupList();
public MainPage()
{
InitializeComponent();
groupListView.DataContext = groupList.Groups;
}
}
To reproduce this issue:
1. Run the app
2. Drag and drop Group 1 between Group 2 and Group 3
3. Drag Item 1 from Group 1 onto Group 2
You should see a crash.
I have been pulling my hair out for hours trying different methods to prevent this from happening. The closest I came was handling the Drop event and setting Handled=true, but it would then still crash if you dropped it onto one of the group headers. If anyone can help me figure this out I would greatly appreciate it!
Thank you,
Todd

Binding to Xaml

I am binding a model to my Xaml code and have a question about how to bind to a Property.
Let's assume my View Model looks like
internal class LogsVM
{
private List<Log> logList;
public List<Log> LogList
{
get; set;
}
public LogsVM()
{
}
public LogsVM(List<Logging.Log> logs)
{
logList = logs;
}
}
and assume my Log class looks like
internal class Log
{
public string Title { get;set; }
public List<MoreDetails> moreDetails;
public Log()
{
moreDetails= new List<MoreDetails>();
}
}
In Xaml, how do I bind to the Title within a TreeView?
My Xaml so far looks like
<Window x:Class="BackUps.Logging.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:myData ="clr-namespace:BackUps.Logging.ViewModel"
Title="Logging Results" Height="350" Width="525">
<Grid>
<Grid.Resources>
<myData:LogsVM x:Key="Vm" />
</Grid.Resources>
<Grid.DataContext>
<Binding Source="{StaticResource Vm}"></Binding>
</Grid.DataContext>
<TreeView>
<TreeView.ItemTemplate>
<HierarchicalDataTemplate DataType="{x:Type myData:LogsVM}" ItemsSource="{Binding LogList}">
<TextBlock Text="{Binding Title}" />
<HierarchicalDataTemplate.ItemTemplate>
<DataTemplate DataType="{x:Type myData:LogsVM}">
<TextBlock Text="{Binding moreDetails.Staus}" />
</DataTemplate>
</HierarchicalDataTemplate.ItemTemplate>
</HierarchicalDataTemplate>
</TreeView.ItemTemplate>
</TreeView>
</Grid>
</Window>
And my MainWindow code behind
public MainWindow(List<Log> logs)
{
InitializeComponent();
LogsVM logVm = new LogsVM(logs);
this.DataContext = logVm;
}
As you can see in the above code, I'm trying to bind the Title property but my screen doesn't display an text at all.
So, my 2 questions are:
Is it enough to use my ViewModel class alone or do I also need to tell the Xaml each internal class of the ViewModel (in this case, the Log class)? EG
xmlns:myData ="clr-namespace:BackUps.Logging.ViewModel"
xmlns:moreData = "clr-namespace:BackUps.Logging.Logs"
What do I need to do to bind the Title?
Binding is not complicated as you might think, Your are just not mastering the Treeview's HierarchicalDataTemplate stuff and exposing properties to the XAML,
set your all your domain classes public cause they are used in public properties.
myData should reference the domain classes namespace.for ex: in my case xmlns:myData="clr-namespace:WpfApplication3" MoreDetails has to be a public property in Log class.
<TreeView ItemsSource="{Binding LogList}" >
<TreeView.ItemTemplate>
<HierarchicalDataTemplate DataType="{x:Type myData:Log}" ItemsSource="{Binding MoreDetails}">
<TextBlock Text="{Binding Title}" />
<HierarchicalDataTemplate.ItemTemplate >
<DataTemplate DataType="{x:Type myData:MoreDetails}" >
<TextBlock Text="{Binding Status}" />
</DataTemplate>
</HierarchicalDataTemplate.ItemTemplate>
</HierarchicalDataTemplate>
</TreeView.ItemTemplate>
</TreeView>
public class Log
{
public string Title { get; set; }
public List<MoreDetails> MoreDetails { get; set; }
public Log()
{
MoreDetails = new List<MoreDetails>();
}
}
public class MoreDetails
{
public string Status { get; set; }
}
public class YourVM
{
public YourVM() // in my case i've just run it fast in code behind
{
LogList = new List<Log>
{
new Log{Title = "Hichem", MoreDetails = new List<MoreDetails>{ new MoreDetails{Status = "OK"}}},
new Log{Title = "Hichem"},
new Log{Title = "Hichem"},
new Log{Title = "Hichem"},
};
}
public List<Log> LogList { get; set; }
}

Multiselect drop down for silverlight4

I m looking out for Multiselect drop down for silverlight4, one available at codeproject is targetted for silverlight3.
Any links is highly appreciated.
If you want to display checkboxes as items of a comboBox, a simple DataTemplate shoud work:
<ComboBox Name="combo" >
<ComboBox.ItemTemplate>
<DataTemplate>
<CheckBox Content="{Binding Text}" IsChecked="{Binding IsChecked,Mode=TwoWay}"/>
</DataTemplate>
</ComboBox.ItemTemplate>
</ComboBox>
Now on your code behind create an ObservableCollection ChekItem is a basic class:
public class CheckItem
{
public string Text { get; set; }
public bool IsChecked { get; set; }
}
and associate it to your comboBox ItemsSource. If you want to know what items are checked, is simple:
var checkedItems = myList.Where(i => i.IsChecked == true);