locked
Example of an InlineUIContainer or otherwise hosting an image inside a TextBlock? RRS feed

  • Question

  • Folks,

    I am trying to host an image (loaded via an external url) inside a text block.  I've written the following code, but I am getting an ArgumentException ("Value does not fall within the expected range.") at the --> marked line:

     

                        String code = (e.NewValue as string) ?? String.Empty;
                        var inlines = bb.InnerTextBlock.Inlines;
                        inlines.Clear();
                        inlines.Add(new Run { FontWeight = FontWeights.Bold, Text = "Bold stuff..." });
                        Image image = new Image();
                        //image.SetBinding(Image.SourceProperty, new Binding() { Source = pictureUrl });
    -->                    inlines.Add(new InlineUIContainer { Child = image });
    
                        inlines.Add(new Run { Text = code });
    
    

    Any suggestions would be most helpful!

     

    Thanks!

    --randy

     

    Sunday, September 25, 2011 8:57 PM

Answers

  • The first problem is that the TextBlock content model does not support InlineUIContainers. You need to use a RichTextBlock to do this. The second issue you may run into is sizing the InlineUIContainer. If I remeber correctly I've had to set the size of the InlineUIContainer in the loaded handler of the image that you're downloading.
    Tuesday, September 27, 2011 3:31 PM

All replies

  • The first problem is that the TextBlock content model does not support InlineUIContainers. You need to use a RichTextBlock to do this. The second issue you may run into is sizing the InlineUIContainer. If I remeber correctly I've had to set the size of the InlineUIContainer in the loaded handler of the image that you're downloading.
    Tuesday, September 27, 2011 3:31 PM
  •  

    Thanks, that really helps!  I can now put a button in the RichTextBox reliably.  However, an internet-loaded image is causing me more grief.  I can generally get it to show the first time during any given execution (although not always), but *never* on the second or subsequent times during that execution.  The following code adds a new paragraph with both the Image and a Button each time the Add Text button is pressed.  You can easily see the problem.

    CODE:

        partial class MainPage
        {
            private const string pictureUrl = "http://i.microsoft.com/global/en-us/homepage/PublishingImages/sprites/microsoft_gray.png";

            public MainPage()
            {
                InitializeComponent();
            }

            private void AddText_Click(object sender, RoutedEventArgs e)
            {
                String code = "...code...";
                var blocks = Text.Blocks;
                Paragraph p = new Paragraph();
                blocks.Add(p);

                var inlines = p.Inlines;
                inlines.Clear();
                inlines.Add(new Run { FontWeight = FontWeights.Bold, Text = "Bold stuff..." });
                BitmapImage bi = new BitmapImage { UriSource = new Uri(pictureUrl), CreateOptions = BitmapCreateOptions.None };
                InlineUIContainer iuic = new InlineUIContainer { Child = new Image { Source = bi, Width = bi.PixelWidth, Height = bi.PixelHeight } };
                inlines.Add(iuic);
                bi.ImageOpened += (imageSender, imageE) =>
                {
                    iuic.Child = new Image { Source = bi, Width = bi.PixelWidth, Height = bi.PixelHeight };
                };
                // inlines.Add(new InlineUIContainer { Child = new Button { Content = "Hello, world." } });
                inlines.Add(new Run { Text = code });
                inlines.Add(new Run { FontStyle = FontStyles.Italic, Text = "Italic stuff..." });
            }
        } 

    XAML:

    <UserControl x:Class="ForumsForTabletsWindows8.MainPage"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        mc:Ignorable="d"
        d:DesignHeight="768" d:DesignWidth="1366">
       
        <Grid x:Name="LayoutRoot" Background="#FF0C0C0C">
            <Grid.RowDefinitions>
                <RowDefinition/>
                <RowDefinition Height="Auto"/>
            </Grid.RowDefinitions>

            <StackPanel Orientation="Vertical" Grid.Row="0">
                <StackPanel Orientation="Horizontal">
                    <Button Name="AddText" Content="Set Text" Margin="6,0,0,0" Click="AddText_Click" />
                </StackPanel>
                <RichTextBlock Name="Text">
                    <Paragraph>Hello, world!</Paragraph>
                </RichTextBlock>
            </StackPanel>
            <TextBlock Name="Message" FontStyle="Oblique" Grid.Row="1" Margin="5" />
        </Grid>
    </UserControl>

     Thanks for any help!

    --randy

     

    Friday, December 9, 2011 3:31 PM
  • Have you gotten past this problem? You probably need to register an event handler for BitmapImage.ImageOpened event and set the size of the InlineUIContainer from there.
    Wednesday, March 21, 2012 1:40 AM
  • Is there a Xamly way to set InlineUIContainer <> size to content?

    Shimmy

    Wednesday, March 21, 2012 3:51 AM