I have a comboxbox that is databound to an observablecollection from my viewmodel. I can get my list to populate with the data but I also would like to add a default item like "--All Models--". The code below displays "--All Models--" as the default item but it is not selectable if you select another item.
<ContentControl Content="{Binding Items}">
<ContentControl.ContentTemplate>
<DataTemplate>
<Grid>
<ComboBox x:Name="cb" ItemsSource="{Binding}"/>
<TextBlock x:Name="tb" Text="--Choose One--" IsHitTestVisible="False" Visibility="Hidden"/>
</Grid>
<DataTemplate.Triggers>
<Trigger SourceName="cb" Property="SelectedItem" Value="{x:Null}">
<Setter TargetName="tb" Property="Visibility" Value="Visible"/>
</Trigger>
</DataTemplate.Triggers>
</DataTemplate>
</ContentControl.ContentTemplate>
</ContentControl>
I have tried with a compositecollection but that does not seem to to work. Is there a way to accomplish this?
Thanks in advance!
CompositeCollection should work, if you know how to use it that is; one important thing about it is that it does not inherit a DataContext, this means you need to reference your source in some other manner, further if that method is x:Reference you may not create a cyclic reference, this can be avoided by placing the collection in the Resources of the element referenced. e.g.
<Window.Resources>
<CompositeCollection x:Key="compCollection">
<ComboBoxItem Content="-- All Models --"/>
<CollectionContainer Collection="{Binding MyCollection, Source={x:Reference Window}}"/>
</CompositeCollection>
...
</Window.Resources>
You can then just use this via ItemsSource="{StaticResource compCollection}".
Build the view interaction logic into the viewmodel. my suggestion make the Observable collection type a viewmodel that is populated by the source list, plus one more viewmodel for the "not selected" item.
something like
public class ItemViewModel
{
public string Description { get; set; }
public int Id { get; set; }
}
public class ViewModel : ViewModelBase
{
public ObservableCollection<ItemViewModel> Items { get; set; } // Bound to ContentControl
private void Init()
{
Items = new ObservableCollection<ItemViewModel>();
Items.Add(new ItemViewModel() { Description = "--choice one--" , Id = null });
Items.AddRange(Model.Items.Select(i=> new ItemViewModel() { Description = i.Description , Id = i.Id }));
}
}
Then you can process SelectedItem's Id with the null sematic.
You can change your collection generic type to object and add there --All Models-- thing.
Related
I am developing a WPF application using DevExpress controls, such as the Ribbon control. I want to be able to place buttons on the ribbon dynamically. I would like to be able to support both regular buttons and drop-down buttons.
I was thinking something similar to below.
WPF View:
<UserControl.Resources>
<DataTemplate x:Key="RibbonCommandTemplate">
<ContentControl>
<dxb:BarButtonItem RibbonStyle="All" Content="{Binding Caption}"
Command="{Binding (dxr:RibbonControl.Ribbon).DataContext.MenuExecuteCommand,
RelativeSource={RelativeSource Self}}"
CommandParameter="{Binding}" />
</ContentControl>
</DataTemplate>
</UserControl.Resources>
<Grid>
<DockPanel>
<dxr:RibbonControl DockPanel.Dock="Top" RibbonStyle="Office2010">
<dxr:RibbonDefaultPageCategory>
<dxr:RibbonPage Caption="Home">
<dxr:RibbonPageGroup Caption="Dynamic Commands"
ItemLinksSource="{Binding DynamicCommands}"
ItemTemplate="{StaticResource RibbonCommandTemplate}" />
</dxr:RibbonPage>
</dxr:RibbonDefaultPageCategory>
</dxr:RibbonControl>
<Grid/>
</DockPanel>
</Grid>
View Model:
public class RibbonCommand
{
public string Caption { get; set; }
public int CommandCode { get; set; }
public ObservableCollection<RibbonCommand> SubItems { get; set; }
public bool HasSubItems
{
get
{
if (SubItems != null)
return (SubItems.Count > 0);
else
return false;
}
}
}
[POCOViewModel]
public class MainViewModel
{
public ObservableCollection<RibbonCommand> DynamicCommands { get; set; }
public MainViewModel()
{
DynamicCommands = new ObservableCollection<RibbonCommand>();
// Regular buttons.
DynamicCommands.Add(new RibbonCommand() { Caption = "Button 1", CommandCode = 1 });
DynamicCommands.Add(new RibbonCommand() { Caption = "Button 2", CommandCode = 2 });
// Drop-down button.
RibbonCommand dropDownCommand = new RibbonCommand() { Caption = "Drop-Down", CommandCode = 3 };
dropDownCommand.SubItems = new ObservableCollection<RibbonCommand>();
dropDownCommand.SubItems.Add(new RibbonCommand() { Caption = "Sub-Item 1", CommandCode = 31 });
dropDownCommand.SubItems.Add(new RibbonCommand() { Caption = "Sub-Item 2", CommandCode = 32 });
dropDownCommand.SubItems.Add(new RibbonCommand() { Caption = "Sub-Item 3", CommandCode = 33 });
DynamicCommands.Add(dropDownCommand);
}
public void MenuExecute(RibbonCommand command)
{
MessageBox.Show(string.Format("You clicked command with ID: {0} (\"{1}\").",
command.CommandCode, command.Caption), "Bound Ribbon Control");
}
}
This code does successfully populate the ribbon with items I added in my DynamicCommands collection, but I would like to support drop-down buttons for items with anything in the SubItems collection (the third button on my example above).
Is there a way to conditionally change the type of control displayed in a DataTemplate. If the object's HasSubItems is true, I would like a BarSubItem placed on the ribbon. If it is false, I will keep the BarButtonItem.
If this is regular WPF rather than UWP, and if the DataContexts of your subitems are of different types, you can define multiple DataTemplates with DataType attributes in the RibbonPageGroup's resources (where they won't be in scope for anything that doesn't need them), and get rid of that ItemTemplate attribute:
<dxr:RibbonPageGroup
Caption="Dynamic Commands"
ItemLinksSource="{Binding DynamicCommands}">
<dxr:RibbonPageGroup.Resources>
<DataTemplate DataType="{x:Type local:RibbonCommand}">
<!-- XAML stuff -->
</DataTemplate>
<DataTemplate DataType="{x:Type local:SpecialRibbonCommand}">
<!-- Totally different XAML stuff -->
</DataTemplate>
</dxr:RibbonPageGroup.Resources>
<!-- etc -->
For another option, you should be able to write a DataTemplateSelector and give it to the RibbonControl's ToolbarItemTemplateSelector property or the RibbonPageGroup's ItemTemplateSelector property.
Lastly, write one complicated DataTemplate with multiple child controls superimposed in a Grid, and a series of triggers that show only the appropriate one based on properties of the DataContext. If you've only got two different options to handle, this may be the quickest and easiest route.
<DataTemplate x:Key="RibbonCommandTemplate">
<Grid>
<Label x:Name="OneThing" />
<Label x:Name="AnotherThing" />
</Grid>
<DataTemplate.Triggers>
<DataTrigger Binding="{Binding HasSubItems}" Value="True">
<Setter TargetName="OneThing" Property="Visibility" Value="Collapsed" />
<Setter TargetName="AnotherThing" Property="Visibility" Value="Visible" />
</DataTrigger>
<!-- Other triggers for HasSubItems == False, whatever -->
</DataTemplate.Triggers>
</DataTemplate>
This seems pretty crude, but I've done it so much in WPF that I'm getting desensitized to it.
I figured out a way to do this using a DataTemplateSelector class:
using System.Windows;
using System.Windows.Controls;
using RibbonDynamicButtons.ViewModels;
namespace RibbonDynamicButtons.Selectors
{
public class RibbonCommandSelector : DataTemplateSelector
{
public DataTemplate CommandTemplate { get; set; }
public DataTemplate SubCommandTemplate { get; set; }
public override DataTemplate SelectTemplate(object item, DependencyObject container)
{
if(item is RibbonCommand)
{
RibbonCommand command = (RibbonCommand)item;
if (command.HasSubItems)
return SubCommandTemplate;
else
return CommandTemplate;
}
return base.SelectTemplate(item, container);
}
}
}
I added my selector to the xaml as follows:
<UserControl
...
xmlns:Selectors="clr-namespace:RibbonDynamicButtons.Selectors">
<UserControlResources>
<DataTemplate x:Key="RibbonSubItemTemplate">
<ContentControl>
<dxb:BarButtonItem RibbonStyle="SmallWithText" Content="{Binding Caption}"
Command="{Binding (dxr:RibbonControl.Ribbon).DataContext.MenuExecuteCommand,
RelativeSource={RelativeSource Self}}" CommandParameter="{Binding}" />
</ContentControl>
</DataTemplate>
<Selectors:RibbonCommandSelector x:Key="RibbonCommandSelector">
<Selectors:RibbonCommandSelector.CommandTemplate>
<DataTemplate>
<ContentControl>
<dxb:BarButtonItem RibbonStyle="All"
Content="{Binding Caption}"
Command="{Binding (dxr:RibbonControl.Ribbon).DataContext.MenuExecuteCommand,
RelativeSource={RelativeSource Self}}"
CommandParameter="{Binding}" />
</ContentControl>
</DataTemplate>
</Selectors:RibbonCommandSelector.CommandTemplate>
<Selectors:RibbonCommandSelector.SubCommandTemplate>
<DataTemplate>
<ContentControl>
<dxb:BarSubItem RibbonStyle="All" Content="{Binding Caption}"
ItemLinksSource="{Binding SubItems}"
ItemTemplate="{StaticResource RibbonSubItemTemplate}" />
</ContentControl>
</DataTemplate>
</Selectors:RibbonCommandSelector.SubCommandTemplate>
</Selectors:RibbonCommandSelector>
</UserControlResources>
I bind the ItemTemplateSelector to my selector on the RibbonPageGroup:
<dxr:RibbonPageGroup Caption="Dynamic Commands" ItemLinksSource="{Binding DynamicCommands}"
ItemTemplateSelector="{StaticResource RibbonCommandSelector}" />
I did not need to make any changes to the View Model I included on my original question.
I need to allow user specify filters applied to a search. I want UI to look something like this:
(in the picture above I manually typed "Test" and chose "Both" in ComboBox, actual binding doesn't work)
So, user could select which filters to apply and specify value using a corresponding editor (TextBox for strings, ComboBox for enums, etc).
To create this one I used DataGrid with TemplateColumn, DataTriggers and DataTemplates (it doesn't work completely as I need, that's why I'm writing this question):
<DataGridTemplateColumn Header="Value">
<DataGridTemplateColumn.CellTemplate>
<DataTemplate>
<ContentControl>
<ContentControl.Style>
<Style TargetType="ContentControl">
<Style.Triggers>
<DataTrigger Binding="{Binding SearchFilter.Type}" Value="string">
<Setter Property="ContentTemplate">
<Setter.Value>
<DataTemplate>
<TextBox Text="{Binding SearchFilter.Value}"/>
</DataTemplate>
</Setter.Value>
</Setter>
</DataTrigger>
<DataTrigger Binding="{Binding SearchFilter.Type}" Value="enum">
<Setter Property="ContentTemplate">
<Setter.Value>
<DataTemplate>
<ComboBox ItemsSource="{wpf:EnumMembers dataModel:MyEnumType}" SelectedItem="{Binding SearchFilter.Value}" />
</DataTemplate>
</Setter.Value>
</Setter>
</DataTrigger>
</Style.Triggers>
</Style>
</ContentControl.Style>
</ContentControl>
</DataTemplate>
</DataGridTemplateColumn.CellTemplate>
</DataGridTemplateColumn>
The DataGrid is bound to a ViewModel containing a list of these filter objects:
public class PositionSearchFilter
{
public string DisplayName { get; set; }
public object Value { get; set; }
public string Type { get; set; }
...
}
The problem with this approach is data binding doesn't work inside DataTemplate (at least in my code, maybe I'm doing something wrong), I mean this part:
<TextBox Text="{Binding SearchFilter.Value}"/>
Of course, I could manually create a bunch of controls (i.e. not using ItemsControl), but I want a generic solution, so I could simply take a list of filter objects and get a completely working UI.
Please help me solve my task.
You can create your own DataTemplateSelector that will decide which DataTemplate to use for which particular data type.
Here is an example of a DataTemplateSelector:
class ValueCellTemplateSelector : DataTemplateSelector
{
public DataTemplate StringTemplate { get; set; }
public DataTemplate EnumTemplate { get; set; }
public override DataTemplate SelectTemplate(object item, DependencyObject container)
{
if (item is PositionSearchFilter)
{
PositionSearchFilter element = (PositionSearchFilter)item;
if (element.Value is string)
{
return this.StringTemplate;
}
else if (element.Value is MyEnumType)
{
return this.EnumTemplate;
}
}
return null;
}
}
You can instantiate this selector in your resources, providing the corresponding DataTemplates at the same time:
<DataGrid.Resources>
<local:ValueCellTemplateSelector x:Key="ValueCellTemplateSelector">
<local:ValueCellTemplateSelector.StringTemplate>
<DataTemplate>
<TextBox Text="{Binding Value}"/>
</DataTemplate>
</local:ValueCellTemplateSelector.StringTemplate>
<local:ValueCellTemplateSelector.EnumTemplate>
<DataTemplate>
<ComboBox ItemsSource="{wpf:EnumMembers dataModel:MyEnumType}" SelectedItem="{Binding Value}"/>
</DataTemplate>
</local:ValueCellTemplateSelector.EnumTemplate>
</local:ValueCellTemplateSelector>
</DataGrid.Resources>
Finally, just set this selector in your column:
<DataGridTemplateColumn CellTemplateSelector="{StaticResource ValueCellTemplateSelector}"/>
Note that in my example, the DataTemplate will be choosen according to the actual object type contained in the Value property. So we don't need the additional Type property in the filter class. If it's important to you, just change the selector accordingly.
If you're inside a DataTemplate you'll need to tunnel your way out a little. Try:
<TextBox Text="{Binding SearchFilter.Value, RelativeSource={RelativeSource Mode=FindAncestor, AncestorType={x:Type DataGrid}}}" />
This should force the binding to work its way up until it gets to something of type DataGrid, then use that control's DataContext as the context for the binding.
DataGridTemplateColumn isn't part of DataGrid's logical or visual tree. To get around this and set a DataContext for binding within it you can use a binding proxy as described here: http://www.thomaslevesque.com/2011/03/21/wpf-how-to-bind-to-data-when-the-datacontext-is-not-inherited/
public class BindingProxy : Freezable
{
#region Overrides of Freezable
protected override Freezable CreateInstanceCore()
{
return new BindingProxy();
}
#endregion
public object Data
{
get { return (object)GetValue(DataProperty); }
set { SetValue(DataProperty, value); }
}
// Using a DependencyProperty as the backing store for Data. This enables animation, styling, binding, etc...
public static readonly DependencyProperty DataProperty =
DependencyProperty.Register("Data", typeof(object), typeof(BindingProxy), new UIPropertyMetadata(null));
}
In your Control/Window Resources you then define an instance of the proxy:
<UserControl.Resources>
<local:BindingProxy x:Key="proxy" Data="{Binding}" />
</UserControl.Resources>
And from your DataGridTemplateColumn you can reference the proxy for your binding:
<TextBox Text="{Binding SearchFilter.Value, Source={StaticResource proxy}}"/>
I'm new to XAML and I have a case where I need to change controls based on a selection on a combobox with templates.
For example, let's say that a user selects a template that requires a day of week and a time range that something will be available. I would like that, on the moment of the selection, the control with the information needed get build on the screen and that the bindings get to work as well.
Can someone give me a hint or indicate an article with an elegant way to do so?
Thanks in advance.
The solution you are looking for is a ContentControl and DataTemplates. You use the selected item of the ComboBox to change ContentTemplate of the Content Control.
You question mentions binding so I will assume you understand the MVVM pattern.
As an example, lets use MyModel1 as the Model
public class MyModel1
{
private Collection<string> values;
public Collection<string> Values { get { return values ?? (values = new Collection<string> { "One", "Two" }); } }
public string Field1 { get; set; }
public string Field2 { get; set; }
}
And MyViewModel as the ViewModel
public class MyViewModel
{
public MyViewModel()
{
Model = new MyModel1();
}
public MyModel1 Model { get; set; }
}
And the code behind does nothing but instantiate the ViewModel.
public partial class MainWindow : Window
{
public MainWindow()
{
ViewModel = new MyViewModel();
InitializeComponent();
}
public MyViewModel ViewModel { get; set; }
}
All three are very simple classes. The fun comes in the Xaml which is
<Window x:Class="StackOverflow._20893945.MainWindow" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:system="clr-namespace:System;assembly=mscorlib"
xmlns:this="clr-namespace:StackOverflow._20893945"
DataContext="{Binding RelativeSource={RelativeSource Self}, Path=ViewModel}"
Title="MainWindow" Height="350" Width="525">
<Window.Resources>
<DataTemplate x:Key="MyModel1Template1" DataType="{x:Type this:MyModel1}">
<StackPanel>
<TextBlock Text="Template 1"></TextBlock>
<ComboBox ItemsSource="{Binding Path=Values}" SelectedItem="{Binding Path=Field1}" />
</StackPanel>
</DataTemplate>
<DataTemplate x:Key="MyModel1Template2" DataType="{x:Type this:MyModel1}">
<StackPanel>
<TextBlock Text="Template 2"></TextBlock>
<TextBox Text="{Binding Path=Field2}" />
</StackPanel>
</DataTemplate>
</Window.Resources>
<DockPanel>
<StackPanel Orientation="Horizontal" DockPanel.Dock="Top" Margin="2">
<ComboBox x:Name="TypeSelector">
<system:String>Template 1</system:String>
<system:String>Template 2</system:String>
</ComboBox>
</StackPanel>
<ContentControl Content="{Binding Path=Model}">
<ContentControl.Style>
<Style TargetType="{x:Type ContentControl}">
<Style.Triggers>
<DataTrigger Binding="{Binding ElementName=TypeSelector, Path=SelectedItem}" Value="Template 2">
<Setter Property="ContentTemplate" Value="{StaticResource MyModel1Template2}" />
</DataTrigger>
</Style.Triggers>
<Setter Property="ContentTemplate" Value="{StaticResource MyModel1Template1}" />
</Style>
</ContentControl.Style>
</ContentControl>
</DockPanel>
</Window>
The notable points of the view are
The DataContext is initialised on the Window element, allowing for auto-complete on our binding expressions
The definition of 2 template to display 2 different views of the data.
The ComboBox is populated with a list of strings and has a default selection of the first element.
The ContentControl has its content bound to the Model exposed via the ViewModel
The default DataTemplate is the first template with a ComboBox.
The Trigger in the ContentControl's style will change the ContentTemplate if the SelectedItem of the ComboBox is changed to 'Template 2'
Implied facts are
If the SelectedItem changes back to 'Template 1', the style will revert the the ContentTemplate back to the default, ie MyModel1Template1
If there were a need for 3 separate displays, create another DataTemplate, add a string to the ComboBox and add another DataTrigger.
NOTE: This is the complete source to my example. Create a new C#/WPF project with the same classes and past the code in. It should work.
I hope this helps.
how can I bind the Content of a ContentControl to an ObservableCollection.
The control should show an object as content only if the ObservableColelction contains exactly one object (the object to be shown).
Thanks,
Walter
This is easy. Just use this DataTemplate:
<DataTemplate x:Key="ShowItemIfExactlyOneItem">
<ItemsControl x:Name="ic">
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate><Grid/></ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
</ItemsControl>
<DataTemplate.Triggers>
<DataTrigger Binding="{Binding Count}" Value="1">
<Setter TargetName="ic" Property="ItemsSource" Value="{Binding}" />
</DataTrigger>
</DataTemplate.Triggers>
</DataTemplate>
This is used as the ContentTemplate of your ContentControl. For example:
<Button Content="{Binding observableCollection}"
ContentTemplate="{StaticResource ShowItemIfExactlyOneItem}" />
That's all you need to do.
How it works: The template normally contains an ItemsControl with no items, which is invisible and has no size. But if the ObservableCollection that is set as Content ever has exactly one item in it (Count==1), the trigger fires and sets the ItemsSource of the ItmesControl, causing the single item to display using a Grid for a panel. The Grid template is required because the default panel (StackPanel) does not allow its content to expand to fill the available space.
Note: If you also want to specify a DataTemplate for the item itself rather than using the default template, set the "ItemTemplate" property of the ItemsControl.
+1, Good question :)
You can bind the ContentControl to an ObservableCollection<T> and WPF is smart enough to know that you are only interested in rendering one item from the collection (the 'current' item)
(Aside: this is the basis of master-detail collections in WPF, bind an ItemsControl and a ContentControl to the same collection, and set the IsSynchronizedWithCurrentItem=True on the ItemsControl)
Your question, though, asks how to render the content only if the collection contains a single item... for this, we need to utilize the fact that ObservableCollection<T> contains a public Count property, and some judicious use of DataTriggers...
Try this...
First, here's my trivial Model object, 'Customer'
public class Customer
{
public string Name { get; set; }
}
Now, a ViewModel that exposes a collection of these objects...
public class ViewModel
{
public ViewModel()
{
MyCollection = new ObservableCollection<Customer>();
// Add and remove items to check that the DataTrigger fires correctly...
MyCollection.Add(new Customer { Name = "John Smith" });
//MyCollection.Add(new Customer { Name = "Mary Smith" });
}
public ObservableCollection<Customer> MyCollection { get; private set; }
}
Set the DataContext in the Window to be an instance of the VM...
public Window1()
{
InitializeComponent();
this.DataContext = new ViewModel();
}
and here's the fun bit: the XAML to template a Customer object, and set a DataTrigger to remove the 'Invalid Count' part if (and only if) the Count is equal to 1.
<Window x:Class="WpfApplication1.Window1"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="clr-namespace:WpfApplication1"
Title="Window1" Height="300" Width="300">
<Window.Resources>
<Style TargetType="{x:Type ContentControl}">
<Setter Property="ContentTemplate">
<Setter.Value>
<DataTemplate x:Name="template">
<Grid>
<Grid Background="AliceBlue">
<TextBlock Text="{Binding Name}" />
</Grid>
<Grid x:Name="invalidCountGrid" Background="LightGray" Visibility="Visible">
<TextBlock
VerticalAlignment="Center" HorizontalAlignment="Center"
Text="Invalid Count" />
</Grid>
</Grid>
<DataTemplate.Triggers>
<DataTrigger Binding="{Binding Count}" Value="1">
<Setter TargetName="invalidCountGrid" Property="Visibility" Value="Collapsed" />
</DataTrigger>
</DataTemplate.Triggers>
</DataTemplate>
</Setter.Value>
</Setter>
</Style>
</Window.Resources>
<ContentControl
Margin="30"
Content="{Binding MyCollection}" />
</Window>
UPDATE
To get this dynamic behaviour working, there is another class that will help us... the CollectionViewSource
Update your VM to expose an ICollectionView, like:
public class ViewModel
{
public ViewModel()
{
MyCollection = new ObservableCollection<Customer>();
CollectionView = CollectionViewSource.GetDefaultView(MyCollection);
}
public ObservableCollection<Customer> MyCollection { get; private set; }
public ICollectionView CollectionView { get; private set; }
internal void Add(Customer customer)
{
MyCollection.Add(customer);
CollectionView.MoveCurrentTo(customer);
}
}
And in the Window wire a button Click event up to the new 'Add' method (You can use Commanding if you prefer, this is just as effective for now)
private void Button_Click(object sender, RoutedEventArgs e)
{
_viewModel.Add(new Customer { Name = "John Smith" });
}
Then in the XAML, without changing the Resource at all - make this the body of your Window:
<StackPanel>
<TextBlock Height="20">
<TextBlock.Text>
<MultiBinding StringFormat="{}Count: {0}">
<Binding Path="MyCollection.Count" />
</MultiBinding>
</TextBlock.Text>
</TextBlock>
<Button Click="Button_Click" Width="80">Add</Button>
<ContentControl
Margin="30" Height="120"
Content="{Binding CollectionView}" />
</StackPanel>
So now, the Content of your ContentControl is the ICollectionView, and you can tell WPF what the current item is, using the MoveCurrentTo() method.
Note that, even though ICollectionView does not itself contain properties called 'Count' or 'Name', the platform is smart enough to use the underlying data source from the CollectionView in our Bindings...
I have a tabControl that is bound to an observable collection.
In the headerTemplate, I would like to bind to a string property, and in the contentTemplate I have placed a user-control.
Here's the code for the MainWindow.xaml:
<Grid>
<Grid.Resources>
<DataTemplate x:Key="contentTemplate">
<local:UserControl1 />
</DataTemplate>
<DataTemplate x:Key="itemTemplate">
<Label Content="{Binding Path=Name}" />
</DataTemplate>
</Grid.Resources>
<TabControl IsSynchronizedWithCurrentItem="True"
ItemsSource="{Binding Path=Pages}"
ItemTemplate="{StaticResource itemTemplate}"
ContentTemplate="{StaticResource contentTemplate}"/>
</Grid>
And its code behind:
public partial class MainWindow : Window
{
public MainWindow()
{
InitializeComponent();
this.DataContext = new MainWindowViewModel();
}
}
public class MainWindowViewModel
{
public ObservableCollection<PageViewModel> Pages { get; set; }
public MainWindowViewModel()
{
this.Pages = new ObservableCollection<PageViewModel>();
this.Pages.Add(new PageViewModel("first"));
this.Pages.Add(new PageViewModel("second"));
}
}
public class PageViewModel
{
public string Name { get; set; }
public PageViewModel(string name)
{
this.Name = name;
}
}
So the problem in this scenario (having specified an itemTemplate as well as a controlTemplate) is that I only get one instance for the user-control, where I want to have an instance for each item that is bound to.
Try this:
<TabControl IsSynchronizedWithCurrentItem="True" ItemsSource="{Binding Pages}">
<TabControl.Resources>
<DataTemplate x:Key="contentTemplate" x:Shared="False">
<local:UserControl1/>
</DataTemplate>
<Style TargetType="{x:Type TabItem}">
<Setter Property="Header" Value="{Binding Name}"/>
<Setter Property="ContentTemplate" Value="{StaticResource contentTemplate}"/>
</Style>
</TabControl.Resources>
</TabControl>
Try setting
x:Shared="False"
When set to false, modifies Windows Presentation Foundation (WPF) resource retrieval behavior such that requests for a resource will create a new instance for each request, rather than sharing the same instance for all requests.
You need to override the Equals() Method of your PageViewModel class.
public override bool Equals(object obj)
{
if (!(obj is PageViewModel)) return false;
return (obj as PageViewModel).Name == this.Name;
}
Something like this should work.
Now it is looking for the same property of the value Name. Otherwise you could also add a ID Property which is unique.