How to make interactable or click-able in WPF UI

Question

This is my first day to design UI using WPF. I have looked up MSDN official document of Flow Document and found that I can place an UI control inside a RichTextBox. I did put a button in but found it's not interactable - I cannot click on it as it's grey. And I also tried other controls and they all displayed fine but just don't support interaction. Even a hyperlink doesn't work.

I have searched over internet, the closest question ever asked is about how to make an inside hyperlink click-able: The similar question: C# WPF Text with links

I did the same thing but it didn't work! All component displayed well but just are not able to be clicked.

Here is my XAML code:

        <RichTextBox Grid.Row="1" Margin="14.007,31.067,22.011,46.305" Name="rtxtRslt" BorderBrush="White" >
        <FlowDocument>
            <Section FontSize="15">
                <Paragraph>
                    <Bold>Click on this:</Bold>
                    <Italic><Hyperlink  NavigateUri="http://stackoverflow.com">http://www.jxitc.info</Hyperlink></Italic>

                </Paragraph>

                <BlockUIContainer>
                    <Button Click="Button_Click">Also Click On This</Button>
                </BlockUIContainer>
            </Section>
        </FlowDocument>
    </RichTextBox>

Can anyone give me some suggestion: 1. is it possible to make it click-able 2. if yes, if I forgot to set any/what attribution of the RichTextBox control?

Answer 1

First off your direct question: how to make the content of the RichTextBox "active". Set the IsDocumentEnabled property to True on the RichTextBox like shown here:

   <RichTextBox Grid.Row="1" Margin="14.007,31.067,22.011,46.305" Name="rtxtRslt" BorderBrush="White" 
                    IsDocumentEnabled="True">
        <FlowDocument>
            <Section FontSize="15">
                <Paragraph>
                    <Bold>Click on this:</Bold>
                    <Italic>
                        <Hyperlink  NavigateUri="http://stackoverflow.com">http://www.jxitc.info</Hyperlink>
                    </Italic>

                </Paragraph>

                <BlockUIContainer>
                    <Button Click="Button_Click" >Also Click On This</Button>
                </BlockUIContainer>
            </Section>
        </FlowDocument>
    </RichTextBox>

Now to the unspoken question: do you have to be in a RichTextBox at all? The fact that there is a special property on the RichTextBox to make embedded UI elements active kinda indicates that is not the normal usage for this control. It is meant to host editable FlowDocument content. So the user of the RichTextBox would typically be creating the document that hosts the button that a consumer of the document could click, if that helps make the distinction clear I don't know. However, all that being said, your FlowDocument hosted instead in a simple FlowDocumentPageViewer is active by default.

 <FlowDocumentPageViewer>
        <FlowDocument>
            <Section FontSize="15">
                <Paragraph>
                    <Bold>Click on this:</Bold>
                    <Italic>
                        <Hyperlink NavigateUri="http://stackoverflow.com">http://www.jxitc.info</Hyperlink>
                    </Italic>

                </Paragraph>

                <BlockUIContainer>
                    <Button Click="Button_Click" >Also Click On This</Button>
                </BlockUIContainer>
            </Section>
        </FlowDocument>

    </FlowDocumentPageViewer>

Now to the other unspoken question (unspeakable?) do you have to be in FlowDocument content at all? FlowDocument content is similar to, but not derived from UIElement. As such, many of the out-of-the-box features of UIElements are not available. If you need document functionality in the UI FlowDocuments can provide a great start but bring with them a pretty big learning curve in their own right.

The title of your question, if taken literally, makes me think you might just want a WPF UI that allows you to embed Buttons and Hyperlinks and have them work (gasp). That is certainly the default behavior. If you do not need the document look and feel that FlowDocument provides nor the real time document editing that RichTextBox provides you might consider a more "traditional" WPF layout.

 <StackPanel Orientation="Vertical" HorizontalAlignment="Stretch"
                Margin="20">
        <TextBlock>
                    <Bold>Click on this:</Bold>
                    <Italic>
                        <Hyperlink NavigateUri="http://stackoverflow.com">http://www.jxitc.info</Hyperlink>
                    </Italic>
        </TextBlock>
        <Button Click="Button_Click" 
                Margin="0,20,0,0">Also Click On This</Button>
    </StackPanel>