Tip: Set DesignWidth and DesighHeight when styling Silverlight 3 controls

I rediscovered the usefulness of the DesignWidth and DesignHeight Blend properties while styling several controls.

Next time you are looking at a very small ControlTemplate in Resource Editing Mode in Expression Blend, don’t forget to set the design-time width and height. It will make your life easier. You can set it at the expected size of the control in de real interface and you can work in the control and see a reasonably sized control.

Styling a TabItem, for instance, will show the tab at the MinimumWidth en MinimumHeight of 10 pixels, leaving you a 10×10 pixel tab to work with. Setting the DesignWidth and DesignHeight properties on the root grid of the control to, say 150 and 25 gives you  room to work with and a more realistic view on the tab.

<ControlTemplate TargetType=”TabItem”>
    <Grid x:Name=”Root” d:DesignWidth=”150″ d:DesignHeight=”25″>

This needs the Blend NameSpaces at the top of the page to work:

xmlns:mc=”http://schemas.openxmlformats.org/markup-compatibility/2006″ mc:Ignorable=”d”



Geef een reactie

Vul je gegevens in of klik op een icoon om in te loggen.

WordPress.com logo

Je reageert onder je WordPress.com account. Log uit / Bijwerken )


Je reageert onder je Twitter account. Log uit / Bijwerken )

Facebook foto

Je reageert onder je Facebook account. Log uit / Bijwerken )

Google+ photo

Je reageert onder je Google+ account. Log uit / Bijwerken )

Verbinden met %s