WPF dynamic panel creation in MVVM - c#

I am creating an editor for an object instance hierarchy. The editor has a panel whose child controls vary depending on the fields of the object. So for type A which has an integer field it will have a spinner control; for type B which has a string field it will have a TextBox. And so on.
Question is, how do you achieve this in MVVM?

You can use ContentControl in your XAML code nad bind to some type (event system types - what you want):
<ContentControl Content="{Binding YourProperty}"/>
(YourProperty is a Property from you ViewModel attached to view)
then you have to create DataTemplate that render view:
<DataTemplate DataType="{x:Type system:int}">
<views:MyWindow/>
</DataTemplate>
system and views are namespaces in you xaml code. In this example I use system:int type, but it can be your custom type. MyWindow is an UserControl object - so you basically create another WPF UserControl file in your solution.
It works like this. ContentControl gets its Content and check it's type. It looks for DataTemplate that can cast this type to some View (it can be text, textbox, ect) that can be rendered as a Content.
Best regards

Related

Josh Smith MVVM Demo app

In MainWindow we have:
<HeaderedContentControl
Content="{Binding Path=Workspaces}"
ContentTemplate="{StaticResource WorkspacesTemplate}"
Header="Workspaces"
Style="{StaticResource MainHCCStyle}"
/>
In the resources:
<DataTemplate x:Key="WorkspacesTemplate">
<TabControl
IsSynchronizedWithCurrentItem="True"
ItemsSource="{Binding}"
ItemTemplate="{StaticResource ClosableTabItemTemplate}"
Margin="4"
/>
</DataTemplate>
And in the article says:
A typed DataTemplate does not have an x:Key value assigned to it, but
it does have its DataType property set to an instance of the Type
class. If WPF tries to render one of your ViewModel objects, it will
check to see if the resource system has a typed DataTemplate in scope
whose DataType is the same as (or a base class of) the type of your
ViewModel object. If it finds one, it uses that template to render the
ViewModel object referenced by the tab item's Content property.
My question is:
How does the template know that the type is a collection of workspaces (WorkspaceViewModel)?
It doesn't need to, in the code you've posted. In your sample, you have given a strict value to your content template: you've explicitly used {StaticResource WorkspacesTemplate}, and so a resource with the key of "WorkspacesTemplate is looked up.
Because you've explicitly set the template, it doesn't matter what the intended type is: it'll try to display any object in your Content using the template you've set - with varying degrees of success if you use a type that doesn't match!
In the alternate method you mention - with a "typed DataTemplate", you would declare your datatemplate with <DataTemplate DataType="{x:Type l:WorkSpace}" />. Note that there is no x:Key (and also that I've assumed you have a namespace l mapped to your local code). What happens here is that WPF automatically sets the key of your resource to the DataType (important to note: a resource key doesn't have to be a string!).
Then, when you declare your HeaderedContentControl, you can leave out setting the ContentTemplate. At runtime, when the control is rendered, WPF will check the type of the Content object and find that it is WorkSpace, and it'll then look up a resource with x:Key="{x:Type l:WorkSpace}" - which will match your typed template.
This is a useful way of making consistent representations of data throughout your application, since a typed DataTemplate will be used automatically by any content-presenting control throughout your application.
WPF doesn't really care about the concrete type, it's just need to be some IEnumerable of something, WPF uses the type descriptor to know what the ui binding with.

Data Template are only necessary in ItemsControl controls?

Let me explain you my situation.
I have a base class called Shape, and several concrete classes like Triangle, Square, etc.
I have several data templates.
I'm building just one object. So I wouldn't use an ItemControl control, I would like to use a normal panel like the grid, and show the respective data template (in DataContext has the concrete item)..
The only way to do this is using an ItemsControl? Or there's another way.. because I'm just using one item and not a collection and display the correct template.
DataTemplates are used in much more than just ItemsControls
They are used to tell WPF how to draw any object in the Visual Tree. For example, if you stick a User class object in the VisualTree, a DataTemplate can be used to tell WPF how to draw that User object
They are most frequently used in controls with an ItemsSource or Content properties, because those are the most common way of inserting data objects into the VisualTree.
In your specific case where you only want to insert one data item into the VisualTree, I would suggest a ContentControl
<ContentControl Content="{Binding MyDataObject}" />
To tell WPF how to draw MyDataObject you can either use the ContentTemplate property and set it to a DataTemplate
<ContentControl Content="{Binding MyDataObject}"
ContentTemplate="{StaticResource MyDataTemplate}" />
or define an implicit DataTemplate that tells WPF to draw any object of a specific type using a specific template.
<DataTemplate DataType="{x:Type local:MyDataObject}">
<!-- Tell WPF how to draw MyDataObject here -->
</DataTemplate>
If you want to display a single item with a data template that is selected based on the item's type, you should use ContentControl or any of its derived classes.

Change inner user control in Silverlight/WPF by a property at design time

I am creating some custom user controls for WPF. This user controls contain custom dependency properties so I can fill them in the designer.
One of this properties is called "InnerUserControlType". This dependency proeprty is a custom enumeration containing some values like TextBox, ComboBox, Label, CheckBox, etc.
I would like to be able to set this property in my XAML pages in the designer and then see the user control change the displayed inner control depending on the property.
How should I implement this? The grid which will contain the inner control in my user control is a normal field, so it cannot be accessed from a static method property (like the dependency properties).
I want it to have it working in the designer so the designers can work easily.
Thanks a lot!
Put a ContentControl in the grid, bind the Content property to the UserControl via relative source
<ContentControl Content="{Binding RelativeSource={RelativeSource FindAnsector,
AncestorType={x:Tyle myNamespace:MyControl}}}"
and make a DataTemplateSelector that will check the value of InnerUserControlType and will return an appropriate data template containing the control that was asked for in the property.
Depending on your scenarios, you might need to make sure the controls in the data template have the right data context. If the data context of the controls should be the same as of the user control, then on the root element in the data template, add relative binding for data context. Something like (for the text box data template):
<TextBox DataContext="{Binding DataContext,
RelativeSource={RelativeSource FindAnsector,
AncestorType={x:Tyle myNamespace:MyControl}}}"
......
</TextBox>
EDIT:
I've noticed only the wpf tag and missed the silverlight one.
In Silverlight you don't have ...TemplateSelector properties, so use a converter instead.

how to create binding in code when the datatemplate is declared in xaml

i have a datatemplate declared in xaml.
for e.g.
<DataTemplate x:Key="TestTemplate">
<StackPanel>
<TextBox Name="txtBox" Visibility="Visible"></TextBox>
</StackPanel>
</DataTemplate>
I wish to set the binding for txtBox in code behind before the element is generated because i have different binding paths for different elements that get generated
I can get the template in the code behind as :
DataTemplate tmplt = FindResource("TestTemplate") as DataTemplate;
but i am not sure what to do next. How to get the the txtBox reference to set the binding.
We have to remember one thing that Templates are not instantiated UI controls. They are streamed obejcts in XAML and are shared between UI elements. So if you edit a dataTemplate and change its stucture (by adding, editing, deleting an element under the template) it would change the one data template which is shared among controls. Thus other elements using that template will also be affected by the change.
Now lets address your issue of adding a dynamic biding to a textbox. You say each generated textbox will have different binding paths. So this definitely does NOT call for changing the data template itself!
You will have to access the text box and add dynamic bindings to it AFTER the textbox's is generated.
I see that your binding differs based on your "situation", so why cant you use TemplateSelector? Template selector will decide which data template (having one specific binding applied to the TetxBox) at runtime.
The first part of answer - is FindName() method.
example:
DataTemplate tmplt = FindResource("TestTemplate") as DataTemplate;
TextBox my = (TextBox)tmplt.FindName("txtBox");
try out this, it should help to get access to TextBox control. I think that you know how to bind to. If you want your DataBinding behave different way, use MultiBinding and Converter.
EDIT
public class GeneralObject
{
private object someObject;
public GeneralObject(object initObject)
{
this.someObject = initObject;
}
//If you want to bind to some text, for example
public string Text
{
get
{
//I think you know which objects are coming as input
if (this.someObject is SpecialClass1)
return ((SpecialClass1)this.someObject).SpecialClass1TextProperty;
if (this.someObject is SpecialClass2)
return ((SpecialClass2)this.someObject).SpecialClass2TextProperty;
//and so on.
}
}
}
EDIT 2
One more possible way
So I remember, that WPF have ContentControl!
<ContentControl Content="{Binding Path=CurrentObject}"/>
But in this case you have to create number of DataTemplate's, every Template for one class.
<DataTemplate DataType="{x:Type local:SpecialClass1}">
...
</DataTemplate>
<DataTemplate DataType="{x:Type local:SpecialClass2}">
...
</DataTemplate>
<!--and so on-->
WPF resolve DataTypes of ContentControl.Content property, and put to the ContentControl right DataTemplate.

WPF Custom Control - ItemsControl template not being applied

I'm building a custom WPF control that derives from TabControl. In the ControlTemplate, I'm using a ItemsControl to display a list that is being bound from the template (an observable collection of type FileMenuItem). During program execution, I'm getting the following error in the output window:
ItemTemplate and ItemTemplateSelector
are ignored for items already of the
ItemsControl's container type;
Type='FileMenuItem'
The type FileMenuItem is derived from MenuItem. If I change the base class to DependencyObject, the code actually runs and the template is applied (so that's an option). I googled the error and couldn't find anything about it, has anyone run into this while developing custom controls? Even though I have a workaround, I'd like to understand what's happening, and I think using the MenuItem as a base class is a cleaner implementation.
I can post more code if it would help. Thanks!
The purpose of a DataTemplate (like ItemTemplate) is to provide a visualization for a data object. Specifically, it defines a set of elements to add to the visual tree in place of the data given to an ContentPresenter or ItemsPresenter. In your case your source list is a collection of objects that are already able to be added directly to the visual tree for display in the UI.
You can see this in the following simplified example where only "Three" shows up in Red because the first two items are defined in a form that can be displayed directly by ComboBox.
<ComboBox>
<ComboBox.ItemTemplate>
<DataTemplate>
<TextBlock Text="{Binding}" Foreground="Red"/>
</DataTemplate>
</ComboBox.ItemTemplate>
<ComboBoxItem>One</ComboBoxItem>
<ComboBoxItem>Two</ComboBoxItem>
<sys:String>Three</sys:String>
</ComboBox>

Categories

Resources