在Windows应用商店应用中实现下划线超链接的最佳方式?

时间:2012-11-19 04:31:58

标签: windows-runtime winrt-xaml windows-store-apps

根据我的阅读,似乎没有任何功能可以在Windows RT中实现TextBlockHyperlinkButton s或类似内容的下划线,这似乎很荒谬,但无论如何,是否有任何人拥有一种优雅的解决方法,特别是创建一个运行Click事件或绑定命令的链接?

正如您所见,开箱即用支持似乎不存在:http://social.msdn.microsoft.com/Forums/en-CA/winappswithcsharp/thread/cba0c363-60da-4e

4 个答案:

答案 0 :(得分:18)

这就是我以前解决这个问题的方法。

<HyperlinkButton x:Name="ExamplesLink" Click="ExamplesLink_Click"
   Extensions:FrameworkElementExtensions.SystemCursor="Hand">
   <TextBlock>
      <Underline>
        <Run Text="Examples"/>
      </Underline>
   </TextBlock>
</HyperlinkButton>

如果您拥有WinRT XAML toolkit,则可以使用上面的扩展名设置光标。

答案 1 :(得分:9)

如果您需要(如我的情况下)模板 HyperlinkButton,请在您的视图中保留您的绑定,您可以这样做:

<Style TargetType="HyperlinkButton"
    x:Key="StandardHyperlinkButton">
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate>
                <TextBlock Style="{StaticResource BaseEntityDetailTextStyle}">
                    <Underline>
                        <Run Text="{Binding Path=Content, Mode=OneWay, RelativeSource={RelativeSource Mode=TemplatedParent}}" />
                    </Underline>
                </TextBlock>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

...然后在 XAML 视图中,例如:

<HyperlinkButton Style="{StaticResource StandardHyperlinkButton}"
    Content="{Binding Path=myContent, Mode=OneWay}"
    Command="{StaticResource myCommand}"
    CommandParameter="{Binding Path=myContent, Mode=OneWay}" />

通过这种方式,你也可以用绑定来解决@sacha问题!

答案 2 :(得分:1)

您可以将RichTextBlock与嵌入式HyperlinkBut​​tons一起使用。如果查看RichTextBlockExtensions - 您可以使用它来绑定html文本片段(使用锚标记),以自动使用链接文本设置填充RichTextBlock。

答案 3 :(得分:0)

上述超链接按钮,AFAIK的问题是运行文本不可绑定,因此您最终必须为每个超链接按钮重复该TextBlock /下划线/运行模式。更好的方法是使它成为一种风格。

例如,如果您尝试这样做,它将无效并且发生UnhandledException

<HyperlinkButton Width="Auto" Height="Auto" Margin="2" 
        Content="{Binding DoctorName}"
        Command="{Binding ElementName=scheduleView, 
            Path=DataContext.NavigateToAppointmentsDetailCommand}"
        CommandParameter="{Binding DoctorName}">
    <HyperlinkButton.Template>
        <ControlTemplate>
            <TextBlock>
                <Underline>
                <Run Text="{TemplateBinding Content}"/>
                </Underline>
            </TextBlock>
        </ControlTemplate>
    </HyperlinkButton.Template>

</HyperlinkButton>

我发现解决超链接文本也可绑定的唯一方法是使用假的下划线矩形和常规按钮。然后我根据指针是否在按钮上显示下划线(假矩形)。以下是相关代码:

不是最好的解决方案,但它可以绑定内容(链接文本),它是一个通用的解决方案。

<Button Width="Auto" Height="Auto" Margin="2" 
        Style="{StaticResource HyperLinkButtonStyle}"
        Content="{Binding DoctorName}">
</Button>

                                                                                                                                                                                                                                                                             

                                <Storyboard>
                                    <ObjectAnimationUsingKeyFrames 
                    Storyboard.TargetProperty="(UIElement.Visibility)" 
                    Storyboard.TargetName="rect">
                                        <DiscreteObjectKeyFrame KeyTime="0">
                                            <DiscreteObjectKeyFrame.Value>
                                                <Visibility>Visible</Visibility>
                                            </DiscreteObjectKeyFrame.Value>
                                        </DiscreteObjectKeyFrame>
                                    </ObjectAnimationUsingKeyFrames>

                                </Storyboard>

                            </VisualState>
                        </VisualStateGroup>
                        <VisualStateGroup x:Name="FocusStates"/>
                    </VisualStateManager.VisualStateGroups>
                    <StackPanel Orientation="Vertical">
                        <TextBlock x:Name="txt" 
                Text="{TemplateBinding Content}" 
                HorizontalAlignment="Center" 
                                    FontFamily="Segoe UI" FontSize="18" FontWeight="Thin"/>
                        <Rectangle x:Name="rect" Fill="White" Height="2" Visibility="Collapsed"
                            VerticalAlignment="Top" HorizontalAlignment="Stretch"/>
                    </StackPanel>
                </Grid>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>