I have two user controls, one contains a TreeView, one contains a ListView.
The TreeView has an itemsource and hierarchical data templates that fill the nodes and leafes (node=TvShow, leaf=Season).
The ListView should show the children of the selected TreeView item (thus, the selected season): the episodes of that season.
This worked fine when I had both the TreeView and the Listview defined in the same window, I could use something like this:
<ListView
x:Name="_listViewEpisodes"
Grid.Column="2"
ItemsSource="{Binding ElementName=_tvShowsTreeView, Path=SelectedItem.Episodes}">
How can I achieve this, when both controls are defined in separate user controls? (because in the context of one user control, I miss the context of the other user control)
This seems something pretty basic and I am getting frustrated that I can't figure it out by myself. I refuse to solve this with code-behind, I have a very clean MVVM project so far and I would like to keep it that way.
Hope that somebody can give me some advise!
First of all you have to created the SelectedValue proeprty in your ViewModel and bind the TreeView.SelectedItem property to it. Since the SelectedItem property is read-only I suggest you to create a helper to create OneWayToSource-like binding. The code should be like the following:
public class BindingWrapper {
public static object GetSource(DependencyObject obj) { return (object)obj.GetValue(SourceProperty); }
public static void SetSource(DependencyObject obj, object value) { obj.SetValue(SourceProperty, value); }
public static object GetTarget(DependencyObject obj) { return (object)obj.GetValue(TargetProperty); }
public static void SetTarget(DependencyObject obj, object value) { obj.SetValue(TargetProperty, value); }
public static readonly DependencyProperty TargetProperty = DependencyProperty.RegisterAttached("Target", typeof(object), typeof(BindingWrapper), new PropertyMetadata(null));
public static readonly DependencyProperty SourceProperty = DependencyProperty.RegisterAttached("Source", typeof(object), typeof(BindingWrapper), new PropertyMetadata(null, OnSourceChanged));
static void OnSourceChanged(DependencyObject d, DependencyPropertyChangedEventArgs e) {
SetTarget(d, e.NewValue);
}
}
The idea is simple: you have two attached properties, the Source and the Target. When the first one changes the PropertyChangedCallback is called and you simply setting the NewValue as the Target property value. In my opinion this scenario is helpful in a lot of cases when you need to bind the read-only property in XAML (especially in control templates).
I've created a simple model to demonstrate how to use this helper:
public class ViewModel : INotifyPropertyChanged {
public ViewModel() {
this.values = new ObservableCollection<string>()
{
"first",
"second",
"third"
};
}
ObservableCollection<string> values;
string selectedValue;
public ObservableCollection<string> Values { get { return values; } }
public string SelectedValue {
get { return selectedValue; }
set {
if (Equals(selectedValue, values))
return;
selectedValue = value;
if (PropertyChanged == null)
return;
PropertyChanged(this, new PropertyChangedEventArgs("SelectedValue"));
}
}
public event PropertyChangedEventHandler PropertyChanged;
}
So, we have data source, selected value and we'll bind it like this:
<StackPanel>
<TreeView ItemsSource="{Binding Values}"
local:BindingWrapper.Source="{Binding SelectedItem, RelativeSource={RelativeSource Self}, Mode=OneWay}"
local:BindingWrapper.Target="{Binding SelectedValue, Mode=OneWayToSource}"
>
<TreeView.ItemContainerStyle>
<Style TargetType="{x:Type TreeViewItem}">
<Setter Property="Header" Value="{Binding}"/>
</Style>
</TreeView.ItemContainerStyle>
</TreeView>
<TextBlock Text="{Binding SelectedValue}"/>
</StackPanel>
In the TreeView bound to the ItemsSource from the ViewModel I've created two bindings so they are changing the SelectedValue property in your ViewModel. TextBlock in the end of the sample is used just to show that this approach works.
About the very clean MVVM - I think that it is not the same as the "no code-behind". In my sample the ViewModel still doesn't know anything about your view and if you'll use another control to show your data e.g. ListBox you will be able to use the simple two-way binding and the "BindingWrapper" helper will not make your code unreadable or unportable or anything else.
Create a SelectedSeason property in your ViewModel and bind the ListView's ItemsSource to SelectedSeason.Episodes.
In a perfect world, you could now use a Two-Way binding in the TreeView to automatically update this property when the SelectedItem changes. However, the TreeView's SelectedItem property is readonly and cannot be bound. You can use just a little bit of code-behind and create an event handler for the SelectionChanged event of the TreeView to update your ViewModel's SelectedSeason there. IMHO this doesn't violate the the MVVM principles.
If you want a pure XAML solution, that a look at this answer.
Related
hope you're all fine.
I'm encountering 2issues with a ComboBox in a UWP application.
If the property ItemsSource is bound to a collection that implements INotifyPropertyCollectionChanged, the list is never loaded completly. I only have the 2, 3 or 4 first items... depending on the time. No problem when the same collection is bound to a DataGrid so I think my collection is built correctly. As a workaround (code-behind), I first load my collection (in a Task) and set the ItemsSource property when the task is completed. This solution works but I'd like to do less things code-behind.
The binding on the property SelectedItem seems to work with ReferenceEquals only, the type of item in my collection implements Equals based on IDs and it has been tested separately and successfylly in a console app. As a workaround (code-behind), once my list is loaded, I change the property bound to SelectedItem like this:
Users.TaskFill.ContinueWith(t => BaseItemCollection.UserInterfaceAction.Invoke(() =>
{
if (Item?.Manager != null) Item.Manager = t.Result.FirstOrDefault(i => i.Equals(Manager));
ComboBoxManager.SetBinding(ComboBox.ItemsSourceProperty, this, "Users", BindingMode.TwoWay);
ComboBoxManager.SetBinding(Selector.SelectedItemProperty, "Manager", BindingMode.TwoWay);
}));
Users is my collection (filled asynchronously) used as source for the ComboBox
SetBinding is a custom extension method I've created myself to set bindings code-behind from a single-line (as follow):
public static class ExtensionMethods
{
#region DependencyObject
public static void SetBinding(this DependencyObject dependencyObject, DependencyProperty dependencyProperty, object source, string propertyName, BindingMode mode)
{
var binding = new Binding()
{
Source = source,
Path = new PropertyPath(propertyName),
Mode = mode
};
BindingOperations.SetBinding(dependencyObject, dependencyProperty, binding);
}
public static void SetBinding(this DependencyObject dependencyObject, DependencyProperty dependencyProperty, string propertyName, BindingMode mode)
{
var binding = new Binding()
{
Path = new PropertyPath(propertyName),
Mode = mode
};
BindingOperations.SetBinding(dependencyObject, dependencyProperty, binding);
}
#endregion
}
How can I get this working from XAML withtout needing these workarounds? I has been able to get a similar configuration working with WPF for years but am really struggling with UWP...
Thank you in advance for your help.
If the property ItemsSource is bound to a collection that implements INotifyPropertyCollectionChanged, the list is never loaded completly.
If your collection is not string, you need specify DisplayMemberPath, please check the following code. And please check the collection has value. For my testing collection that implements INotifyPropertyCollectionChanged works for ComboBox.
<ComboBox
x:Name="cmbCountry"
Grid.Row="4"
Width="292"
Height="32"
Margin="28,0,0,0"
HorizontalAlignment="Left"
VerticalAlignment="Center"
DisplayMemberPath="FirstName"
ItemsSource="{Binding MyItems}"
PlaceholderText="Select Country ..."
/>
Curious behavior with ComboBox
The default ItemsPanelTemplate of ComboBox is CuriousPanel that could implement scroll loop within touch device. If you don't want to use it, you could replace it with StackPanel
<ComboBox.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel />
</ItemsPanelTemplate>
</ComboBox.ItemsPanel>
<ComboBox.ItemTemplate>
The binding on the property SelectedItem seems to work with ReferenceEquals only,
The SelectedItem is not ComboBox display field, it is an complete User object. You could get the select user in the SelectedItem binding property set method. the following is complete code that you could refer.
public sealed partial class TestPage : Page, INotifyPropertyChanged
{
private User _selecteduser;
public TestPage()
{
this.InitializeComponent();
_myItems = new ObservableCollection<User>
{
new User{UserId=1,FirstName="Fay",LastName="Wang",City="Delhi",State="DEL",Country="INDIA"},
new User{UserId=2,FirstName="Mark",LastName="Liu",City="New York", State="NY", Country="USA"},
new User{UserId=3,FirstName="Rich",LastName="Cai",City="Philadelphia", State="PHL", Country="USA"},
new User{UserId=4,FirstName="Eveia",LastName="Dong",City="Noida", State="UP", Country="CANADA"}}
};
this.DataContext = this;
}
public event PropertyChangedEventHandler PropertyChanged;
private void OnPropertyChanged(string propertyName)//string propertyName
{
if (PropertyChanged != null)
{
PropertyChangedEventArgs args = new PropertyChangedEventArgs(propertyName);
this.PropertyChanged(this, args);
}
}
public ObservableCollection<User> Users
{
get
{ return _myItems; }
set
{
_myItems = value;
OnPropertyChanged("Users");
}
}
private ObservableCollection<User> _myItems;
public User SelectedUser
{
get
{
return _selecteduser;
}
set
{
_selecteduser = value;
OnPropertyChanged("SelectedUser");
}
}
}
Xaml
<ComboBox
x:Name="cmbCountry"
Grid.Row="4"
Width="292"
Height="32"
Margin="28,0,0,0"
HorizontalAlignment="Left"
VerticalAlignment="Center"
DisplayMemberPath="FirstName"
ItemsSource="{Binding Users}"
PlaceholderText="Select User..."
SelectedItem="{Binding SelectedUser, Mode=TwoWay}"
/>
Data templates are great, but I'm having a problem with binding in a particular situation. I have a class, Value, that has various descendants like StringValue, DateValue, etc. These Values show up in a Listbox. This template works fine, binding to a specific property of StringValue:
<DataTemplate DataType="{x:Type values:StringValue}">
<TextBox Margin="0.5"
Text="{Binding Path=Native}" />
</DataTemplate>
However, when I bind to an object itself, instead of a specific property, the changes don't update the object, as in this template:
<DataTemplate DataType="{x:Type values:LookupValue}">
<qp:IncrementalLookupBox SelectedValue="{Binding Path=., Mode=TwoWay}"
LookupProvider="{Binding ElementName=EditWindow, Path=ViewModel.LookupProvider}">
</qp:IncrementalLookupBox>
</DataTemplate>
IncrementalLookupBox is a UserControl that ultimately allows a user to select a LookupValue, which should replace the item bound in the template. If this was bound to a simple type like an int or string, the binding would replace the object, so I'm not sure what the difference is with a more complex object. I know that the IncrementalLookBox is working, because binding some textboxes to the properties of SelectedValue (which is a dependency property) shows the correctly selected LookupValue.
In case it makes the situation more clear, here is the implementation of SelectedValue:
public LookupValue SelectedValue
{
get { return (LookupValue)GetValue(SelectedValueProperty); }
set { SetValue(SelectedValueProperty, value); }
}
// Using a DependencyProperty as the backing store for SelectedValue. This enables animation, styling, binding, etc...
public static readonly DependencyProperty SelectedValueProperty =
DependencyProperty.Register("SelectedValue", typeof(LookupValue), typeof(IncrementalLookupBox), new PropertyMetadata(OnSelectedValuePropertyChanged));
private static void OnSelectedValuePropertyChanged(DependencyObject d, DependencyPropertyChangedEventArgs e)
{
var obj = d as IncrementalLookupBox;
obj.OnSelectedValuePropertyChanged(e);
}
private void OnSelectedValuePropertyChanged(DependencyPropertyChangedEventArgs e)
{
CheckForSelectedValueInLookups();
}
If all else fails consider using a ValueConverter to get the value you require.
Edit: this does not work. See link in comments below.
Make sure your class implements INotifyPropertyChanged and raise PropertyChanaged here:
private void OnSelectedValuePropertyChanged(DependencyPropertyChangedEventArgs e)
{
CheckForSelectedValueInLookups();
// RaisePropertyChanged();
}
My issue is the same as described here:
WPF TwoWay Binding of ListBox using DataTemplate
Apparently if I don't write enough text here, my answer will be converted to a comment and not close out the question. So, to summarize the issue, a two-way Binding=. in a datatemplate used in a ListBox (or any ItemsControl I image) won't work, because it is not the object itself being bound, but the ListBoxItem that contains it.
I have two user-controls: a LocationTreeView, and a LocationPicker. The LocationTreeView organizes Locations into a tree structure. Because of the number of locations involved, only parts of the tree are loaded at once (one level at a time as items are expanded).
The LocationPicker is little more than a textblock with a button that opens a modal window with a LocationTreeView on it.
When I bind my LocationPicker's "SelectedLocation" property to my Viewmodel, it works fine. When I bind my LocationTreeView to the viewmodel, the binding doesn't seem to have any effect at all. When I bind my LocationTreeView to a "dummy" LocationPicker (which is bound to my viewmodel) it works.
How can I get my LocationTreeView to bind to my viewmodel?
public partial class LocationTreeView: UserControl
{
public EventHandler LocationChanged;
...
public static readonly DependencyProperty SelectedLocationProperty =
DependencyProperty.Register("SelectedLocation",typeof(Location), typeof(LocationTreeView),
new FrameworkPropertyMetadata(null, FrameworkPropertyMetadataOptions.BindsTwoWayByDefault, SelectedLocationChanged));
...
public static void SelectedLocationChanged(DependencyObject d, DependencyPropertyChangedEventArgs e)
{
LocationTreeView sender = (d as LocationTreeView);
Location loc = e.NewValue as Location;
//Navigate the treeview to the selected location
sender.LoadLTreeViewPathToLocation(loc);
}
public Location SelectedLocation
{
get { return (Location)GetValue(SelectedLocationProperty); }
set
{
if (SelectedLocation != value)
{
SetValue(SelectedLocationProperty, value);
if (LocationChanged != null)
{
LocationChanged(this, EventArgs.Empty);
}
}
}
}
...
}
Binding on this control works fine when bound to another control, but not when bound to my viewmodel. I've set a breakpoint in the SelectedLocationChanged callback, it doesn't seem to get fired when I set the viewmodel property (which DOES implement INotifyPropertyChanged)
public partial class LocationPicker: UserControl
{
public static readonly DependencyProperty SelectedLocationProperty =
DependencyProperty.Register("SelectedLocation",typeof(Location), typeof(LocationPicker),
new FrameworkPropertyMetadata(null, FrameworkPropertyMetadataOptions.BindsTwoWayByDefault));
...
public Location SelectedLocation
{
get { return (Location)GetValue(SelectedLocationProperty); }
set { SetValue(SelectedLocationProperty, value); }
}
...
private void Button_Click(object sender, RoutedEventArgs e)
{
// create a window with a locationtreeview on it. Set the treeview's
// selectedlocation property, open the window, wait for the window to close,
// set this.SelectedLoctation to the treeview's selected location.
}
}
I apologize for the leaving out so much code. My work enviroment prevents me from being able to copy/paste.
I've left out the code for the ViewModel. I am quite confident that it is not the issue.
Update:
The LocationTreeView has a ViewModel that is set in the xaml
<UserControl.DataContext>
<VM:LocationTreeViewViewModel />
</UserControl.DataContext>
The LocationPicker does not have a ViewModel.
On the window that I am using the controls, the xaml looks something like this
<Widow.DataContext>
<VM:TestWindowViewModel />
</Window.DataContext>
<Grid>
...
<UC:LocationPicker x:Name="picker" SelectedLocation="{Binding Location}" />
<!-- this does not work -->
<UC:LocationTreeView SelectedLocaiton="{Binding Location}" />
<!-- but this works --->
<UC:LocationTreeView SelectedLocaiton="{Binding SelectedLocation, ElementName=picker}" />
...
</Grid>
If you want to data bind from your view model to the LocationTreeView, then you should use the property in the view model to data bind to. If your view model had a property named SelectedLocationInViewModel in it, then you should use that to data bind to:
<UC:LocationTreeView SelectedLocation="{Binding SelectedLocationInViewModel}" />
I think that I see what your problem is now... you want to define some properties in the UserControl and data bind to them, but also data bind to properties from the view model that is set as the DataContext. You need to use a RelativeSource Binding to do that... just look at the Binding Paths in these examples:
To data bind to properties declared in a UserControl from within the UserControl:
<ItemsControl ItemsSource="{Binding PropertyName, RelativeSource={RelativeSource
AncestorType={x:Type YourPrefix:YourUserControl}}}" />
To data bind to properties declared in any object set as the DataContext:
<ItemsControl ItemsSource="{Binding PropertyName}" />
I have a UserControl with one DependencyProperty which sets in codebehind (I guess this may be a source of my problem, but still don't know what to do):
UserControl
public partial class MyControl
{
public MyControl()
{
InitializeComponent();
}
public static readonly DependencyProperty TextProperty = DependencyProperty.Register("Text", typeof(string), typeof(MyControl),
new FrameworkPropertyMetadata("",FrameworkPropertyMetadataOptions.BindsTwoWayByDefault));
public string Text
{
get { return (string)GetValue(TextProperty); }
set { SetValue(TextProperty, value); InvokePropertyChanged(new PropertyChangedEventArgs("Text"));}
}
public static string GetText(DependencyObject obj)
{
return (string)obj.GetValue(TextProperty);
}
public static void SetText(DependencyObject obj, string value)
{
obj.SetValue(TextProperty, value);
}
private void ChangeText()
{
Text="some value";
}
}
In my View.xaml I use this control like this:
<MyControl Text="{Binding Text, RelativeSource={RelativeSource Self}, UpdateSourceTrigger=PropertyChanged, Mode=TwoWay}"/>
And the Text property in my ViewModel:
private string _text;
public string Text
{
get { return _text; }
set { _text= value; InvokePropertyChanged(new PropertyChangedEventArgs("Text"));}
}
The problem:
Text property in the ViewModel never gets updated; when use binding with a regular control like TextBox, all works perfect; if I set Text in XAML, Text propery of UserControl updates.
What I did wrong?
UPDATE
My issue was that I have set DataContext explicitly on MyControl.
Issue is in your Binding:
Text="{Binding Text, RelativeSource={RelativeSource Self},
UpdateSourceTrigger=PropertyChanged, Mode=TwoWay}"
Text property is in your ViewModel but you are referring to itself by using RealtiveSource to point back to self. So, it's binding Text DP with itself.
If you have set DataContext of your control, it will automatically inherit DataContext from parent. So, you don't need RelativeSource at all.
It simply should be:
Text="{Binding Text}"
Few points more (but not related to your issue):
Since you target to use this property from within control, so go for normal DP instead of attached property.
Since at time of registration, you have set it to bind TwoWay by default. No need to explicitly do that at time of binding.
Remove InvokePropertyChanged call from your DP wrapper setter. Setter won't be called from XAML and also DP is already PropertyChanged aware.
UPDATE
In case DataContext of MyControl is set to instance of another class, above approach will search for Text property in MyControl DataContext.
You can pass DataContext of parent control (StackPanel in your case) like this:
Text="{Binding DataContext.Text, RelativeSource={RelativeSource
Mode=FindAncestor, AncestorType=StackPanel}}"
You have registered your property as attached, yet you are also using it as a regular DependencyProperty. I think that the xaml parser gets confused. Decide which one you want to use.
I'm trying to do the following thing:
I have a TabControl with several tabs.
Each TabControlItem.Content points to PersonDetails which is a UserControl
Each BookDetails has a dependency property called IsEditMode
I want a control outside of the TabControl , named ToggleEditButton, to be updated whenever the selected tab changes.
I thought I could do this by changing the ToggleEditButton data context, by it doesn't seem to work (but I'm new to WPF so I might way off)
The code changing the data context:
private void tabControl1_SelectionChanged(object sender, SelectionChangedEventArgs e)
{
if (e.Source is TabControl)
{
if (e.Source.Equals(tabControl1))
{
if (tabControl1.SelectedItem is CloseableTabItem)
{
var tabItem = tabControl1.SelectedItem as CloseableTabItem;
RibbonBook.DataContext = tabItem.Content as BookDetails;
ribbonBar.SelectedTabItem = RibbonBook;
}
}
}
}
The DependencyProperty under BookDetails:
public static readonly DependencyProperty IsEditModeProperty =
DependencyProperty.Register("IsEditMode", typeof (bool), typeof (BookDetails),
new PropertyMetadata(true));
public bool IsEditMode
{
get { return (bool)GetValue(IsEditModeProperty); }
set
{
SetValue(IsEditModeProperty, value);
SetValue(IsViewModeProperty, !value);
}
}
And the relevant XAML:
<odc:RibbonTabItem Title="Book" Name="RibbonBook">
<odc:RibbonGroup Title="Details" Image="img/books2.png" IsDialogLauncherVisible="False">
<odc:RibbonToggleButton Content="Edit"
Name="ToggleEditButton"
odc:RibbonBar.MinSize="Medium"
SmallImage="img/edit_16x16.png"
LargeImage="img/edit_32x32.png"
Click="Book_EditDetails"
IsChecked="{Binding Path=IsEditMode, Mode=TwoWay}"/>
...
There are two things I want to accomplish, Having the button reflect the IsEditMode for the visible tab, and have the button change the property value with no code behind (if posible)
Any help would be greatly appriciated.
You can accomplish what you want by binding directly to the TabControl's SelectedItem using the ElementName binding:
<odc:RibbonTabItem Title="Book" Name="RibbonBook">
<odc:RibbonGroup Title="Details" Image="img/books2.png" IsDialogLauncherVisible="False">
<odc:RibbonToggleButton Content="Edit"
Name="ToggleEditButton"
odc:RibbonBar.MinSize="Medium"
SmallImage="img/edit_16x16.png"
LargeImage="img/edit_32x32.png"
Click="Book_EditDetails"
IsChecked="{Binding ElementName=myTabControl, Path=SelectedItem.IsEditMode, Mode=TwoWay}"/>
Where myTabControl is the name of the TabControl (the value of the x:Name property). You shouldn't need to handle the SelectionChanged event anymore to update the DataContext of the button.