Powered by MSDN

US - English
NEW! Silverlight 5 is available Learn More

Why is my custom control not skinnable in Expression Bl... RSS

4 replies

Last post Aug 24, 2008 07:21 PM by SilverlightWebApps

(0)
  • SilverlightWebApps

    SilverlightW...

    Member

    36 Points

    49 Posts

    Why is my custom control not skinnable in Expression Blend?

    Aug 16, 2008 03:09 PM | LINK

    I sucessfully created a custom control that is a navigation bar much like the navigation bar at the top of silverlight.net.  It works great.  I can include <custom:navbar/> in the page.xaml of my demo project and everything works fine.  The trick though, is that I also want this control to be skinnable.  This means to me that I should be able to use Expression Blend, right click and select "edit control parts (Template)".  The problem is that when I do that I don't actually see anything except a little collapsed yellow box and I don't see any of the parts that were used in my control listed in the object panel.  I also don't have any properties listed.

    Any suggestions?

    skinnable custom control

  • SilverlightWebApps

    SilverlightW...

    Member

    36 Points

    49 Posts

    Re: Why is my custom control not skinnable?

    Aug 17, 2008 10:23 PM | LINK

    This one is still really stumping me and I'm really hoping someone can offer some suggestions.  I found this posting from Shawn Burke of Microsoft http://blogs.msdn.com/sburke/archive/2008/03/05/silverlight-2-beta-1-controls-available-including-source-and-unit-tests.aspx and it has the source code for the official Silverlight 2B1 controls.  I didn't see anything different from what he's doing and what I'm doing so I thought I'd build the application and explore it further.  I had to make a few changes to get it to build for Silverlight 2B2, but not too many.  Unfortunately, the result when I clicked "edit control parts (Template)" I got the same as above a collapsed little yellow box with no part listed in the object panel.

    I'm running out of thoughts and am hoping someone on this forum can help.

  • SilverlightWebApps

    SilverlightW...

    Member

    36 Points

    49 Posts

    Re: Why is my custom control not skinnable?

    Aug 18, 2008 02:45 AM | LINK

    I captured some screen shots to better explain what I'm seeing.  I also have some detail to provide that I gained by looking at the XAML that gives a hint as to what is going on.  By the way the project I'm working on is a tutorial that I will be posting at my website www.silverlightwebapps.com so any help you give answering my question will hopefully benefit others as well.  The tutorial I'm working on is the latest in a series where I try out different technologies making an animated navigation bar.  In the latest I'm trying to make the navbar custom control skinnable.

    In the first picture below you see the result of my custom control.  The xaml that generates the below is simply <custom:Navbar/>.  What I think I'm showing you with the below picture is yes indeed I did successfully make a custom control and that control obviously has a number of elements that makes it up.

    Before editing

     In the picture below you can see the result when I select the control and click "Edit Control Parts (Template)".  In other words you see nothing but a little yellow square dot.

    Expression Blend Edit a Copy

    Looking at the XAML you see why this is happening.  The Template that is being applied as a UserControl Resource is an empty template.

    <UserControl x:Class="ControlDemo.Page"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:custom="clr-namespace:NavbarCustomControl;assembly=NavbarCustomControl"
        Width="400" Height="300" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" mc:Ignorable="d">
    	<UserControl.Resources>
    		<ControlTemplate x:Key="NavbarControlTemplate1" TargetType="custom:Navbar"/>
    	</UserControl.Resources>
        <Grid x:Name="LayoutRoot" Background="White">
    	<custom:Navbar Template="{StaticResource NavbarControlTemplate1}"/>
    	</Grid>
        	
    </UserControl>
    

     But here's the thing.  Try the same thing with a slider control.  Put a slider control on your page.xaml, select it, and click "Edit Control Parts (Template)" and look at the XAML.  I did it and here's a small excerpt of what you see:

    	<UserControl.Resources>
    		<Style x:Key="SliderStyle1" TargetType="Slider">
    			<Setter Property="Template">
    				<Setter.Value>
    					<ControlTemplate TargetType="Slider">
    						<Grid x:Name="Root">
    							<Grid.Resources>
    								<ControlTemplate x:Key="RepeatButtonTemplate">
    									<Grid x:Name="Root" Opacity="0" Background="Transparent"/>
    								</ControlTemplate>
    							</Grid.Resources>
    							<vsm:VisualStateManager.VisualStateGroups>
    								<vsm:VisualStateGroup x:Name="CommonStates">
    									<vsm:VisualStateGroup.Transitions>
    

     In other words what you see is that when you clicked "Edit Control Parts (Template)" on the slider control it copied over a bunch of default XAML that defined the current look of the control.  This of course makes it easy to modify that look for your own purposes.

     The question is, why did my control not copy over all the default parts when I went to "Edit Control Parts (Template)" on my control?

     

     

  • Yi-Lun Luo - MSFT

    Yi-Lun Luo -...

    All-Star

    25149 Points

    2759 Posts

    Microsoft

    Re: Why is my custom control not skinnable in Expression Blend?

    Aug 18, 2008 10:16 AM | LINK

    Hello, this is a limitation in Blend June Preview. Currently you can only copy built-in Controls' Templates. We're trying to enable copying Custom Control Templates in a future version.

    shanaolanxing - I'll transfer to the Windows Azure team, and will have limited time to participate in the Silverlight forum. Apologize if I don't answer your questions in time.
  • SilverlightWebApps

    SilverlightW...

    Member

    36 Points

    49 Posts

    Re: Why is my custom control not skinnable in Expression Blend?

    Aug 24, 2008 07:21 PM | LINK

    Thanks for letting me know that.  I certainly hope you guys get that fixed before this comes off of beta because it really dramatically limits the usefulness of user created custom control.  The only work around if you want someone else to be able to skin a control you've created is to distribute a template that contains all the parts with the control.  This is how I worked around things in my tutorial.  If anyone wants to see the results go to www.silverlightwebapps.com and click on "silverlight tutorials".