Gepost door: antonidol | donderdag 15 januari 2009

How to place a vector illustration in Silverlight 2 Application Resources

Recently, I did a presentation on how to structure a Silverlight Application using Styles and Resources. This covered several topics about structuring XAML using only the Blend User Interface as a tool.

When you create a Style, Blend goes in Style Recording mode (even though there is no visual indication of that) and all properties you set in this mode are collected in your styles automatically. Just remember to begin creating a Style, you can’t convert inline properties to styles momentarily.

You can create a Resource from almost everything (although you cannot always use them as such) using the small square to the right of the input box for the property in the Property Panel. Using the Resource Panel in Blend reorganizing Resources is straightforward. You can even move User Control Resources to the application level by dragging the layer to the Application Resource Dictionary in the Resource panel.

Placing animations in App. xaml is certainly possible with the technique I mentioned earlier. You’ll have to start the animation using code.

All this helps to set up a more structured version of your Silverlight Application. But… One thing missing from this list is how to remove large vector illustrations in XAML from you pages and place them as a resource in the application level. That way large chunks of XAML are out of the way and they can be reused using only one line of code: efficient and good for your application’s performance. With the following technique, you can put ANY large, coherent piece of XAML away as a resource. Anything that you can stash in a Grid panel, for example.

The trick is the use of a Content Control and to set it’s Template property to a ControlTemplate that is used as a Resource:


<ContentControl Template="{StaticResource ctpBullet}" />

 

      <ControlTemplate x:Name="ctpBullet" TargetType="ContentControl">
            <Grid Width="12" Height="12" VerticalAlignment="Top" HorizontalAlignment="Center">
                <Grid.RowDefinitions>
                    <RowDefinition />
                    <RowDefinition />
                </Grid.RowDefinitions>
                <Ellipse x:Name="Bullet" Grid.RowSpan="2" Stretch="Fill" StrokeThickness="0.5" StrokeLineJoin="Round" Stroke="#FF870000">
                    <Ellipse.Fill>
                        <RadialGradientBrush RadiusX="0.67158" RadiusY="0.671574" Center="0.34738,0.263298" GradientOrigin="0.34738,0.263298">
                            <RadialGradientBrush.GradientStops>
                                <GradientStop Color="#FFFFFFFF" Offset="0"/>
                                <GradientStop Color="#FFFF0000" Offset="0.512712"/>
                                <GradientStop Color="#FFCF0000" Offset="0.817797"/>
                                <GradientStop Color="#FFFF0000" Offset="1"/>
                            </RadialGradientBrush.GradientStops>
                            <RadialGradientBrush.RelativeTransform>
                                <TransformGroup>
                                    <RotateTransform CenterX="0.34738" CenterY="0.263298" Angle="57.8044"/>
                                </TransformGroup>
                            </RadialGradientBrush.RelativeTransform>
                        </RadialGradientBrush>
                    </Ellipse.Fill>
                </Ellipse>
                <Path x:Name="BulletGlow" Margin="2" Stretch="Fill" Data="F1 M 23.0627,100.787C 26.3052,100.787 28.9338,103.416 28.9338,106.659C 28.9338,109.901 26.3052,106.595 23.0627,106.595C 19.8202,106.595 17.1916,109.901 17.1916,106.659C 17.1916,103.416 19.8202,100.787 23.0627,100.787 Z ">
                    <Path.Fill>
                        <RadialGradientBrush RadiusX="1.19041" RadiusY="0.858456" Center="0.332587,0.223982" GradientOrigin="0.332587,0.223982">
                            <RadialGradientBrush.GradientStops>
                                <GradientStop Color="#FFFED4D0" Offset="0"/>
                                <GradientStop Color="#FFF27037" Offset="1"/>
                            </RadialGradientBrush.GradientStops>
                            <RadialGradientBrush.RelativeTransform>
                                <TransformGroup>
                                    <SkewTransform CenterX="0.332587" CenterY="0.223982" AngleX="22.4347" AngleY="0"/>
                                    <RotateTransform CenterX="0.332587" CenterY="0.223982" Angle="71.469"/>
                                </TransformGroup>
                            </RadialGradientBrush.RelativeTransform>
                        </RadialGradientBrush>
                    </Path.Fill>
                </Path>
            </Grid>
        </ControlTemplate>

So, clean up your XAML markup. With this trick you can remove those large vector illustrations from you screen layout and place them out of the way in app.xaml.

Njoy!


Responses

  1. I love your site!


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 )

Twitter-afbeelding

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

Categorieën

%d bloggers op de volgende wijze: