We Keep Coding

Creating a ViewModel for each item of ItemsControl

I have defined a type Board which containes a public property
ObservableCollection<Column> Columns
I would like to display it with use of MVVM pattern.
I created BoardView and bound it to BoardViewModel. BoardViewModel exposes public property Board of type Board.
BoardView contains a control ItemsControl which sets ItemsSource={Binding Board.Columns}.
<ItemsControl ItemsSource="{Binding Board.Columns}">
<ItemsControl.ItemTemplate>
<DataTemplate>
<Border BorderThickness="2" Margin="10" BorderBrush="#9f9f9f" Width="250">
<v:BoardColumnView Background="#e3e3e3" />
</Border>
</DataTemplate>
</ItemsControl.ItemTemplate>
BoardColumnView should show properties of Column type and this works good.
My problem is that I want to create a ViewModel for BoardColumn, and instead of showing only properties of Column type I want to show BoardColumnViewModel which would have defined inside a Column property.
How can I achieve that?
thanks in advance!

You could simply define a Columns property in your BoardViewModel that would contain a collection of BoardColumnViewModel. Something like this:
public ObservableCollection<BoardColumnViewModel> Columns { get; private set; }
You will need to initialize this property somewhere in BoardViewModel, for example:
public BoardViewModel(...)
{
...
Columns = new ObservableCollection<BoardColumnViewModel>(Board.Columns.Select(c => new BoardColumnViewModel(c)));
}
And then bind to that property, instead of Board.Columns:
<ItemsControl ItemsSource="{Binding Columns}">
<ItemsControl.ItemTemplate>
<DataTemplate>
<Border BorderThickness="2" Margin="10" BorderBrush="#9f9f9f" Width="250">
<v:BoardColumnView Background="#e3e3e3" />
</Border>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
As a general principle in MVVM is that it is not recommended to bind directly to a model. Instead you should always try to bind to a view model. This is why you have the problem you've described - because you bind to a public property Board, which is your model.

In my understanding is BoardColumnView an own UserControl?
If so just set the DataContext of this UserControl with this.DataContext = new BoardColumnViewModel(); in code behind or use XAML equivalent. Then create in your BoardViewModel an ObserveableCollection<> which holds multiple Instances of BoardColumnView and set the ItemSource to this collection. In your BoardColumnView XAML define your Layout, Bindings, etc. which are displayed in BoardView.
So every time you add a BoardColumnView to the ItemsSource, which is bound to the collection, a new instance of BoardColumnViewModel is getting created.
...That is my understanding of your Problem, but I might be completely wrong :).

WPF: Disable items in bounded ItemsControl

I'm working on a WPF page with the following:
<ItemsControl ItemsSource="{Binding Peopl.PhoneNums}" x:Name="PhoneList">
<ItemsControl.ItemTemplate>
<DataTemplate>
<Grid>
<StackPanel Orientation="Horizontal" Margin="0,0,0,0" x:Name="PhoneEntry">
<TextBlock Text="123-456-78901"/>
<ComboBox ...>
</StackPanel>
</Grid>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
There can be multiple stackpanels, each with a unique phone number; in code behind, each phone number has a flag indicating if it should be enabled; I want to be able to enable each entry in the stack panel based on that flag but I'm stuck accessing it....
I have:
foreach (Phone phone in PhoneList.ItemsSource)
{
if (phone.ShouldBeDisabled)
{
int index = PhoneList.Items.IndexOf(phone);
PhoneList.IsEnabled = false;
//this disables the entire control;
// I can't access "PhoneEntry" here... hmm
}
}
Is there a way to disable only one entry at a time? How can I access PhoneEntry? Should I try to disable the each stackpanel entry based on the bound value?

You may invert your view model property and call it ShouldBeEnabled. Now you can bind the StackPanel's IsEnabled property.
<StackPanel ... IsEnabled="{Binding ShouldBeEnabled}">
...
</StackPanel>
In case you can't change the view model, you may use a binding converter that inverts the property value:
<StackPanel ... IsEnabled="{Binding ShouldBeDisabled,
Converter={StaticResource InverseBooleanConverter}}">
...
</StackPanel>
Your Phone class would have to implement the INotifyPropertyChanged interface and fire the PropertyChanged event when the value of the ShouldBeDisabled property changes.

Different datasource on one item in ListBox

I have a ListBox bound to a data context that works fine. But on some items I want to show a textblock with data from another context. But I cant get it to work. I had it working on a string in the cs class, but when I changed it to a class that implements INotifyPropertyChanged i dont get the text to show at all...
This is a simplified ItemTemplate of my xaml:
<DataTemplate x:Key="ArrivalFlightItemTemplate">
<TextBlock Text="{Binding ArrivalFlightItem.Operator}" />
<StackPanel Visibility="{Binding Converter={StaticResource FlightDisclaimerConverter}}">
<TextBlock Text="{Binding DisclaimerText}" Style="{StaticResource NormalText}" Foreground="{StaticResource DarkForegroundColor}">
<TextBlock.DataContext>
<local:FlightDisclaimerItem/>
</TextBlock.DataContext>
</TextBlock>
</StackPanel>
</DataTemplate>
In the cs constructor I have:
var flightsVM = SingletonClass.FlightsViewModel;
this.DataContext = listFlightsVM;
disclaimerItem = new FlightDisclaimerItem();
disclaimerItem.DisclaimerText = Strings.FlightInfoDisclaimerShort;
Can anyone please help me figure this out (I'm new to Windows Phone)?

Why are you binding some of your data in your code-behind? You should do it all in XAML.
Define disclaimerItem as a property in your ViewModel.
Set the name for your PhoneApplicationPage
Use the PhoneApplicationPage Name in your markup extension to bind the textblock in question to the ViewModel property
<TextBlock DataContext="{Binding DataContext.DisclaimerItemProperty, ElementName=phoneApplicationPageName}" />

I got it working! I couldnt get it to work using another DataContext in the DataTemplate. But by binding to another object in the page (disclaimer panel) it works as intended.
Text="{Binding ElementName=DisclaimerPanel, Path=DataContext.DisclaimerText}"

binding an object into a control of wpf

I am new in WPF and I would like to have a quick advice on how to bind this object to a wpf control and I dont know which control should I use:
public class Parent
{
public string Name{get; set;}
public List<Child> Childs {get; set;}
}
public class Child
{
public string Name{get; set;}
public int Age {get; set;}
}
public class ParentFactory
{
public List<Parent> Parents {get; set;}
public ParentFactory()
{
Child child1 = new Child() {Name="Peter", Age=10;};
Child child2 = new Child() {Name="Mary", Age=9;};
Child child3 = new Child() {Name="Becky", Age=12;};
Parent parent1 = new Parent(){Name="Adam", Childs = new List<Child<>(){child1, child2}};
Parent parent2 = new Parent(){Name="Kevin", Childs = new List<Child<>(){child3}};
Parents = new List<Parent>(){parent1, parent2};
}
}
After creating this instance:
ParentFactory parentFactory = new ParentFactory();
I would like to bind the parentFactory.Parents() to a control in WPF. I would expect to see something like this:
Adam
-- Peter, 10
-- Mary, 9
Kevin
-- Becky, 12
They are all displayed on textboxes and I can change them.
Thanks in advance.

Use a TreeView with a HierarchicalDataTemplate.
Note however that without implement INotifyPropertyChanged on your model, your bindings won't update on any property changes. Also, without replacing your lists with ObservableCollections, your view won't update as you add more items to the list.
Something like this should work, first define your templates:
<Window.Resources>
<HierarchicalDataTemplate DataType="{x:Type local:Parent}" ItemsSource="{Binding Childs}">
<TextBlock Text="{Binding Name}"/>
</HierarchicalDataTemplate>
<DataTemplate DataType="{x:Type local:Child}">
<StackPanel Orientation="Horizontal">
<TextBlock Text="{Binding Name}"/>
<TextBlock>, </TextBlock>
<TextBlock Text="{Binding Age}"/>
</StackPanel>
</DataTemplate>
</Window.Resources>
Then you can use them with a TreeView like this (assuming Parents is a property in the DataContext of the TreeView):
<TreeView ItemsSource="{Binding Parents}"/>
If you don't want a TreeView, you can easily do something list this with a ListView, change you DataTemplates to this:
<DataTemplate DataType="{x:Type local:Parent}">
<StackPanel>
<TextBlock Text="{Binding Name}"/>
<ListView ItemsSource="{Binding Childs}"/>
</StackPanel>
</DataTemplate>
<DataTemplate DataType="{x:Type local:Child}">
<StackPanel Orientation="Horizontal">
<TextBlock Text="{Binding Name}"/>
<TextBlock>, </TextBlock>
<TextBlock Text="{Binding Age}"/>
</StackPanel>
</DataTemplate>
And then you can bind it like this:
<ListView ItemsSource="{Binding Parents}"/>
Note: You'll probably want to fiddle around with the styles a little because out-of-the-box, this looks a bit crap. You'll probably want to, at least, indent the child ListView (the one defined in the Parent DataTemplate) and get rid of it's border.
Also Note: the StackPanel to layout multiple TextBlocks for the name and age isn't ideal either, but it's quick and dirty. You might want to handle that differently. You could use a (multi) converter to format it, use StringFormat or add another property to your model just for display, or even just override ToString on the child class.
Another Edit
A quick (and ugly) example of using the DataGrid:
<DataGrid ItemsSource="{Binding Parents}" AutoGenerateColumns="False">
<DataGrid.RowDetailsTemplate>
<DataTemplate>
<DataGrid ItemsSource="{Binding Childs}"/>
</DataTemplate>
</DataGrid.RowDetailsTemplate>
<DataGrid.Columns>
<DataGridTextColumn Binding="{Binding Name}"/>
</DataGrid.Columns>
</DataGrid>
This puts a data grid inside a data grid using the row details template. If you click a row, it'll display the children as row details. If you want details always available, you can remove the RowDetailsTemplate and replace the DataGridTextColumn with a DataGridTemplateColumn and then define a template for you data.

If you don't wish a tree view (which is probably best as you have a hierarchy - though it's a one-level deep only, so you might still have a case for a list)...
you could do something like this (that's a rough outline, you should fill in the dots)...
<ItemsControl ItemsSource="{Binding AllNodes}">
</ItemsControl>
...and have templates defined for each type specifically, like Matt mentioned also...
<DataTemplate DataType="{x:Type namespace:Child}">
...
</DataTemplate>
<DataTemplate DataType="{x:Type namespace:Parent}">
...
</DataTemplate>
...while the AllNodes is a list you need to flatten from the hierarchy you have, you can use this...
var allnodes = Parents.SelectMany(p => new object[]{p}.Concat(p.Childs));
...and expose AllNodes as a property similar to Parents - you just need a View Model with properly implemented INotifyPropertyChanged as suggested.
hope this helps

Windows Phone 7.1: How to add & delete items from LongListSelector control?

Windows Phone 7.1: How to add/delete items from LongListSelector control?
I am using a LongListSelector control from 'Windows Phone Toolkit'. The control is data bound to a ViewModel inherited from an ObservableCollection. When I try the following code:
MyObject mo = new MyObject("Name", "Description", "Value");
App.MyObjectsViewModel.Add(mo);
The ViewModel does seem to get updated but the LongListSelector does not update? What am I missing?
PS: I am new to Silverlight and WP7 development.
Following the XAML for the LongListSelector and the DataTemplates. The code is pretty much straight out of the Windows Phone Toolkit sample (removed some formatting related code to keep the post small)
<DataTemplate x:Key="groupHeader">
<TextBlock Text="{Binding Key}"/>
</DataTemplate>
<DataTemplate x:Key="groupItemHeader">
<Border>
<TextBlock Text="{Binding Key}"
Foreground="#FFFFFF"
FontSize="{StaticResource PhoneFontSizeLarge}"/>
</Border>
</DataTemplate>
<DataTemplate x:Key="myobjectItemTemplate">
<Grid>
<StackPanel VerticalAlignment="Top" Orientation="Vertical">
<TextBlock Text="{Binding Symbol}"/>
<TextBlock Text="{Binding Value}"/>
<TextBlock Text="{Binding Description}" TextWrapping="Wrap"/>
</StackPanel>
</Grid>
</DataTemplate>
<controls:PivotItem Header="myobjects">
<toolkit:LongListSelector x:Name="myobjectsList"
Background="Transparent"
GroupHeaderTemplate="{StaticResource groupHeader}"
GroupItemTemplate="{StaticResource groupItemHeader}"
ItemTemplate="{StaticResource myobjectItemTemplate}"
GroupViewOpened="LongListSelector_GroupViewOpened"
GroupViewClosing="LongListSelector_GroupViewClosing"/>
</controls:PivotItem>
C# code behind for setting the ItemSource
var myobjectsByClassification = from myobjects in App.MyObjectsLibrary
group myobjects by myobjects.Classification into c
orderby c.Key
select new PublicGrouping<string, MyObject>(c);
this.myobjectsList.ItemsSource = myobjectsByClassification;

My guess is that the grouping code is only being called once somewhere in code behind. So the grouped collection is not updated when you add something to your ViewModel collection. The easiest way to handle this (but maybe not the most elegant) is to create your own AddItem() method for the ViewModel collection.
class MyViewModelObject
{
void AddItem( MyObject obj )
{
App.MyObjectsLibrary.Add( obj );
MyObjectsByClassification = from myobjects in App.MyObjectsLibrary
group myobjects by myobjects.Classification into c
orderby c.Key
select new PublicGrouping<string, MyObject>(c);
}
}
Bind MyObjectsByClassification to LongListSelector.ItemsSource in XAML, and make sure you notify the LongListSelector of changes to the property by using INotifyPropertyChanged.

By using LINQ, the object you actually assign to ItemsSource is an IEnumerable<T> not an ObservableCollection<T>. LINQ-to-objects does not support automatic updating via ObservableCollection. After all, it returns a forward-only IEnumerable<T> and not a collection of any kind.
Change your ViewModel to actually expose an ObservableCollection<PublicGrouping<string, MyObject>> and bind your ItemsSource directly to that.