2012-10-04 3 views
8

Come si creano collegamenti ipertestuali correttamente formattati nelle app di Windows Store in XAML? Ho cercato di creare un collegamento ipertestuale in linea e voglia di disegnarlo con uno StaticResource:windows 8 collegamento ipertestuale in linea 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> 

ricevo il seguente in cui il collegamento ipertestuale non è allineato con il resto della frase:

enter image description here

risposta

8

Beh, ho provato questo senza alcun risultato:

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

E così poi ho provato questo:

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

Questo funziona come un fascino!

enter image description here

non sto facendo finta che non è un po 'più di lavoro per implementare il proprio pulsante di collegamento ipertestuale a meno di pensare in questo modo - si avrà il controllo al 100% sul suo layout! E erediterà facilmente dagli stili di carattere che lo circondano!

Ha senso?

+0

sì. mi piace questo paradigma. grazie. btw, cosa fa il tag run? – prostock

+0

Il tag di esecuzione consente di eseguire un'associazione all'interno di un blocco di testo. Consente inoltre di eseguire più di un binding eseguendo più di una corsa in un singolo blocco di testo. Google può dirti di più. –

+0

ho scoperto che toccare il blocco di testo causa la chiamata al mio gestore di eventi due volte. ho letto un post riguardante questo problema: http: //stackoverflow.com/questions/3438806/textbox-textchanged-event-firing-twice-on-windows-phone-7-emulator – prostock

0

ho cercato di risolvere questo come bene e si avvicinò con la seguente:

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

e il modello come segue:

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

L'unica avvertenza è che il <CompositeTransform TranslateY="8"/> mosto essere impostato su 1/3 della dimensione del font, in questo caso 8 poiché la dimensione del font è 24. Non ideale, ma produce l'output desiderato.

Aggiornamento: o utilizzare il seguente, questo è stato derivato dalla guardando il Social Media di Windows 8 Dashboard campione a 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

Per i lettori futuri solo aggiungere che le finestre 8.1 semplificano questo attività, Windows 8.1 aggiunge l'elemento Hyperlink al modello di oggetto testo XAML nello spazio dei nomi Windows.UI.Xaml.Documents, quindi ora possiamo semplicemente utilizzarlo in questo modo:

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

e sembra in questo modo:

enter image description here

+0

E come cambiare i colori visitati/non visitati di default per tale collegamento ipertestuale? – Sevenate

+0

Il collegamento ipertestuale eredita da TextElement, quindi hai provato a cambiare la proprietà in primo piano? –