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 Image disappear.
To reproduce:
- Create a new Windows Phone Panorama Application.
- On the MainPage.xaml replace the Rectangle with an Image, setting the source to ApplicationIcon.png.
- Then, surround it with a HyperlinkButton.
<HyperlinkButton NavigateUri="http://www.bing.com" TargetName="_blank">
<Image Source="ApplicationIcon.png"/>
</HyperlinkButton>
I have tried numerous properties and nothing works for me. Both items work interdependently. Is this possible in WP7? It is an external URI. I have search for documentation and found nothing that's helped.
Your comments and suggestions are appreciated.
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.
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();
}
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>
