I have done many searches about this problem but still I can't figure out what is wrong with my project. The flow is like this:
I want to bind a View Model. This view model contains observablecollection that has an observablecollection in it.
Now I can bind to both observablecollections while developing without problems, but when I deploy it, the data inside the other observablecollection isn't show up.
Below is my code:
Project/Model/SubProduct.cs
class SubProducts
{
private string subName;
public string SubName
{
get
{
return subName;
}
set
{
subName = value;
}
}
}
Project/Model/Product.cs
public class Product
{
private string name;
public string Name
{
get
{
return name;
}
set
{
name = value;
}
}
private ObservableCollection<SubProducts> subProductsSaProducts;
internal ObservableCollection<SubProducts> SubProductsSaProducts
{
get
{
return subProductsSaProducts;
}
set
{
subProductsSaProducts = value;
}
}
}
Project/Model/Category.cs
class Category
{
private string title;
public string Title
{
get
{
return title;
}
set
{
title = value;
}
}
private ObservableCollection<Product> subProducts;
public ObservableCollection<Product> SubProducts
{
get
{
return subProducts;
}
set
{
subProducts = value;
}
}
}
And this the view model that implements the models:
Project/ViewModel/CategoryViewModel.cs
class CategoryViewModel : ObservableCollection<Category>
{
public CategoryViewModel()
{
ObservableCollection<Product> pCOl1 = new ObservableCollection<Product>();
ObservableCollection<SubProducts> pCol1Sub = new ObservableCollection<SubProducts>();
SubProducts subP1 = new SubProducts();
subP1.SubName = "Lansang";
SubProducts subP2 = new SubProducts();
subP2.SubName = "Lata";
pCol1Sub.Add(subP1);
pCol1Sub.Add(subP2);
Product p1 = new Product();
p1.Name = "Pothaw";
p1.SubProductsSaProducts = pCol1Sub;
pCOl1.Add(p1);
ObservableCollection<Product> pCOl2 = new ObservableCollection<Product>();
Product p2 = new Product();
p2.Name = "Taklob sa COke";
pCOl2.Add(p2);
Add(new Category()
{
Title = "Didang",
SubProducts = pCOl1
});
Add(new Category()
{
Title = "Plastic",
SubProducts = pCOl2
});
}
}
And I use the View model in the xaml wich is the page:
<Page.DataContext>
<vm:CategoryViewModel/>
</Page.DataContext>
<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
<FlipView x:Name="flipView" HorizontalAlignment="Left" VerticalAlignment="Top" Width="360" ItemsSource="{Binding}" Background="#19B0F100">
<FlipView.ItemTemplate>
<DataTemplate>
<StackPanel>
<TextBlock Foreground="Black" FontSize="30" Text="{Binding Title}"/>
<ListView ItemsSource="{Binding SubProducts}" Background="#FF0C0909" Height="600">
<ListView.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Vertical">
<TextBlock Foreground="Red" FontSize="30" Text="{Binding Name}"/>
<ListView ItemsSource="{Binding SubProductsSaProducts}" Margin="30,0,0,0" Background="#FF933131" Height="197" Width="300">
<ListView.ItemTemplate>
<DataTemplate>
<TextBlock Foreground="Yellow" FontSize="20" Text="{Binding SubName}"/>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
</StackPanel>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
</StackPanel>
</DataTemplate>
</FlipView.ItemTemplate>
</FlipView>
</Grid>
Now the expected data shows in development mode. In other words, the data shows only when not running the app.
My questions are:
What is wrong with my binding?
What is the proper way to do it?
Why is the data not showing when I run the app?
I'm new to C# WinRT development so any suggestions will be appreciated.
Below is the screenshot:
You should Inherit from Category class not ObservableCollection.
Also I think there's no SubProductsSaProducts property in Category class, as you bind the page to CategoryViewMode which inherit from ObservableCollection
Related
I'm new to WPF and MVVM ... i created a class WorkstationItem
public class WorkstationItem
{
public WorkstationItem() { }
public string Name { get; set; }
public string OS { get; set; }
public List<UpdateItem> Updates { get; set; }
}
UpdateItem is another class:
public class UpdateItem
{
public UpdateItem() { }
public string Title { get; set; }
public string KB { get; set; }
}
I create some dummy data:
private List<WorkstationItem> workstations = new List<WorkstationItem>();
workstations.Add(new WorkstationItem
{
Name = "PC01",
OS = "Windows Server 2019",
Updates = new List<UpdateItem>{
new UpdateItem { Title = "Test", KB = "KB123123" },
new UpdateItem { Title = "Test2", KB = "KB123123" }
}
});
workstations.Add(new WorkstationItem
{
Name = "PC02",
OS = "Windows Server 2016",
Updates = new List<UpdateItem>{
new UpdateItem { Title = "Test5", KB = "KB123123" },
new UpdateItem { Title = "Test3", KB = "KB123123" }
}
});
Now i show the workstations in a listbox:
<ListBox x:Name="lbPCs" ItemsSource="{Binding WorkstationItemList}">
<ListBox.ItemTemplate>
<DataTemplate>
<Grid >
<Grid.ColumnDefinitions>
<ColumnDefinition Width="100"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="40"/>
</Grid.RowDefinitions>
<StackPanel Grid.Column="0">
<TextBlock Text="{Binding Name}" FontSize="12" FontWeight="Bold" />
<TextBlock Text="{Binding OS}" FontSize="9" />
</StackPanel>
</Grid>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
ViewModel:
public ObservableCollection<WorkstationItem> WorkstationItemList { get; set; }
WorkstationManager workstationmanager = WorkstationManager.GetInstance();
WorkstationItemList = new ObservableCollection<WorkstationItem>();
foreach (var k in workstationmanager.GetUpdatelist())
{
WorkstationItemList.Add(k);
}
This is working fine ... but how can i show the List<UpdateItem> Updates in another list in relation to the selected workstation?
So i select a workstation in list1 and want to show the related updates in list2?
Thanks in advance!
Basically add another ListBox or ItemsControl that refers to SelectedItem of the existing ListBox and bind to the SelectedItem's Updates collection; roughly like (untested):
<ListBox ItemsSource="{Binding ElementName=lbPCs, Path=SelectedItem.Updates}">
<ListBox .ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal">
<!-- TODO improve alignment+layout -->
<TextBlock Text="{Binding KB}" />
<TextBlock Text="{Binding Title}" />
</StackPanel>
</DataTemplate>
<ListBox .ItemTemplate>
</ListBox>
In case you want to do something more complex with the selected item but to display its Updates, it might be more appropriate to bind the SelectedItem of lbPCs to some new ViewModel property and to bind the new ListBox' itemsource to that VM property's Updates collection.
Hi, I am trying to bind the data for text block within a LongListSelector. But I am not getting any Output for it, kindly help me.
This is my XAML code:
<phone:LongListSelector ItemsSource="{Binding ''}" x:Name="longListSelector" HorizontalAlignment="Left" Height="680" VerticalAlignment="Top" Width="446" >
<phone:LongListSelector.ItemTemplate>
<DataTemplate>
<StackPanel>
<TextBlock Name="name" Text="{Binding DataContext.TextContent,ElementName=page,Mode=OneWay}" Height="100" Width="100" HorizontalAlignment="Center">
</TextBlock>
</StackPanel>
</DataTemplate>
</phone:LongListSelector.ItemTemplate>
</phone:LongListSelector>
In the C# code I have parsed data which i need to display in the windows phone, in a menu format.
Part of C# code is shown below:
XDocument document = XDocument.Parse(e.Result);
var data1 = from query in document.Descendants("location")
select new Data
{
Lat = (string)query.Element("lat"),
Lag = (string)query.Element("lng")
};
foreach (var d in data1)
{
JsonParsing(d.Lat, d.Lag);
}
data1 = from query in document.Descendants("result")
select new Data
{
Country = (string)query.Element("formatted_address")
};
foreach (var d in data1)
{
// ob.JsonParsing(d.Lat, d.Lag);
//XmlParsing(d.Lat, d.Lag);
val = d.Country;
//listbox.Items.Add(val);
//StringsList.Add(val);
TextContent=val;
I want the value of the country to be shown inside the textblock, kindly help me figure this out as I am pretty new to this field, thanks.
try like this
a good reference
<DataTemplate>
<StackPanel VerticalAlignment="Top">
<TextBlock Text="{Binding Value}" />
</StackPanel>
</LongListSelector>
CodeBehind
**Add a public property only public property can be participate in databinding**
#region Public Properties
private ObservableCollection<YourModel> _collectionofValue;
public ObservableCollection<YourModel> CollectionofValues
{
get
{
return _collectionofValue;
}
set
{
_collectionofValue=value;
raisepropertyChanged("CollectionofValues");
}
}
private string _value;
public string Value
{
get
{
return _errorMessage;
}
set
{
_errorMessage = value;
RaisePropertyChanged("Value");
}
}
#endregion
**Set value to this public property when you get value**
// for single values
public void getValue()
{
value =GetXmlValue(); // your method that will return the value;
}
// as it is a collection
public void getValuestoCollection()
{
Collection.Add(new YourModel(value="SampleValue1");
Collection.Add(new YourModel(value="SampleValue1");
Collection.Add(new YourModel(value="SampleValue1");
Collection.Add(new YourModel(value="SampleValue1");
}
YourModel
// the collection of this model is binded to the LongListSelector.
public class ModelName
{
public string Values {get;set;}
}
reference
<phone:LongListSelector ItemsSource="{Binding Items}" x:Name="longListSelector" HorizontalAlignment="Left" Height="680" VerticalAlignment="Top" Width="446" >
<phone:LongListSelector.ItemTemplate>
<DataTemplate>
<StackPanel>
<TextBlock Name="name" Text="{Binding Path=TextContent}" Height="100" Width="100" HorizontalAlignment="Center">
</TextBlock>
</StackPanel>
</DataTemplate>
</phone:LongListSelector.ItemTemplate>
</phone:LongListSelector>
Your C# algm should be:
i) Have a viewmodel class
public class MyViewModel
{
public ObservableCollection<MyDataItem> Items {get; set;}
public MyViewModel()
{
Items=new ObservableCollection<MyDataItem>();
loop //add your items to your 'Items' property so that you can bind this with LongListSelector ItemsSource
{
Items.Add(new MyDataItem("mystring"));
}
}
}
public class MyDataItem
{
public MyDataItem(string s)
{
TextContent=s;
}
public string TextContent {get;set;}
}
ii) Create an instance to ViewModel class and set DataContext
// write this in the constructor of the page which contains the LongListSelector
public MyViewModel vm;
constructor()
{
vm=new MyViewModel();
this.DataContext=vm;
}
am showing list of movie as a panorama for my windows phone 7 app. on click on each movie am showing the movie details,cast.
the movie details , cast am showing as a pivot control. movie details works fine
But when i got to show cast as , it doesnt work. i have list of cast objects. and am binding the source to a listbox in the cast pivot control , but it doesnt show any data. Please help me. below are the classes i have used. Thank you
MainViewModel.cs
public class MainViewModel
{
public ObservableCollection<ItemViewModel> MovieItems { get; set; }
}
ItemViewModel.cs
public class ItemViewModel : INotifyPropertyChanged
{
private string _title;
public string _Title
{
get { return _title; }
set
{
if (value != _title)
{
_title = value;
NotifyPropertyChanged("title");
}
}
}
private ObservableCollection<Cast> _cast;
public ObservableCollection<Cast> _Cast
{
get { return _cast; }
set
{
if (value != _cast)
{
_cast = value;
NotifyPropertyChanged("Cast");
}
}
}
..........
}
Cast.cs
public class Cast
{
public string name { get; set; }
public string imagesource { get; set; }
public Cast(string _name, string _imagesource)
{
this.imagesource = _imagesource;
this.name = _name;
}
}
for each movie i have a list of cast objects
MovieModel.cs
App.Model.MovieItems.Add(
new ItemViewModel()
{
_Title = data["title"].ToString(),
_Cast=casObs,
........
}
);
moviedetails.xaml
<ListBox Name="ListBox" Margin="0,0,-12,0" ItemsSource="{Binding _Cast}">
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel Margin="0,0,0,17" Width="432" Height="78">
<Canvas>
<TextBlock HorizontalAlignment="Center" VerticalAlignment="Bottom" Margin="120,5,60,3" Text="{Binding name}" TextWrapping="Wrap" FontSize="32" Style="{StaticResource PhoneTextNormalStyle}"/>
<Image Height="90" HorizontalAlignment="Left" Margin="12,10,0,0" Name="image1" Stretch="Fill" VerticalAlignment="Top" Width="90" Source="{Binding imagesource}" />
</Canvas>
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
Replace
NotifyPropertyChanged("title");
to
NotifyPropertyChanged("_Title");
And
NotifyPropertyChanged("Cast");
to
NotifyPropertyChanged("_Cast");
Hope it's help.
apply converter inbetween, where you need to return ImageSource/BitmapImage, instead of string
Recently I started building my own big Windows 8 Store App.
Working on UI I started replicating some good UIs.
One I met very interesting animation of inserting new elements in list view in standard Mail app. When you click on chain it expands and shows all messages in chain.
Here is captured video.
I have no idea what technique did they use to achieve this animation and behavior.
Can anyone help me, explain or give example how can I achieve such behavior? Thanks.
The mail app is written in JavaScript, so it won't help you much to know how it was done since this UI stack is quite different than the XAML one. The thing though is that the list controls are likely animated the same way, so you only need to add/remove some items in the list to get the expansion/collapse effect.
I played with it for a bit and this is what I came up with that uses ListView's ItemTemplateSelector property to define a few different item templates.
<Page
x:Class="App82.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:App82"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d">
<Page.Resources>
<local:CollapsibleListItemTemplateSelector
x:Key="collapsibleListItemTemplateSelector">
<local:CollapsibleListItemTemplateSelector.BasicItemTemplate>
<DataTemplate>
<Border
Margin="5"
Height="50"
VerticalAlignment="Stretch"
BorderBrush="ForestGreen"
BorderThickness="2,0,0,0">
<StackPanel
Margin="10,0,0,0">
<TextBlock
FontWeight="Bold"
Text="{Binding Title}" />
<TextBlock
Text="{Binding Gist}" />
</StackPanel>
</Border>
</DataTemplate>
</local:CollapsibleListItemTemplateSelector.BasicItemTemplate>
<local:CollapsibleListItemTemplateSelector.ExpandedItemTemplate>
<DataTemplate>
<Border
Margin="15,5,5,5"
Height="50"
VerticalAlignment="Stretch"
BorderBrush="Yellow"
BorderThickness="2,0,0,0">
<StackPanel
Margin="10,0,0,0">
<TextBlock
FontWeight="Bold"
Text="{Binding Title}" />
<TextBlock
Text="{Binding Gist}" />
</StackPanel>
</Border>
</DataTemplate>
</local:CollapsibleListItemTemplateSelector.ExpandedItemTemplate>
<local:CollapsibleListItemTemplateSelector.CollapsibleItemTemplate>
<DataTemplate>
<Border
Margin="5"
Height="50"
VerticalAlignment="Stretch"
BorderBrush="DodgerBlue"
BorderThickness="2,0,0,0">
<StackPanel
Margin="10,0,0,0"
Orientation="Horizontal">
<TextBlock
FontWeight="Bold"
Text="{Binding ChildItems.Count}" />
<TextBlock
FontWeight="Bold"
Text=" Items" />
</StackPanel>
</Border>
</DataTemplate>
</local:CollapsibleListItemTemplateSelector.CollapsibleItemTemplate>
</local:CollapsibleListItemTemplateSelector>
</Page.Resources>
<Grid
Background="{StaticResource ApplicationPageBackgroundThemeBrush}">
<ListView
x:Name="ListView"
ItemTemplateSelector="{StaticResource collapsibleListItemTemplateSelector}"
ItemClick="OnItemClick"
IsItemClickEnabled="True" />
</Grid>
</Page>
Code behind:
using System.Collections;
using System.Collections.Generic;
using System.Collections.ObjectModel;
using App82.Common;
using Windows.UI.Xaml;
using Windows.UI.Xaml.Controls;
namespace App82
{
public sealed partial class MainPage : Page
{
public MainPage()
{
this.InitializeComponent();
var items = new ObservableCollection<BindableBase>();
var item1 = new BasicItem { Title = "Item 1", Gist = "This item has some content that is not fully shown..." };
var item2 = new ExpandedItem { Title = "Item 2", Gist = "This item has some content that is not fully shown..." };
var item3 = new ExpandedItem { Title = "Item 3", Gist = "This item has some content that is not fully shown..." };
var item4 = new ExpandedItem { Title = "Item 4", Gist = "This item has some content that is not fully shown..." };
var item5 = new BasicItem { Title = "Item 5", Gist = "This item has some content that is not fully shown..." };
var itemGroup1 = new CollapsibleItem(items, new[] { item2, item3, item4 });
items.Add(item1);
items.Add(itemGroup1);
items.Add(item5);
this.ListView.ItemsSource = items;
}
private void OnItemClick(object sender, ItemClickEventArgs e)
{
var collapsibleItem = e.ClickedItem as CollapsibleItem;
if (collapsibleItem != null)
collapsibleItem.ToggleCollapse();
}
}
public class CollapsibleListItemTemplateSelector : DataTemplateSelector
{
public DataTemplate BasicItemTemplate { get; set; }
public DataTemplate CollapsibleItemTemplate { get; set; }
public DataTemplate ExpandedItemTemplate { get; set; }
protected override Windows.UI.Xaml.DataTemplate SelectTemplateCore(object item, Windows.UI.Xaml.DependencyObject container)
{
if (item is ExpandedItem)
return ExpandedItemTemplate;
if (item is BasicItem)
return BasicItemTemplate;
//if (item is CollapsibleItem)
return CollapsibleItemTemplate;
}
}
public class BasicItem : BindableBase
{
#region Title
private string _title;
public string Title
{
get { return _title; }
set { this.SetProperty(ref _title, value); }
}
#endregion
#region Gist
private string _gist;
public string Gist
{
get { return _gist; }
set { this.SetProperty(ref _gist, value); }
}
#endregion
}
public class ExpandedItem : BasicItem
{
}
public class CollapsibleItem : BindableBase
{
private readonly IList _hostCollection;
#region IsExpanded
private bool _isExpanded;
public bool IsExpanded
{
get { return _isExpanded; }
set
{
if (this.SetProperty(ref _isExpanded, value))
{
if (_isExpanded)
Expand();
else
Collapse();
}
}
}
#endregion
#region ChildItems
private ObservableCollection<BasicItem> _childItems;
public ObservableCollection<BasicItem> ChildItems
{
get { return _childItems; }
set { this.SetProperty(ref _childItems, value); }
}
#endregion
public CollapsibleItem(
IList hostCollection,
IEnumerable<BasicItem> childItems)
{
_hostCollection = hostCollection;
_childItems = new ObservableCollection<BasicItem>(childItems);
}
public void ToggleCollapse()
{
IsExpanded = !IsExpanded;
}
private void Expand()
{
int i = _hostCollection.IndexOf(this) + 1;
foreach (var childItem in ChildItems)
{
_hostCollection.Insert(i++, childItem);
}
}
private void Collapse()
{
int i = _hostCollection.IndexOf(this) + 1;
for (int index = 0; index < ChildItems.Count; index++)
{
_hostCollection.RemoveAt(i);
}
}
}
}
I have a two classes:
public class ScheduleViewModel : NotificationObject
{
private ObservableCollection<RecordingsCollection> _collection
public ObservableCollection<RecordingsCollection> Collection
{
get { return _collection; }
set
{
_collection= value;
RaisePropertyChanged(() => Collection);
}
}
}
public class RecordingsCollection : NotificationObject
{
private ObservableCollection<Recording> _recordings;
public ObservableCollection<Recording> Recordings
{
get { return _recordings; }
set
{
_recordings = value;
RaisePropertyChanged(() => Recordings);
}
}
}
At the momment I have only dummy data
var a = new ObservableCollection<Recording>();
a.Add(new Recording()
{
Name = "Bla bla",
Schedule = new Schedule()
{
Name = "bla"
}
});
Collection.Add(new RecordingsCollection() { Recordings = a });
var b = new ObservableCollection<Recording>();
b.Add(new Recording()
{
Name = "Bla bla",
Schedule = new Schedule()
{
Name = "bla"
}
});
Collection.Add(new RecordingsCollection() { Recordings = b });
I bind this all to an items control like this
<ItemsControl Grid.Row="1" ItemsSource="{Binding Collection}">
<ItemsControl.ItemTemplate>
<DataTemplate>
<Grid>
<telerikGridView:RadGridView
ItemsSource="{Binding ElementName=RecordingDataPager, Path=PagedSource}">
<telerikGridView:RadGridView.Columns>
<telerikGridView:GridViewDataColumn Header="Schedule" DataMemberBinding="{Binding Path=Recordings.Schedule.Name}"/>
</telerikGridView:RadGridView.Columns>
</telerikGridView:RadGridView>
<telerik:RadDataPager x:Name="RecordingDataPager"
Source="{Binding RecordingsCollection, Mode=TwoWay}"/>
</Grid>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
Everything is fired fine (i.e. i see two datapagers which means that it sees two entries) except for the get method of the Recordings property in RecordingsCollection
Any ideas?
Edit
Found the issuse... Instead of binding to RecordingsCollection I should have bound to Recordings... Now everything works fine... Hope this helps someone in future :)
This is the answers
<ItemsControl Grid.Row="1" ItemsSource="{Binding Collection}">
<ItemsControl.ItemTemplate>
<DataTemplate>
<Grid>
<telerikGridView:RadGridView
ItemsSource="{Binding ElementName=RecordingDataPager, Path=PagedSource}">
<telerikGridView:RadGridView.Columns>
<telerikGridView:GridViewDataColumn Header="Schedule" DataMemberBinding="{Binding Path=Schedule.Name}"/>
</telerikGridView:RadGridView.Columns>
</telerikGridView:RadGridView>
<telerik:RadDataPager x:Name="RecordingDataPager"
Source="{Binding Recordings, Mode=TwoWay}"/>
</Grid>
</DataTemplate>