I have one user control that I would like to reuse with multiple ViewModels, all which implement the same interface. I would like to have these embedded in a TabControl.
Currently I can do this for a single instance but I am struggling to reuse my UserControl. For the single instance I can either bind the ViewModel in the UserContol's xaml or instantiate it in the code behind, however I can't figure out how to set this from a higher level.
Here is what I have,
<TabControl HorizontalAlignment="Left" Height="800" Margin="0,0,0,0" VerticalAlignment="Top" Width="600">
<TabItem Header="Tab1">
<Frame Source="SomeUserControl.xaml" BorderThickness="0" Margin="0" />
</TabItem>
</TabControl>
Here is pseudo code for what I would like to achieve,
<TabControl>
<TabItem Header="Tab1">
<Frame Source="{SomeUserControl.xaml, DataContext=ViewModel1}" />
</TabItem>
<TabItem Header="Tab2">
<Frame Source="{SomeUserControl.xaml, DataContext=ViewModel2}" />
</TabItem>
</TabControl>
Thanks!
Instead of hard coding the tabs, bind to an ObservableCollection of an "item" class. I.e. something like
class MyTabItems : INotifyPropertyChanged
{
public string Header...
public object DataContext...
}
create an:
ObservableCollection<MyTabItems>
Bind the TabControl ItemsSource to the ObservableCollection. In the item template for the TabControl bind the Header to the Header property and the DataContext to the DataContext property. The source can be hardcoded in the template or you can add another property to your item class and bind it to that if you want more flexibility.
Thanks to SledgeHammer's answer I was able to take a different approach and get things working.
<TabControl Name="TabControl" ItemsSource="{Binding TabItems}" HorizontalAlignment="Left" Height="800" Margin="0,0,0,0" VerticalAlignment="Top" Width="600">
<TabControl.ItemTemplate>
<DataTemplate>
<TextBlock Text="{Binding Header}"/>
</DataTemplate>
</TabControl.ItemTemplate>
<TabControl.ContentTemplate>
<DataTemplate>
<UserControl Content="{Binding DataContext}"/>
</DataTemplate>
</TabControl.ContentTemplate>
TabItems was populated in the code behind associated with the xaml above.
this.TabItems = new ObservableCollection<TabItem>
{
new TabItem("Main", new MainControl()),
new TabItem("Tab1", new GenericTabControl(new ViewModel1())),
new TabItem("Tab2", new GenericTabControl(new ViewModel2()))
};
Related
View1.xaml
<TabControl x:Name="MainTab">
<TabItem Header="1"></TabItem>
<TabItem Header="2"></TabItem>
View2.xaml
<StatusBar>
<StatusBarItem Content="{Binding ElementName=MainTab, Path=SelectedItem.Header, Mode=OneWay}" />
</StatusBar>
And the Header name of TabItem we can see on StatusBar, it works when both controls are in same view. I guess something is wrong with 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.
I have xaml inside an xaml. The inside xaml has some bindings which are giving some problems. To explain here is my code
Main xaml
<TabItem Header="Configuration" DataContext="{Binding ComponentsVM}">
<Grid>
<ListBox ItemsSource="{Binding SomeList}" DisplayMemberPath="Name" SelectedItem="{Binding SomeComponent}" SelectedIndex="0"/>
<ig:MyInsideXamlElement Content="{Binding MyUserControl}" DataContext="{Binding}" />
</Grid>
</TabItem>
The inside xaml is
<Grid>
<TextBox Text="{Binding MySearchPath}"/>
</Grid>
The MyUserControl property displays my binding of UserControl without problems. But the MySearchPath property does not get updated with entity framework class. I suspect the binding of my inner xaml(MySearchPath) does not get resolved because the whole tab item's datacontext is ComponentsVM. Is there any way to give a second datacontext to the inner xaml?
I discovered when using a ContentTemplate/DataTemplate in a WPF TabControl my Bindings will not work anymore.
I have set up a small example to illustrate:
<Window x:Class="HAND.BindingExample"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="BindingExample" Height="506" Width="656"
DataContext="{Binding RelativeSource={RelativeSource Self}}"
>
<Grid>
<TabControl HorizontalAlignment="Left" Height="381" VerticalAlignment="Top" Width="608">
<TabItem Header="TabItem">
<Label Content="{Binding Path=myString}"/>
</TabItem>
<TabItem Header="TabItem">
<TabItem.ContentTemplate>
<DataTemplate>
<Label Content="{Binding Path=myString}"/>
</DataTemplate>
</TabItem.ContentTemplate>
</TabItem>
</TabControl>
</Grid>
</Window>
Tab1 works as expected, Tab2 is empty.
the code behind:
using System.Windows;
namespace HAND
{
public partial class BindingExample : Window
{
public string myString { get; set; }
public BindingExample()
{
myString = "Hello Stackoverflow";
InitializeComponent();
}
}
}
You are using the ContentTemplate property incorrectly. From the ContentControl.ContentTemplate Property page on MSDN:
Gets or sets the data template used to display the content of the ContentControl.
Therefore, when setting this property, you also need to set the Content property to some sort of data source:
<TabControl>
<TabItem Header="TabItem">
<Label Content="{Binding Path=myString}"/>
</TabItem>
<TabItem Header="TabItem" Content="{Binding Path=myString}">
<TabItem.ContentTemplate>
<DataTemplate>
<Label Content="{Binding}" />
</DataTemplate>
</TabItem.ContentTemplate>
</TabItem>
</TabControl>
<TabItem Content="{Binding myString}" Header="TabItem">
<TabItem.ContentTemplate>
<DataTemplate>
<Label Content="{Binding}" />
</DataTemplate>
</TabItem.ContentTemplate>
</TabItem>
But just so you know, to bind a window on itself, is just not the way to go.
I don't know if you did that just for the example, but if not try and create a proper viewModel to bind your window on ;)
I'm trying to use a PivotControlPage to control the paging of an object with a List
My current attempt is like so
<controls:Pivot x:Name="quizPivot" Title="MY APPLICATION" ItemsSource="{Binding Questions}" SelectedIndex="1" >
<controls:PivotItem Header="{Binding QuestionTitle }">
<Grid>
<local:Text5Control DataContext="{Binding .}"></local:Text5Control>
</Grid>
</controls:PivotItem>
</controls:Pivot>
I want the pivot control to control the "next" and "previous" actions and pass that current item to the DataContext of my custom control.
I'm doing this slightly wrong I think, but i'm setting the DataContext of the pivotcontrol and the currentitem in the code behind.
this is where i set the datacontext for the pivot control
protected override void OnNavigatedTo(System.Windows.Navigation.NavigationEventArgs e)
{
base.OnNavigatedTo(e);
quiz = new Quiz();
quiz.Questions = loadQuestions() // loads questions from file
quizPivot.DataContext = quiz;
}
I changed the xaml to look like this.
<controls:Pivot x:Name="quizPivot" Title="Mensa" SelectedIndex="1" DataContext="{Binding quiz}" ItemsSource="{Binding Questions}">
<controls:Pivot.HeaderTemplate>
<DataTemplate>
<TextBlock Text="{Binding QuestionTitle}" />
</DataTemplate>
</controls:Pivot.HeaderTemplate>
<controls:Pivot.ItemTemplate>
<DataTemplate>
<Grid>
<local:Text5Control DataContext="{Binding .}"></local:Text5Control>
</Grid>
</DataTemplate>
</controls:Pivot.ItemTemplate>
</controls:Pivot>
What I was missing is the use of templates for the data. PivotItem is only applicable for static items.