locked
RichTextBlock Navigation and Table Of Contents

    Question

  • Hi - I'm dynamically populating large amounts of text into a RichTextBlock (VB.NET) and have been trying to see if there's any way of adding internal anchor links to create a table of contents for ease of navigation.

    Firstly, is this the best control for displaying / navigating large amounts of text and if so, what's the best way of setting up internal anchor links and allowing for search & highlight within text?

    Thanks, Michael

    Wednesday, March 26, 2014 1:42 PM

Answers

  • Hi,

    There are two method you can refer to:

    Add HyperlinkButton in RichTextblock InlineUIContainer and edit the HyperlinkButton style:

     <Page.Resources>
            <Style x:Key="NoMarginHyperlinkButtonStyle" TargetType="HyperlinkButton">
                <Setter Property="Foreground" Value="{StaticResource HyperlinkForegroundThemeBrush}"/>
                <Setter Property="Background" Value="{StaticResource HyperlinkButtonBackgroundThemeBrush}"/>
                <Setter Property="BorderBrush" Value="{StaticResource HyperlinkButtonBorderThemeBrush}"/>
                <Setter Property="BorderThickness" Value="0"/>
                <Setter Property="Padding" Value="0"/>
                <Setter Property="Margin" Value="0,0,0,-4"/>
                <Setter Property="HorizontalAlignment" Value="Left"/>
                <Setter Property="VerticalAlignment" Value="Center"/>
                <Setter Property="FontFamily" Value="{StaticResource ContentControlThemeFontFamily}"/>
                <Setter Property="FontWeight" Value="SemiBold"/>
                <Setter Property="FontSize" Value="{StaticResource ControlContentThemeFontSize}"/>
                <Setter Property="Template">
                    <Setter.Value>
                        <ControlTemplate TargetType="HyperlinkButton">
                            <Grid>
                                <VisualStateManager.VisualStateGroups>
                                    <VisualStateGroup x:Name="CommonStates">
                                        <VisualState x:Name="Normal"/>
                                        <VisualState x:Name="PointerOver">
                                            <Storyboard>
                                                <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="ContentPresenter">
                                                    <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource HyperlinkPointerOverForegroundThemeBrush}"/>
                                                </ObjectAnimationUsingKeyFrames>
                                            </Storyboard>
                                        </VisualState>
                                        <VisualState x:Name="Pressed">
                                            <Storyboard>
                                                <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="ContentPresenter">
                                                    <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource HyperlinkPressedForegroundThemeBrush}"/>
                                                </ObjectAnimationUsingKeyFrames>
                                            </Storyboard>
                                        </VisualState>
                                        <VisualState x:Name="Disabled">
                                            <Storyboard>
                                                <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="ContentPresenter">
                                                    <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource HyperlinkDisabledThemeBrush}"/>
                                                </ObjectAnimationUsingKeyFrames>
                                            </Storyboard>
                                        </VisualState>
                                    </VisualStateGroup>
                                    <VisualStateGroup x:Name="FocusStates">
                                        <VisualState x:Name="Focused">
                                            <Storyboard>
                                                <DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="FocusVisualWhite"/>
                                                <DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="FocusVisualBlack"/>
                                            </Storyboard>
                                        </VisualState>
                                        <VisualState x:Name="Unfocused"/>
                                        <VisualState x:Name="PointerFocused"/>
                                    </VisualStateGroup>
                                </VisualStateManager.VisualStateGroups>
                                <Border x:Name="Border" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}">
                                    <ContentPresenter x:Name="ContentPresenter" ContentTemplate="{TemplateBinding ContentTemplate}" ContentTransitions="{TemplateBinding ContentTransitions}" Content="{TemplateBinding Content}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
                                </Border>
                                <Rectangle x:Name="FocusVisualWhite" IsHitTestVisible="False" Opacity="0" StrokeDashOffset="1.5" StrokeEndLineCap="Square" Stroke="{StaticResource FocusVisualWhiteStrokeThemeBrush}" StrokeDashArray="1,1"/>
                                <Rectangle x:Name="FocusVisualBlack" IsHitTestVisible="False" Opacity="0" StrokeDashOffset="0.5" StrokeEndLineCap="Square" Stroke="{StaticResource FocusVisualBlackStrokeThemeBrush}" StrokeDashArray="1,1"/>
                            </Grid>
                        </ControlTemplate>
                    </Setter.Value>
                </Setter>
            </Style>
        </Page.Resources>
    
        <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
            <RichTextBlock VerticalAlignment="Center" HorizontalAlignment="Center" FontSize="14">
                <Paragraph>I just want this
                    <InlineUIContainer>
                        <HyperlinkButton Style="{StaticResource NoMarginHyperlinkButtonStyle}">Hyperlink</HyperlinkButton>
                    </InlineUIContainer>
                    to not look like crap
                </Paragraph>
            </RichTextBlock>
        </Grid>

    #Also you can try the codes below:

    <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>
    Best Wishes!


    We are trying to better understand customer views on social support experience, so your participation in this interview project would be greatly appreciated if you have time. Thanks for helping make community forums a great place.
    Click HERE to participate the survey. Thanks<br/> MSDN Community Support<br/> <br/> Please remember to &quot;Mark as Answer&quot; the responses that resolved your issue. It is a common way to recognize those who have helped you, and makes it easier for other visitors to find the resolution later.

    Thursday, March 27, 2014 2:17 AM