WP7/Silverlight Hyperlink Image

Question

I am new to both Silverlight and WP7. I have been attempting to hotlink an image by using a HyperlinkButton and setting its content to an Image. However, this just makes my

Answer 1

You need to change HyperlinkButton style in order to enable any content in it, not just text. Here is a sample style:

<Style x:Key="BrowserHyperlinkButtonStyle" TargetType="HyperlinkButton">
    <Setter Property="Foreground" Value="{StaticResource PhoneAccentBrush}" />
    <Setter Property="FontFamily" Value="{StaticResource PhoneFontFamilyNormal}" />
    <Setter Property="FontSize" Value="{StaticResource PhoneFontSizeNormal}" />
    <Setter Property="FontWeight" Value="Normal" />
    <Setter Property="Background" Value="{StaticResource TransparentBrush}" />
    <Setter Property="BorderBrush" Value="{x:Null}" />
    <Setter Property="BorderThickness" Value="0" />
    <Setter Property="HorizontalContentAlignment" Value="Left" />
    <Setter Property="VerticalContentAlignment" Value="Top" />
    <Setter Property="Padding" Value="{StaticResource PhoneTouchTargetOverhang}" />
    <Setter Property="TargetName" Value="_blank" />
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="HyperlinkButton">
                <Grid>
                    <VisualStateManager.VisualStateGroups>
                        <VisualStateGroup x:Name="CommonStates">
                            <VisualState x:Name="Normal" />
                            <VisualState x:Name="MouseOver" />
                            <VisualState x:Name="Pressed">
                                <Storyboard>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentElement"
                                                                   Storyboard.TargetProperty="Foreground">
                                        <DiscreteObjectKeyFrame KeyTime="0"
                                                                Value="{StaticResource PhoneSubtleBrush}" />
                                    </ObjectAnimationUsingKeyFrames>
                                </Storyboard>
                            </VisualState>
                            <VisualState x:Name="Disabled">
                                <Storyboard>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentElement"
                                                                   Storyboard.TargetProperty="Foreground">
                                        <DiscreteObjectKeyFrame KeyTime="0"
                                                                Value="{StaticResource PhoneDisabledBrush}" />
                                    </ObjectAnimationUsingKeyFrames>
                                </Storyboard>
                            </VisualState>
                        </VisualStateGroup>
                        <VisualStateGroup x:Name="FocusStates">
                            <VisualState x:Name="Focused" />
                            <VisualState x:Name="Unfocused" />
                        </VisualStateGroup>
                    </VisualStateManager.VisualStateGroups>
                    <Border Background="{TemplateBinding Background}"
                            BorderBrush="{TemplateBinding BorderBrush}"
                            BorderThickness="{TemplateBinding BorderThickness}">
                        <ContentControl Name="ContentElement"
                                        Content="{TemplateBinding Content}"
                                        ContentTemplate="{TemplateBinding ContentTemplate}"
                                        HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
                                        VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
                                        Margin="{TemplateBinding Padding}" />
                    </Border>
                </Grid>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

Answer 2

This is a bit of an oddity in that you can't directly place an Image as the control's content. The topic was explored here during beta.

Peter Torr's had previously suggested using a stackpanel as the hyperlink's content. This did work at the time, but does not appear to be working at the moment for some reason.

With that said, Richard Woo identified a work around which was to use the hyperlinks background property. I confirmed this still works as follows:

    <HyperlinkButton Height="310" HorizontalAlignment="Left" Margin="206,202,0,0" Name="hyperlinkButton1" VerticalAlignment="Top" Width="200" >
        <HyperlinkButton.Background>
            <ImageBrush ImageSource="SplashScreenImage.jpg"/>
        </HyperlinkButton.Background>
    </HyperlinkButton>

It may be worth raising this as an issue to be looked into on the suggestions forum or connect.

As far as alternatives to hyperlink go, Matt's option with an Image and gesture looks workable. You could also use a Button and retemplate it's appearance in Blend.

Answer 3

It looks like you're trying to make an image launch a webpage when tapped.

THe only way to launch a web page is to use the WebBrowserTask. If I were you I'd wrap an Image in a GestureListener (from the toolkit) and launch the task on a tap event.

Like this:

xaml:

    <Image Source="images/appbar.favs.addto.rest.png" Stretch="None" >
        <Controls:GestureService.GestureListener>
            <Controls:GestureListener Tap="GestureListener_Tap" />
        </Controls:GestureService.GestureListener>
    </Image>

cs:

    private void GestureListener_Tap(object sender, GestureEventArgs e)
    {
        var wbt = new WebBrowserTask();
        wbt.URL = "http://www.stackoverflow.com/";
        wbt.Show();
    }