I spent so long on this issue today that I'm posting it as a question and then posting the answer so that you can avoid the same kind of frustration that I've gone through for the past 183 minutes.
Here's a simple version of my source code (perhaps yours looks like this)
.xaml (view):
<ComboBox SelectedItem="{Binding WindDirection}" ItemsSource="{Binding WindDirections}" DisplayMemberPath="DisplayText" IsEditable="False"/>
.cs (ViewModel):
public class WindDirectionViewModel{
//I realize that there may be problems in this code, it's not my real code, just a quick sample
...code
List<WindDirectionObject> WindDirections = new List<WindDirectionObject>();
WindDirectionObject WindDirection = new WindDirectionObject();
...code
public string DisplayText = WindDirections.First(x => x.Equals(WindDirection)).DisplayString;
...code
}
All of the code works perfectly and the same (.cs) ViewModel is even displayed correctly in another (.xaml) view, but in this view it isn't working correctly. The precise problem is that there's no text in the ComboBox when the view is first opened even though DisplayText has a value! Breakpoints show that the DisplayText value is being correctly calculated and everything, but the value won't display when the view is opened the first time.
If you are using the DisplayMemberPath attribute in a .xaml combo box - you must place the ItemsSource attribute before the SelectedItem attribute in the .xaml... or the DisplayMemberPath value isn't displayed.
Before:
<ComboBox ItemsSource="{Binding WindDirections}" SelectedItem="{Binding WindDirection}" DisplayMemberPath="DisplayText" IsEditable="False"/>
After:
<ComboBox SelectedItem="{Binding WindDirection}" ItemsSource="{Binding WindDirections}" DisplayMemberPath="DisplayText" IsEditable="False"/>
Bam. Works perfectly. This may not solve your problem, but it certainly solved mine...hope this speeds up your development time. :)
Related
I'm using WPF and MVVM, and have a support ticket window that has cascading ComboBoxes as follows. The first is bound to an ObservableCollection<ProblemCode> on the view model. The ProblemCode objects have a self-referencing property to their child codes, down to a level of four codes. The XAML for the ComboBoxes looks like this (simplified, and only three shown for brevity)...
<ComboBox ItemsSource="{Binding ElementName=Root, Path=DataContext.ProblemCodes, Mode=TwoWay}"
Name="ProblemCodeLevel1"
DisplayMemberPath="Description"
SelectedValuePath="ID"
SelectedValue="{Binding ProblemCode1ID, Mode=TwoWay}" />
<ComboBox ItemsSource="{Binding ElementName=ProblemCodeLevel1, Path=SelectedItem.Children}"
Name="ProblemCodeLevel2"
DisplayMemberPath="Description"
SelectedValuePath="ID"
SelectedValue="{Binding ProblemCode2ID, Mode=TwoWay}" />
<ComboBox ItemsSource="{Binding ElementName=ProblemCodeLevel2, Path=SelectedItem.Children}"
Name="ProblemCodeLevel3"
DisplayMemberPath="Description"
SelectedValuePath="ID"
SelectedValue="{Binding ProblemCode3ID, Mode=TwoWay}" />
When I load a window for a new ticket, the first ComboBox is correctly populated. Selecting an item populates the second and so on. When I save the ticket, the data is correctly saved.
However, when I save the ticket and reopen the window, only the first ComboBox has the selected item set. The other ComboBoxes don't have anything set.
I guess that the first ComboBox is set as the data is available when the data binding takes place. At that stage, as the first ComboBox is data bound, the second one doesn't yet have any items, so doesn't get bound. Same for the third and so on.
Anyone any suggestions as to how to get the binding working? I probably could hack this by adding code to catch various events, but apart from breaking the MVVM pattern, it sounds like none of those situations that would end up convoluted and buggy.
Generally speaking you shouldn't bind directly to elements, you should be binding to properties in your view model. That way you know the property notification is being done properly and you can add breakpoints etc to confirm the bindings are all working as well. In this particular case you need to add something like SelectedItem="{Binding Level1Item}" to your first ComboBox and then add a property for it in your view model:
public ProblemCode _Level1Item;
public ProblemCode Level1Item
{
get { return this._Level1Item; }
set
{
if (this._Level1Item != value)
{
this._Level1Item = value;
RaisePropertyChanged(() => this.Level1Item);
}
}
}
Then your second ComboBox binds to this property instead of Element.SelectedItem.Children:
<ComboBox ItemsSource="{Binding Level1Item.Children}"
...etc...
Repeat for the second and third ComboBoxes and you'll have the functionality you're after.
I have a ComboBox that shows empty space below its values. See picture below.
The data in the view model is set in a button click handler. When I set the values in the initialization of the view model the ComboBox is fine. When I try to create a small example the ComboBox also has the expected size. It seems it depends somehow on the context where I set the values in the view model but I cannot figure out. I hope someone can give me a hint.
Code in the view model
Repositories.Clear();
Repositories.Add("One");
Repositories.Add("Two");
Repositories.Add("Three");
SelectedRepository = "One";
Code in XMAL
<ComboBox MinWidth="150"
HorizontalAlignment="Stretch"
VerticalAlignment="Center"
VerticalContentAlignment="Center"
IsEnabled="{Binding CT.Connected}"
ItemsSource="{Binding CT.Repositories,
UpdateSourceTrigger=PropertyChanged}"
SelectedItem="{Binding CT.SelectedRepository}"/>
The ItemsSource you are binding to needs to be an ObservableCollection. The ComboBox will display the initial blank space if you bind the ItemsSource to any enumerable type that doesn't raise property changed when its items change.
When I try to create a small example the ComboBox has the expected size.
By that logic it maybe not the combobox, but the data which is in the list. Can you verify that there are not 8 items where the textual value to display is empty for the last four items or so?
Or
Maybe a style is causing the extra space. Try removing the style from the combobox such as this
<ComboBox Style="{x:Null}"/>
and see if it has any effect to the visual result.
Or
Also how about not setting the data and see if the drop down has the same size?
I have a custom class called ApplicationUser which has a number of properties. The ones of importance here are GivenName and Surname.
In the ctor for the window I have code which returns a List called _allUsers. This call is successful and the list is filled with the appropriate number of ApplicationUsers
So I then do something like:
_allUsers = CachingLayer.Get<List<ApplicationUser>>("allUserInformation");
cboListOfUsers.DataContext = _allUsers;
And the XAML:
<ComboBox Name="cboListOfUsers" ItemsSource="{Binding}" IsEnabled="{Binding Path = IsChecked, ElementName=rbAssignedTo}">
<ComboBox.ItemTemplate>
<DataTemplate>
<TextBlock>
<TextBlock.Text >
<MultiBinding StringFormat=" {0}, {1} ">
<Binding Path="Surname" />
<Binding Path="GivenName" />
</MultiBinding>
</TextBlock.Text>
</TextBlock>
</DataTemplate>
</ComboBox.ItemTemplate>
</ComboBox>
But there's no joy (the Combo Box remains resolutely empty)
What am I doing wrong here?
OK then you need to set you DataContext to the code behind as a whole up in the top in Window
DataContext="{Binding RelativeSource={RelativeSource self}}"
Make AllUsers a public property that returns allUsers
Bind to AllUsers
ItemsSource="{Binding Path=AllUsers}"
It was the BindingExpression path error: 'GivenName' property not found on 'object' ''ApplicationUser' error message that finally solved it for me!
This is going to make everyone sick, but as I was preparing to edit my question to include some screenshots to prove that "The blasted thing does have a property called x and y and what the hell does the Output window know!" I said I'd better check that I had implemented the object ApplicationUser correctly.
Sure enough I hadn't, I had left what I had thought were properties as publicly mutable fields(!). I turned them into auto-props and then my code as originally posted worked.
I'd like to apologise to and thank all who read the question, commented and suggested answers. My purpose in leaving this answer here is twofold, to help anyone else out that may find themselves in a similar situation and also to serve as a reminder to myself that sometimes if you can't see the wood for the trees then you may need to step back a bit.
I think your issue is in timing which is caused by where your are assigning DataContext. XAML resovles
ItemsSource="{Binding}"
during the InitializeComponent(), but you might be iinit'ing list after, which is too late.
When XAML gets build/resolved, comboBox takes the Binding, but there is nothing there. Many ways to solve:
the easiest way, is to do it in XAML:
why even set DataContext, doesn't look like you're doing anything special, it's only a list, not a full blown ViewModel..
remove:
cboListOfUsers.DataContext = _allUsers;
add/replace with
cboListOfUsers.ItemsSource = _allUsers;
3.Init your _allUsers before InitializeComponent(), then assign it to the DataContext
One more suggestion - debug your bindings in xaml, add:
ItemsSource="{Binding, diagnostics:PresentationTraceSources.TraceLevel=High}"
check you output window, if you have an exception, then I am right, the binding tries to resolve, but there is nothing there...
I think that should work..
Also, check out this post:
Why are DataContext and ItemsSource not redundant?
In the below window, the Existing Reports combo is bound to an observeablecollection of reportObjects. I have a reportObject property currentReport bound to the combo's SelectedValue property, OneWay. However, that's not working when bound in XAML.
SelectedValue="{Binding currentReport, Mode=OneWay}"
TwoWay binds fine, but I can't do it that way without writing an undo() method to the reportObject class. I'm binding the currentReport's properties to the various textboxes for editing. I want to bind OneWay so the source doesn't get changed. The currentReport's properties are all TwoWay bound to the corresponding textboxes so when I update the table in SQL [Save], it'll pull from that object, who's data is current.
<TextBox Text="{Binding currentReport.reportName, Mode=TwoWay}"
All of the properties bound from currentReport to the textboxes work fine as well. The only problem is the OneWay binding from the SelectedValue to the currentReport object. Does anyone have any ideas how to get this to work? I saw there was a bug, but the post I saw was 2009.
Sorry about the yellow. Not my idea. =)
EDIT: Added this XAML just in case.
<ComboBox ItemsSource="{Binding reportsCollection}" SelectionChanged="cboReports_SelectionChanged"
DisplayMemberPath="displayName"
SelectedValue="{Binding currentReport, Mode=TwoWay}"
x:Name="cboReports" Width="342" Height="40" VerticalAlignment="Center"/>
Forget about you need to change values - that is a separate problem - need to review your data design. Start with the UI problem question. If you want a user to be able to select an item from a combo box then it must have two way binding. Your first question is SelectedValue="{Binding currentReport, Mode=OneWay}" is failing why?
I have two projects. One is working and the other isn't however the differences between them is nothing that I think "should" be of any importance. The first project is the one that is broken and it is the one I am trying to fix. The second project is a little sample project that I created when the first project just won't work at all. Of course the sample works perfectly.
Here is the view for the first project. I have removed a bunch of the "MainWindowTabControlStyle" because it is just the combo box that is broken. I am reasonable certain that the issue is not in the style because it is a copy and paste from the project that is working.
<Grid>
<TabControl Style="{DynamicResource MainWindowTabControlStyle}">
<TabItem Header="Tab 1"/>
<TabItem Header="Tab 2"/>
</TabControl>
</Grid>
<Style x:Key="MainWindowTabControlStyle" TargetType="{x:Type TabControl}">
...
<ComboBox
HorizontalAlignment="Right"
VerticalAlignment="Top"
IsSynchronizedWithCurrentItem="True"
ItemsSource="{Binding Path=Subscriptions, Mode=Default}"
SelectedItem="{Binding Path=SelectedSubscription, Mode=OneWayToSource}"
ItemTemplate="{DynamicResource SubscriptionsItemTemplate}"/>
...
</Style>
<DataTemplate x:Key="SubscriptionsItemTemplate">
<StackPanel Orientation="Horizontal">
<TextBlock Text="{Binding Path=DisplayName, Mode=Default}"/>
</StackPanel>
</DataTemplate>
Here is the view model that is set to the DataContext of the MainWindow. The ViewModelBase class is the exact same code that Josh Smith wrote in this months MSDN article.
public sealed class MainWindowViewModel : ViewModelBase
{
public MainWindowViewModel()
{
}
private ObservableCollection<Subscription> subscriptions;
public ObservableCollection<Subscription> Subscriptions
{
get
{
if (subscriptions == null)
{
subscriptions = new ObservableCollection<Subscription>();
subscriptions.Add(new Subscription() { DisplayName = "ABC" });
subscriptions.Add(new Subscription() { DisplayName = "XYZ" });
subscriptions.Add(new Subscription() { DisplayName = "PDQ" });
}
return subscriptions;
}
set { subscriptions = value; }
}
private Subscription selectedSubscription;
public Subscription SelectedSubscription
{
get { return selectedSubscription; }
set { selectedSubscription = value; }
}
}
When I run the project from the debugger the first think that is called is the getter for the Subscriptions collection. Then the setter is called on the SelectedSubscription (it is null). After that I can change the selected item in the combobox till I am blue in the face and the setter for the SelectedSubscription property doesn't get changed again. It is important to note that the combobox does contain the correct values.
In the second project the code is identical but the first thing that is called is the setter for the SelectedSubscription property (it is null) then the getter for the Subscriptions collection is called and finally the setter for the SelectedSubscription is called a second time and it has a value that matches the first item in the Subscriptions collection.
This little jewel has cost me about 5 hours if you have any ideas at all I am willing to try it.
Thanks
Possibly change
SelectedItem="{Binding Path=SelectedSubscription, Mode=OneWayToSource}"
to
SelectedItem="{Binding Path=SelectedSubscription, Mode=TwoWay}"
Sorry about the delay in getting an answer posted. There was some kind of issue with getting an Open ID up and running.
This is a seriously weird issue.
The resolution to this problem didn't come from the window at all. Prior to the window's show method being called there was another window that was opened as a dialog. In this dialog there was the following resource
<Window.Resources>
<DropShadowBitmapEffect x:Key="DropShadowEffect" Noise="0" Opacity="0.45" ShadowDepth="5" Softness="0.25"/>
</Window.Resources>
It was was being referenced by two textblocks in the same window as a "DynamicResource". After turning off the dialog and making the application start with the windows that was having the problem it was discovered that the issue was being caused by the dialog window. While I was researching the issue a coworker suggest that I turn the DynamicResource into a StaticResource because there was no reason for it to be dynamic.
This change in a dialog window using an resource that was only available within the scope of the dialog window fixed the binding issue described above in the "Main Window". I guess stranger things can happen.
The correct way to debug this is to take the working project and to alternately (modify it to match broken code/confirm it works) until it is either identical to the broken project or it breaks. The point at which it breaks tells you where the problem is. Modifying the broken project is typically a lost cause.
As a secondary point, I'd recommend adding the System.Diagnostics namespace to your XAML. It will make errors show up in the Visual Studio Output window.
xmlns:debug="clr-namespace:System.Diagnostics;assembly=WindowsBase"
As a possibly related point (in that it's not really clear what the problem in the broken project is), you might have a look at this StackOverflow question ("Combobox controling Tabcontrol") that relates to:
WPF,
ComboBoxes,
TabControls, and
binding between them using SelectedIndex.
There isn't yet a solution to this question, but it is a simpler problem.
Lastly, Josh Smith's MSDN code is pretty large. It's hard to figure out what you changed to add your ComboBox without seeing all the code.