Silverlight：让超链接按钮看起来像一个文本块？答案

【问题标题】：Silverlight: make a hyperlink button appear like a textblock?Silverlight：让超链接按钮看起来像一个文本块？
【发布时间】：2010-12-29 18:53:43
【问题描述】：

我正在尝试使文本块中所有可点击的 URI 单词。这是我采取的方法：

    private static void onTextChanged(DependencyObject dependObj, DependencyPropertyChangedEventArgs e)
    {
        WrapPanel wrapPanel = ((HyperlinkTextBlock)dependObj).LayoutRoot;
        wrapPanel.Children.Clear();

        // TODO: use a real wordbreaker?
        // adding an extra space to the end of the last word. Cry.
        IList<string> words = ((string)e.NewValue).Split(' ').Select(word => word + " ").ToList();
        foreach (string word in words)
        {
            Uri uri;
            if (Uri.TryCreate(word, UriKind.Absolute, out uri))
            {
                // TODO the style is off - the text is too big
                wrapPanel.Children.Add(new HyperlinkButton()
                {
                    Content = word,
                    NavigateUri = uri,
                    TargetName = "_blank",
                    Margin = new Thickness(0),
                    Padding = new Thickness(0),
                });
            }
            else
            {
                wrapPanel.Children.Add(new TextBlock() { Text = word, TextWrapping = TextWrapping.Wrap });
            }
        }
    }

（我完全愿意采用更加面向 XAML/声明性的方式来做这件事，但我不确定我会如何去做。）

这很好用（除了使用真正的断词器会很好），除了HyperlinkButton 看起来很有趣。它太大了，文本不会换行。它似乎也有一些偏移，我试图通过将Margin 和Padding 设置为0来解决，但它并没有解决问题。

还有其他想法吗？真的，我想要HyperlinkText 而不是HyperlinkButton，但我不认为适用于Windows Phone 7 的Silverlight 3 提供了这种功能。

【问题讨论】：

标签： silverlight windows-phone-7

【解决方案1】：

这是我提出的一个解决方案，方法是提取超链接按钮的样式，然后对我关心的区域进行修改（你提到的那个奇怪的缩进）。这样，除了您要更改的内容外，行为完全相同。

在创建超链接按钮时还要设置样式属性，如下所示：

var button = new HyperlinkButton
{
    ...
    Style = (Style) Resources["HyperlinkButtonWithNoIndent"]
};

然后在您的页面中，将以下样式添加到资源中：

<Style x:Key="HyperlinkButtonWithNoIndent" 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}" Padding="{TemplateBinding Padding}">
                        <TextBlock x:Name="TextElement" Text="{TemplateBinding Content}" TextDecorations="Underline" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
                    </Border>
                </Border>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

【讨论】：

【解决方案2】：

我从未尝试过使用TextBlock 执行此操作，但它适用于Image 和StackPanel，因此它也应该适用于您的情况。将Tap 手势的处理程序添加到您的TextBlock 并监听它。然后，在事件处理程序中，您可以导航到 URL。

TextBlock MyTextBlock = new TextBlock() { Text = "Tap Me!" };
GestureListener listener = GestureService.GetGestureListener( MyTextBlock );
listener.Tap += new EventHandler<GestureEventArgs>( OnMyTextBlockTapped );

事件处理程序如下所示：

void OnMyTextBlockTapped( object sender, GestureEventArgs e )
{
  // Navigate to URL
}

您甚至可以通过在事件处理程序中启动 Storyboard 并在动画完成时执行导航来为点击设置动画。

【讨论】：

向文本块添加点击手势同样可行

【解决方案3】：

您是否尝试过在 blend 中重新模板化控件？您应该完全控制构成 HyperlinkButton 的所有组成部分的演示样式。

右击控件
编辑模板
编辑副本
格式化

您可以重复使用生成的样式。

【讨论】：