I have the following XAML:
<ListView Name="_listView">
<ListView.ItemTemplate>
<DataTemplate>
<Grid Name="_itemTemplate">
</Grid>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
What I would like to get is to create a property in my background code, that will take a custom user control and put it as a dynamic template. Something like this:
public UserControl ItemTemplate
{
set { _itemTemplate.Content = value; }
}
So then I can put my control in XAML of window and declare the item template like this:
<local:MyCustomControl ItemTemplate="local:ControlThatActsAsItemTemplate"/>
How to achieve somtehing like that?
So far I've found the following, simple solution.
In custom control XAML define the ListBox:
<ListBox Name="_listBox"/>
In code behind create a property:
public DataTemplate ItemTemplate
{
get { return _listBox.ItemTemplate; }
set { _listBox.ItemTemplate = value; }
}
In parent window or control set resources in XAML:
<Window.Resources>
<DataTemplate x:Key="CustomTemplate">
<TextBlock Text="{Binding Path=SomeProperty}"/>
</DataTemplate>
</Window.Resources>
Then declare the custom control:
<local:CustomControl ItemTemplate="{StaticResource CustomTemplate}"/>
Now you need to have an interface that exposes SomeProperty and data source comprising of such interface instances that you need to set to _listBox.ItemsSource. But this is another story.
Solution, that uses dependency property.
In custom UserControl declare dependency property that will inject item template to _listBox:
public static readonly DependencyProperty ItemTemplateProperty =
DependencyProperty.Register("ItemTemplate",
typeof(DataTemplate),
typeof(AutoCompleteSearchBox),
new PropertyMetadata(ItemTemplate_Changed));
public DataTemplate ItemTemplate
{
get { return (DataTemplate)GetValue(ItemTemplateProperty); }
set { SetValue(ItemTemplateProperty, value); }
}
private static void ItemTemplate_Changed(
DependencyObject d,
DependencyPropertyChangedEventArgs e)
{
var uc = (MyUserControl)d;
uc._listBox.ItemTemplate = (DataTemplate)e.NewValue;
}
Now you are free to set a value to that property in hosting window XAML:
<Window.Resources>
<Style TargetType="local:MyUserControl">
<Setter Property="ItemTemplate">
<Setter.Value>
<DataTemplate>
<StackPanel>
<TextBlock Text="{Binding Path=PropertyName}"/>
</StackPanel>
</DataTemplate>
</Setter.Value>
</Setter>
</Style>
</Window.Resources>
_listBox in your UserControl will gain a custom ItemTemplate that will respond to custom interface or class that you want to set as data source.
Related
I am struggling to get a user control to accept a property from my Data Context object. I don't want to pass just the value; but the instance of the property because I would like to have converters operate on the attributes of the property.
I am very new to the WPF space, I've read many articles and none of them don't address this issue. The reason I'm trying to do this is because I have a calculations class that has many properties that need to be displayed and I don't really want to create a user control for each property or have 2,000 lines of repetitious XAML.
Any insight would be greatly appreciated.
Example Class
public class MyClass
{
[MyAttribute("someValue")]
public string Foo { get; set; }
}
View Model
public class MyViewModel : INotifyPropertyChanged
{
private _myClass;
public MyClass MyClass1
{
get => _myClass;
set
{
if(_myClass != value)
{
_myClass = value;
OnPropertyChanged();
}
}
}
}
Parent XAML
<UserControl DataContext="MyViewModel">
<Grid>
<!-- this is where I'm struggling, I think -->
<uc:MyConsumerControl ObjectProp="{Binding Path=MyClass1.Foo}"/>
</Grid>
</UserControl>
User Control
XAML
<UserControl DataContext={Binding RelativeSource={RelativeSource Mode=Self}}>
<Grid>
<TextBox Text="{Binding ObjectProp}"/>
<TextBlock Text="{Binding Path=ObjectProp, Converter={StaticResource MyAttrConverter}}"/>
</Grid>
</UserControl>
C#
public class MyConsumer : UserControl
{
public MyConsumer { InitializeComponent(); }
public object ObjectProp
{
get => (object)GetValue(ObjDepProp);
set => SetValue(ObjDepProp, value);
}
public static readonly DependencyProperty ObjDepProp =
DependencyProperty.Register(nameof(ObjectProp),
typeof(object), typeof(MyConsumer));
}
First of all, there is a naming convention for identifier fields of dependency properties:
public static readonly DependencyProperty ObjectPropProperty =
DependencyProperty.Register(nameof(ObjectProp), typeof(object), typeof(MyConsumer));
public object ObjectProp
{
get => GetValue(ObjectPropProperty);
set => SetValue(ObjectPropProperty, value);
}
Second, a UserControl that exposes bindable properties must never set its own DataContext, so this is wrong:
<UserControl DataContext={Binding RelativeSource={RelativeSource Mode=Self}}>
The XAML should look like this:
<UserControl ...>
<Grid>
<TextBox Text="{Binding ObjectProp,
RelativeSource={RelativeSource AncestorType=UserControl}}" />
<TextBlock Text="{Binding Path=ObjectProp,
RelativeSource={RelativeSource AncestorType=UserControl}, />
Converter={StaticResource MyAttrConverter}}"
</Grid>
</UserControl>
Finally, this is also wrong, because it only assigns a string to the DataContext:
<UserControl DataContext="MyViewModel">
It could probably look like shown below - although that would again explicitly set the DataContext of a UserControl, but perhaps one that could be considered a top-level view element like a Window or Page.
<UserControl ...>
<UserControl.DataContext>
<local:MyViewModel/>
</UserControl.DataContext>
<Grid>
<uc:MyConsumerControl ObjectProp={Binding Path=MyClass1.Foo}
</Grid>
</UserControl>
Trying to create a TabControl Region inside another Region. The TabControl has a set number of Views that will be added to it, with their own respective ViewModels.
But either the View doesn't show up, the tabitem doesn't show up with only one View displayed instead, or I get the following error:
System.ArgumentException: 'This RegionManager does not contain a Region with the name 'ParentTabRegion'. (Parameter 'regionName')'
MainMenuView:
<Grid>
<ContentControl prism:RegionManager.RegionName="ContentRegion" />
</Grid>
MainMenuViewModel:
public class MainMenuViewModel : BindableBase
{
private readonly IRegionManager _regionManger;
public MainMenuViewModel(IRegionManager regionManager)
{
_regionManger = regionManager;
_regionManger.RequestNavigate("ContentRegion", "ParentView");
}
}
ParentView:
<Grid>
<TabControl prism:RegionManager.RegionName="ParentTabRegion" />
</Grid>
ParentViewModel:
public class ParentViewModel : BindableBase
{
private readonly IRegionManager _regionManger;
private Child1View _tab1 = new Child1View();
private Child1View Tab1
{
get { return _tab1; }
set { SetProperty(ref _tab1, value); }
}
private Child2View _tab2 = new Child2View();
private Child2View Tab2
{
get { return _tab2; }
set { SetProperty(ref _tab2, value); }
}
public ParentViewModel(IRegionManager regionManger)
{
_regionManger = regionManger;
// Gives 'This RegionManager does not contain a Region with the name 'GeneralDataTabRegion'. (Parameter 'regionName')' error
_regionManger.AddToRegion("ParentTabRegion", typeof(Child1View));
_regionManger.AddToRegion("ParentTabRegion", typeof(Child2View));
//I've also tried the following
// Same error as above
// _regionManger.Regions["ParentTabRegion"].Add(typeof(Tab1View));
// _regionManger.Regions["ParentTabRegion"].Add(typeof(Tab2View));
// Same error as above
// _regionManger.AddToRegion("ParentTabRegion", Tab1);
// _regionManger.AddToRegion("ParentTabRegion", Tab2);
// Only the last registered view is displayed
// _regionManger.RegisterViewWithRegion("ParentTabRegion", typeof(Tab1));
// _regionManger.RegisterViewWithRegion("ParentTabRegion", typeof(Tab2));
}
}
I also have the prism namespace in all the views:
xmlns:prism="http://prismlibrary.com/"
prism:ViewModelLocator.AutoWireViewModel="True"
Maybe I'm not registering the ParentTabRegion somehow? But I don't have to register the other regions and they seem to just work out of the box.
Let me know if you know what I'm doing wrong or if there is something I'm missing. Thank you.
I would just comment but can't due to low reputation. Anyway..
Check this post
Prism 7 throws and exception when working with nested views
As stated in the comments: "the problem is about how to inject scope region in ViewModel"
This video from Brian should help you with the issue.
https://app.pluralsight.com/library/courses/prism-mastering-tabcontrol
I tested some other things out. Since I don't need dynamic tabs, I found this to be the cleanest solution using Prism:
Parent ViewModel:
public ParentViewModel(IRegionManager regionManager)
{
_regionManager = regionManager;
_regionManager.RegisterViewWithRegion("ChildRegion", typeof(Child1View));
_regionManager.RegisterViewWithRegion("ChildRegion", typeof(Child2View));
}
Parent View:
<UserControl.Resources>
<Style TargetType="TabItem">
<Setter Property="Header"
Value="{Binding DataContext.Title}"/>
</Style>
</UserControl.Resources>
<Grid>
<TabControl prism:RegionManager.RegionName="ChildRegion" />
</Grid>
I ended up doing this a bit differently since I don't really need to dynamically add Tabs.
So what I ended up doing was just adding all the ViewModels to an ObservableCollection of BindableBase. Then I just added them to the view using a DataTemplate.
Parent ViewModel:
private ObservableCollection <BindableBase> _childTabs;
public ObservableCollection <BindableBase> ChildTabs
{
get { return _childTabs; }
set { _childTabs = value; }
}
public ParentViewModel()
{
ChildTabs = new ObservableCollection <BindableBase> {
new Child1ViewModel(),
new Child2ViewModel()
};
}
Parent View:
<TabControl ItemsSource="{Binding ChildTabs}"
SelectedIndex="0">
<TabControl.Resources>
<DataTemplate DataType="{x:Type vm:Child1ViewModel}">
<view:Child1 />
</DataTemplate>
<DataTemplate DataType="{x:Type vm:Child2ViewModel}">
<view:Child2 />
</DataTemplate>
</DataTemplate>
</TabControl.Resources>
<TabControl.ItemTemplate>
<DataTemplate>
<TextBlock Text="{Binding Title}" />
</DataTemplate>
</TabControl.ItemTemplate>
</TabControl>
I still feel like I'm doing something wrong though, this doesn't feel like MVVM to me...
Binding in the CheckBox seems to have a problem. It throws an XamlParseException and says that two-way binding requires Path or XPath. Here is the ContentPresenter for evaluation.
<ContentPresenter Content="{Binding PropertyValue}">
<ContentPresenter.Resources>
<DataTemplate DataType="{x:Type System:String}">
<TextBox Text="{Binding}" MinWidth="100" MaxWidth="300"/>
</DataTemplate>
<DataTemplate DataType="{x:Type System:Boolean}">
<CheckBox IsChecked="{Binding}"/>
</DataTemplate>
</ContentPresenter.Resources>
</ContentPresenter>
What I wish to accomplish is given the PropertyValue which is a polymorphic object, and its data type, a corresponding control will be created in runtime. For instance, if the PropertyValue is a boolean property, then the control will be a checkbox. If the user toggles the checkbox, the change should be reflected on PropertyValue. If an external dependency modifies the PropertyValue (e.g. INotifyPropertyChanged), then the checkbox must reflect that change also. Hence, I need a way to accomplish two-way binding for this.
The error is pretty precise... you can't two-way bind your current DataContext but only a property within the context.
<DataTemplate DataType="{x:Type ClassTypeContainingABoolean}">
<CheckBox IsChecked="{Binding YourBooleanProperty}"/>
</DataTemplate>
<DataTemplate DataType="{x:Type System:Boolean}">
<CheckBox IsChecked="{Binding Mode=OneWay}"/>
</DataTemplate>
Depending on what you actually want to do.
The whole thing is independent from the ContentPresenter.
You can use a TemplateSelector if you want to inspect your datacontext object, before deciding on a template.
public class MyTemplateSelector : DataTemplateSelector
{
public override DataTemplate SelectTemplate(object item, DependencyObject container)
{
var elem = container as FrameworkElement;
if (item == null || elem == null)
{
return null;
}
var t = item.GetType();
var prop = t.GetProperty("PropertyValue");
if (prop == null)
{
return null;
}
// select template by the type of the PropertyValue parameter
if (typeof(bool?).IsAssignableFrom(prop.PropertyType))
{
return elem.FindResource("BooleanContextTemplate") as DataTemplate;
}
if (typeof(string).IsAssignableFrom(prop.PropertyType))
{
return elem.FindResource("StringContextTemplate") as DataTemplate;
}
return base.SelectTemplate(item, container);
}
}
Data context initialization for example:
public class MyContextData<T>
{
public T PropertyValue { get; set; }
}
// initialize DataContext somewhere
private void Window_Loaded(object sender, RoutedEventArgs e)
{
grid1.DataContext = new MyContextData<bool>() { PropertyValue = true };
//grid1.DataContext = new MyContextData<string>() { PropertyValue = "ABC" };
}
Xaml example:
<Window.Resources>
<local:MyTemplateSelector x:Key="MyContextDataTemplateSelector"/>
<DataTemplate x:Key="StringContextTemplate">
<TextBox Text="{Binding PropertyValue}" MinWidth="100" MaxWidth="300"/>
</DataTemplate>
<DataTemplate x:Key="BooleanContextTemplate">
<CheckBox IsChecked="{Binding PropertyValue}"/>
</DataTemplate>
</Window.Resources>
<Grid x:Name="grid1">
<ContentPresenter Content="{Binding}" ContentTemplateSelector="{StaticResource MyContextDataTemplateSelector}"/>
</Grid>
As you can see, the DataTemplate that are referenced by the template selector via FindResource("BooleanContextTemplate") need to be defined somewhere. Also the templateselector itself is created in the resources and passed to the ContentPresenter.ContentTemplateSelector property.
Note that the ContentPresenter.Content binding is no longer targeting the YourBooleanProperty and this property is instead part of the templates. So in the end, your data need to be wrapped in some deterministic way, regarding the involved property names.
I am writing a new user control. It needs to be able to display an ObservableCollection of items. Those items will have a property that is also an observable collection, so it is similar to a 2-d jagged array. The control is similar to a text editor so the outer collection would be the lines, the inner collection would be the words. I want the consumer of the control to be able to specify not only the binding for the lines, but also the binding for the words. The approach I have so far is as follows:
The user control inherits from ItemsControl. Inside this control it has a nested ItemsControl. I would like to be able to specify the binding path of this nested ItemsControl from the parent user control. The XAML for the UserControl is
<ItemsControl x:Class="IntelliDoc.Client.Controls.TextDocumentEditor"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:local="clr-namespace:IntelliDoc.Client"
xmlns:con="clr-namespace:IntelliDoc.Client.Controls"
xmlns:data="clr-namespace:IntelliDoc.Data;assembly=IntelliDoc.Data"
xmlns:util="clr-namespace:IntelliDoc.Client.Utility"
xmlns:vm="clr-namespace:IntelliDoc.Client.ViewModel"
xmlns:sys="clr-namespace:System;assembly=mscorlib"
xmlns:i="http://schemas.microsoft.com/expression/2010/interactivity"
mc:Ignorable="d"
x:Name="root"
d:DesignHeight="300" d:DesignWidth="300"
>
<ItemsControl.Template>
<ControlTemplate>
<StackPanel Orientation="Vertical">
<ItemsPresenter Name="PART_Presenter" />
</StackPanel>
</ControlTemplate>
</ItemsControl.Template>
<ItemsControl.ItemTemplate>
<DataTemplate >
<StackPanel Orientation="Horizontal">
<ItemsControl Name="PART_InnerItemsControl" ItemsSource="{Binding NestedBinding, ElementName=root}" >
<ItemsControl.Template>
<ControlTemplate>
<StackPanel Name="InnerStackPanel" Orientation="Horizontal" >
<TextBox Text="" BorderThickness="0" TextChanged="TextBox_TextChanged" />
<ItemsPresenter />
</StackPanel>
</ControlTemplate>
</ItemsControl.Template>
<ItemsControl.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal" >
<ContentControl Content="{Binding Path=Data, Mode=TwoWay}" />
<TextBox BorderThickness="0" TextChanged="TextBox_TextChanged" />
</StackPanel>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
</StackPanel>
</DataTemplate>
</ItemsControl.ItemTemplate>
The code behind has this property declared
public partial class TextDocumentEditor : ItemsControl
{
public static readonly DependencyProperty NestedItemsProperty = DependencyProperty.Register("NestedItems", typeof(BindingBase), typeof(TextDocumentEditor),
new PropertyMetadata((BindingBase)null));
public BindingBase NestedItems
{
get { return (BindingBase)GetValue(NestedItemsProperty); }
set
{
SetValue(NestedItemsProperty, value);
}
}
...
}
The expected bound object will be as follows:
public class ExampleClass
{
ObservableCollection<InnerClass> InnerItems {get; private set;}
}
public class InnerClass : BaseModel //declares OnPropertyChanged
{
private string _name;
public string Name //this is provided as an example property and is not required
{
get
{
return _name;
}
set
{
_name = value;
OnPropertyChanged(nameof(Name));
}
}
....
}
public class ViewModel
{
public ObservableCollection<ExampleClass> Items {get; private set;}
}
The XAML declaration would be as follows:
<Window x:Class="IntelliDoc.Client.TestWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:sys="clr-namespace:System;assembly=mscorlib"
mc:Ignorable="d"
Title="TestWindow" Height="300" Width="300">
<DockPanel>
<TextDocumentEditor ItemsSource="{Binding Path=Items}" NestedItems={Binding Path=InnerItems} >
<DataTemplate>
<!-- I would like this to be the user defined datatemplate for the nested items. Currently I am just declaring the templates in the resources of the user control by DataType which also works -->
</DataTemplate>
</TextDocumentEditor>
</DockPanel>
In the end, I want the user control I created to provide the ItemsControl template at the outer items level, but I want the user to be able to provide the datatemplate at the inner items control level. I want the consumer of the control to be able to provide the bindings for both the Outer items and the nested items.
I was able to come up with a solution that works for me. There may be a better approach, but here is what I did.
First, on the outer ItemsControl, I subscribed to the StatusChanged of the ItemContainerGenerator. Inside that function, I apply the template of the ContentPresenter and then search for the Inner ItemsControl. Once found, I use the property NestedItems to bind to the ItemsSource property. One of the problems I was having originally was I was binding incorrectly. I fixed that and I changed the NestedItems to be a string. Also, I added a new property called NestedDataTemplate that is of type DataTemplate so that a user can specify the DataTemplate of the inner items control. It was suggested that I not use a UserControl since I don't inherit from a UserControl, so I will change it to a CustomControl. The code changes are below
public static readonly DependencyProperty NestedItemsProperty = DependencyProperty.Register("NestedItems", typeof(string), typeof(TextDocumentEditor),
new PropertyMetadata((string)null));
public static readonly DependencyProperty NestedDataTemplateProperty = DependencyProperty.Register("NestedDataTemplate", typeof(DataTemplate), typeof(TextDocumentEditor),
new PropertyMetadata((DataTemplate)null));
public DataTemplate NestedDataTemplate
{
get { return (DataTemplate)GetValue(NestedDataTemplateProperty); }
set
{
SetValue(NestedDataTemplateProperty, value);
}
}
public string NestedItems
{
get { return (string)GetValue(NestedItemsProperty); }
set
{
SetValue(NestedItemsProperty, value);
}
}
private void ItemContainerGenerator_StatusChanged(object sender, EventArgs e)
{
if (((ItemContainerGenerator)sender).Status != GeneratorStatus.ContainersGenerated)
return;
ContentPresenter value;
ItemsControl itemsControl;
for (int x=0;x<ItemContainerGenerator.Items.Count; x++)
{
value = ItemContainerGenerator.ContainerFromIndex(x) as ContentPresenter;
if (value == null)
continue;
value.ApplyTemplate();
itemsControl = value.GetChildren<ItemsControl>().FirstOrDefault();
if (itemsControl != null)
{
if (NestedDataTemplate != null)
itemsControl.ItemTemplate = NestedDataTemplate;
Binding binding = new Binding(NestedItems);
BindingOperations.SetBinding(itemsControl, ItemsSourceProperty, binding);
}
}
}
In XAML, I'm displaying all my presenters as tab items:
<TabControl.ContentTemplate>
<DataTemplate DataType="x:Type views:SmartFormAreaPresenter">
<views:SmartFormAreaView/>
</DataTemplate>
</TabControl.ContentTemplate>
I've noticed that each View has access to its respective Presenter's properties even without me ever explicitly saying e.g. View.DataContext = this, etc.
Where is the DataContext being set then? Does it happen magically with the DataTemplate?
public class SmartFormAreaPresenter : PresenterBase
{
#region ViewModelProperty: Header
private string _header;
public string Header
{
get
{
return _header;
}
set
{
_header = value;
OnPropertyChanged("Header");
}
}
#endregion
public SmartFormAreaPresenter(XElement areaXml)
{
Header = areaXml.Attribute("title").Value;
}
}
Here is the view, it displays Header correctly which tells me that the DataContext is being set somewhere:
<UserControl x:Class="TestApp.Views.SmartFormAreaView"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<DockPanel LastChildFill="True">
<TextBlock Text="{Binding Header}"/>
</DockPanel>
</UserControl>
Where is the DataContext being set then? Does it happen magically with the DataTemplate?
Yes. The DataTemplate visual tree receives the object it represents through the DataContext