I have a UserControl called a Node, and I want my design team to be able to represent this Node in the UI however they like (Ellipse, Rectangle, Polygon, whatever). What I've tried so far is this:
In theory, this is how a designer would style a Node to be a green elipse. However, I'm getting the exception "Invalid attribute value Template for property Property."
How can I style a UserControl with different elements? Should I be using something other than Grid as my container element?
You are trying to define a Template for Grid control. But Grid does not have Template property. You can only define a template for a control that has Template property.
Grid is inherited from Panel, Panel does not have Template property. You can only define template for a control that is inherited Control class.
Sally Xu
Software Engineer
Aprimo, Inc
Please remember to mark the replies as answers if they answered your question
You probably should build a custom control for this Node instead of a UserControl. For custom control you define the default look of this control in the generic.xaml file instead of App.xaml.
Add a class file called Node.cs:
public class Node : Control
{
public Node()
{
this.DefaultStyleKey = typeof(Node);
}
}
Add the following XAML to the Themes/generic.xaml file
Now you can use your Node control in your application. You can also define Templates in App.xaml for your Node control to give it different look if you need to. Otherwise, they have default look defined in your generic.xaml.
Sally Xu
Software Engineer
Aprimo, Inc
Please remember to mark the replies as answers if they answered your question
Looks like a good answer, sladapter, thanks! One more question: I don't have a Themes/ folder - does the generic.xaml file have to be there? Should I create it just for generic.xaml or what?
Yes, the generic.xaml need to be under Themes folder. So you need to add a Folder to your Silverlight project and name it Themes, and put generic.xaml in that folder.
I'd prefer to add customer controls to my Silverlight Control Library project. So usually I have a main Silverlight application project which have my UserControls and App.xmal (application start point), and a Silverlight ontrol Library project which contains
my customer controls (they usually do not have any business related code, and reusable through out all my applications). If you choose to do it this way, add the Themes folder and generic.xaml to this control library project.
Sally Xu
Software Engineer
Aprimo, Inc
Please remember to mark the replies as answers if they answered your question
johnfactorial
Member
41 Points
43 Posts
styling grid's ControlTemplate
Aug 25, 2009 06:09 PM | LINK
I have a UserControl called a Node, and I want my design team to be able to represent this Node in the UI however they like (Ellipse, Rectangle, Polygon, whatever). What I've tried so far is this:
Node.xaml:
------------
<UserControl x:Class="MyNamespace.Node"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<Grid x:Name="LayoutRoot" Style="{StaticResource Node_Unselected}">
</Grid>
</UserControl>
---------
App.xaml:
---------
<Style x:Key="Node_Unselected" TargetType="Grid">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Grid">
<Ellipse x:Name="Shape" Stroke="Green" StrokeThickness="2" Fill="Transparent" Width="6" Height="6"></Ellipse>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
----------
In theory, this is how a designer would style a Node to be a green elipse. However, I'm getting the exception "Invalid attribute value Template for property Property."
How can I style a UserControl with different elements? Should I be using something other than Grid as my container element?
sladapter
All-Star
43609 Points
7910 Posts
Re: styling grid's ControlTemplate
Aug 25, 2009 06:33 PM | LINK
You are trying to define a Template for Grid control. But Grid does not have Template property. You can only define a template for a control that has Template property.
Grid is inherited from Panel, Panel does not have Template property. You can only define template for a control that is inherited Control class.
Software Engineer
Aprimo, Inc
Please remember to mark the replies as answers if they answered your question
johnfactorial
Member
41 Points
43 Posts
Re: styling grid's ControlTemplate
Aug 25, 2009 06:59 PM | LINK
sladapter
All-Star
43609 Points
7910 Posts
Re: styling grid's ControlTemplate
Aug 25, 2009 07:11 PM | LINK
You probably should build a custom control for this Node instead of a UserControl. For custom control you define the default look of this control in the generic.xaml file instead of App.xaml.
Add a class file called Node.cs:
public class Node : Control
{
public Node()
{
this.DefaultStyleKey = typeof(Node);
}
}
Add the following XAML to the Themes/generic.xaml file
<ResourceDictionary
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:controls="clr-namespace:YourNodeControlsNameSpace;assembly=YourNodeControlAssemblyName"
xmlns:vsm="clr-namespace:System.Windows;assembly=System.Windows"
>
<Style TargetType="controls:Node">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="controls:Node">
<Ellipse x:Name="NodeImage" Stroke="Green" StrokeThickness="2" Fill="Transparent" Width="6" Height="6"></Ellipse>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</ResourceDictionary>
Now you can use your Node control in your application. You can also define Templates in App.xaml for your Node control to give it different look if you need to. Otherwise, they have default look defined in your generic.xaml.
Software Engineer
Aprimo, Inc
Please remember to mark the replies as answers if they answered your question
johnfactorial
Member
41 Points
43 Posts
Re: styling grid's ControlTemplate
Aug 25, 2009 08:29 PM | LINK
sladapter
All-Star
43609 Points
7910 Posts
Re: styling grid's ControlTemplate
Aug 25, 2009 08:43 PM | LINK
Yes, the generic.xaml need to be under Themes folder. So you need to add a Folder to your Silverlight project and name it Themes, and put generic.xaml in that folder.
I'd prefer to add customer controls to my Silverlight Control Library project. So usually I have a main Silverlight application project which have my UserControls and App.xmal (application start point), and a Silverlight ontrol Library project which contains my customer controls (they usually do not have any business related code, and reusable through out all my applications). If you choose to do it this way, add the Themes folder and generic.xaml to this control library project.
Software Engineer
Aprimo, Inc
Please remember to mark the replies as answers if they answered your question