locked
Inline HyperlinkButton

    Question

  • I have a paragraph of text in my XAML file along with a couple HyperlinkButtons interspersed throughout. My problem is the links always display on a newline instead of inline as I'd like. Is there any way to make a hyperlink display inline, or achieve a similar effect?


    • Edited by inspira Monday, July 2, 2012 9:49 PM
    Monday, July 2, 2012 9:48 PM

Answers

  • The screenshot you show is what I would expect. Since the hyperlink button is a single object that takes up the width of your RichTextBlock it can't wrap. If you used a wider RichTextBlock (or a narrower hyperlink) then it would fall inline. As I mentioned in my previous post, you would need to re-style the hyperlink if you want it to match the text rather than looking like a button.

    I think the primary thing that is confusing you is that you are trying to use alternate controls (such as TextBlock) inside of the RichTextBlock instead of using the document types (other than the HyperlinkButton, which is not represented as a document type). I'd recommend using <Run> rather than inline TextBlocks:

                    <RichTextBlock>
                        <Paragraph>
                            <Run>"fdsafsda dsaf dsasd fsad fsafdsa "</Run>
                            <InlineUIContainer>
                                <HyperlinkButton Background="DarkGreen">
                                    HYPERLINK HERE FDSAKFDSfdsaf dsafd s fafdfds AJF
                                </HyperlinkButton>
                            </InlineUIContainer>
                            <Run>fdsafdsa dsaf dsasdafd safsda fdsafdsa</Run>
                        </Paragraph>
                    </RichTextBlock>

    Take a look at the Xaml text display sample for an example of how to use the RichTextBlock, although it doesn't cover your exact scenario (it mostly covers more advanced uses, but leaves the basic text as raw text).

    You may also find it easier to use a RichEditBox which directly supports linked text. You won't have to deal with styling the hyperlink that way. The RichEditBox can be used for non-editable text.

    --Rob

     

    • Proposed as answer by Jesse Jiang Tuesday, July 17, 2012 9:06 AM
    • Marked as answer by inspira Wednesday, August 1, 2012 2:14 AM
    Wednesday, July 11, 2012 11:33 PM
    Owner

All replies

  • Hi,

    I'm not very clear your point, would you please upload a picture to show the effect you want to achieve?

    Best regards,
    Jesse


    Jesse Jiang [MSFT]
    MSDN Community Support | Feedback to us

    Tuesday, July 3, 2012 8:50 AM
  • I want to achieve something like this, where the black text are several <TextBlock>, and the red text are all <HyperlinkButton>:

    http://imgur.com/RbSH0


    Instead, I'm seeing this kind of effect:

    http://imgur.com/DqXiG

    • Edited by inspira Tuesday, July 3, 2012 6:43 PM
    Tuesday, July 3, 2012 6:11 PM
  • Sorry we cannot see the image, you can upload the image through forum editor.

     

    Best regards,

    Jesse



    Jesse Jiang [MSFT]
    MSDN Community Support | Feedback to us

    Wednesday, July 4, 2012 6:46 AM
  • Desired effect:

    Actual effect:

    Where the black text are regular <TextBlock> and the red text are <HyperlinkButton>. If there is any way to achieve inline links in XAML I would love to know what it is.

    • Edited by inspira Thursday, July 5, 2012 5:59 PM
    Thursday, July 5, 2012 5:58 PM
  • Are there any updates on this?
    Tuesday, July 10, 2012 10:43 PM
  • There are several ways to do this, depending on what specifically your needs are.

    You can set the HyperlinkButton in an InlineUIContainer inside a RichTextBlock. You will need to style your HyperlinkButton to fit inline as text, but that should be straightforward. 

                <RichTextBlock>
                    <Paragraph>
                        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent vel
                        <InlineUIContainer><HyperlinkButton>fermentum</HyperlinkButton></InlineUIContainer>
                        dui. Sed luctus erat id arcu posuere auctor tempor 
                        <InlineUIContainer><HyperlinkButton>lorem imperdiet</HyperlinkButton></InlineUIContainer>.
                        In quis erat eget sapien rhoncus rutrum.
                    </Paragraph>
                </RichTextBlock>

    Another possibility would be to display your paragraph in a RichEditBox and set the links within that.

    --Rob


    Tuesday, July 10, 2012 11:54 PM
    Owner
  • Thanks for the suggestion, I'm only displaying read-only text, so a RichTextBlock is a better fit. However, I can't use raw text because my text is stored in a StaticResource elsewhere. If I try the above approach I get the following error:

        Cannot add 'TextBlock' into the collection property 'Inlines', type must be 'Inline'

    What is the correct way to do this?

    Wednesday, July 11, 2012 6:50 PM
  • As the error suggests, you need to insert an Inline object. If you want an arbitrary UIElement such as a TextBlock (or a HyperlinkButton) you can put it in an InlineUIContainer. If you want plain text you can use a Run.

    You can find all of the options in the Documents namespace.

    --Rob

    Wednesday, July 11, 2012 7:02 PM
    Owner
  • Using InlineUIContainer does not work, and I see the following:

    With the following code:

    <RichTextBlock TextWrapping="Wrap">
      <Paragraph>
        <InlineUIContainer>
          <TextBlock Text="fdsafsda dsaf dsasd fsad fsafdsa " TextWrapping="Wrap"/>
        </InlineUIContainer>
        <InlineUIContainer>
          <HyperlinkButton Background="DarkGreen">
            <TextBlock Text="HYPERLINK HERE FDSAKFDSfdsaf dsafd s fafdfds AJF" TextWrapping="Wrap"/>
          </HyperlinkButton>
        </InlineUIContainer>
        fdsafdsa dsaf dsasdafd safsda fdsafdsa
      </Paragraph>
    </RichTextBlock>

    The Documents namespace is a useful reference, but after poking around and trying spans and other tags, I am no closer to achieving my goal. The Inline objects at that reference page are either all abstract with no listing of child classes I can use, or do something I don't need (i.e. bold, underline)

    I have yet to find any kind of tutorial or example on what should be a trivial task. If anyone can show me the correct syntax I would be greatly appreciative.


    • Edited by inspira Wednesday, July 11, 2012 11:26 PM
    Wednesday, July 11, 2012 11:14 PM
  • The screenshot you show is what I would expect. Since the hyperlink button is a single object that takes up the width of your RichTextBlock it can't wrap. If you used a wider RichTextBlock (or a narrower hyperlink) then it would fall inline. As I mentioned in my previous post, you would need to re-style the hyperlink if you want it to match the text rather than looking like a button.

    I think the primary thing that is confusing you is that you are trying to use alternate controls (such as TextBlock) inside of the RichTextBlock instead of using the document types (other than the HyperlinkButton, which is not represented as a document type). I'd recommend using <Run> rather than inline TextBlocks:

                    <RichTextBlock>
                        <Paragraph>
                            <Run>"fdsafsda dsaf dsasd fsad fsafdsa "</Run>
                            <InlineUIContainer>
                                <HyperlinkButton Background="DarkGreen">
                                    HYPERLINK HERE FDSAKFDSfdsaf dsafd s fafdfds AJF
                                </HyperlinkButton>
                            </InlineUIContainer>
                            <Run>fdsafdsa dsaf dsasdafd safsda fdsafdsa</Run>
                        </Paragraph>
                    </RichTextBlock>

    Take a look at the Xaml text display sample for an example of how to use the RichTextBlock, although it doesn't cover your exact scenario (it mostly covers more advanced uses, but leaves the basic text as raw text).

    You may also find it easier to use a RichEditBox which directly supports linked text. You won't have to deal with styling the hyperlink that way. The RichEditBox can be used for non-editable text.

    --Rob

     

    • Proposed as answer by Jesse Jiang Tuesday, July 17, 2012 9:06 AM
    • Marked as answer by inspira Wednesday, August 1, 2012 2:14 AM
    Wednesday, July 11, 2012 11:33 PM
    Owner