Limit the number of rows displayed in Items control - wpf

Is there a way to limit the number of rows that get displayed in items control. ?
I have a observable collection of strings which are bound to Items control. I want to limit the number of rows to display to only one. The collection can have more than one.
Thanks,

You can use a IValueConverter for this:
public class ItemsLimiter : IValueConverter
{
public object Convert(object value, Type targetType, object parameter, string language)
{
int count;
if (Int32.TryParse((string)parameter, out count))
{
return ((IEnumerable<object>)value).Take(count);
}
return value;
}
public object ConvertBack(object value, Type targetType, object parameter, string language)
{
return null;
}
}
In XAML you can use it like this:
<ItemsControl ItemsSource="{x:Bind Data, Converter={StaticResource ItemsLimiter}, ConverterParameter=12}">

Let's say your ItemsSource is set to MyObservableCollection.
Well, what if you change your ItemsSource so that it is pointing a MyOneItemCollection instead?
Then, just use LINQ to do something like this:
using System.Linq;
MyOneItemCollection = MyObservableCollection.First();
or
using System.Linq;
MyOneItemCollection = MyObservableCollection.Single(item => item.Id = MyId);

If you only ever need one item to display you can show the first item using a ContentControl instead with the same available templating options:
<ContentControl DataContext="{erm:Items FieldName}" Content="{Binding [0]}">
<DataTemplate>
<TextBlock Text="{Binding}" TextWrapping="Wrap" FontSize="14" VerticalAlignment="Center" FontWeight="Bold" />
</DataTemplate>
</ContentControl>

Check out my PaginatedObservableCollection here http://jobijoy.blogspot.com/2008/12/paginated-observablecollection.html
This is a subclassed observableCollection which lets you bind to N items and make the UI display 'n' items when you set ItemsPerPage. In your case if you put 1 and can bind the next and previous also to some buttons as in my sample.
Hope this give you some idea.

You can implement a custom CollectionView that only provides n elements. I did something similar in my autocomplete textbox control implementation, check it out here:
A Reusable WPF Autocomplete TextBox
Scroll down to the header titled Limiting the Completions List see what I did there.

You can do this by creating a CollectionView that produces only a single item. This is quite simple: Just subclass CollectionView and override OnCollectionChanged to set a filter to filter out everything except the first item in the underlying collection:
protected override void OnCollectionChanged(NotifyCollectionChangedEventArgs args)
{
base.OnCollectionChanged(args);
var first = SourceCollection.FirstOrDefault();
Filter = (obj) => obj == first;
}
Now you need to insert this CollectionView into your ItemsSource. If erm:Items's ProvideValue produces the actual collection or a Binding with no Converter, you can just create your own MarkupExtension which either wraps it in your custom view or adds a Converter to do the wrapping. On the other hand, if erm:Items produces a Binding that already has a Converter or you can't rely on knowing what it produces, you should probably use a more general solution - I would suggest attached properties.
To use attached properties, your ItemsControl will be bound like this:
<ItemsControl
my:SinglerCollectionViewCreator.ItemsSource="{erm:Items FieldName}"
... />
and the code in the SinglerCollectionViewCreator class would be:
public class SinglerCollectionViewCreator : DependencyObject
{
public object GetItemsSource(... // use "propa" snippet to fill this in
public void SetItemsSource(....
public static readonly DependencyProperty ItemsSourceProperty = ...
{
PropertyChangedCallback = (obj, e)
{
obj.SetValue(ItemsControl.ItemsSourceProperty,
new SinglerCollectionView(e.NewValue));
}
}
}
The way this work is, whenever your new SinglerCollectionViewCreator.ItemsSource property is set on any object, the value is wrapped inside your SinglerCollectionView class and the ItemsControl.ItemsSource is set on the same object.

Is there a way to do this entirely in XAML, without writing code?
<ItemsControl Height="100" ItemsSource="{erm:Items FieldName}" Grid.Row="1" >
<ItemsControl.ItemTemplate>
<DataTemplate>
<TextBlock Text="{Binding}" TextWrapping="Wrap" FontSize="14" VerticalAlignment="Center" FontWeight="Bold" />
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
I have the items source bound like above. The Items markup extension returns observable collection of strings and I have no control over the observable collection.

Related

ListBox Split Into Two Columns

I would like to have my ListBox layout like this:
But currently I have this:
And my xml code looks like this:
<ListBox DockPanel.Dock="Top" Grid.Column="1" Grid.Row="1" Height="200" ScrollViewer.VerticalScrollBarVisibility="Visible">
<ListBoxItem Width="325" Content="Visual Basic"/>
<ListBoxItem Width="325" Content="Silverlight"/>
<ListBoxItem Width="325" Content="ASP.NET"/>
<ListBoxItem Width="325" Content="WCF"/>
<ListBoxItem Width="325" Content="Web Services"/>
<ListBoxItem Width="325" Content="Windows Service"/>
</ListBox>
So how can I make two columns in a ListBox and add data to them?
Here is an inspiration how you could display your enthusiasm for boats. This is a simple example in code-behind, as I do not know how deep your knowledge about WPF is.
First, create a data type that represents a book with a Title and an Authors property.
public class Book
{
public Book(string title, IEnumerable<string> authors)
{
Title = title;
Authors = authors;
}
public string Title { get; }
public IEnumerable<string> Authors { get; }
}
Then in your window's code-behind, expose a collection for your books and initialize it in the constructor. Set the DataContext to this, so bindings will have the window as source and find the Books property.
public partial class MainWindow
{
public MainWindow()
{
InitializeComponent();
Books = new List<Book>
{
new Book("Boaty McBoatface", new[] { "Byron Barton" }),
new Book("Boat life", new[] { "Jeremy Boats", "Bud Shipman" }),
new Book("Boat Boys", new[] { "Will Buy Boats" }),
};
DataContext = this;
}
public IEnumerable<Book> Books { get; }
}
Now, create a ListView that binds its ItemsSource to the Books property. Remember, the binding will resolve the property on the window, as we set it as DataContext.
Add a GridView to the View property of the ListView. A GridView is responsible for displaying the columns, which you have to define. A GridViewColumn has a DisplayMemberBinding which can be bound to any property within the item type of the bound collection, here Book. If you bind a property like this, the value will be displayed as plain text in a column cell. For custom data types, you can specify a DataTemplate as CellTemplate.
<ListView ItemsSource="{Binding Books}">
<ListView.Resources>
<local:StringsToCommaSeparatedStringConverter x:Key="StringsToCommaSeparatedStringConverter"/>
</ListView.Resources>
<ListView.View>
<GridView>
<GridViewColumn Header="Title"
DisplayMemberBinding="{Binding Title}"/>
<GridViewColumn Header="Authors"
DisplayMemberBinding="{Binding Authors, Converter={StaticResource StringsToCommaSeparatedStringConverter}}"/>
</GridView>
</ListView.View>
</ListView>
For the collection of authors we use another techique in WPF, value converters. Those can be used in binding and will convert a value from the source to something else for the target to display and vice-versa. Here, I created a custom value converter, that converts a collection of strings to a comma-separted single string.
public class StringsToCommaSeparatedStringConverter : IValueConverter
{
public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
{
if (!(value is IEnumerable<string> values))
return Binding.DoNothing;
return string.Join(", ", values);
}
public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
{
throw new InvalidOperationException("This converter is not implemented two-way, because of lazyness.");
}
}
As you saw in the XAML above, you need to create an instance of the converter in any resources in scope and specify it in the binding where you want to apply it.
This is a more or less simple example to start with. You should sooner or later start learning the MVVM design pattern to improve separation of the user interface and your data and business logic. To migrate this example to MVVM, you would move the books collection property to a view model that you would set as DataContext e.g. of the window.
Further reading:
GridView Overview
Data Templating Overview
WPF Apps With The Model-View-ViewModel Design Pattern
By the way, in general a ListBox does not have built-in support for columns, a ListView does through GridView. There is even a much more powerful but at the same time complex control for tabular data, the DataGrid, in case you ever need it. Keep on boating!

Using a variable in XAML binding expression

I'm building a control that can edit POCOs. There is a descriptor collection for the fields within the POCO that need to be edited and I'm binding a ListBox's ItemsSource to this collection. Amongst other things, the descriptor gives me the ability to select a suitable DataTemplate and the variable name in the POCO that this ListBox item should edit.
My ListBox is built like this:
<ListBox ItemsSource="{Binding ColumnCollection, ElementName=root}">
<ListBox.Resources>
<DataTemplate x:Key="TextTemplate">
<StackPanel>
<TextBlock Text="{Binding DisplayName}" />
<!-- !!! Question about following line !!! -->
<TextBox Text="{Binding ElementName=vm.CurentEditing, Path=PathName}" />
</StackPanel>
</DataTemplate>
<!-- Details omitted for brevity -->
<DataTemplate x:Key="PickListTemplate" />
<DataTemplate x:Key="BooleanTemplate" />
</ListBox.Resources>
<ListBox.ItemTemplateSelector>
<local:DataTypeSelector
TextTemplate="{StaticResource TextTemplate}"
PickListTemplate="{StaticResource PickListTemplate}"
BooleanTemplate="{StaticResource BooleanTemplate}"
/>
</ListBox.ItemTemplateSelector>
</ListBox>
It is the TextBox binding expression in the "TextTemplate" that I am having problems with. The problem is that "PathName" should not be taken as a literal string, but is the name of a string property in the ColumnDescription class (the collection type of ColumnCollection used for ListBox.ItemsSource), which gives the name of the POCO property I want to bind to (the POCO is "vm.CurrentEditing").
Is there some way to use the value of a property in XAML as input to a binding expression, or will I have to resort to code behind?
(Incidentally, specifying the ElementName as "x.y" as I have done above also seems to be invalid. I assume the "y" part should be in Path but that's currently taken up with my property name...!)
So you want to bind TextBox.Text to Property X of Object Y, where X and Y both change at runtime.
It sounds like what you want to do is something analogous to ListBox.DisplayMemberPath: You can bind a string or PropertyPath property to DisplayMemberPath and it'll work. The way I've done stuff like that is to have a dependency property of type String or PropertyPath, and programatically create a binding from that to whatever property.
So, I wrote an attached property which creates a binding.
public class POCOWrangler
{
#region POCOWrangler.BindPropertyToText Attached Property
public static String GetBindPropertyToText(TextBox obj)
{
return (String)obj.GetValue(BindPropertyToTextProperty);
}
public static void SetBindPropertyToText(TextBox obj, PropertyPath value)
{
obj.SetValue(BindPropertyToTextProperty, value);
}
public static readonly DependencyProperty BindPropertyToTextProperty =
DependencyProperty.RegisterAttached("BindPropertyToText", typeof(String), typeof(POCOWrangler),
new PropertyMetadata(null, BindPropertyToText_PropertyChanged));
private static void BindPropertyToText_PropertyChanged(DependencyObject d, DependencyPropertyChangedEventArgs e)
{
if (e.NewValue is String && d is TextBox)
{
var tb = d as TextBox;
var binding = new Binding((String)e.NewValue);
// The POCO object we're editing must be the DataContext of the TextBox,
// which is what you've got already -- but don't set Source explicitly
// here. Leave it alone and Binding.Source will be updated as
// TextBox.DataContext changes. If you set it explicitly here, it's
// carved in stone. That's especially a problem if this attached
// property gets initialized before DataContext.
//binding.Source = tb.DataContext;
binding.Mode = BindingMode.TwoWay;
BindingOperations.SetBinding(tb, TextBox.TextProperty, binding);
}
}
#endregion POCOWrangler.BindPropertyToText Attached Property
}
And I wrote a quick example thing: There's a little class named Foo that has a Name property, and a viewmodel with two properties, Foo Foo and String DisplayPathName. It works! Of course, this depends on default TextBox editing behavior for whatever type the property happens to be. I think that will get you the same results as if you'd bound explicitly in XAML, but it sitll won't always necessarily be just what you want. But you could very easily go a little nuts and add some triggers in the DataTemplate to swap in different editors, or write a DataTemplateSelector.
I stuffed ViewModel.Foo in a ContentControl just to get a DataTemplate into the act, so that the TextBox gets his DataContext in the same manner as yours.
Note also that I'm getting DisplayPathName by a relative source from something outside the DataContext object -- it's not a member of Foo, of course, it's a member of the viewmodel.
C#
public MainWindow()
{
InitializeComponent();
DataContext = new ViewModel {
DisplayPathName = "Name",
Foo = new Foo { Name = "Aloysius" }
};
}
XAML
<ContentControl
Content="{Binding Foo}"
>
<ContentControl.ContentTemplate>
<DataTemplate>
<TextBox
local:POCOWrangler.BindPropertyToText="{Binding
DataContext.DisplayPathName,
RelativeSource={RelativeSource AncestorType=ContentControl}}"
/>
</DataTemplate>
</ContentControl.ContentTemplate>
</ContentControl>
That was fun.

WPF tab control and MVVM selection

I have a TabControl in an MVVM WPF application. It is defined as follows.
<TabControl Style="{StaticResource PortfolioSelectionTabControl}" SelectedItem="{Binding SelectedParameterTab}" >
<TabItem Header="Trades" Style="{StaticResource PortfolioSelectionTabItem}">
<ContentControl Margin="0,10,0,5" Name="NSDetailTradeRegion" cal:RegionManager.RegionName="NSDetailTradeRegion" />
</TabItem>
<TabItem Header="Ccy Rates" Style="{StaticResource PortfolioSelectionTabItem}">
<ContentControl Margin="0,10,0,5" Name="NSDetailCcyRegion" cal:RegionManager.RegionName="NSDetailCcyRegion" />
</TabItem>
<TabItem Header="Correlations / Shocks" Style="{StaticResource PortfolioSelectionTabItem}">
<ContentControl Name="NSDetailCorrelationRegion" cal:RegionManager.RegionName="NSDetailCorrelationRegion" />
</TabItem>
<TabItem Header="Facility Overrides" Style="{StaticResource PortfolioSelectionTabItem}" IsEnabled="False">
<ContentControl Name="NSDetailFacilityOverrides" cal:RegionManager.RegionName="NSDetailFacilityOverrides" />
</TabItem>
</TabControl>
So each tab item content has its own view associated with it. Each of those views has the MEF [Export] attribute and is associated with the relevant region through view discovery, so the above code is all I need to have the tab control load and switch between them. They all reference the same shared ViewModel object behind them and so all interact seamlessly.
My problem is that when the user navigates to the parent window, I want the tab control to default to the second tab item. That is easy enough to do when the window is first loaded, by specifying in XAML IsSelected="True" in TabItem number 2. It is less easy to do when the user navigates away from the screen and then comes back to it.
I thought about having a SelectedItem={Binding SelectedTabItem} property on the tab control, so I could programmatically set the selected tab in the ViewModel, but the problem is I have no knowledge of the TabItem objects in the ViewModel as they are declared above in the XAML only, so I have no TabItem object to pass to the setter property.
One idea I had was to make the child Views (that form the content of each of the tab items above) have a style on the UserControl level of their XAML, something along the following.
<Style TargetType={x:Type UserControl}>
<Style.Triggers>
<DataTrigger Property="IsSelected" Value="True">
<Setter Property="{ElementName={FindAncestor, Parent, typeof(TabItem)}, Path=IsSelected", Value="True" />
</DataTrigger>
</Style.Triggers>
</Style>
I know the findancestor bit isn't correct; I've just put it there to specify my intent, but I am not sure of the exact syntax. Basically for each UserControl to have a trigger that listens to a property on the ViewModel (not sure how I would distinguish each different UserControl as obviously they can't all listen to the same property or they would all select simultaneously when the property is set to True, but having a property for each usercontrol seems ugly) and then finds its parent TabItem container and sets the IsSelected value to true.
Am I on the right track with a solution here? Is it possible to do what I am pondering? Is there a tidier solution?
If you look at the TabControl Class page on MSDN, you'll find a property called SelectedIndex which is an int. Therefore, simply add an int property into your view model and Bind it to the TabControl.SelectedIndex property and then you can select whichever tab you like at any time from the view model:
<TabControl SelectedIndex="{Binding SelectedIndex}">
...
</TabControl>
UPDATE >>>
Setting a 'startup' tab is even easier using this method:
In view model:
private int selectedIndex = 2; // Set the field to whichever tab you want to start on
public int SelectedIndex { get; set; } // Implement INotifyPropertyChanged here
Just FYI,
I gone through the same issue where I add tabs dynamically using ObservableCollection source but last added Tab do not get selected.
I have done same changes what Sheridan said to select Tab as per SelectedIndex. Now last added Tab gets selected but it was not getting focused.
So to focus the Tab we have to add set Binding IsAsync property True.
<TabControl ItemsSource="{Binding Workspaces}" Margin="5" SelectedIndex="{Binding TabIndex, Mode=OneWay,UpdateSourceTrigger=PropertyChanged, IsAsync=True}">
The below code sample will create a dynamic tab using MVVM.
XAML
<TabControl Margin="20" x:Name="tabCategory"
ItemsSource="{Binding tabCategory}"
SelectedItem="{Binding SelectedCategory}">
<TabControl.ItemTemplate>
<DataTemplate>
<HeaderedContentControl Header="{Binding TabHeader}"/>
</DataTemplate>
</TabControl.ItemTemplate>
<TabControl.ContentTemplate>
<DataTemplate>
<ContentControl Content="{Binding TabContent}" />
</DataTemplate>
</TabControl.ContentTemplate>
</TabControl>
Modal Class
TabCategoryItem represents each tab item. On two properties, TabHeader will display a tab caption and TabContent contains the content/control to fill in each tab.
Public Class TabCategoryItem
Public Property TabHeader As String
Public Property TabContent As UIElement
End Class
VM Class
Public Class vmClass
Public Property tabCategory As ObjectModel.ObservableCollection(Of TabCategoryItem)
Public Property SelectedCategory As TabCategoryItem
End Class
The below code will fill and bind the content. I am creating two tabs, tab1 and tab2. Both tabs will contain text boxes. You can use any UIelement instead of text boxes.
Dim vm As New vmClass
vm.tabCategory = New ObjectModel.ObservableCollection(Of TabCategoryItem)
'VM.tabCategory colection will create all tabs
vm.tabCategory.Add(New TabCategoryItem() With {.TabHeader = "Tab1", .TabContent = new TextBlock().Text = "My first Tab control1"})
vm.tabCategory.Add(New TabCategoryItem() With {.TabHeader = "Tab2", .TabContent = new TextBlock().Text = "My first Tab control2"})
mywindow.DataContent = vm
The accepted answer is not working with DependencyObject on your ViewModel .
I'm using MVVM with DependencyObject and Just setting the TabControl didn't work for me.The problem I had was the the property was not getting update on the View when I was setting the tab selectedIndex from the ViewModel.
I did set the Mode to be two ways but nothing was working.
<TabControl SelectedIndex="{Binding SelectedTab,Mode=TwoWay}" >
...
</TabControl>
The ViewModel property "SelectedTab" was getting updated all the time when I navigated between tabs. This was confirming my binding was working properly. Each time I would navigate the tabs both the Get and Set would get called in my ViewModel. But if I try to set the SelectedIndex in the ViewModel it would not update the view.
ie: SelectedTab=0 or SelectedTab=1 etc...
When doing the set from the ViewModel the SelectedTab 'set' method would be called, but the view would never do the 'get'.
All I could find online was example using INotifyPropertyChanged but I do not wish to use that with my ViewModel.
I found the solutions in this page: http://blog.lexique-du-net.com/index.php?post/2010/02/24/DependencyProperties-or-INotifyPropertyChanged
With DependencyObject, you need to register the DependencyProperties. Not for all properties but I guess for a tabcontrol property you need to.
Below my code:
view.xaml
//Not sure below if I need to mention the TwoWay mode
<TabControl SelectedIndex="{Binding SelectedTab,Mode=TwoWay}" >
...
</TabControl>
ViewModel.cs
public class ViewModel : DependencyObject
{
public static readonly DependencyProperty SelectedTabDP = DependencyProperty.Register("SelectedTab", typeof(int), typeof(ViewModel));
public int SelectedTab
{
get { return (int)GetValue(SelectedTabDP); }
set { SetValue(SelectedTabDP, value); }
}
}
Basically all I had to do was to actually register the dependency property (DependencyProperty) as you can see above.
What made this hard to figure out was that I have a bunch of other Properties on that view and I didn't need to register them like that to make it work two ways. For some reason on the TabControl I had to register the property like I did above.
Hope this help someone else.
Turns out my problem were because my components have names:
x:Name="xxxxxxxx"
Giving names to components at the same time of biding them with DependencyObject seems to be the main cause of all my issues.
In order to improve semantic of my viewmodel and to not work with an int when using code to check for the selected tab, I made some additions to the accepted answer so to use an Enum instead of an int.
These are the steps:
Define an Enum representing the different tabs:
public enum RulesVisibilityMode {
Active,
History
}
Expose the SelectedTab as a property using the enum instead of the int:
public RulesVisibilityMode SelectedTab { get; set; }
Create a converter to convert from an int to your enum (I don't need the ConvertBack because I never select the active tab from the code, but you can add it too):
internal class RulesVisibilityModeConverter : IValueConverter
{
public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
{
throw new NotImplementedException("Conversion from visibility mode to selected index has not been implemented");
}
public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
{
int selectedTabIndex;
if (int.TryParse(value.ToString(), out selectedTabIndex))
{
return (RulesVisibilityMode)selectedTabIndex;
}
return null;
}
}
Bind the tabcontrol to the SelectedTab property through the converter:
<TabControl SelectedIndex="{Binding SelectedTab, Mode=OneWayToSource, Converter={StaticResource RulesVisibilityModeConverter}}" ...
Now every time you need to check for the selected tab in the code you deal with a readable enum:
if (this.SelectedTab != RulesVisibilityMode.Active) ...

Issue with TabControl which ContentTemplate contains a TabControl

In my WPF application, I have a TabControl named ParentTabControl, which ContentTemplate is composed of several controls, including a TabControl named ChildTabControl.
ParentTabControl contains, say, 2 tabs (each one bound to a different source), where as ChildTabControl always contain 1 tab. I'm focusing the first tab of ParentTabControl. By default, the first (the only one) tab of ChildTabControl is selected. The problem is that, if I switch to the second tab of ParentTabControl, the tab of its ChildTabControl is not selected. Is that a normal behavior? How can I do to always select a tab?
I hope I'm clear enough. Here is some code:
ParentTabControl:
<TabControl Name="ParentTabControl"
ItemsSource="{Binding ParentItemsSource}"
ContentTemplate="{StaticResource ResourceKey=ContentTemplate}"
IsSynchronizedWithCurrentItem="True" />
ContentTemplate:
<DataTemplate x:Key="ContentTemplate">
<TabControl Name="ChildTabControl"
ItemsSource="{Binding ChildItemsSource, Converter={StaticResource ResourceKey=ItemToObservableCollectionConverter }}" />
</DataTemplate>
ItemsSource:
public ObservableCollection<ParentData> ParentItemsSource { get; set; }
public class ParentData
{
public ChildData ChildItemsSource { get; set; }
}
Converter:
public class ItemToObservableCollectionConverter : IValueConverter
{
public object Convert(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
{
return new ObservableCollection<object> { value };
}
}
Thank you.
First, if you have one and only one item, why do you want a TabControl? If you just want to have an element with a header, you can do that in your ContentTemplate.
In order to fix the issue you're seeing, however, have you tried setting SelectedIndex="0" on the ChildTabControl? That should force it to always be selected.
EDIT for other possible solution
Well, I was able to replicate this, but it only happens intermittently in my test.
I think the easiest way you can fix this is to set the SelectedItem of the child TabControl to the ChildItemsSource:
<TabControl Name="ChildTabControl"
ItemsSource="{Binding ChildItemsSource, Converter={StaticResource ResourceKey=ItemToObservableCollectionConverter }}"
SelectedItem="{Binding ChildItemsSource}" />
I have no idea what is causing this issue, but this definitely fixes it.

Is there any way to convert the members of a collection used as an ItemsSource?

In WPF you can use an IValueConverter or IMultiValueConverter to convert a data-bound value from say an int to a Color.
I have a collection of Model objects which I would like to convert to their ViewModel representations but in this scenario,
<ListBox ItemsSource="{Binding ModelItems,
Converter={StaticResource ModelToViewModelConverter}" />
the converter would be written to convert the whole collection ModelItems at once.
I wish to convert the items of the collection individually, is there a way to do that? I might want to use a CollectionViewSource and have some filtering logic so I don't want to have to iterate over the whole collection every time something changes.
You cannot set the converter on the collection itself, because it would get the collection as input. You have two choices:
Make sure your converter can also deal with collections (IEnumerable).
Use the converter within the item template.
If you want to use the second approach, then use something like this:
<ListBox ItemsSource="{Binding ModelItems}">
<ListBox.ItemTemplate>
<DataTemplate>
<ContentPresenter Content="{Binding Converter={StaticResource ModelToViewModelConverter}}"
ContentTemplate="{StaticResource MyOptionalDataTemplate}"/>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
If you don't need a custom datatemplate, then you can skip the ContentTemplate attribute.
Yes you can. It is acting the same as with the IValueConverter. You simply treat the value parameter for the Convert method as a collection.
Here is an example of Converter for a collection:
public class DataConvert : IValueConverter
{
public object Convert(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
{
ObservableCollection<int> convertible = null;
var result = value as ObservableCollection<string>;
if (result != null)
{
convertible = new ObservableCollection<int>();
foreach (var item in result)
{
if (item == "first")
{
convertible.Add(1);
}
else if (item == "second")
{
convertible.Add(2);
}
else if (item == "third")
{
convertible.Add(3);
}
}
}
return convertible;
}
public object ConvertBack(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
{
throw new NotImplementedException();
}
}
In this case is just a proof of concept, but I think it should show the idea very well.
The Converter converts from a simple collection of strings like this:
ModelItems = new ObservableCollection<string>();
ModelItems.Add("third");
ModelItems.Add("first");
ModelItems.Add("second");
into a collection of integers corresponding to the string meaning.
And here is the corresponding XAML (loc is the reference of the current assembly where is the converter):
<Window.Resources>
<loc:DataConvert x:Key="DataConverter"/>
</Window.Resources>
<Grid x:Name="MainGrid">
<ListBox ItemsSource="{Binding ModelItems, Converter={StaticResource DataConverter}}"/>
</Grid>
If you want to make a two way binding, you have to implement also the convert back. From the experience of working with MVVM, i suggest to use something like the Factory Pattern to transform from Model in ViewModel and backwards.
Here is another example. I'm using MVVM Caliburn Micro. MyObjects is a list of enums in my case.
<ListBox x:Name="MyObjects">
<ListBox.ItemTemplate>
<DataTemplate>
<TextBlock Text="{Binding ., Converter={StaticResource MyConverter}}"/>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>

Resources