Binding to Xaml - 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; }
}

Related

bind complex Class list to ListView in xaml page

I have problem with binding complex list objects to listview's itemssource in xaml page.
Code is not writen in english so i will try to mock up my problem!This is list which is used as itemssource
public ObservableCollection<Order> orderList { get; set; } = new ObservableCollection<Order>();
My Order class has istance of OrderState class, and my OrderState class has instance of State class.
State class has property named Name and this property I am trying to access so i could bind it to label in xaml page.
public class Order
{
public virtual ICollection<OrderState> OrderState { get; set; }
}
public class OrderState
{
public virtual ICollection<State> State { get; set; }
}
public partial class State
{
public string Name{ get; set; }
}
So if i want to access Name property from Order class I need to go OrderState-> State-> name
<ListView ItemsSource="{Binding orderList}" >
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell>
<StackLayout Padding="10" Margin="5" Orientation="Horizontal" >
//dont know how to access Name property here
//I tried with OrderState.State.Name and State.Name but i only get empty text
<Label Text="{Binding Name}"
d:Text="Item descripton"
LineBreakMode="NoWrap"
Style="{DynamicResource ListItemDetailTextStyle}"
FontSize="13" HorizontalTextAlignment="Center" HorizontalOptions="CenterAndExpand" />
</StackLayout>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
orderList has all data needed to display Name property, just dont know which path to use to get to it!
Any help is appreciated!!
Thank you for your time!
Main question solved , update question
var query = _context.Set<Database.Order>().AsQueryable();
query = query.Include("OrderState").Include("OrderState.State");
how could i write this query so i can order OrderState by desc and take top 1 row???
Thank you for your time again!!!!!

XAML ListView in ListView

Is it possible to make a ListViewin a ListView and if yes is it even possible to bind data in both of them? I already tried it but it wont work the first List is shown as i want but the second is not shown.
The Code Looks kind of like this:
<ListView ItemSource="{Binding Item}" x:Name="ListA">
<ListView.ItemTemplate>
<DataTemplate>
<Grid>
<TextBlock Text="{Binding Day}"/>
<ListView x:Name="ListB" ItemSoruce="{Binding Item}">
<ListView.ItemTemplate>
<DataTemplate>
<TextBlock Text="{Binding Time}"/>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
</Grid>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
C#
listA.ItemsSource = timebooking.TimeBookingDataPeriod.TimeBookingData;
Hope sombody can help me :)
First of all, you should either go for a binding ItemSource={Binding Item} or setting the ItemSource in code listA.ItemsSource = ... as one overwrites the other. So I'll ignore the fact that you're trying to set it in code and go with the binding (which means you have a datacontext set on your view).
<ListView ItemSource="{Binding WeekDays}" x:Name="ListA">
<ListView.ItemTemplate>
<DataTemplate>
<Grid>
<TextBlock Text="{Binding Day}"/>
<ListView x:Name="ListB" ItemSource="{Binding TimesOfDay}">
<ListView.ItemTemplate>
<DataTemplate>
<TextBlock Text="{Binding Time}"/>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
</Grid>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
I've changed your first ItemSource to WeekDays and the second ItemSource to TimesOfDay for clarity. This to explain the way how binding and datacontexts work.
The outer ListView (ListA) inherits its DataContext from the outer items, most likely your page / usercontrol.
In your ListViewItem, the datacontext is changed to a single item in the WeekDays collection. => every property bound under this tree has to be in a WeekDay object.
The inner ListView (ListB) inherits its DataContext from the ListViewItem.
In the ListViewItem, the DataContext is changed to a single item in the TimesOfDay collection.
Every ListView is a new level of objects. So for my sample to work, you need following class structure, not that I'll simplify the code and just use properties (while you should correctly implement INotifyPropertyChanged for UI updates).
public class SampleViewModel : INotifyPropertyChanged
{
public ObservableCollection<WeekDay> WeekDays { get; set; } // first listview
}
public class WeekDay
{
public string Day { get; set; }
public ObservableCollection<TimeOfDay> TimesOfDay { get; set; } // second listview
}
public class TimeOfDay
{
public string Time { get; set; }
}
If you want to use 2 properties from the page's viewmodel, you'll have to use an element binding in ListB. But this is only for scenarios were the items in the inner listview are not correlated to the ones in the outer listview.
{Binding ElementName=ListA, Path=DataContext.ItemsForB}
ItemsSource not ItemSource
Here is an example:
public class ClassB
{
public string Name { get; set; }
public ObservableCollection<ClassA>classAList { get; set; }
/// <summary>
/// Initializes a new instance of the <see cref="ClassB"/> class.
/// </summary>
public ClassB()
{
Name = String.Empty;
classAList = new ObservableCollection<ClassA>();
}
}
public class ClassA
{
public string Caption { get; set; }
}
Create list:
ObservableCollection<ClassB> list = new ObservableCollection<ClassB>();
Init list:
ClassB item1 = new ClassB() { Name = "listAItem1" };
item1.classAList.Add(new ClassA { Caption = "listBItem1" });
item1.classAList.Add(new ClassA { Caption = "listBItem2" });
item1.classAList.Add(new ClassA { Caption = "listBItem3" });
item1.classAList.Add(new ClassA { Caption = "listBItem4" });
item1.classAList.Add(new ClassA { Caption = "listBItem5" });
list.Add(item1);
ClassB item2 = new ClassB() { Name = "listAItem1" };
item2.classAList.Add(new ClassA { Caption = "listBItem1" });
item2.classAList.Add(new ClassA { Caption = "listBItem2" });
item2.classAList.Add(new ClassA { Caption = "listBItem3" });
item2.classAList.Add(new ClassA { Caption = "listBItem4" });
item2.classAList.Add(new ClassA { Caption = "listBItem5" });
list.Add(item1);
this.DataContext = list;
and XAML:
<ListView ItemsSource="{Binding}" x:Name="ListA">
<ListView.ItemTemplate>
<DataTemplate>
<Grid>
<TextBlock Text="Day"/>
<ListView x:Name="ListB" ItemsSource="{Binding classAList}">
<ListView.ItemTemplate>
<DataTemplate>
<TextBlock Text="{Binding Caption}"/>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
</Grid>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
It seems you want to create a grouped list, in this case is better to use gridview with groups:
Good step by step tutorial for grouped gridview

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 ?

virtualizing treeview in silverlight

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.