How to set wrapping for HyperlinkButton with databound Content/Text?

Question

I am binding a collection (rss feed) into a list box such as this:

<ListBox Margin="0,0,-12,0" ItemsSource="{Binding Items}">
    <ListBox.ItemTemplate>
        <DataTemplate>
            <StackPanel Margin="0,0,0,17" Width="432">
                <HyperlinkButton Content={Binding Title} NavigateUri="{Binding Link}" />
                <TextBlock Text="{Binding Description}" />
            </StackPanel>
        </DataTemplate>
    </ListBox.ItemTemplate>
</ListBox>

This works great - the data displays correctly etc. But now when I changed it to use text wrapping, the title is not displaying anymore.

Here is the problematic code.

<ListBox Margin="0,0,-12,0" ItemsSource="{Binding Items}">
    <ListBox.ItemTemplate>
        <DataTemplate>
            <StackPanel Margin="0,0,0,17" Width="432">
                <HyperlinkButton NavigateUri="{Binding Link}">
                    <TextBlock Text="{Binding Title}" TextWrapping="Wrap" />
                </HyperlinkButton>
                <TextBlock Text="{Binding Description}" TextWrapping="Wrap" />
            </StackPanel>
        </DataTemplate>
    </ListBox.ItemTemplate>
</ListBox>

I don't think it's the "TextWrapping" attribute that is causing the issue, since I tried without it and it still did not work. So my question is how do you get something like this to work? I just want to display a hyperlink with wrapped bound text. It looks like a fairly simple thing to do - but yet so hard. Help?

Answer 1

I was having the exact same problem and I couldn't understand why it wasn't working until I ran across this blog post by Mister Goodcat. In his post he said that because of some optimizations made for the WP7 in Silverlight the basic functionality that works in normal Silverlight does not work correctly for WP7 Silverlight. Instead of using he suggests modifying the Style instead.

The easiest way to edit the default templates still is to use Expression Blend to make a copy of it and work from there. When you do that you'll see that the template really only has a text block to show the content. That is why using another UI element as content doesn't work for the hyperlink button on WP7. If you only want to make the text wrap, it's sufficient to change the TextWrapping property on that text block.

<Style x:Key="HyperlinkButtonWrappingStyle"
        TargetType="HyperlinkButton">
    <Setter Property="Foreground"
            Value="{StaticResource PhoneForegroundBrush}" />
    <Setter Property="Background"
            Value="Transparent" />
    <Setter Property="FontSize"
            Value="{StaticResource PhoneFontSizeMedium}" />
    <Setter Property="Padding"
            Value="0" />
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="HyperlinkButton">
                <Border Background="Transparent">
                    <VisualStateManager.VisualStateGroups>
                        <VisualStateGroup x:Name="CommonStates">
                            <VisualState x:Name="Normal" />
                            <VisualState x:Name="MouseOver" />
                            <VisualState x:Name="Pressed">
                                <Storyboard>
                                    <DoubleAnimation Duration="0"
                                                        To="0.5"
                                                        Storyboard.TargetProperty="Opacity"
                                                        Storyboard.TargetName="TextElement" />
                                </Storyboard>
                            </VisualState>
                            <VisualState x:Name="Disabled">
                                <Storyboard>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground"
                                                                    Storyboard.TargetName="TextElement">
                                        <DiscreteObjectKeyFrame KeyTime="0"
                                                                Value="{StaticResource PhoneDisabledBrush}" />
                                    </ObjectAnimationUsingKeyFrames>
                                </Storyboard>
                            </VisualState>
                        </VisualStateGroup>
                    </VisualStateManager.VisualStateGroups>
                    <Border Background="{TemplateBinding Background}"
                            Margin="{StaticResource PhoneHorizontalMargin}"
                            Padding="{TemplateBinding Padding}">
                        <TextBlock x:Name="TextElement"
                                    HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
                                    Text="{TemplateBinding Content}"
                                    TextDecorations="Underline"
                                    VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
                                    TextWrapping="Wrap" />
                    </Border>
                </Border>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

I suggest reading his blog post for more information & help.

Answer 2

Here's the solution to the problem: http://www.pitorque.de/MisterGoodcat/post/WP7-snippet-analyzing-the-hyperlink-button-style.aspx#continue

The code shown above works fine in SL4 but not in Windows Phone 7; mainly for performance reasons. Use Blend to edit the HyperlinkButton style where you will find that the Hyperlinkbutton already uses a TextBlock for content display and add the TextWrapping="Wrap" property.