2012-10-04 52 views
8

如何在Windows应用商店应用中使用XAML创建格式正确的超链接?我试图创建一个内嵌的超链接,并想用一个静态资源的风格吧:windows 8 xaml内联超链接

  <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> 

我得到以下其中的超级链接不与句子的其他部分对齐:

enter image description here

回答

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> 

这就像一个魅力!

enter image description here

我不是假装它是实现自己的超级链接按钮,但认为它是这样的不是一点点更多的工作 - 你将有100%的控制它的布局!它会很容易从它周围的字体样式继承!

有意义吗?

+0

肯定。我喜欢这个范例。谢谢。顺便说一句,run标签是做什么的? – prostock

+0

运行标签允许您在文本块内执行绑定。它还允许您通过在单个文本块中进行多次运行来执行多个绑定。谷歌可以告诉你更多。 –

+0

我发现点击文本块导致我的事件处理程序被调用两次。我读了一篇关于这个问题的文章:http://stackoverflow.com/questions/3438806/textbox-textchanged-event-firing-twice-on-windows-phone-7-emulator – prostock

0

我试图解决这个问题,以及与以下想出了:

<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> 

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> 

,它看起来像这样:

enter image description here

+0

那么改变这种超链接的默认访问/未访问的颜色? – Sevenate

+0

超链接从TextElement继承,所以你尝试更改Foreground属性? –