8

如何在 XAML 中的 Windows 应用商店应用中创建格式正确的超链接？我尝试创建一个内联超链接并希望使用静态资源对其进行样式设置：

          <RichTextBlock Style="{StaticResource PageHeaderTextStyle}" Grid.ColumnSpan="2">
            <Paragraph>
                <Run>"A sentence with inline text "</Run>
                <InlineUIContainer>
                    <HyperlinkButton Background="Yellow">
                        my link
                    </HyperlinkButton>
                </InlineUIContainer>
                <Run>... some more text</Run>
            </Paragraph>
        </RichTextBlock>

我得到以下超链接与句子的其余部分不一致的地方：

在此处输入图像描述

4

3 回答 3

8

好吧，我试过这个无济于事：

<RichTextBlock FontSize="20">
    <Paragraph Foreground="White" FontFamily="Segoe UI Light">
        <Run>Now is the time for</Run>
        <InlineUIContainer>
            <HyperlinkButton Content="all good men">
                <HyperlinkButton.Template>
                    <ControlTemplate>
                        <TextBlock Margin="5,0,5,0"  FontSize="20" FontFamily="Segoe UI Light"
                                    Text="{Binding Content, Mode=OneWay, RelativeSource={RelativeSource Mode=TemplatedParent}}" />
                    </ControlTemplate>
                </HyperlinkButton.Template>
            </HyperlinkButton>
        </InlineUIContainer>
        <Run>to come to the aid of their country</Run>
    </Paragraph>
</RichTextBlock>

然后我尝试了这个：

<RichTextBlock FontSize="20">
    <Paragraph Foreground="White" FontFamily="Segoe UI Light">
        <Run>Now is the time for</Run>
        <InlineUIContainer>
            <TextBlock Margin="5,0,5,0" Tapped="TextBlock_Tapped_1">
                <Underline><Run Text="all good men" /></Underline>
            </TextBlock>
        </InlineUIContainer>
        <Run>to come to the aid of their country</Run>
    </Paragraph>
</RichTextBlock>

这就像一个魅力！

在此处输入图像描述

我并不是假装实现您自己的超链接按钮并不需要更多的工作，而是这样想——您将 100% 控制它的布局！而且它很容易继承它周围的字体样式！

说得通？

于 2012-10-05T23:20:10.513 回答
7

对于未来的读者来说，Windows 8.1 简化了这个任务，Windows 8.1 将Hyperlink元素添加到 Windows.UI.Xaml.Documents 命名空间中的 XAML 文本对象模型中，所以现在我们可以像这样简单地使用它：

<RichTextBlock>
  <Paragraph FontSize="22">Please click on this <Hyperlink NavigateUri="http://www.link.com">link</Hyperlink>, thanks !</Paragraph>
</RichTextBlock>

它看起来像这样：

在此处输入图像描述

于 2014-01-13T16:08:46.763 回答
1

我也尝试解决此问题并提出以下建议：

<RichTextBlock HorizontalAlignment="Left" VerticalAlignment="Top">
<Paragraph xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" FontSize="12" FontFamily="Calibri" >
    <Run FontFamily="Calibri" FontSize="24">A sentence with inline text</Run>
    <InlineUIContainer>
        <HyperlinkButton FontSize="24" Background="Gray" Foreground="Blue" Template="{StaticResource HyperlinkButtonControlTemplate1}" BorderThickness="0" RenderTransformOrigin="0.5,0.5" Padding="0" FontFamily="Calibri">
            the link with g
        </HyperlinkButton>
    </InlineUIContainer>
    <Run FontFamily="Calibri" FontSize="24">and some more text</Run>
</Paragraph>

和模板如下：

<ControlTemplate x:Key="HyperlinkButtonControlTemplate1" TargetType="HyperlinkButton">
        <Grid>
            <VisualStateManager.VisualStateGroups>
                <VisualStateGroup x:Name="CommonStates">
                    <VisualState x:Name="Normal" />
                    <VisualState x:Name="PointerOver">
                        <Storyboard>
                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter"
                                Storyboard.TargetProperty="Foreground">
                                <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource HyperlinkPointerOverForegroundThemeBrush}" />
                            </ObjectAnimationUsingKeyFrames>
                        </Storyboard>
                    </VisualState>
                    <VisualState x:Name="Pressed">
                        <Storyboard>
                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter"
                                Storyboard.TargetProperty="Foreground">
                                <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource HyperlinkPressedForegroundThemeBrush}" />
                            </ObjectAnimationUsingKeyFrames>
                        </Storyboard>
                    </VisualState>
                    <VisualState x:Name="Disabled">
                        <Storyboard>
                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter"
                                Storyboard.TargetProperty="Foreground">
                                <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource HyperlinkDisabledThemeBrush}" />
                            </ObjectAnimationUsingKeyFrames>
                        </Storyboard>
                    </VisualState>
                </VisualStateGroup>
                <VisualStateGroup x:Name="FocusStates">
                    <VisualState x:Name="Focused">
                        <Storyboard>
                            <DoubleAnimation Storyboard.TargetName="FocusVisualWhite"
                                Storyboard.TargetProperty="Opacity"
                                To="1"
                                Duration="0" />
                            <DoubleAnimation Storyboard.TargetName="FocusVisualBlack"
                                Storyboard.TargetProperty="Opacity"
                                To="1"
                                Duration="0" />
                        </Storyboard>
                    </VisualState>
                    <VisualState x:Name="Unfocused" />
                    <VisualState x:Name="PointerFocused" />
                </VisualStateGroup>
            </VisualStateManager.VisualStateGroups>

            <ContentPresenter x:Name="ContentPresenter"
                    Content="{TemplateBinding Content}"
                    ContentTransitions="{TemplateBinding ContentTransitions}"
                    ContentTemplate="{TemplateBinding ContentTemplate}" 
                    RenderTransformOrigin="0.5,0.5" 
                    Margin="1,0" 
                    HorizontalAlignment="Center" 
                    VerticalAlignment="Bottom" >
                <ContentPresenter.RenderTransform>
                    <CompositeTransform TranslateY="8"/>
                </ContentPresenter.RenderTransform>
            </ContentPresenter>

            <Rectangle x:Name="FocusVisualWhite"
                IsHitTestVisible="False"
                Stroke="{StaticResource FocusVisualWhiteStrokeThemeBrush}"
                StrokeEndLineCap="Square"
                StrokeDashArray="1,1"
                Opacity="0"
                StrokeDashOffset="1.5" />
            <Rectangle x:Name="FocusVisualBlack"
                IsHitTestVisible="False"
                Stroke="{StaticResource FocusVisualBlackStrokeThemeBrush}"
                StrokeEndLineCap="Square"
                StrokeDashArray="1,1"
                Opacity="0"
                StrokeDashOffset="0.5" />
        </Grid>
    </ControlTemplate>

唯一需要注意的是，<CompositeTransform TranslateY="8"/>必须将其设置为字体大小的 1/3，在本例中为 8，因为字体大小为 24。并不理想，但它确实会产生所需的输出。

更新：或使用以下内容，这是从查看社交媒体 Windows 8 仪表板示例得出的， 网址为http://code.msdn.microsoft.com/wpapps/Social-Media-Dashboard-135436da

<Paragraph xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" FontSize="12" FontFamily="Calibri" >
<Run FontFamily="Calibri" FontSize="16">A sentence with inline text</Run>
<Span>
<InlineUIContainer>
        <HyperlinkButton FontSize="16" BorderThickness="0" Margin ="-10,-13" Foreground="Blue" FontFamily="Calibri">
        the link with g
    </HyperlinkButton>
</InlineUIContainer>
</Span>
<Run FontFamily="Calibri" FontSize="16">and some more text</Run>

于 2013-08-16T11:34:22.287 回答