Dotneteers.net
All for .net, .net for all!

Extract styles in Expression Blend

VBandi's blog

Syndication

Subscribe

Generic Content

You may have found yourself in a situation when you want to convert an implicit style in XAML into a resource. Until today, I did it with creating the new style, and adding the setters manually. But I thought “There must be some way in Expression Blend to do this better”. I couldn’t find anything on the net, so I started to look for the solution myself. And yeah, I found it… Here is how it is done:

Suppose, you have a TextBox that has a lot of settings on it:

image

 

<TextBlock Margin="50,96,0,0" VerticalAlignment="Top" Text="TextBlock" TextWrapping="Wrap" FontSize="96" FontFamily="Comic Sans MS" FontWeight="Bold" HorizontalAlignment="Left" Width="248">
    <TextBlock.Projection>
        <PlaneProjection RotationY="-57"/>
    </TextBlock.Projection>
    <TextBlock.Effect>
        <DropShadowEffect BlurRadius="9"/>
    </TextBlock.Effect>
    <TextBlock.Foreground>
        <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
            <GradientStop Color="Black" Offset="0"/>
            <GradientStop Color="#FFE82E2E" Offset="1"/>
        </LinearGradientBrush>
    </TextBlock.Foreground>
</TextBlock>

Now, you want to take the font settings, the drop shadow and the Black-Blue foreground gradient and reuse it on another TextBlock. Here is where extracting the style comes handy.

First, select the TextBlock, and choose Object / Style / Create Empty from the menu. There is NO right click option for this command! Then choose a name for your style resource.

image

Now, we are in Resource editing mode:

image

On the Properties tab, you can see all our settings.

image

But the Property Peg is empty (gray). What happens if we click on it?

image

Now, if we click on “Convert To Local Value”, the Peg turns white, and the Foreground gradient will be moved to the style!

 

image

You can see that the TextBlock does not contain the Foreground property anymore, but the TextBlockStyle1 style does. We can go and “Convert to Local Value” for all properties we want in the style. Even the drop shadow and the Perspective transform can be extracted this way.

Here is the end result:

image

Nice and clean XAML for the TextBlock, and the style is ready to be reused. Great!


Posted Jan 19 2010, 04:34 PM by vbandi

Comments

Raghuraman wrote re: Extract styles in Expression Blend
on Tue, Jan 19 2010 17:54

Great shortcut. Thanks for sharing

raghuraman

Adam Kinney wrote re: Extract styles in Expression Blend
on Tue, Jan 19 2010 18:23

Great post András! That's a wonderful feature to point out.

uberVU - social comments wrote Social comments and analytics for this post
on Tue, Jan 19 2010 18:31

This post was mentioned on Twitter by vbandi: New Blog Post: Extract Styles in Expression Blend. http://is.gd/6Bbd9

Twitted by corcav wrote Twitted by corcav
on Tue, Jan 19 2010 22:11

Pingback from  Twitted by corcav

Cigdem wrote re: Extract styles in Expression Blend
on Tue, Jan 19 2010 23:38

That's a neat+handy feature; thanks for sharing!

shemesh wrote re: Extract styles in Expression Blend
on Wed, Jan 20 2010 9:39

this is not  "feature" this is a workaround.

vbandi wrote re: Extract styles in Expression Blend
on Wed, Jan 20 2010 9:52

Shemesh, how is this not a feature?

Dew Drop – January 20, 2010 | Alvin Ashcraft's Morning Dew wrote Dew Drop &#8211; January 20, 2010 | Alvin Ashcraft&#039;s Morning Dew
on Wed, Jan 20 2010 15:09

Pingback from  Dew Drop – January 20, 2010 | Alvin Ashcraft's Morning Dew

?????? ?? Microsoft Silverlight » ???????????????????? ???????????? ?? Expression Blend wrote ?????? ?? Microsoft Silverlight &raquo; ???????????????????? ???????????? ?? Expression Blend
on Wed, Jan 20 2010 18:41

Pingback from  ?????? ?? Microsoft Silverlight   » ???????????????????? ???????????? ?? Expression Blend

W350i P, Bulb Dodge W350 Replacement Assembly wrote W350i P, Bulb Dodge W350 Replacement Assembly
on Fri, May 21 2010 5:34

Pingback from  W350i P, Bulb Dodge W350 Replacement Assembly

1991 Ford Aerostar Parts, Fusion New Explorer Sport Trac Ford Aerostar wrote 1991 Ford Aerostar Parts, Fusion New Explorer Sport Trac Ford Aerostar
on Fri, May 21 2010 5:37

Pingback from  1991 Ford Aerostar Parts, Fusion New Explorer Sport Trac Ford Aerostar

W250 Forum Dodge Truck, W250 Hid Dodge D150 wrote W250 Forum Dodge Truck, W250 Hid Dodge D150
on Fri, May 21 2010 5:57

Pingback from  W250 Forum Dodge Truck, W250 Hid Dodge D150

Highlander Road Test Hyundai Santa Fe, Highlander Hybrid Sale San Diego wrote Highlander Road Test Hyundai Santa Fe, Highlander Hybrid Sale San Diego
on Fri, May 21 2010 8:28

Pingback from  Highlander Road Test Hyundai Santa Fe, Highlander Hybrid Sale San Diego

750li Headlight Salvage Yards Used Bmw, 750li Used Sale 2010 Bmw wrote 750li Headlight Salvage Yards Used Bmw, 750li Used Sale 2010 Bmw
on Fri, May 21 2010 8:38

Pingback from  750li Headlight Salvage Yards Used Bmw, 750li Used Sale 2010 Bmw

B 550 Imperial Beach Fog Machine, Chrysler Imperial V8 wrote B 550 Imperial Beach Fog Machine, Chrysler Imperial V8
on Fri, May 21 2010 11:48

Pingback from  B 550 Imperial Beach Fog Machine, Chrysler Imperial V8

Dts Recipe Buick Lucerne, Lucerne Promotion Win wrote Dts Recipe Buick Lucerne, Lucerne Promotion Win
on Fri, May 21 2010 11:57

Pingback from  Dts Recipe Buick Lucerne, Lucerne Promotion Win

Buy Parts Suzuki Esteem Accessories, Sale Autos Used Suzuki Esteem wrote Buy Parts Suzuki Esteem Accessories, Sale Autos Used Suzuki Esteem
on Sat, May 22 2010 13:16

Pingback from  Buy Parts Suzuki Esteem Accessories, Sale Autos Used Suzuki Esteem

C320 Genuine Body Kit, Amazon C320 Suction Cup Mount Garmin Streetpilot C340 wrote C320 Genuine Body Kit, Amazon C320 Suction Cup Mount Garmin Streetpilot C340
on Sat, May 22 2010 13:29

Pingback from  C320 Genuine Body Kit, Amazon C320 Suction Cup Mount Garmin Streetpilot C340

1995 Achieva Recalls Oldsmobile Toronado, 1969 Oldsmobile Toronado 2nd Hand Parts wrote 1995 Achieva Recalls Oldsmobile Toronado, 1969 Oldsmobile Toronado 2nd Hand Parts
on Sat, May 22 2010 15:02

Pingback from  1995 Achieva Recalls Oldsmobile Toronado, 1969 Oldsmobile Toronado 2nd Hand Parts

E 150 Econoline Tube Fuel Pump, Slumdog Millionaire Headlight Super Cobra Jet Irrfan Khan wrote E 150 Econoline Tube Fuel Pump, Slumdog Millionaire Headlight Super Cobra Jet Irrfan Khan
on Sat, May 22 2010 20:15

Pingback from  E 150 Econoline Tube Fuel Pump, Slumdog Millionaire Headlight Super Cobra Jet Irrfan Khan

Saturn L300 1 Discount Fog Light Head Tail, 1 Discount Toshiba Satellite L300 wrote Saturn L300 1 Discount Fog Light Head Tail, 1 Discount Toshiba Satellite L300
on Sat, May 22 2010 20:45

Pingback from  Saturn L300 1 Discount Fog Light Head Tail, 1 Discount Toshiba Satellite L300

Mariner Discount, Mariner Supermodel wrote Mariner Discount, Mariner Supermodel
on Sat, May 22 2010 21:27

Pingback from  Mariner Discount, Mariner Supermodel

2000 Dodge Durango Assembly Headlight Bulb, Bargain Durango Parts wrote 2000 Dodge Durango Assembly Headlight Bulb, Bargain Durango Parts
on Sat, May 22 2010 21:30

Pingback from  2000 Dodge Durango Assembly Headlight Bulb, Bargain Durango Parts

Find Dasher People, 1981 Volkswagen Dasher Mpg Giorgetto Giugiaro wrote Find Dasher People, 1981 Volkswagen Dasher Mpg Giorgetto Giugiaro
on Sat, May 22 2010 21:32

Pingback from  Find Dasher People, 1981 Volkswagen Dasher Mpg Giorgetto Giugiaro

Gm K15 K1500 Suburban Bulb, F 150 Heritage User Guide Explorer Sport Trac wrote Gm K15 K1500 Suburban Bulb, F 150 Heritage User Guide Explorer Sport Trac
on Sat, May 22 2010 22:17

Pingback from  Gm K15 K1500 Suburban Bulb, F 150 Heritage User Guide Explorer Sport Trac

Celica Radiator 4runner Toyota Avalon, Used 2007 Toyota Avalon Front Wheel Drive wrote Celica Radiator 4runner Toyota Avalon, Used 2007 Toyota Avalon Front Wheel Drive
on Sat, May 22 2010 23:36

Pingback from  Celica Radiator 4runner Toyota Avalon, Used 2007 Toyota Avalon Front Wheel Drive

280z Nissan Z 280zx Parts, 280zx Refurbished Used Cars - 156.ja3ra.com wrote 280z Nissan Z 280zx Parts, 280zx Refurbished Used Cars - 156.ja3ra.com
on Sun, May 23 2010 15:20

Pingback from  280z Nissan Z 280zx Parts, 280zx Refurbished Used Cars - 156.ja3ra.com

Robert wrote re: Extract styles in Expression Blend
on Tue, Oct 5 2010 9:45

1. Unfortunately putting the Grid attached properties doesn't allowed, or I missed somethong.

2. What, if I want to extend my existent resource with new items?

Thanks

Robert

@Lab « Tech Tock wrote @Lab &laquo; Tech Tock
on Tue, Feb 8 2011 13:59

Pingback from  @Lab « Tech Tock

How do you move attributes to a style in Expression Blend - Programmers Goodies wrote How do you move attributes to a style in Expression Blend - Programmers Goodies
on Mon, Jul 11 2011 5:14

Pingback from  How do you move attributes to a style in Expression Blend - Programmers Goodies

Extract styles in Expression Blend – VBandi's blog – Dotneteers.net wrote Extract styles in Expression Blend &#8211; VBandi&#039;s blog &#8211; Dotneteers.net
on Mon, Apr 8 2013 0:12

Pingback from  Extract styles in Expression Blend – VBandi's blog – Dotneteers.net

TrackBack wrote
on Tue, Sep 22 2015 15:58

Pingback from