Exposing properties of a template for data binding

Question

Hello,

I am a bit newbie with Blend and I still have some trouble to enter into the application.

My questions today are:

• How can I expose the properties of a template  to be able to easily reuse it several times in a component with various values in those properties?
• How can I then bind these properties to sample data?

What I try to achieve is this:

I created a template, made with a layout and 2 text fields: User Name and Date. My aim is to use that template several times in a component, each time with a different name and date, and to be able to modify the layout of the template at will afterwards so that the position of those texts will change the same way on every instance of the template but the text values will not be affected.

So first question: when my template is instanced in my component, I would like to be able to select it and to see a property field for each text in the Properties panel and to be able to change it. I would then be able to manually set the user name and date for each instance, this without having to edit a local template, which is a heavy process.

One I have that, which would be cool, I would like to have even more instances. But then it will become time consuming to set every one by hand. I then would like to bind them to a set of samples. I would then be able to control the content of the instances globally by modifying the samples set.

There is a video here that illustrate quite well that behavior:

Using Sample Data in SketchFlow with Expression Blend 3

http://expression.microsoft.com/en-us/ee426896

Unfortunately the way the template is done is not described (the list view called All Terrains").

By the way, sub questions: what is the difference between a Control and a UserControl? Which one should I choose when I use the tool Make Into...?

The documentation is not really clear about that, especially because there is a Tools panel, and it mainly refers to that, and a Tools menu item, and this one doesn't seem to be much referred to.

Thank you for your help

By the way again: could you please "verify" my account so that I can post links, that would be simpler for me to post posts. Thx

Answer 1

Hello,

Can someone help me on this, please?

That would be greatly appreciated.

Thank you

Answer 2

Hum, nobody has an idea?

My kind of newbie question seems too much... hum, I don't know, specific maybe?

In any case I keep digging in the documentation but I am still stuck, and well stuck.

Thanks in advance for any tips,

Answer 3

Control in blend /  wpf refers to any class though generally we tend to use the term control for visual classes: button, textblock, combobox etc. But is you are referring to differences between customcontrol and usercontrol check this out:

http://wpftutorial.net/CustomVsUserControl.html

There are a number of good tutorials on data binding just post an update here if that's still an issue and I will respond with some links that helped me.

---

Mathias

Answer 4

Hi Mathias,

Thank you a lot for your answer. It helped me a lot to get the difference between these 2 kind of controls.

I still have my problem though, in spite of the researches and tests. If you could help me on that it would be really really appreciated.
My aim is to use Blend to prototype the visual look of applications and components inside them. It consists in creating custom components, illustrating them with some sample data (like seeing the name "John" in a label dedicated to the name of a user or client) and, when having the users feedback, changing the layout of those components to improve it (this without changing the data they contain).

Even before the Data Binding itself, I have a problem with the use of the templates. To illustrate it, I posted a sample project here: https://skydrive.live.com/redir?resid=E102D27EEDC5DA04!109

In this project, there is a User Control template named WkUserControl1 with 2 TextBlocks in it. This User Control is instantiated 2 times in Screen1.

What I would like to do, basically, is:

• to be able to easily change the text of each TextBlock contained in the controls, this as if they where in Screen1 ;
  
• to modify each TextBlock text value without affecting the TextBlock of the other instance of the User Control (as if we could override just the Text value of the TextBlocks);
  
• to be able to change the layout of the User Control (position, color... of each TextBlok it contains - but not the text itself) once for all the instances. In other words, if the template is changed (in terms of properties, not content), both instances in Screen1 are changed the same way.

If all that can be done, well I guess linking these instances to some data sets shouldn't be too difficult...

Thank you again for any help,
Best regards,

Werwack

Answer 5

Hello Werwack.

You could always create 2 DependencyProperties for your control, then when you place the control in your screen you could either set those items manually or bind to them.

Basically in the code-behind for the control...

using System.ComponentModel;
using System.Windows;
using System.Windows.Controls;

namespace SilverlightPrototype1Screens
{
	public partial class WkUserControl1 : UserControl
	{
		[Category("Common Properties")]
		public string Text1 { get { return (string)GetValue(Text1Property); } set { SetValue(Text1Property, value); }}
		public static readonly DependencyProperty Text1Property = DependencyProperty.Register("Text1", typeof(string), typeof(WkUserControl1), new PropertyMetadata("Basic Text"));
		
		[Category("Common Properties")]
		public string Text2 { get { return (string)GetValue(Text2Property); } set { SetValue(Text2Property, value); }}
		public static readonly DependencyProperty Text2Property = DependencyProperty.Register("Text2", typeof(string), typeof(WkUserControl1), new PropertyMetadata("Basic Text 2"));
		
		public WkUserControl1()
		{
			InitializeComponent();
		}
	}
}

And then in the xaml for the control, bind the text for the two textBlocks to those properties...

<UserControl
	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" x:Name="userControl"
	mc:Ignorable="d"
	x:Class="SilverlightPrototype1Screens.WkUserControl1"
	d:DesignWidth="296" d:DesignHeight="73">

	<Grid x:Name="LayoutRoot">
		<Canvas>
			<TextBlock Height="31" Canvas.Left="143" Style="{StaticResource BasicTextBlock-Sketch}" TextWrapping="Wrap" Text="{Binding Text2, ElementName=userControl}" Canvas.Top="29" Width="89"/>
			<TextBlock Height="36" Canvas.Left="8" Style="{StaticResource BasicTextBlock-Sketch}" TextWrapping="Wrap" Canvas.Top="29" Width="105" Foreground="#FFEB0707" Text="{Binding Text1, ElementName=userControl}"/>
		</Canvas>
	</Grid>
</UserControl>

Then on your main screen you can simply bind to the 2 properties of the userControl or manually set them...

<UserControl
	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:local="clr-namespace:SilverlightPrototype1Screens"
	mc:Ignorable="d"
	x:Class="SilverlightPrototype1Screens.Screen_1"
	Width="1600" Height="1300">
	<UserControl.Resources>
		<ResourceDictionary>
			<ResourceDictionary.MergedDictionaries>
				<ResourceDictionary Source="ProjectDataSources.xaml"/>
			</ResourceDictionary.MergedDictionaries>
		</ResourceDictionary>
	</UserControl.Resources>

	<Canvas x:Name="LayoutRoot" Background="White" HorizontalAlignment="Left" Height="628" VerticalAlignment="Bottom" Width="540" DataContext="{Binding Source={StaticResource SampleDataSource}}">
		<local:WkUserControl1 Height="73" Canvas.Left="49" Canvas.Top="21" Width="296" Text1="{Binding Collection[0].Name}" Text2="{Binding Collection[0].Date}"/>
		<local:WkUserControl1 Height="73" Canvas.Left="49" Canvas.Top="107" Width="296" Text1="Stuff for my control" Text2="Things I want to say"/>
	</Canvas>
</UserControl>

I can't say I fully understood your question, but I hope I came close the helping you come up with a solution.

~Christine

---

My Gallery - calControls

Answer 6

Hi Christine,

Sorry for my my late answer.

Thank you for your solution. It is not as trivial as I would have expected but it works greats :)

Best regards,

Werwack