Develop Reference

Select different bindings in DataContext based on another binding

I have a fairly dynamic ObservableCollection of view models that is used by two different ListBox elements in XAML. Each view model contains properties for two different model objects of type Card called Primary and Secondary, as well as other properties. In one ListBox I'd like to display properties from Primary and in the other I'd like to display properties from Secondary. I'd like to use the same XAML UserControl file when displaying the ListBoxItems for both.
My first thought was to create an entry in UserControl.Resources that gives a name to the "right" card based on a RelativeSource reference from the parent view model which indicates Primary or Secondary, but I've not created an entry like that before. Is this the right approach? If so, what would the entry look like?
I've made up some XAML to help illustrate (may have typos). First, the Primary ListBox control:
<UserControl x:Class="Project.Cards.ListPrimary" d:DataContext="{Binding Main.Cards.Primary, Source={StaticResource Locator}}">
<UserControl.Resources>
<ResourceDictionary>
<DataTemplate DataType="{x:Type vms:CardViewModel}">
<views:Card />
</DataTemplate>
</ResourceDictionary>
</UserControl.Resources>
<Grid>
<ListBox x:Name="CardListBox"
SelectedItem="{Binding SelectedCard}"
ItemsSource="{Binding Cards}" />
</Grid>
</UserControl>
And the secondary:
<UserControl x:Class="Project.Cards.ListSecondary" d:DataContext="{Binding Main.Cards.Secondary, Source={StaticResource Locator}}">
... (same) ...
</UserControl>
And the card view (where I need to replace "Primary.Direction" with something that lets me select Primary/Secondary):
<UserControl x:Class="Project.Cards.Card">
<UserControl.Resources>
... perhaps something here ...
</UserControl.Resources>
<StackPanel>
<TextBlock Text="{Binding Name}" />
<TextBlock Text="{Binding Description}" />
<TextBlock Text="{Binding Primary.Direction}" />
</StackPanel>
</UserControl>

If you want two instances of the same UserControl that differ in one respect, you figure out how to parameterize that. There are a couple of ways, but the simplest I thought of that fits your case was to just bind the differing value to a property of the View. This moves the specification of the different value to the owner.
We'll do that by defining a dependency property on the UserControl. It's a string, though it could be an object, and in the future you might want to make it one. Since we're using the view in a DataTemplate, we can bind a property of the DataContext to it there.
public partial class Card : UserControl
{
public Card()
{
InitializeComponent();
}
public String Direction
{
get { return (String)GetValue(DirectionProperty); }
set { SetValue(DirectionProperty, value); }
}
public static readonly DependencyProperty DirectionProperty = DependencyProperty.Register("Direction",
typeof(String), typeof(Card), new PropertyMetadata(null));
}
...and we'll use that in the UserControl like this:
<Grid>
<StackPanel>
<TextBlock Text="{Binding Name}" />
<TextBlock Text="{Binding Description}" />
<TextBlock
Text="{Binding Direction, RelativeSource={RelativeSource AncestorType=UserControl}}"
/>
</StackPanel>
</Grid>
The RelativeSource stuff tells the Binding to look for that Direction property on the UserControl object itself, rather than on the DataContext as it would otherwise do by default.
If Card.Direction were object instead of string, you'd make that TextBox a ContentControl and bind to its Content property. Then you could put anything in there -- XAML, a whole other viewmodel, literally anything that XAML can figure out how to display.
And here's how it looks in the wild:
<DataTemplate DataType="{x:Type vms:CardViewModel}">
<views:Card Direction="{Binding Primary.Direction}" />
</DataTemplate>
And here's my whole mainwindow content from my test code. I didn't bother creating user controls for the listboxes; the above template is an exact match for the way you're doing it.
<Window.Resources>
<DataTemplate x:Key="PrimaryItemTemplate" DataType="{x:Type vms:CardViewModel}">
<views:Card Direction="{Binding Primary.Direction}" />
</DataTemplate>
<DataTemplate x:Key="SecondaryItemTemplate" DataType="{x:Type vms:CardViewModel}">
<views:Card Direction="{Binding Secondary.Direction}" />
</DataTemplate>
</Window.Resources>
<Grid>
<StackPanel Orientation="Horizontal">
<ListBox
SelectedItem="{Binding SelectedCard}"
ItemsSource="{Binding Cards}"
ItemTemplate="{StaticResource PrimaryItemTemplate}"
/>
<ListBox
SelectedItem="{Binding SelectedCard}"
ItemsSource="{Binding Cards}"
ItemTemplate="{StaticResource SecondaryItemTemplate}"
/>
</StackPanel>
</Grid>
I originally thought of a more elaborate scheme where you give the view a DataTemplate instead, and it worked, but this is simpler. On the other hand, that was more powerful. I actually used that in the first version of the answer, before I came to my senses; it's in the edit history.
Thanks for a fun little projectlet.

Use Style in TreeView HierarchicalDataTemplate

I'm new to this and can't quit get the correct syntax. This works correctly to capture the Left Mouse click on the textbox within the treeview:
<HierarchicalDataTemplate
DataType="{x:Type r:NetworkViewModel}"
ItemsSource="{Binding Children}"
>
<StackPanel Orientation="Horizontal">
<TextBlock Text="{Binding NetworkIP}" Width="110" >
<TextBlock.InputBindings>
<MouseBinding MouseAction="LeftClick"
Command="{Binding DataContext.SelectItem, RelativeSource={RelativeSource FindAncestor, AncestorType=TreeView}}"
CommandParameter="{Binding}" />
</TextBlock.InputBindings>
</TextBlock>
</StackPanel>
</HierarchicalDataTemplate>
How can this be done using a Style block in the Resources?
The goal being to use the same style for all TextBoxes in the TreeView. Something that would sit in the Usercontrol.Resources and be refrenced by the HierarchicalDataTemplate.

If I understand you correctly, you could define a template in the controls or windows resources with a target type (opposed to key x:Key=...) to have it automatically applied to all items in the tree view.
Here is a small example with a definition of a template in the window resources, which contains the InputBindings definition. This template will be automatically applied to all objects of type ItemViewModel if no other template is explicitly defined by the ItemsControl or TreeView. In this example, the items are displayed in a simple ItemsControl but it works for the TreeView just the same.
Note that for this to work, all items in the TreeView need to be of the same type. It is not sufficient if they are derived from the same base type. The template will only be applied, if the type defined in Template.DataType is exactly the same as the type of the ViewModel. If your TreeViews ItemsScources contain mixed type, you would need to specify the template for every type separately.
<Window x:Class="WpfApplication2.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:loc="clr-namespace:WpfApplication2"
Title="MainWindow" Height="350" Width="525">
<Window.Resources>
<DataTemplate DataType="{x:Type loc:ItemViewModel}">
<TextBlock Text="{Binding Name}" Width="110" >
<TextBlock.InputBindings>
<MouseBinding
MouseAction="LeftClick"
Command="{Binding SelectItem}" />
</TextBlock.InputBindings>
</TextBlock>
</DataTemplate>
</Window.Resources>
<Grid>
<ItemsControl ItemsSource="{Binding Items}" />
</Grid>
</Window>

Best way to implement a "parameter view" like in Visual Studio - TemplateSelector or what?

I am building a tool and want to have a listview with parameters.
i have a base class called Parameter and many different derived classes, for example:
ParameterAddress, ParameterBool, ParameterString, ParameterScreen, ...
Each Parameter looks a bit different..
ParameterBool: Label + Checkbox
ParameterString: Label + Textbox
ParamterAddress: Label + Textbox + Button (for a new Dialog)
...
I have done this in my first try with an DataTemplateSelector.
Was nice, works "well"..
In my window i implemented the events like text changed, button clicked and so on..
but now i want to use this parameter view in another window too and dont want to copy the same text changed, button clicked events in each window again..
So my second try was to build in this into my parameter class.
Each Parameter class will have an Stackpanel and each derived class adds its Controls into it and can so handle whatever events just in one place!
But now in my listview only comes up the text "....Stackpanel" .
I think way 1 was a better direction, way 2 could work anyway ..
But what would be the "best" way?
EDIT
here are my actual datatemplates:
<Window.Resources>
<DataTemplate x:Key="textBoxTemplate">
<TextBox Text="{Binding Path=Value}" Width="100"></TextBox>
</DataTemplate>
<DataTemplate x:Key="checkBoxTemplate">
<CheckBox IsChecked="{Binding Path=Value}" IsThreeState="False"></CheckBox>
</DataTemplate>
<DataTemplate x:Key="screen_template">
<StackPanel Orientation="Horizontal">
<TextBox Text="{Binding Path=Value}" Width="100"></TextBox>
<Button Content="..." Click="btn_screenlist_Click" />
</StackPanel>
</DataTemplate>
<DataTemplate x:Key="address_template">
<StackPanel Orientation="Horizontal">
<TextBox Text="{Binding Path=Value}" Width="100"></TextBox>
<Button Content="..." Click="btn_address_Click" />
</StackPanel>
</DataTemplate>
<local:ParameterTemplateSelector
x:Key="parameterTemplateSelector"
TextBoxTemplate="{StaticResource textBoxTemplate}"
CheckBoxTemplate="{StaticResource checkBoxTemplate}"
Screen_template="{StaticResource screen_template}"
Address_template="{StaticResource address_template}"
/>
</Window.Resources>
in my opinion its very unusable..
you have to maintain so many peaces of code to work..
create a new template
put it into the datatemplate resource
dont forget to put it into the datatemplateselector class
with having my "controls" directly in my class i have only this one peace of code.. ?!

You should make Datatemplates without keys pointing to your derives parameter class types. Wpf will automatically show the most suitable template for each class.
As for the textchanged or click-events, you should hang your "ontextchanged" or "isCheckedChanged) into the setter of the binding target (e.g. parameter.Text or parameter.IsTrue).
The OnClick of Buttons should be replaced with a proper command.
Whatever you did: don't instanciate controls in code behind ... thats the worst way to do it.

Okay, after some hours playing around, researching, reading and testing ..
Here is my actual solution, which works fine in multiple windows !
Please leave some comments, improvements, whatever .. Thanks.
I am having now a Parameter.cs and Parameter.xaml
Parameter.xaml
<ResourceDictionary
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:locale="clr-namespace:tests"
>
<DataTemplate DataType="{x:Type locale:ParameterString}">
<TextBox Text="{Binding Value}" MinWidth="100"></TextBox>
</DataTemplate>
<DataTemplate DataType="{x:Type locale:ParameterBool}">
<CheckBox IsChecked="{Binding Value}"/>
</DataTemplate>
<DataTemplate DataType="{x:Type locale:ParameterAddress}">
<StackPanel Orientation="Horizontal">
<Label Content="{Binding Name}"/>
<TextBox Text="{Binding Value, UpdateSourceTrigger=PropertyChanged}" MinWidth="100"/>
<Button
Content="..."
Width="{Binding ActualHeight, RelativeSource={RelativeSource Self}}"
Command="{Binding EditAddrCmd}"
/>
</StackPanel>
</DataTemplate>
Snippet of Parameter.cs
public class ParameterAddress : Parameter
{
ControllerList controllers;
#region constructors
public ParameterAddress (ControllerList controllers, String address)
{
this.controllers=controllers;
Name="Address";
Value=address;
EditAddrCmd=new RelayCommand(ex => EditAddrCmdExec(), cex => EditAddrCmdCanExec());
}
// ..
#endregion // constructors
#region commands
public ICommand EditAddrCmd { get; internal set; }
private void EditAddrCmdExec ()
{
// open dialog to edit address and save to <Value>
}
private bool EditAddrCmdCanExec ()
{
return true;
}
#endregion // comannds
public override bool isValid ()
{
return true;
}
}
now i simply add to each window where i want to use these parameters the Parameter.xaml to its Resources:
SomeWindow.xaml
<Window.Resources>
<ResourceDictionary>
<ResourceDictionary.MergedDictionaries>
<ResourceDictionary Source="Parameter.xaml"/>
</ResourceDictionary.MergedDictionaries>
</ResourceDictionary>
</Window.Resources>
#SnowballTwo
did you mean this way of doing it?

How can I best display this nested collection? (Can you tell me why my code isn't working?)

Can you tell me why this code isn't working?
I have a viewmodel with an observablecollection of searchresults which has an observablecollection of resultproperties. I cannot seem to display the nested collection of result properties like I want.
Here are the objects (abstracted for readability):
class ViewModel
{
public ObservableCollection<SearchResults<TDomain>> SearchResults { get; set; }
}
class SearchResults<TDomain>
{
public TDomain Result { get; set; }
public ObservableCollection<ResultProperty> ResultProperties { get; set; }
}
class ResultProperty
{
public string PropertyValue { get; set; }
}
Here is the xaml I cannot get to work. The DataContext is set to the ViewModel:
<StackPanel>
<ItemsControl ItemsSource={Binding SearchResults}>
<ItemsControl.ItemTemplate>
<DataTemplate>
<StackPanel>
<TextBlock Text={Binding Result.Id}/>
<StackPanel Orientation="Horizontal">
<ItemsControl ItemsSource={Binding ResultProperties}>
<ItemsControl.ItemTemplate>
<DataTemplate>
<TextBlock Text="{Binding PropertyValue}" />
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
</StackPanel>
</StackPanel>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
<TextBlock Text="PLACEHOLDER /////"/>
</StackPanel>
The outcome I am looking for is something like this:
[Stack panel to keep things orderly]
1
property1property2property3...
2
property1property2property3...
3
property1property2property3...
PLACEHOLDER /////
The results I am getting are these
[Stack panel to keep things orderly]
1
2
3
PLACEHOLDER /////
In otherwords, the binding isn't picking up the string. I have verified that the collections are populating like expected. But I can't get the xaml to work.
**ADDITION INFORMATION
Ok, so I tried some of the solutions, but they aren't working so I am going to add more details because maybe I am missing something about how the collections are getting updated.
The viewmodel has a button on it called "Search" which uses an ICommand that calls a the view model's TrySearch method which is below:
public void TrySearch()
{
var results = _model.GetAll();
foreach(var result in results)
this.SearchResults.Add(new SearchResults<TDomain>(result));
}
Could there be a reason this doesn't work because of the way the collection is updated? SearchResults is a dependency property (I know I know, it should be INPC, but its not, its dependency), but the other collections are not. Could this be a problem?

I would create the data templates as resources and refer to them elsewhere in the XAML. For example:
<Window ....>
<Window.Resources>
<DataTemplate x:Key="SearchResultTemplate" TargetType="SearchResults">
<TextBlock Text={Binding PropertyValue}"
</DataTemplate>
<DataTemplate x:Key="ViewModelTemplate" TartgetType="ViewModel">
<StackPanel>
<TextBlock Text={Binding Result.Id}/>
<StackPanel Orientation="Horizontal">
<ItemsControl ItemsSource={Binding ResultProperties} ItemTemplate="{StaticResource SearchResultTemplate}" />
</StackPanel>
</StackPanel
</DataTemplate>
</Window.Resources>
<StackPanel>
<ItemsControl ItemsSource={Binding SearchResults} ItemTemplate="{StaticResource ViewModelTemplate}" />
</Window>
I'm not sure, but I think that the bindings you're using are telling the XAML parser to look for properties of the ViewModel class called ResultProperties and PropertyValue. The XAML parser doesn't see that they're properties of the object bound to that instance of the collection. Splitting it up like this should make it plain that the properties belong to the instance that the template is being applied to.

Your code is somehow correct but according to what you want it has a flow. The StackPanel has to be the ItemsPanel. Change it like this:
<StackPanel>
<ItemsControl ItemsSource="{Binding SearchResults}">
<ItemsControl.ItemTemplate>
<DataTemplate>
<StackPanel>
<TextBlock Text="{Binding Result.Id}"/>
<ItemsControl ItemsSource="{Binding ResultProperties}">
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel Orientation="Horizontal" IsItemsHost="True"/>
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
<ItemsControl.ItemTemplate>
<DataTemplate>
<TextBlock Text="{Binding PropertyValue}" />
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
</StackPanel>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
<TextBlock Text="PLACEHOLDER /////"/>
</StackPanel>

The answer is that my SearchResults class was not hooked up properly. I made it a dependency object with dependency properties and it works fine. I am assuming that would translate similarly if it was INotifyPropertyChanged. Thank you for the responses.

Changing content according to selected option in WPF

I'm interested in creating an app that displays some buttons and changes a viewport according to the selected button. The viewport in my app is a ContentControl and I thought of changing its content whenever a button is clicked. However, I believe there's a better approach, by perhaps injecting the ViewModels of each of the Views I want to present to the ContentControl and styling them using DataTemplates (Since I want to avoid having a grid with many controls and just setting their Visibility property whenever I want to show a particular view). Which of the approaches seems better to you? Do you have a different approach for this?
The view should be something similar to this:
Thanks!

Usually have a ViewModel behind the window which contains:
ObservableCollection<IViewModel> AvailableViewModels
IViewModel SelectedViewModel
ICommand SetCurrentViewModelCommand
I display the AvailableViewModels using an ItemsControl, which has its ItemTemplate set to a Button. The Button.Command is bound to the SetCurrentViewModelCommand, and it passes the current data item from the AvailableViewModels collection in through the CommandParameter
To display the content area, I use a ContentControl with ContentControl.Content bound to SelectedViewModel, and DataTemplates get used to tell WPF how to render each ViewModel.
The end result is my XAML looks something like this:
<Window.Resources>
<DataTemplate DataType="{x:Type local:ViewModelA}">
<local:ViewA />
</DataTemplate>
<DataTemplate DataType="{x:Type local:ViewModelB}">
<local:ViewB />
</DataTemplate>
</Window.Resources>
<DockPanel>
<Border DockPanel.Dock="Left" BorderBrush="Black" BorderThickness="0,0,1,0">
<ItemsControl ItemsSource="{Binding AvailableViewModels}">
<ItemsControl.ItemTemplate>
<DataTemplate>
<Button Content="{Binding Name}"
Command="{Binding DataContext.SetCurrentViewModelCommand, RelativeSource={RelativeSource AncestorType={x:Type ItemsControl}}}"
CommandParameter="{Binding }"
Margin="2,5"/>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
</Border>
<ContentControl Content="{Binding SelectedViewModel}" />
</DockPanel>
You can view an example of the full code used for such a setup on my blog