Develop Reference

Sorting Horizontal ListView

I want a list view to sort based on an Object its bounded to
<ListView x:Name="ListView1" Grid.Row="2" Grid.Column="2" VirtualizingStackPanel.IsVirtualizing="True" ScrollViewer.CanContentScroll="False" ItemsSource="{Binding Path=CurrentProductsImages}">
<ListView.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel Orientation="Horizontal" />
</ItemsPanelTemplate>
</ListView.ItemsPanel>
<ListView.ItemTemplate>
<DataTemplate>
<Border BorderBrush="Black" BorderThickness="0,0,2,0" >
<Image Source="{Binding Path=Data, Converter={StaticResource ImageSourceConverter}}" RenderOptions.BitmapScalingMode="Fant" Height="{Binding RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type ListView} },Path=ActualHeight, Converter={StaticResource HeightMinusConverter}}" />
</Border>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
So the Binded Item CurrentProductsImages has a variable called "DisplayOrder"
I want to order the Listview off this value but can't find a way. Most vertical methods of sorting use a gridview but as mines stacked horizontally i cant get it to work?
I can sort the object prior to binding but i wanted it to be more on the WPF side. any ideas? Many thanks

The xaml way of sorting would be to use a collectionviewsource. That has sortdescriptions.
<CollectionViewSource x:Key="SortedItems" Source="{Binding UnsortedItems}" >
<CollectionViewSource.SortDescriptions>
<scm:SortDescription PropertyName="Blaa" />
<scm:SortDescription PropertyName="Blaa2" />
</CollectionViewSource.SortDescriptions>
</CollectionViewSource>
The problem being you can't bind those sortdescriptions.
You could potentially do something with a behaviour or custom frameworkelement. That would allow you to write a bunch of code and kind of make this work in the UI. It'd be more complicated than doing the sorting in the viewmodel though.
I suggest you instead add a collectionview to your viewmodel and handle the sorting there in code. You can define a custom icomparer to use or just clear and add sortdescriptions.
Or sort using Linq if that is better suited to your requirement / skillset.
Examples of sorting (and doing other stuff ) with collections:
https://social.technet.microsoft.com/wiki/contents/articles/26673.wpf-collectionview-tips.aspx
There's a working sample linked.
Esentially, with an observablecollection of People, this is bound using:
public CollectionView PeopleView {get; set;}
Set up:
CollectionViewSource cvs = new CollectionViewSource();
cvs.Source = People;
PeopleView = (CollectionView)cvs.View;
Sorted:
PeopleView.SortDescriptions.Clear();
PeopleView.SortDescriptions.Add(new SortDescription("OrganizationLevel", ListSortDirection.Ascending));
PeopleView.SortDescriptions.Add(new SortDescription("LastName", ListSortDirection.Ascending));
PeopleView.SortDescriptions.Add(new SortDescription("FirstName", ListSortDirection.Ascending));

Select different bindings in DataContext based on another binding

I have a fairly dynamic ObservableCollection of view models that is used by two different ListBox elements in XAML. Each view model contains properties for two different model objects of type Card called Primary and Secondary, as well as other properties. In one ListBox I'd like to display properties from Primary and in the other I'd like to display properties from Secondary. I'd like to use the same XAML UserControl file when displaying the ListBoxItems for both.
My first thought was to create an entry in UserControl.Resources that gives a name to the "right" card based on a RelativeSource reference from the parent view model which indicates Primary or Secondary, but I've not created an entry like that before. Is this the right approach? If so, what would the entry look like?
I've made up some XAML to help illustrate (may have typos). First, the Primary ListBox control:
<UserControl x:Class="Project.Cards.ListPrimary" d:DataContext="{Binding Main.Cards.Primary, Source={StaticResource Locator}}">
<UserControl.Resources>
<ResourceDictionary>
<DataTemplate DataType="{x:Type vms:CardViewModel}">
<views:Card />
</DataTemplate>
</ResourceDictionary>
</UserControl.Resources>
<Grid>
<ListBox x:Name="CardListBox"
SelectedItem="{Binding SelectedCard}"
ItemsSource="{Binding Cards}" />
</Grid>
</UserControl>
And the secondary:
<UserControl x:Class="Project.Cards.ListSecondary" d:DataContext="{Binding Main.Cards.Secondary, Source={StaticResource Locator}}">
... (same) ...
</UserControl>
And the card view (where I need to replace "Primary.Direction" with something that lets me select Primary/Secondary):
<UserControl x:Class="Project.Cards.Card">
<UserControl.Resources>
... perhaps something here ...
</UserControl.Resources>
<StackPanel>
<TextBlock Text="{Binding Name}" />
<TextBlock Text="{Binding Description}" />
<TextBlock Text="{Binding Primary.Direction}" />
</StackPanel>
</UserControl>

If you want two instances of the same UserControl that differ in one respect, you figure out how to parameterize that. There are a couple of ways, but the simplest I thought of that fits your case was to just bind the differing value to a property of the View. This moves the specification of the different value to the owner.
We'll do that by defining a dependency property on the UserControl. It's a string, though it could be an object, and in the future you might want to make it one. Since we're using the view in a DataTemplate, we can bind a property of the DataContext to it there.
public partial class Card : UserControl
{
public Card()
{
InitializeComponent();
}
public String Direction
{
get { return (String)GetValue(DirectionProperty); }
set { SetValue(DirectionProperty, value); }
}
public static readonly DependencyProperty DirectionProperty = DependencyProperty.Register("Direction",
typeof(String), typeof(Card), new PropertyMetadata(null));
}
...and we'll use that in the UserControl like this:
<Grid>
<StackPanel>
<TextBlock Text="{Binding Name}" />
<TextBlock Text="{Binding Description}" />
<TextBlock
Text="{Binding Direction, RelativeSource={RelativeSource AncestorType=UserControl}}"
/>
</StackPanel>
</Grid>
The RelativeSource stuff tells the Binding to look for that Direction property on the UserControl object itself, rather than on the DataContext as it would otherwise do by default.
If Card.Direction were object instead of string, you'd make that TextBox a ContentControl and bind to its Content property. Then you could put anything in there -- XAML, a whole other viewmodel, literally anything that XAML can figure out how to display.
And here's how it looks in the wild:
<DataTemplate DataType="{x:Type vms:CardViewModel}">
<views:Card Direction="{Binding Primary.Direction}" />
</DataTemplate>
And here's my whole mainwindow content from my test code. I didn't bother creating user controls for the listboxes; the above template is an exact match for the way you're doing it.
<Window.Resources>
<DataTemplate x:Key="PrimaryItemTemplate" DataType="{x:Type vms:CardViewModel}">
<views:Card Direction="{Binding Primary.Direction}" />
</DataTemplate>
<DataTemplate x:Key="SecondaryItemTemplate" DataType="{x:Type vms:CardViewModel}">
<views:Card Direction="{Binding Secondary.Direction}" />
</DataTemplate>
</Window.Resources>
<Grid>
<StackPanel Orientation="Horizontal">
<ListBox
SelectedItem="{Binding SelectedCard}"
ItemsSource="{Binding Cards}"
ItemTemplate="{StaticResource PrimaryItemTemplate}"
/>
<ListBox
SelectedItem="{Binding SelectedCard}"
ItemsSource="{Binding Cards}"
ItemTemplate="{StaticResource SecondaryItemTemplate}"
/>
</StackPanel>
</Grid>
I originally thought of a more elaborate scheme where you give the view a DataTemplate instead, and it worked, but this is simpler. On the other hand, that was more powerful. I actually used that in the first version of the answer, before I came to my senses; it's in the edit history.
Thanks for a fun little projectlet.

How can I bind a datatemplate to a observablecollection so that they all show up?

How can I bind a datatemplate to reproduce itself for each item within an observablecollection so that they all show up? Or must I add these as individual controls, at runtime?
So I have a datatemplate:
<UserControl.Resources>
<DataTemplate x:Key="QueueItem">
<StackPanel Orientation="Vertical">
<Label Content="{Binding caseNumber}"></Label>
<!--TODO: put my other controls for this template here...-->
</StackPanel>
</DataTemplate>
</UserControl.Resources>
And I implement it in xaml here:
<ContentControl
Content="{Binding TestItems}"
ContentTemplate="{StaticResource QueueItem}">
</ContentControl>
And in my viewmodel there is a instance TestItems of some class I made, and one member of that is caseNumber, so the code above works just fine for me... But now I would like to have an observable collection of that same class, so is it possible/ is there xaml syntax to bind to the collection instance to reproduce the above for each index?
Thanks!

You could use an ItemsControl and use the ItemsTemplate property for your template:
<ContentControl>
<ItemsControl
ItemsSource="{Binding YourTestItemList}"
ItemTemplate="{StaticResource QueueItem}"/>
</ContentControl>

Use ItemsControl instead of ContentControl
Click here for sample code

Listbox live sort using CollectionViewSource on ObservableCollection

I would like to enable live sorting of ListBox items bound to an ObservableCollection; I would also like to enable the live sorting exclusively via my XAML markup (if possible). As things stand, the list is properly sorted on application startup, but items are simply appended (not sorted) to the ListBox when new items are added to the ObservableCollection.
In my viewmodel I have the following public property:
public ObservableCollection<Equipment> EquipmentList { get; set; }
Equipment is an auto-generated class from Entity Framework which contains a public string property named 'Description'. This is my sort target.
My XAML has the following DataTemplate which is intended to enable the live sorting:
<DataTemplate x:Key="EquipmentDescriptionTemplate"
DataType="{x:Type e:Equipment}">
<DataTemplate.Resources>
<CollectionViewSource x:Key="SortedEquipmentList"
Source="{Binding Path=Description,
Mode=OneWay,
UpdateSourceTrigger=PropertyChanged}"
IsLiveSortingRequested="True">
<CollectionViewSource.SortDescriptions>
<scm:SortDescription PropertyName="Description"
Direction="Ascending"/>
</CollectionViewSource.SortDescriptions>
<CollectionViewSource.LiveSortingProperties>
<clr:String>Description</clr:String>
</CollectionViewSource.LiveSortingProperties>
</CollectionViewSource>
</DataTemplate.Resources>
<TextBlock Text="{Binding Path=Description}" />
</DataTemplate>
And finally the XAML ListBox item:
<ListBox x:Name="EquipmentList"
ItemsSource="{Binding Path=EquipmentList, UpdateSourceTrigger=PropertyChanged, Mode=OneWay}"
ItemTemplate="{StaticResource EquipmentDescriptionTemplate}"
IsSynchronizedWithCurrentItem="True"
SelectedItem="{Binding EquipmentSelection, UpdateSourceTrigger=PropertyChanged}"
Grid.ColumnSpan="2" Grid.Row="1" Margin="5,5,5,5"/>
There's a lot of extra attributes which I added in my desperate attempts to get the live sorting to work (when in doubt, guess wildly!). I've left them in so folks can see what I've tried, and snicker.
How do I enable live ListBox sorting via XAML?

You'll want to bind the ItemsSource to the CollectionViewSource, not to the underlying collection:
<ListBox x:Name="EquipmentList"
ItemsSource="{StaticResource SortedEquipmentList}"
...
/>
Place the CollectionViewSource somewhere above, in your page's resource dictionary. Bind its source to the underlying collection ("EquipmentList"):
<CollectionViewSource x:Key="SortedEquipmentList"
Source="{Binding EquipmentList.View}"
IsLiveSortingRequested="True">
<CollectionViewSource.SortDescriptions>
<scm:SortDescription PropertyName="Description" Direction="Ascending"/>
</CollectionViewSource.SortDescriptions>
<CollectionViewSource.LiveSortingProperties>
<clr:String>Description</clr:String>
</CollectionViewSource.LiveSortingProperties>
</CollectionViewSource>

Silverlight DataGrid styling

I have a DataGrid whose ItemsSource is bound to a changing Observable Collection. Inside of this collection is a Business Object. Based on some of the values of the Business Object's properties, I would like to be able to modify the color of the text for each item displayed in my DataGrid once the ItemsSource is created.
Has anyone done this before or ran across something similar? Thanks in advance.
<DataTemplate x:Key="MyTemplate">
<Grid x:Name="LayoutRoot">
<TextBlock Text="{Binding MyText}"
Foreground="{Binding MyStatus, Converter={StaticResource colorConverter}}" />
</Grid>
</DataTemplate>
I added the above code and inserted the TemplateColumn to the grid as below:
<data:DataGridTemplateColumn Header="Testing"
CellTemplate="{StaticResource MyTemplate}"/>
The code works fine and pulls out the correct text but the converter never fires and the Binding of the foreground is never called from the get on it.
Any ideas?

Yes. Use a Value Converter when databinding.
<UserControl.Resources>
<myconverters:BackColor x:Key="BackColor" />
</UserControl.Resources>
<Grid x:Name="LayoutRoot" Background="{Binding SomeValue, Converter={StaticResource BackColor}" >
</Grid>
Then have your converter class implement IValueConverter and return a Brush object of some kind. You usually don't have to implement ConvertBack()

Adding to BC's answer:
You can make a DataGridTemplateColumn and specify a data template for cells in a column. In the data template you can bind the text colour.
<swcd:DataGrid ... >
<swcd:DataGrid.Columns>
<swcd:DataGridTemplateColumn Header="MyColumn" CellTemplate="{StaticResource MyColumnDataGridCellTemplate}"/>
...
in resources:
<DataTemplate x:Key="MyColumnDataGridCellTemplate">
<Grid>
<TextBlock Text="{Binding someproperty}" Foreground="{Binding someotherproperty, Converter={StaticResource MyConverter}}"/>
...