Binding ObservableCollection<> to a TextBox - wpf

I have data comming back from web service in the form of a ObservableCollection<string> I want to bind the collection to a read-only TextBox so that the user can select and copy the data to the clipboard.
To get the collection bound to the Text property of the TextBox I created IValueConverter which converts the collection to a text string. This seems to work except that it only works once, it is as if the binding does not recognize subsequent changes to the Observable collection. Here is a simple application that reproduces the problem, just to confirm the binding is working correctly I also bind to a `ListBox'
Is this because the Text binding simple does not handle the change events of the collection?
One option would of course be for me to handle the collection changes and propogate those to a Text property that the TextBox is bound to, which is fine, but I would like to understand why what seemed to me to be an obvious solutions is not working as expected.
XAML
<Window x:Class="WpfTextBoxBinding.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="clr-namespace:WpfTextBoxBinding"
Title="MainWindow" Height="331" Width="402">
<StackPanel>
<StackPanel.Resources>
<local:EnumarableToTextConverter x:Key="EnumarableToTextConverter" />
</StackPanel.Resources>
<TextBox Text="{Binding TextLines, Mode=OneWay, Converter={StaticResource EnumarableToTextConverter}}" Height="100" />
<ListBox ItemsSource="{Binding TextLines}" Height="100" />
<Button Click="Button_Click" Content="Add Line" />
</StackPanel >
</Window>
Code Behind
using System;
using System.Collections;
using System.Collections.Generic;
using System.Collections.ObjectModel;
using System.Text;
using System.Windows;
using System.Windows.Data;
using System.Globalization;
namespace WpfTextBoxBinding
{
/// <summary>
/// Interaction logic for MainWindow.xaml
/// </summary>
public partial class MainWindow : Window
{
public ObservableCollection<string> TextLines {get;set;}
public MainWindow()
{
DataContext = this;
TextLines = new ObservableCollection<string>();
// Add some initial data, this shows that the
// TextBox binding works the first time
TextLines.Add("First Line");
InitializeComponent();
}
private void Button_Click(object sender, RoutedEventArgs e)
{
TextLines.Add("Line :" + TextLines.Count);
}
}
public class EnumarableToTextConverter : IValueConverter
{
public object Convert(
object value, Type targetType,
object parameter, CultureInfo culture)
{
if (value is IEnumerable)
{
StringBuilder sb = new StringBuilder();
foreach (var s in value as IEnumerable)
{
sb.AppendLine(s.ToString());
}
return sb.ToString();
}
return string.Empty;
}
public object ConvertBack(
object value, Type targetType,
object parameter, CultureInfo culture)
{
throw new NotImplementedException();
}
}
}

A slightly more elegant way to achieve that is to use MultiBinding on the Text property and bind to the Collection's Count property. This will update the binding every time the collection's Count changes and update the Text according to a MultiValueConverter you define.
<TextBox>
<TextBox.Text>
<MultiBinding Converter="{x:Static l:Converters.LogEntryCollectionToTextConverter}">
<Binding Path="LogEntries" Mode="OneWay"/>
<Binding Path="LogEntries.Count" Mode="OneWay" />
</MultiBinding>
</TextBox.Text>
</TextBox>
And the converter:
public static class Converters
{
public static LogEntryCollectionToTextConverter LogEntryCollectionToTextConverter = new LogEntryCollectionToTextConverter();
}
public class LogEntryCollectionToTextConverter : IMultiValueConverter
{
public object Convert(object[] values, Type targetType, object parameter, CultureInfo culture)
{
ObservableCollection<LogEntry> logEntries = values[0] as ObservableCollection<LogEntry>;
if (logEntries != null && logEntries.Count > 0)
return logEntries.ToString();
else
return String.Empty;
}
public object[] ConvertBack(object value, Type[] targetTypes, object parameter, CultureInfo culture)
{
throw new NotImplementedException();
}
}
In my use case, I don't allow the TextBox to update its source (hence the ´Mode="OneWay"´), but if need be the Converter's ConvertBack method would handle that.

Is this because the Text binding
simple does not handle the change
events of the collection?
Indeed. A binding updates only when its source property changes. If you change the TextLines property by setting a whole new ObservableCollection and implement INotifyPropertyChanged, your binding will work as expected. Adding new elements to the collection will have meaning only if it's bound to a property like ItemsControl.ItemsSource that listens to the collection changes.
One option would of course be for me
to handle the collection changes and
propogate those to a Text property
that the TextBox is bound to, which is
fine.
That would be another solution.

update below code
private void Button_Click(object sender, RoutedEventArgs e)
{
TextLines.Add("Line :" + TextLines.Count);
BindingExpression be = BindingOperations.GetBindingExpression(txtName, TextBox.TextProperty);
be.UpdateTarget();
}
where txtName is your name of your textbox
MVVM way
1- Difine a property of type string in your ViewModel as shown below and bind this property to the textbox text property a shown below and remove ValueConverter no need now.
public string TextLines {get;set;}
<TextBox Text="{Binding TextLines, Mode=OneWay/>
2- I think , you most probably handling button click event using a Command Handler say your Command is AddMoreLines
so in the AddMoreLine Command Handler , after adding a new object in your OBservrableCollection , create a StringBuilder and append all the content of your Collection and assign the string to the property created in step 1.
3- Call PropertyChanged Handler.

Related

WPF Databinding with ObservableCollection to Label

I have a ObservableCollection which I need to bind to 2 labels, first to show count of items in the collection and second to show the sum of values.
First label is bound to collections count property and second label is bound directly to ObservableCollection with a convertor to calculate total of all items
XAML looks something like this
<Grid>
<ListBox Name="itemList" ItemsSource="{Binding DataList}"/>
<Label Name="lblcount" Content="{Binding DataList.Count}" />
<Label Name="lblTotal" Content="{Binding DataList, Converter={StaticResource calculateTotalConvertor}" />
</Grid>
My VM has a collection like this
ObservableCollection<int> data = new ObservableCollection<int>();
public ObservableCollection<int> DataList
{
get { return data; }
set { data = value; }
}
My convertor code is
public class CalculateTotalConvertor : IValueConverter
{
public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
{
ObservableCollection<int> collection = value as ObservableCollection<int>;
return collection.Sum();
}
public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
{
throw new NotImplementedException();
}
}
Issue is on adding new items in DataList, ListView and label showing count of items gets updated but "lblTotal" doesnt get updated with total count.
Basically how to force your binding to be evaluated on ObservableCollection changes ? How does it work directly for ListView or DataGrid but not for label ?
I know this problem can be solved by creating a property in VM to show total and raise property change when collection gets updated but is there is any better solution than that ?
Of-course this is simplified form of my actual problem, I dont have access to the ViewModel and the collection, its a third party control. I am creating a wrapper user control and have a relative binding with the view to its inner collection.
The other answers correctly explain why it is not updating. To force it to update you can change your converter to an IMultiValueConverter:
public class CalculateTotalConvertor : IMultiValueConverter
{
public object Convert(object[] values, Type targetType, object parameter, CultureInfo culture)
{
ObservableCollection<int> collection = values.FirstOrDefault() as ObservableCollection<int>;
return collection.Sum();
}
public object[] ConvertBack(object value, Type[] targetTypes, object parameter, CultureInfo culture)
{
throw new NotImplementedException();
}
}
Then change your binding to a MultiBinding which also pulls in the Count:
<Label Name="lblTotal">
<Label.Content>
<MultiBinding Converter="{StaticResource calculateTotalConvertor}">
<Binding Path="DataList"/>
<Binding Path="DataList.Count"/>
</MultiBinding>
</Label.Content>
</Label>
Now the second binding will notify that the binding needs to update when items are added or removed, but you can just ignore the count value and not use it.
Its not updating because its bound to DataList and DataList has not changed, The count label updates because its bound to DataList.Count which is updated when an item is added to the list.
The only way I can think of to update the Sum label is to notify the UI that the DataList has changed, but this will cause the ListBox to rebind the list and it will performace will be a lot more expensive than just having a property on your model update the Sum.
So I think the best option would be to use a property on your model to caculate the sum using the ObservableCollections CollectionChangedEvent or in the logic that adds items to the list
It works for ListView and DataGrid, because these are ItemsControls that listen to the ObservableCollection's CollectionChangedEvent, which is raised when the collection itself is changed by adding or removing items.
The Label on the other hand is a ContentControl that only listens to the PropertyChangedEvent. Since your DataList is the same ObservableCollection after the insertion as it was before, no events are raised.
Just saw your edit:
If you are creating a wrapping control, give the 3rd party control a name and hook up to its inner collection's CollectionChangedEvent from your control's code behind. That way you can still push update notifications to your wrapping view.
Go with the extra property, it will save you some code on the converter. From the code behind:
public partial class MainWindow : Window, INotifyPropertyChanged
{
ObservableCollection<int> _list = new ObservableCollection<int>();
int _sum = 0;
Random rnd = new Random();
public MainWindow()
{
DataList = new ObservableCollection<int>();
DataList.CollectionChanged += new System.Collections.Specialized.NotifyCollectionChangedEventHandler(DataList_CollectionChanged);
DataContext = this;
InitializeComponent();
}
void DataList_CollectionChanged(object sender, System.Collections.Specialized.NotifyCollectionChangedEventArgs e)
{
switch (e.Action)
{
case NotifyCollectionChangedAction.Add:
foreach (object number in e.NewItems)
_sum += (int)number;
break;
case NotifyCollectionChangedAction.Remove:
foreach (object number in e.OldItems)
_sum -= (int)number;
break;
}
OnNotifyPropertyChanged("Sum");
}
public int Sum { get { return _sum; } }
public ObservableCollection<int> DataList { get; set; }
private void Add_Btn_Click(object sender, RoutedEventArgs e)
{
DataList.Add(rnd.Next(0, 256));
}
private void Remove_Btn_Click(object sender, RoutedEventArgs e)
{
if (DataList.Count == 0)
return;
DataList.RemoveAt(DataList.Count - 1);
}
public event PropertyChangedEventHandler PropertyChanged;
void OnNotifyPropertyChanged(string property)
{
if (PropertyChanged == null)
return;
PropertyChanged(this, new PropertyChangedEventArgs(property));
}
}

wpf IValueConverter not updating the view

I am trying to use IValueConverter to convert the collection into proxy object for data binding.
The converter seems to work fine, but the problem is when a new object is added or removed from the collection. The same is not refreshed in the view..
Model Object:
public class A {
public ObservableCollection<string> Members { get; }
}
Converter
public class MemberConverter : IValueConverter {
public object Convert(object value, Type targetType, object parameter, CultureInfo culture) {
var collection = new CompositeCollection();
var a = value as A;
a.Members.ToList().ForEach(member => {
collection.Add(new ProxyClass{ A= a, Member= member });
});
return collection;
}
public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture) {
throw new System.NotImplementedException();
}
}
Proxy Class
public class ProxyClass {
public A A { get; set; }
public string Member{ get; set; }
}
XAML:
<DataTemplate DataType="{x:Type my:ProxyClass}">
<TextBlock Text="{Binding Path=Member}"/>
</DataTemplate>
<HierarchicalDataTemplate DataType="{x:Type A}" ItemsSource="{Binding Converter={StaticResource MemberConverter}}">
<TextBlock Text ="{Binding}"/>
</HierarchicalDataTemplate>
A Binding will only be re-evaluated if a property change notification for the property to which it is bound has been changed. In this case the ItemsSource is bound to the DataContext - the A instance itself - so unless it is given a new A instance it will not be re-evaluated. There is nothing listening to the change notifications that the collection raises since the value given to the ItemsSource is actually a different collection instance that you are creating within your converter.
One option would be to have the converter create a helper class that hooks the CollectionChanged event of the source collection (i.e. the value passed into the converter) and that object would be responsible for keeping the source collection and the one it creates in sync. Another option is to try to force the binding to get re-evaluated - e.g. use a Path of "Members" for the ItemsSource binding and when you change the contents of the collection raise a property change notification for "Members" on A.
Its not updating because your A Property doesn't implement INotifyPropertyChanged or is a DependencyProperty
If need be you can add the following after making it implement one of the previous.
ItemsSource="{Binding Converter={StaticResource MemberConverter}, UpdateSourceTrigger=PropertyChanged}">

Binding in Converter?

I'm trying to make a custom converter that inherits from DependencyObject, but it doesn't work:
Converter:
public class BindingConverter : DependencyObject , IValueConverter
{
public object Value
{
get { return (object)GetValue(ValueProperty); }
set { SetValue(ValueProperty, value); }
}
public static readonly DependencyProperty ValueProperty =
DependencyProperty.Register("Value", typeof(object), typeof(BindingConverter), new PropertyMetadata(null));
public object Convert(object value, Type targetType, object parameter, Globalization.CultureInfo culture)
{
Debug.Assert(Value != null); //fails
return Value;
}
public object ConvertBack(object value, Type targetType, object parameter, Globalization.CultureInfo culture)
{
throw new NotImplementedException();
}
}
Xaml:
<StackPanel x:Name="this">
<!--works-->
<ContentControl Content="{Binding ActualHeight, ElementName=this}"/>
<!--doesn't work-->
<ContentControl>
<Binding>
<Binding.Converter>
<BindingConverter Value="{Binding ActualHeight, ElementName=this}" />
</Binding.Converter>
</Binding>
</ContentControl>
<TextBlock Text="{Binding Animals}"/>
</StackPanel>
Am I missing out anything?
I have some places in my projects where I needed similar functionality. Can't show you exact sample, just an idea:
perhaps you have to inherit from FrameworkElement, not IValueConverter, Something like this:
public class BindingHelper : FrameworkElement
in the BindingHelper class, set Visibility to Collapsed and IsHitTestVisible to false;
to make it working, insert it into visual tree directly. In your example, it should be a child of the StackPanel. So, it will have the same DataContext as other StackPanel children;
then, you can add one ore more dependency properties depending on your needs. For example, you might have single property for the source of data and some different properties which you then will use as converter return values. Handle all changes to the source property in your BindingHelper class and change output properties accordingly;
bind other controls to properties of the BindingHelper class using ElementName syntax
in Silverlight, ActualHeight and ActualWidth properties don't do notifications on property updates. So, binding to them won't work.
Note! ActualHeight property's binding is buggy on binding!
Why you inherit DependencyObject when coding a converter? You should just implement IValueConverter.
Try that,
First add MyConverter by the key of "MyConverterResource" on your resources then,
You can do than on XAML side or on cs side by
//You may do it on XAML side <UserControl.Resources>...
this.Resources.Add("MyConverterResource",new MyConverter());
<TextBlock Text="{Binding ActualHeight,ElementName=this
,Converter=MyConverterResource}"/>
public class MyConverter: IValueConverter
{
public object Convert(object value, Type targetType
, object parameter,Globalization.CultureInfo culture)
{
return "Your Height is:"+Value.toString();
}
}
Hope helps

Binding DocumentViewer in MVVM

I'm trying to bind a DocumentViewer to a document via the ViewModel and am not succeeding at all.
Here is my view model code...
private DocumentViewer documentViewer1 = new DocumentViewer();
public DocumentViewerVM()
{
string fileName = System.IO.Path.Combine(System.IO.Path.GetTempPath(), "Here an xps document.xps");
XpsDocument document = new XpsDocument(fileName, FileAccess.Read);
documentViewer1.Document = document.GetFixedDocumentSequence();
document.Close();
}
public DocumentViewer DocumentViewer1
{
get
{ return documentViewer1; }
set
{
documentViewer1 = value;
OnPropertyChanged("DocumentViewer1");
}
}
here is the xaml in the view...
<UserControl x:Class="DemoApp.View.DocumentViewerView"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
>
<Grid>
<DocumentViewer Name="DocumentViewer1" Document="{Binding Path=DocumentViewer1, UpdateSourceTrigger=PropertyChanged}" ></DocumentViewer>
</Grid>
</UserControl>
the code behind for the view contains no code other than 'InitializeComponent()'
What I do find strange is that if I place the document generation code from the view model constructor into the view constructor the document is displayed correctly, this leads me to think it is a binding issue, but where or how I know not.
You are binding the Document property of the DocumentViewer to a property called DocumentViewer1 which is itself a DocumentViewer. The Document property expects an instance of a type that implements IDocumentPaginatorSource, such as a FixedDocument.
If you want to keep your view models pristine and avoid including PresentationCore.dll in your view model library, then use a WPF IValueConverter such as the following.
namespace Oceanside.Desktop.Wpf.Dialogs.Converters
{
using System;
using System.Globalization;
using System.IO;
using System.Windows.Data;
using System.Windows.Documents;
using System.Windows.Xps.Packaging;
////////////////////////////////////////////////////////////////////////////////////////////////////
/// <inheritdoc />
/// <summary>
/// Our view models contain string paths to all XPS documents that we want to show. However,
/// the DocumentViewer.Document property must be of type IDocumentPaginatorSource which we do
/// not want to include in our view model because it will tie our view models to the
/// PresentationCore.dll. To assure all view logic and libraries are kept separate from our
/// view model, this converter to take a string path and convert it to a
/// FixedDocumentSequence which implements the IDocumentPaginatorSource interface.
/// </summary>
////////////////////////////////////////////////////////////////////////////////////////////////////
[ValueConversion(typeof(string), typeof(IDocumentPaginatorSource))]
public sealed class DocumentPaginatorSourceConverter : IValueConverter
{
////////////////////////////////////////////////////////////////////////////////////////////////////
/// <inheritdoc />
////////////////////////////////////////////////////////////////////////////////////////////////////
public object Convert(object value, Type targetType,
object parameter, CultureInfo culture)
{
if (!(value is string xpsFilePath)) return null;
var document = new XpsDocument(xpsFilePath, FileAccess.Read);
var source = document.GetFixedDocumentSequence();
document.Close();
return source;
}
////////////////////////////////////////////////////////////////////////////////////////////////////
/// <inheritdoc />
/// <summary>This function is not supported and will throw an exception if used.</summary>
////////////////////////////////////////////////////////////////////////////////////////////////////
public object ConvertBack(object value, Type targetType,
object parameter, CultureInfo culture)
{
//We have no use to convert from IDocumentPaginatorSource to a string path.
throw new NotSupportedException("Unable to convert an IDocumentPaginatorSource to a string path.");
}
}
}
The XAML below shows how to use the above converter. This example is a data template that has a view model of Type MessageBoxShowXpsDoc which has a simple string property called DocumentPath. This is passed to the converter to obtain the IDocumentPaginatorSource.
<!-- For showing xps/flow docs such as customer receipts -->
<DataTemplate
DataType="{x:Type dialogVms:MessageBoxShowXpsDoc}"
xmlns:converters="clr-namespace:Oceanside.Desktop.Wpf.Dialogs.Converters">
<DataTemplate.Resources>
<converters:DocumentPaginatorSourceConverter x:Key="DocPagConverter" />
</DataTemplate.Resources>
<DocumentViewer Document="{Binding DocumentPath,
Converter={StaticResource DocPagConverter}}" />
</DataTemplate>
Although including the full view model is outside the scope of the OP, this is an example of how I set that string path which is passed from the view model to the converter.
var viewModel = MessageBoxShowXpsDoc {DocumentPath = #"TestData\sample.xps"};
As explained already by devdigital (above), a public property of type
IDocumentPaginatorSource is needed.
Something like this perhaps:
private IDocumentPaginatorSource _fixedDocumentSequence;
public IDocumentPaginatorSource FixedDocumentSequence
{
get { return _fixedDocumentSequence; }
set
{
if (_fixedDocumentSequence == value) return;
_fixedDocumentSequence = value;
OnPropertyChanged("FixedDocumentSequence");
}
}
And in your xaml just bind this to the DocumentViewer Document property:
<Grid>
<DocumentViewer
Name="DocViewer"
Document="{Binding FixedDocumentSequence}"/>
</Grid>
For people who might still have no clue how to get it done. Here is an example:
The View:
<Grid>
<DocumentViewer HorizontalAlignment="Center"
Margin="0,20,0,0"
Document="{Binding Manual}"
VerticalAlignment="Top"
Height="508" Width="766" />
</Grid>
The ViewModel:
public OperationManualViewModel()
{
var _xpsPackage = new XpsDocument(#"C:\Users\me\Desktop\EngManual.xps", FileAccess.Read);
_manual = _xpsPackage.GetFixedDocumentSequence();
}
private IDocumentPaginatorSource _manual;
public IDocumentPaginatorSource Manual
{
get { return _manual; }
set { _manual = value; NotifyOfPropertyChange(() => Manual); }
}

Bind a Wpf HierarchicalDataTemplate ItemsSource to a CollectionViewSource in a dictionary?

I'm trying to display a Wpf Treeview with items sorted by a CollectionViewSource.
Currently, everything is working except sorting using this code in my resource dictionary:
<HierarchicalDataTemplate DataType="{x:Type books:Container}" ItemsSource="{Binding Path=Items}">
<nav:ContainerControl />
</HierarchicalDataTemplate>
What would be the syntax for changing the HierarchicalDataTemplate to bind to a CollectionViewSource that in turn pulls from the Items property?
I've tried variations of the code posted on Bea Stollnitz's blog with no success. I can't figure out how to set the source of the CollectionViewSource.
Well let me just say that I hate my proposed solution, but it does work. Perhaps a WPF guru will enlighten us both with a better alternative. Of course if you were using a ViewModel behind your view, you could simply wrap the Items property of the model with a CollectionView in the ViewModel and be done with it.
But here's another solution. Basically, your HierarchicalDataTemplate can stay as is except you would add a Converter to the Binding. I implemented the following converter and changed the XAML accordingly.
<HierarchicalDataTemplate DataType="{x:Type books:Container}"
ItemsSource="{Binding Items, Converter={x:Static local:CollectionViewConverter.Instance}}">
<nav:ContainerControl />
</HierarchicalDataTemplate>
CollectionViewConverter.cs
public class CollectionViewConverter : IValueConverter
{
public CollectionViewConverter() {}
static CollectionViewConverter(){
Instance = new CollectionViewConverter();
}
public static CollectionViewConverter Instance {
get;
set;
}
public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
{
var view = new ListCollectionView((System.Collections.IList)value);
view.SortDescriptions.Add(new SortDescription("Name", ListSortDirection.Ascending));
return view;
}
public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
{
// not really necessary could just throw notsupportedexception
var view = (CollectionView)value;
return view.SourceCollection;
}
}
I did as you suggested and wrapped the Items collection with a ListCollectionView:
private SortDescription _ItemsLcvSortDesc;
private SortDescription ItemsLcvSortDesc
{
get
{
if (_ItemsLcvSortDesc == null)
_ItemsLcvSortDesc = new SortDescription("SortOrder", ListSortDirection.Ascending);
return _ItemsLcvSortDesc;
}
}
private ListCollectionView _ItemsLcv;
public ListCollectionView ItemsLcv
{
get
{
if (_ItemsLcv == null)
_ItemsLcv = CollectionViewSource.GetDefaultView(Items) as ListCollectionView;
_ItemsLcv.SortDescriptions.Add(ItemsLcvSortDesc);
return _ItemsLcv;
}
}
Did I miss anything?

Resources