Floating UI Elements in a FlowDocument
Okay, so this time last year I was playing a bit with Avalon.. Now I'm writing up an architecture review of WPF and doing a couple of POCs. Read the book by Chris Sells and co. and Implemented some nice XAML with some controls floated in a TextFlow...
Unfortunately Chris and co wrote that the same time I was playing with Avalon and the FlowDocument is now it. Problem is that I can't seem to find a way to float the controls in it.
I did, finally manage to find a combination of Figure, FlowDocumentViewer (FlowDocumentScrollViewer seems to prevent the figure flowing) that would flow a paragraph, but when I stuck in a TextBlock or Button populated BlockUIContainer then all the flow went. Seems that unless I hardcoded the width of the contained UI Element then it would scale to the width of the FlowDocumentViewer. Same problem if I chuck in a layout container in there first.
Obviously I want to have the layout control it's own width based on what I put in it, but there I seem to be stuck and can't make it play nice. Any suggestions?
Cheers
Malc
The simplest of the attempts...
<FlowDocumentReader>
<FlowDocument>
<Section>
<Paragraph>
blah blah blah...
<Figure HorizontalAnchor="PageRight" VerticalAnchor="PageTop" WrapDirection="Left">
<BlockUIContainer>
<TextBlock>Blah</TextBlock>
</BlockUIContainer>
</Figure>
</Paragraph>
</Section>
</FlowDocument>
</FlowDocumentReader>
[1593 byte] By [
Malcy] at [2007-12-24]
A blockUIContainer will occupy the entire width and the better way to do it is using a paragraph within the Figure
<Figure HorizontalAnchor="PageRight" VerticalAnchor="PageTop" WrapDirection="Left" Background="red">
<Paragraph>
<TextBlock>Blah</TextBlock>
</Paragraph>
</Figure>
Seem to be suffering from oversimplification... yes, if all I was wanting to do was put "Blah!" in my text then yes the Paragraph is definately the way to go... however, I was wanting to put a reasonably complex UIElement tree floating in the top right with at least a couple of controls kicking about ni there... at which point I believe I need that BlockUIContainer again...
To give a more detailed example Id like to have:-
blah blah blah blah blah blah blah blah XXXXXXXXX
blah blah blah blah blah blah blah blah XXXXXXXXX
blah blah blah blah blah blah blah blah XXXXXXXXX
blah blah blah blah blah blah blah blah XXXXXXXXX
blah blah blah blah blah blah blah blah blah blah blah
blah blah blah blah blah blah blah blah blah blah blah
Where the XXXXX section has maybe a print button, an email button, a layour element with some related data graphed or something... etc.
Malc
Apologies for the typos and grammer... a little sleepy while typing... I think it is still comprehensible, but ping if I'm to sleepy even to see how bad it is...
Cheers
Malc
you could try using a nested figure.... the 'blah' being text in para and 'xxxxx' being the context in the nested figure..
Hmm... that was what I was attempting to do in my original post... and it wasn't floating... Okay, so to hopefully remove any doubt... what I am trying to do is use the following to populate the XXX section in my previous example:-
<FlowDocumentReader>
<FlowDocument>
<Section>
<Paragraph>
blah blah blah...
<Figure HorizontalAnchor="PageRight" VerticalAnchor="PageTop" WrapDirection="Left">
<BlockUIContainer>
<StackPanel Grid.Column="1" Orientation="Vertical">
<Border BorderBrush="Black" BorderThickness="1">
<StackPanel Orientation="Vertical">
<TextBlock TextAlignment="Left">Action</TextBlock>
<Separator/>
<Button HorizontalAlignment="Left" Margin="2,1,2,1">
<StackPanel Orientation="Horizontal">
<Image Source="images\print.gif"/>
<TextBlock Padding="0,0,4,0">Print Article</TextBlock>
</StackPanel>
</Button>
<Button HorizontalAlignment="Left" Margin="2,1,2,1">
<StackPanel Orientation="Horizontal">
<Image Source="images\email.gif"/>
<TextBlock>Email Article</TextBlock>
</StackPanel>
</Button>
</StackPanel>
</Border>
<Border BorderBrush="Black" BorderThickness="1" Margin="0,10,0,10">
<StackPanel Orientation="Vertical">
<TextBlock TextAlignment="Left">Related Topics</TextBlock>
<Separator/>
<ListBox/>
</StackPanel>
</Border>
<Border BorderBrush="Black" BorderThickness="1">
<StackPanel Orientation="Vertical">
<TextBlock TextAlignment="Left">Related Headlines</TextBlock>
<Separator/>
<ListBox/>
</StackPanel>
</Border>
</StackPanel>
</BlockUIContainer>
</Figure>
</Paragraph>
</Section>
</FlowDocument>
</FlowDocumentReader>
Thanks
Malc
P.S. responses are slow as the email notify doesn't seem to work on this forum (at least not for me)... I'll try and poll myself more often...
To make it explicit: The above example doesn't give me floating controls...
They appear at the point in the text where they are declared and fill the width... I am using June CTP (wanted the orcas stuff).
Malc
what u need is an inlineUIContainer - a block UIContainer by default is a block and it occupies the entire width.
<FlowDocumentReader xmlns='http://schemas.microsoft.com/winfx/2006/xaml/presentation' xmlns:x='http://schemas.microsoft.com/winfx/2006/xaml'>
<FlowDocument>
<Section>
<Paragraph>
blah blah blah...
<Figure HorizontalAnchor="PageRight" VerticalAnchor="PageTop" WrapDirection="Left">
<Paragraph>
<InlineUIContainer>
<StackPanel Grid.Column="1" Orientation="Vertical">
<Border BorderBrush="Black" BorderThickness="1">
<StackPanel Orientation="Vertical">
<TextBlock TextAlignment="Left">Action</TextBlock>
<Separator/>
<Button HorizontalAlignment="Left" Margin="2,1,2,1">
<StackPanel Orientation="Horizontal">
<Image Source="images\print.gif"/>
<TextBlock Padding="0,0,4,0">Print Article</TextBlock>
</StackPanel>
</Button>
<Button HorizontalAlignment="Left" Margin="2,1,2,1">
<StackPanel Orientation="Horizontal">
<Image Source="images\email.gif"/>
<TextBlock>Email Article</TextBlock>
</StackPanel>
</Button>
</StackPanel>
</Border>
<Border BorderBrush="Black" BorderThickness="1" Margin="0,10,0,10">
<StackPanel Orientation="Vertical">
<TextBlock TextAlignment="Left">Related Topics</TextBlock>
<Separator/>
<ListBox/>
</StackPanel>
</Border>
<Border BorderBrush="Black" BorderThickness="1">
<StackPanel Orientation="Vertical">
<TextBlock TextAlignment="Left">Related Headlines</TextBlock>
<Separator/>
<ListBox/>
</StackPanel>
</Border>
</StackPanel>
</InlineUIContainer>
</Paragraph>
</Figure>
</Paragraph>
</Section>
</FlowDocument>
</FlowDocumentReader>
Yep that was indeed exactly what I needed... thanks for that. All working as expected now... now to post the next problem... :-p
Malc
