How Do I Bind User Controls So Properties Are Shared?

Question

0.00/5 (No votes)

See more:

This is my first post, so if I don't explain or ask my questions correctly I apologize in advance. I am working on an application that contains a class with multiple user controls that I am using as Tab Items. Each of the User Controls contains other controls like buttons and text boxes and the like. Code snippet below:

Window x:Class="TeamShootout.TeamShootoutMainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
    xmlns:Tournaments="clr-namespace:TeamShootout.Tournaments" 
    xmlns:RoundMatchup="clr-namespace:TeamShootout.TeamRoundMatchup" 
    xmlns:TeamScoring="clr-namespace:TeamShootout.TeamScoring" 
    xmlns:BestBallScoring="clr-namespace:TeamShootout.BestBallScoring" 
    xmlns:BestBallRoundMatchup="clr-namespace:TeamShootout.BestBallRoundMatchup"

XML

<TabControl>
                <TabItem Header="Tournaments">
                    <Tournaments:TournamentsUserControl />
                </TabItem>
                <!--Controls for the Round Matchup tab.-->
                <TabItem Header="Team Matchup">
                    <RoundMatchup:TeamRoundMatchupUserControl />
                </TabItem>
                <TabItem Header="Team Scoring">
                    <TeamScoring:TeamScoringUserControl />
                </TabItem>
                <TabItem Header="Best Ball Matchup">
                    <BestBallRoundMatchup:BestBallRoundMatchupUserControl />
                </TabItem>
                <TabItem Header="Best Ball Scoring">
                    <BestBallScoring:BestBallScoringUserControl />
                </TabItem>
            </TabControl>

What I am trying to accomplish is when the user selects some value on one of the tabs that that value is binded to another Tab Item/User Control, so when the user goes to that tab the associated User Control knows what was selected. For example, if the user selects a tournament from the Tournaments Tab Item, I want that tournament number to be available to the Team Matchup Tab Item. I am successful in binding within a User Control but not between User Controls. Suggestions?

Posted 19-Dec-12 9:42am

chawk32

Updated 19-Dec-12 10:42am

Abhishek Pant

v2

Add a Solution

2 solutions

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Christian Graus · Accepted Answer · 2012-12-19T09:53:00

Solution 1

It sounds to me like you want to store your data in a collection that all your tabs bind to. That way, it's one data store that contains your data, and each tab renders from a common data source.

Posted 19-Dec-12 9:53am

Christian Graus

Comments

chawk32 19-Dec-12 16:00pm

Christian: I currently have the data in a collection, but the part that I am struggling with is how to bind to that collection which is in one user control and have another user control have access to it.

Christian Graus 19-Dec-12 16:02pm

I don't understand the issue. If you have a collection, seperate from the tab page, why can't both tabs access it ?

chawk32 19-Dec-12 16:16pm

The issue is I don't know how to bind from one User Control to another so that I can access properties within a User Control.

Christian Graus 19-Dec-12 16:18pm

Again - you don't do that at all. Both user controls bind to a collection of data, which they have in common.

chawk32 19-Dec-12 16:26pm

Sorry Christian, I didn't explain myself very well. For the TournamentUserControl I have a class TournamentsViewModel. That is where the collection resides. I would like TeamRoundMatchupUserControl to be bound to that collection. BTW, TeamRoundMatchupUserControl has its own view model.

Christian Graus 19-Dec-12 16:30pm

So why can't the same viewmodel be pointed to by both user controls. The answer below explains how your view model would inform the UI that it's data has changed.

chawk32 19-Dec-12 16:35pm

See that is the part that I didn't understand. I thought using MVVM that each User Control should have its own View Model. I believe I have read that elsewhere. Can you point to two different View Models from one User Control?

Christian Graus 19-Dec-12 16:37pm

Only follow the rules when they make sense. In this case, you may find that the 'correct' way is to have many view models, but one model that all the view models get their data from. That's probably how I would do it, too. A view model per view, but the view model is exactly that, a model of the data for the view, not the actual core data store.

chawk32 19-Dec-12 16:43pm

While I am learning MVVM and data binding in WPF, I am trying to do it the "correct" way so I was purposely avoiding doing things how I knew I could make work and instead try to figure out ways that may end of being more beneficial in the long run. Thanks for your help. It is much appreciated.

Christian Graus 19-Dec-12 16:45pm

No worries. It is a little confusing at first, but once you get the hang of it, it's a nice way to work. I agree, you should take the time to learn how to do things 'properly', and we're always happy to help in that regard.

chawk32 22-Dec-12 18:10pm

Hi Christian, So using your suggestion about creating a viewmodel that multiple usercontrols can use I successfully binded one of the usercontrols to two of my properties but the other usercontrol does not bind to one of my properties. Here is some code snippets: First the viewmodel,

public class TournamentModel : INotifyPropertyChanged
{
// Rounds List
private ObservableCollection<rounds> _roundsList = new ObservableCollection<rounds>();
public event PropertyChangedEventHandler PropertyChanged;

private static readonly PropertyChangedEventArgs TextArgs = new PropertyChangedEventArgs("TournamentRounds");

public ObservableCollection<rounds> TournamentRounds
{
get { return _roundsList; }
set
{
_roundsList = value;
NotifyChange(TextArgs);
}
}

private void NotifyChange(PropertyChangedEventArgs e)
{
if (PropertyChanged != null)
{
PropertyChanged(this, e);
}
}

Now the usercontrol (TeamRoundMatchupUserControl.xaml) which is trying to bind to TournamentModel.TournamentRounds.
<combobox itemssource="{Binding TournamentRounds}" displaymemberpath="Name" height="23" horizontalalignment="Center" margin="356,41,416,0" name="roundNameComboBox" verticalalignment="Top" width="178">

The TeamRoundMatchupUserControl.cs class.
private readonly TournamentModel _tournamentModel;

public TeamRoundMatchupUserControl()
{
InitializeComponent();

_tournamentModel = new TournamentModel();
this.DataContext = _tournamentModel;
}

Note: As a test I changed the binding to look at a property called CurrentTournament
which is also in the TournamentModel class and it worked fine. Thoughts?

Jason Gleim · Accepted Answer · 2012-12-19T10:26:00

You need a data model class that exposes your data collections and selected items. It should implement the INotifyPropertyChanged interface and it should be static or implement the Singleton pattern if you will use it across multiple pages or views.

That class should expose your data collections as a property and hold a single item as the "selected" property. The selected property should make sure that it raises the PropertyChanged event when the property is set. Your UI controls will respond to that event when bound to that property.

You then need to set the data model class as your data context for the controls/page. You can either do this in the code behind by setting this.DataContext = new DataModelClass; or by declaring the data context in xaml and setting it to an instance of you data model class.

Once you have done that, you can bind the properties to the properties on the data model class. For example, for a combobox the xaml may be:

C#

<combobox selecteditem="{Binding SelectedItem, Mode=TwoWay}" />

That tells the binding engine to wire up the selected item property on the combobox to the property on your data model class and make the relationship two way. If you do this on one tab then bind a text box or some other control on another tab (skipping the mode statement if it only needs read access) then when the selected item in the combo box is changed, the text box text on the other tab will change.

Bindings are fundamental to xaml. I would suggest you read-up on data bindings, especially some of the stuff around MVVM, to help get a better understanding. What you are asking is pretty straightforward and can be done lots of way... I've suggested one... But you need to understand each approach as it can have tradeoff in ease of development/maintenance versus performance and scalability.

You might want to check out Tim Heuer's post on data binding in Silverlight at http://timheuer.com/blog/articles/getting-started-with-silverlight-development.aspx[^] While it is for Silverlight, the principles are the same.