hipervínculo de Windows 8 xaml en línea

Question

¿Cómo creo hipervínculos formateados correctamente en las aplicaciones de la Tienda de Windows en XAML? He intentado crear un hipervínculo en línea y quiere diseñarlo con un StaticResource:

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

me sale el siguiente, donde el hipervínculo no está alineado con el resto de la frase:

Answer 1

Bueno, he intentado esto en vano:

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

Y entonces he intentado esto:

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

Esto funciona como un encanto!

no pretendo que no es un poco más de trabajo para implementar su propio botón de hipervínculo, pero creo que de esta manera - que tendrá el control del 100% con respecto a su diseño! ¡Y heredará fácilmente de los estilos de fuente que lo rodean!

¿Tiene sentido?

Answer 2

Me trataron de resolver este también y se le ocurrió la siguiente:

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

y la plantilla de la siguiente manera:

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

La única salvedad es que el <CompositeTransform TranslateY="8"/> obligada establecerse en 1/3 del tamaño de la fuente, en este caso 8, ya que el tamaño de la fuente es 24. No es ideal, pero produce el resultado deseado.

Actualización: o utilizar el siguiente, esto se derivó de mirar la Muestra 8 del tablero de instrumentos Medios de Comunicación Social de Windows en 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> 

Answer 3

Para los futuros lectores sólo para añadir que las ventanas 8.1 simplifican este tarea, Windows 8.1 agrega el elemento Hyperlink al modelo de objetos de texto XAML en el espacio de nombres Windows.UI.Xaml.Documents, por lo que ahora podemos simplemente usarlo así:

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

y se ve así: