Referencing images from global styles in Silverlight

Question

I have a bit of a problem and I was just wondering what the best way to get around it would be:

I have a global style in app.xaml which specifies the style for a number of controls. It also specifies some images used in some other controls.

The area of interest in the app.xaml file is this:

<!-- Button Icons -->
<BitmapImage x:Key="BackIcon" UriSource="../Images/BackIcon.png" />
<BitmapImage x:Key="PrintIcon" UriSource="../Images/PrintIcon.png" />
<BitmapImage x:Key="ClearIcon" UriSource="../Images/ClearIcon.png" />

<!-- Default Button Style -->
<Style TargetType="Button">
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="Button">
                <Grid>

                    <VisualStateManager.VisualStateGroups>
                        <VisualStateGroup x:Name="CommonStates">
                            <VisualState x:Name="Pressed">
                                <Storyboard>
                                    <ColorAnimation Duration="00:00:00.00"  To="#999999" Storyboard.TargetName="BackgroundColor" Storyboard.TargetProperty="Color"  />
                                </Storyboard>
                            </VisualState>
                            <VisualState x:Name="Disabled">
                                <Storyboard>
                                    <ColorAnimation Duration="00:00:00.00"  To="#bbbbbb" Storyboard.TargetName="BackgroundColor" Storyboard.TargetProperty="Color"  />
                                </Storyboard>
                            </VisualState>
                            <VisualState x:Name="MouseOver" />
                            <VisualState x:Name="Normal"/>
                        </VisualStateGroup>
                    </VisualStateManager.VisualStateGroups>

                    <Border Name="BackgroundBorder" BorderThickness="0" CornerRadius="8"> 

                        <Border.Background>
                            <SolidColorBrush x:Name="BackgroundColor" Color="#dddddd" />
                        </Border.Background>

                        <ContentPresenter
                            x:Name="content"
                            Content="{TemplateBinding Content}"
                            VerticalAlignment="Center" HorizontalAlignment="Center" />

                    </Border>
                </Grid>

            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

And the project structure is like this:

root\
|-- App.xaml
|-- Mainpage.xaml(.cs)
|-- Images\
|   |-- BackIcon.png
|   |-- ClearIcon.png
|   |-- PrintIcon.png
|-- Controls\
    |-- ControlOne.xaml(.cs)
    |-- ControlTwo.xaml(.cs)
    |-- ...

So I have a button in ControlOne, who's content contains an Image and its source is {StaticResource ClearIcon}. This works fine, but if I was to put a button on MainPage.xaml with the same image and static resource, this would fail as the relative location of the image is incorrect. It should now be Images/ClearIcon.png, not ../Images/ClearIcon.png.

So what's the best way to specify image resources in a style / theme and for them to be correct regardless of where the resource is used?

Also, I'm not sure if I've done this a bit of a weird way, but I didn't want to put the Images directly in the button template as I'd then have to create three different button styles for each button, when really the style stays the same, its just the image that changes!

Thanks a lot in advance!

Andy

Andy Andy · Accepted Answer · 2011-02-14T11:48:48

Ok,

Seems like I was overlooking how URIs work in silverlight. Reading this post: http://weblogs.asp.net/jgalloway/archive/2008/09/11/silverlight-and-relative-uri-s-for-image-and-video-sources.aspx really helped clear it up.

So it seems I was compiling my images into the assembly and referencing them, but when you do this, the relative path is always from the location of the xaml file which references the image (hence my problem).

What I needed to do was to set the images to 'content' instead and 'copy to output'. This means that the images are no longer compiled into the assembly, but copied into the xap under the same folder structure. Now I can reference my images with a preceding forward slash (i.e. '/Images/BackIcon.png') and the relative path will always be from the root of the xap regardless of the location of the xaml file.

Seems to work nicely anyway! :)

Referencing images from global styles in Silverlight

1 Answers