We Keep Coding

Get the row details when a control in data template is selected

Im building a WPF application and trying to stick to the MVVM pattern as much as possible. I have a list box with a data template inside of it that contains a TextBlock and Button. If the button within the data template is clicked it does not select the entire row, so I am unaware of what row it pertains to. I would like to grab the entire object and bind it to a property in the view model. Can I get some help or a workaround for this please that sticks to mvvm pattern.
List box with item template
<telerik:RadListBox Width="200" Height="150" HorizontalAlignment="Left" Margin="10" ItemsSource="{Binding ListOfSupplierInvoices}"
SelectedItem="{Binding SelectedSupplierInvoice, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}">
<telerik:RadListBox.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal" HorizontalAlignment="Stretch" >
<TextBlock Text="{Binding InvoiceNumber}" HorizontalAlignment="Left" Margin="5" ></TextBlock>
<telerik:RadButton Height="20" >
<telerik:RadButton.Content>
<Image Source="/ImageResources/Misc/delete.png" Stretch="Fill" />
</telerik:RadButton.Content>
</telerik:RadButton>
</StackPanel>
</DataTemplate>
</telerik:RadListBox.ItemTemplate>
</telerik:RadListBox>
How it looks in the view:

As far as I understand your code, the button corresponds to a delete command, which means you want to delete the item associated with the button. In this case, the selection might not need to change, you just have to pass the current item to the delete command.
Add a Delete command to your view model like this:
public class MyViewModel : ViewModelBase
{
public MyViewModel()
{
Delete = new DelegateCommand(ExecuteDelete, CanExecuteDelete);
// ...other code.
}
public ICommand Delete { get; }
private void ExecuteDelete(object obj)
{
var invoiceItem = (InvoiceItem) obj;
// Use this only if you need the item to be selected.
// SelectedSupplierInvoice = invoiceItem;
// ...your delete logic.
}
private bool CanExecuteDelete(object obj)
{
// ...your can execute delete logic.
}
// ...other code.
}
Note that I introduced InvoiceItem as item type, because I do not know your item type, simply adapt it. The Delete command gets the current item passed as parameter. If you can always remove the item, there is no need in selecting it, as it is gone afterwards.
Otherwise, uncomment the line so the SelectedSupplierInvoice is set to the item which will automatically update the user interface through the two-way binding if you have implemented INotifyPropertyChanged correctly or derive from ViewModelBase which exposes the RaisePropertyChanged or OnPropertyChanged method, e.g.:
private InvoiceItem _selectedSupplierInvoice;
public InvoiceItem SelectedSupplierInvoice
{
get => _selectedSupplierInvoice;
set
{
if (_selectedSupplierInvoice == value)
return;
_selectedSupplierInvoice = value;
RaisePropertyChanged();
}
}
In your XAML wire the button to the Delete command on the DataContext of the RadListBox.
<telerik:RadButton Height="20"
Command="{Binding DataContext.Delete, RelativeSource={RelativeSource AncestorType={x:Type telerik:RadListBox}}}"
CommandParameter="{Binding}">
<telerik:RadButton.Content>
<Image Source="/ImageResources/Misc/delete.png" Stretch="Fill" />
</telerik:RadButton.Content>
</telerik:RadButton>

Bound ComboBoxItem variable turns null after view change

I have a problem for which I'm searching an explanation. It's similar to what's been discussed in WPF ComboBox SelectedItem Set to Null on TabControl Switch, but it's involving a lesser degree of binding and so should be open to simpler solutions. What I'm describing below is a simplified case I've built to reproduce and try to understand why the problem is arising.
So, the project is based on MVVM, and the main window has just a button labelled "Search", declared as follows:
<Button Margin="50,0,0,0" Width="150" Height="40" Content="Search" HorizontalAlignment="Left" Command="{Binding UpdateViewCommand}" CommandParameter="Search"/>
The code is bound to UpdateView :ICommand that, is defined as follows:
class UpdateViewCommand : ICommand
{
private MainViewModel viewModel;
public UpdateViewCommand(MainViewModel viewModel)
{
this.viewModel = viewModel;
}
public event EventHandler CanExecuteChanged;
public bool CanExecute(object parameter)
{
return true;
}
public void Execute(object parameter)
{
if (parameter.ToString() == "Search")
{
viewModel.SelectedViewModel = new SearchViewModel();
}
}
}
This view overlaps with the main one in the upper part, leaving the "Search" button visible, as shown in the picture below:
The view includes a ComboBox and a "Go" button, declared as:
<ComboBox Name="SearchCriterion" Canvas.Left="128" Canvas.Top="14" Height="22" Width="257" Background="#FF66CCFF" BorderBrush="Black" SelectedIndex="0"
SelectedItem="{Binding QueryType, Mode=OneWayToSource}">
<ComboBoxItem FontFamily="Calibri" FontSize="14" Background="#FF66CCFF">
Author
</ComboBoxItem>
<ComboBoxItem FontFamily="Calibri" FontSize="14" Background="#FF66CCFF">
Title
</ComboBoxItem>
</ComboBox>
<Button Name="SearchButton" Height="22" Content="Go" Canvas.Left="390" Canvas.Top="44" Width="45" BorderBrush="Black"
FontFamily="Calibri" FontSize="14" Background="#FF0066FF" Command="{Binding ExecQueryCmd}" Foreground="White"/>
All the button does is getting the ComboBoxItem value bound in the ComboBox declaration through the variable QueryType and print it. QueryType is declared as:
private ComboBoxItem _queryType = new ComboBoxItem();
public ComboBoxItem QueryType
{
get { return _queryType; }
set
{
Globals.mylog.Trace("In SearchViewModel.QueryType");
_queryType = value;
OnPropertyChanged(nameof(QueryType));
}
}
Assuming this is clear, here is the problem I see. I start the program, click on "Search" and the SearchView appears. I play with the ComboBox, click "Go" and all is fine. I can do this several times, no problem.
Now I click on "Search" again. No apparent change (the view is already there), but if I click on "Go" an exception is raised because the variable is null (I'm running under Visual Studio, so I can easily check). Note that if, instead of clicking "Go" right after clicking on "Search", I click on the ComboxBox and change its value before, everything works fine.
Can anyone explain me why this is happening, and how I can solve it?
Thanks

You never explicitly assigned a value to QueryType in the constructor of SearchViewModel, so the value in querytype was depending on the UI to update it.
A better way is to have the selectedvalue come from the viewmodel (and not have ui elements in tour viewmodels as I mentionned in the comments).
What I changed to make it works:
In SearchViewModel:
/// <summary>
/// Selected option to search by (it is now a string)
/// </summary>
private string _queryType;
public string QueryType
{
get { return _queryType; }
set
{
Globals.mylog.Trace("In SearchViewModel.QueryType");
_queryType = value;
OnPropertyChanged(nameof(QueryType));
}
}
/// <summary>
/// List of options to search by
/// </summary>
public ObservableCollection<string> Queries { get; set; }
public SearchViewModel()
{
Globals.mylog.Trace("In SearchViewModel");
//Initialization ofthe list of options
Queries = new ObservableCollection<string> { "Author", "Title" };
//Initialization of the selected item
this.QueryType = Queries.FirstOrDefault();
ExecQueryCmd = new RelayCommand(ExecuteQuery, CanExecuteQuery);
}
In SearchView:
<--The combobox is now bound to the list in the ViewModel(the data is stored in the viewmodels and the view is only responsible for displaying it) -->
<Canvas Width="517" Height="580" Background="#FFCCFF99">
<ComboBox Name="SearchCriterion" Canvas.Left="128" Canvas.Top="14" Height="22" Width="257" ItemsSource="{Binding Queries}" Background="#FF66CCFF" BorderBrush="Black"
SelectedItem="{Binding QueryType, Mode=TwoWay}">
<ComboBox.ItemContainerStyle>
<Style BasedOn="{StaticResource {x:Type ComboBoxItem}}" TargetType="{x:Type ComboBoxItem}">
<Setter Property="FontFamily" Value="Calibri"/>
<Setter Property="FontSize" Value="14"/>
<Setter Property="Background" Value="#FF66CCFF"/>
</Style>
</ComboBox.ItemContainerStyle>
</ComboBox>
<Button Name="SearchButton" Height="22" Content="Go" Canvas.Left="390" Canvas.Top="44" Width="45" BorderBrush="Black"
FontFamily="Calibri" FontSize="14" Background="#FF0066FF" Command="{Binding ExecQueryCmd}" Foreground="White"/>
</Canvas>

WPF updating ListBox items from method called in different class

I have been banging my head against WPF ListBox item binding for hours and am hoping to get some advice. My application has three main elements:
A Player class that sends and receives data over a TcpClient.
A MainWindow that handles the GUI and exposes methods that Player can call to provide data for updating the UI based on network messages.
A UserControl called HostLobby that contains 1) a ListBox called gamesListBox for displaying new games as they are added by clients via Player and 2) UI elements for adding a new game to be broadcast to all clients.
I have confirmed that the "upstream" piece works. You can enter new game information on HostLobby, submit, and it propagates to clients as expected. In addition, clients respond properly to server messages telling them a new game has been added.
The problem is, I cannot get gameListBox to update. I rigged up test buttons on both the HostLobby control and MainWindow to verify that binding is working properly - which it is. I just can't seem to update by passing data from Player. Any ideas what I'm doing wrong?
Relevant code:
Player.cs
public void AddGameToLobby(string name, int mp)
{
// name and mp are provided by the network message handler and work fine
WriteToLog("Attempting to add game to host lobby", true);
mainWindow.AddGameToLobby(name, mp);
}
MainWindow.cs
public void AddGameToLobby(string n, int mp)
{
hostLobby.AddGameToList(n, mp);
}
HostLobby.cs
private MainWindow parent; // used to call an AddGame event when client adds a game
public ObservableCollection<Game> games;
public class Game
{
public string Name { get; set; }
}
public HostLobby(MainWindow mw)
{
InitializeComponent();
parent = mw;
games = new ObservableCollection<Game>();
// add some test items - this works. the ListBox updates properly
games.Add(new Game() { Name = "game1" });
games.Add(new Game() { Name = "game2" });
games.Add(new Game() { Name = "game3" });
gamesListBox.ItemsSource = games;
}
public void AddGameToList(string n, int maxp)
{
// called to announce a new game added by another client
// call stack is Player.AddGameToLobby -> MainWindow.AddGameToLobby -> this.AddGameToList
string msg = String.Format("{0} (0/{1})", n, maxp.ToString());
games.Add(new Game() { Name = msg });
}
HostLobby.xaml
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition/>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<StackPanel Grid.Column="0" Margin="50" Orientation="Vertical" VerticalAlignment="Center">
<StackPanel Orientation="Horizontal">
<Label HorizontalContentAlignment="Right" Width="80">Game Name:</Label>
<TextBox Name="gameNameTextBox" VerticalContentAlignment="Center" Width="200"/>
</StackPanel>
<StackPanel Orientation="Horizontal" Margin="0,10,0,0">
<Label HorizontalContentAlignment="Right" Width="80">Max Players:</Label>
<TextBox Name="maxPlayersTextBox" VerticalContentAlignment="Center" Width="200"/>
</StackPanel>
<Button Name="addGameButton" Click="addGameButton_Click" Margin="0,20,0,0" Width="200" Height="30">Add Game</Button>
</StackPanel>
<StackPanel Orientation="Vertical" VerticalAlignment="Center" Margin="50" Grid.Column="1">
<Label>Current Games</Label>
<ListBox Name="gamesListBox" MinHeight="200">
<ListBox.ItemTemplate>
<DataTemplate>
<Grid>
<TextBlock Text="{Binding Name}"/>
</Grid>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
</StackPanel>
</Grid>

Your ListBox is not being updated because you're modifying the ObservableCollection on a worker thread, which means that the collection's CollectionChanged event is being raised on the worker thread as well. To remedy this, you need to modify your list on the UI thread. To achieve this, you have a few options, but the first ones that come to mind are:
Using Dispatcher.BeginInvoke
In AddGameToList in HostLobby.cs, put the statement that modifies the list inside a Dispatcher.BeginInvoke:
Application.Current.Dispatcher.BeginInvoke((MethodInvoker)(() => games.Add(new Game() { Name = msg })));
Using BindingOperations.EnableCollectionSynchronization (.NET 4.5 or later)
First, create a lock object as a private member of your HostLobby class. Then, after initializing your ObservableCollection, call the following:
BindingOperations.EnableCollectionSynchronization(games, _yourLockObj);
Then, use the lock whenever you modify the list within HostLobby. So in this instance, you'd want to change the list modification in AddGameToList such that it uses the lock:
lock (_yourLockObj)
{
games.Add(new Game() { Name = msg });
}
The latter seems like a better choice in my opinion, but it is only available if you're using .NET 4.5 or later.

How to display individual item names in a WPF ListBox using Data Binding?

In my WPF application, I have a ListBox in my main screen. I'm trying to use the MVVM pattern, so I have a ViewModel associated with the View. When I launch the application, my ViewModel gets initiated, and it reads in a bunch of DLLs I've placed in a directory. Each DLL contains a "Strategy" class, so when I read the DLLs, I retrieve these Strategy class objects and put them in a list (actually an ObservableCollection) which is a member of my ViewModel. I'm using this member list, named DllList, to populate the ListBox.
My ViewModel looks like the following (unnecessary bits removed for clarity):
public class ViewModelPDMain : INotifyPropertyChanged
{
public event PropertyChangedEventHandler PropertyChanged;
private void RaisePropertyChanged(string propertyName) {
if (PropertyChanged != null)
PropertyChanged(this, new PropertyChangedEventArgs(propertyName));
}
public ViewModelPDMain() {
dllList = new ObservableCollection<Strategy>();
selectedStrategy = new Strategy();
}
private ObservableCollection<Strategy> dllList = null;
private Strategy selectedStrategy = null;
public ObservableCollection<Strategy> DllList
{
get { return dllList; }
set {
dllList = value;
RaisePropertyChanged("DllList");
}
}
public Strategy SelectedStrategy
{
get { return selectedStrategy; }
set {
selectedStrategy = value;
RaisePropertyChanged("SelectedStrategy");
}
}
}
Then in my main View, I bind it as follows.
<Window x:Class="PrisonersDilemma.Source.View.ViewPDMain"
xmlns:local="clr-namespace:PrisonersDilemma.Source.View"
DataContext="{Binding Source={StaticResource mainViewModelLocator}, Path=ViewModelPDMain}"
Title="Iterated Prisoner's Dilemma" Height="500" Width="800" MinHeight="500" MinWidth="800">
<Grid Name="gridMain">
...
<!-- More stuff here -->
...
<ListBox Name="listStrategies" SelectedIndex="0"
ItemsSource="{Binding DllList}" SelectedItem="{Binding SelectedStrategy}"
Grid.Column="0" Grid.Row="1" Grid.RowSpan="2"
Width="Auto" MinWidth="120"
Margin="3"
BorderBrush="LightGray" BorderThickness="1">
</ListBox>
...
<!-- More stuff here -->
...
</Grid>
</Window>
When I do this and run the application my list box looks like below which is expected.
The problem is when I try to display a property inside my Strategy objects. My Strategy class contains another class, named StratInfo, which in turn contains a string property, StrategyName. My requirement is to display this string value as listbox item values instead of what you can see above.
So I do the following in my View:
<Window x:Class="PrisonersDilemma.Source.View.ViewPDMain"
xmlns:local="clr-namespace:PrisonersDilemma.Source.View"
DataContext="{Binding Source={StaticResource mainViewModelLocator}, Path=ViewModelPDMain}"
Title="Iterated Prisoner's Dilemma" Height="500" Width="800" MinHeight="500" MinWidth="800">
<Grid Name="gridMain">
...
<!-- More Stuff Here -->
...
<ListBox Name="listStrategies" SelectedIndex="0"
ItemsSource="{Binding DllList}" SelectedItem="{Binding SelectedStrategy}"
Grid.Column="0" Grid.Row="1" Grid.RowSpan="2"
Width="Auto" MinWidth="120"
Margin="3"
BorderBrush="LightGray" BorderThickness="1">
<!-- Added Stuff -->
<ListBox.ItemTemplate>
<DataTemplate>
<Grid>
<Label Name="lblFirstName"
Content="{Binding SelectedStrategy.StratInfo.StrategyName, Mode=OneWay}"
Grid.Column="0"></Label>
</Grid>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
...
<!-- More Stuff Here -->
...
</Grid>
</Window>
When I do this, I expect the list box items to contain a label, and it to display my StrategyName value. However, I get a listbox which contains 25 items (I have 25 DLLs), but all 25 items are empty.
Funny thing is, I tried to bind the SelectedStrategy.StratInfo.StrategyName to a text box Text property, and it worked. That is, when I click any empty listbox item, it displays the StrategyName in the text box. Please refer to the following figure. You can see that the listbox contains items but the content values aren't displayed. In addition, to the right, the Strategy Name text box is a text box where I have bound the SelectedStrategy.StratInfo.StrategyName and it displays the correct value on item select event.
I have done this exact same thing in a simpler project, and it works just fine. I can't figure out what I'm doing wrong here.
Any thoughts?

Your binding in the data template is incorrect. The data context within the data template is an item in the DllList which is of type Strategy. So your Label should be like so:
<Label Name="lblFirstName"
Content="{Binding StratInfo.StrategyName, Mode=OneWay}"
Grid.Column="0"/>

How do I override or alter the inheritance of the child elements when my datacontext is set on the parent element?

Disclaimer I feel like this is a fairly simple question, so i must reiterate that I did look for an answer and couldn't find anything!
Not sure if I am asking the question correctly, but I will tell you this. I am working on becoming more familiar with MVVM, so I am messing around with a ridiculously simple project of two stackpanels, ten textboxes, and some simple binding. Everything works now, since I have two panels, which separates my boxes and lets me set two datacontext.
My question is this:
a) is it possible to set the datacontext on a parent element (Stackpanel) and have half of my child elements (textboxes) use that context via inheritance and then give the other half of the elements A DIFFERENT data context?
and
b) if this is possible, how??
Thanks people-smarter-than-I
Here is the code that is trying so hard, but not really doing anything I want it to be doing:
XAML
<Grid>
<StackPanel>
<StackPanel HorizontalAlignment="Left" Margin="8,8,0,75" Width="224" DataContext="{Binding Path=Customer}">
<TextBox Text="{Binding Path=FirstName}" Height="28" Name="label1"/>
<TextBox Text="{Binding Path=MiddleName}" Height="28" Name="l2"/>
<TextBox Text="{Binding Path=LastName}" Height="28" Name="l3"/>
<TextBox Text="{Binding Path=CompanyName}" Height="28" Name="l4"/>
<TextBox Text="{Binding Path=EmailAddress}" Height="28" Name="l5"/>
<!--I want the next five TextBox elements to bind to a different datacontext-->
<TextBox Text="{Binding Path=FirstName}" Height="28" Name="label11"/>
<TextBox Text="{Binding Path=MiddleName}" Height="28" Name="l21"/>
<TextBox Text="{Binding Path=LastName}" Height="28" Name="l1lgh3"/>
<TextBox Text="{Binding Path=CompanyName}" Height="28" Name="l1hj4"/>
<TextBox Text="{Binding Path=EmailAddress}" Height="28"/>
</StackPanel>
</StackPanel>
</Grid>
Code Behind C#
public partial class MainWindow : Window
{
public MainWindow()
{
InitializeComponent();
}
private void Window_Loaded(object sender, RoutedEventArgs e)
{
this.DataContext = new MainViewModel();
}
}
View Model
public class MainViewModel : INotifyPropertyChanged
{
public MainViewModel()
{
PopulateCustomerInfo();
}
private Customer customer;
public Customer Customer
{
get { return customer; }
set
{
customer = value;
OnPropertyChanged("Customer");
}
}
private Customer customer2;
public Customer Customer2
{
get { return customer2; }
set
{
customer2 = value;
OnPropertyChanged("Customer");
}
}
private void PopulateCustomerInfo()
{
AdventureWorksLTE ctx = new AdventureWorksLTE();
this.Customer = (from c in ctx.Customers
select c).FirstOrDefault();
this.Customer2 = (from c in ctx.Customers
orderby c.FirstName descending
select c).FirstOrDefault();
}
public event PropertyChangedEventHandler PropertyChanged;
protected virtual void OnPropertyChanged(string propertyName)
{
var handle = PropertyChanged;
if (handle != null)
{
var e = new PropertyChangedEventArgs(propertyName);
handle(this, e);
}
}
}

Well, you can do various things like changing the DataContext locally on all those lower TextBoxes:
<TextBox Text="{Binding Path=FirstName}" DataContext="..."/>
The question really is though: What do you want to achieve? Does it make sense to even set the DataContext on the StackPanel?
Maybe you should not and use a longer path instead:
<TextBox Text="{Binding Path=Customer.FirstName}" Height="28" Name="label1"/>
It all depends on what properties are going to be used in the child controls, if most or all of them are in Customer, sure, set it to keep the bindings short. If you need the main view model in some places you can use RelativeSource to get to a control with the right data context and change the path accordingly. (DataContext.*, data context appears in the path as a different source is specified)

most simple way is to have two StackPanels within the first one, grouping 5 by 5 your textboxes, first one having customer as datacontext, second one having customer2.
The stackPanel and (5 textboxes) content could even be defined as a DataTemplate (having no key or name but rather a DataType = {x:Type local:Customer } (where local is your clr namespace) ) and you would just use 2 ContentPresenters having content binding to Customer / Customer 2, that would 'automatically' display what you want.