Extract styles in Expression Blend

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:

<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.

Now, we are in Resource editing mode:

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

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

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

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:

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