locked
How to make image automatically go to the next column if not enough room?

    Question

  • I'm using c++ xaml template "Item Detail Page".  I can edit texts and everything.  But I'm having trouble with images.

    Every I insert an image, instead of jumping to the next column to display its full size, it would shrink and take up the rest of the current column.  If I set the property width or height to the full size, it will display on the same column but part of the image would be off screen.

    What part of image property can I set so it will automatically jump to the next column if there isn't enough room on the current column?  Here's my image code right now.

    <Paragraph LineStackingStrategy="BaselineToBaseline">
                                            <InlineUIContainer>
                                                <Image MaxWidth="400" Margin="0,20,0,10" Stretch="Uniform" Source="Assets/sibaseunits.gif"/>
                                            </InlineUIContainer>
                                        </Paragraph>

    Tuesday, June 18, 2013 3:37 PM

Answers


  • Try this:  Add a <Linebreak/> just before the InlineContainer in the parent paragraph.  The image flow seems to work better for me.

     <Paragraph LineStackingStrategy="MaxHeight">
    	<LineBreak/>
    	<InlineUIContainer>
    		<Image MaxHeight="480" Margin="0,20,0,10" Stretch="Uniform"  Source="Assets/cat2.jpeg"/>
    	 </InlineUIContainer>
    </Paragraph>






    Sunday, June 23, 2013 3:20 AM

All replies

  • Where are you trying to insert an image and what do you mean by next column?

    --Rob

    Wednesday, June 19, 2013 12:09 AM
    Owner
  • I'm sorry for being unclear before.

    In the Item Detail Page template, all you have to do is insert texts, images, etc. and they will go into the columns.  Look at this picture to get an idea.

    When I insert an image, the columns do not always render the images and texts the same way on every device, since the resolutions are different.  If the image ends up toward the bottom of a column, it will shrink to really tiny.  If I change the property of the image to a set width or height, then the image will simply go right off the page, as it most of the image is not visible on the screen.

    I know in html when an image is bigger than the remaining space in the current column, the image will automatically jump to the next column in order to display its full size.

    I'm asking which part of property of the image in xaml can I set so that this behavior will occur?

    I hope that was clear enough.

    Wednesday, June 19, 2013 10:01 PM
  • Do I not have a champion?

    Thursday, June 20, 2013 3:17 PM

  • Try this:  Add a <Linebreak/> just before the InlineContainer in the parent paragraph.  The image flow seems to work better for me.

     <Paragraph LineStackingStrategy="MaxHeight">
    	<LineBreak/>
    	<InlineUIContainer>
    		<Image MaxHeight="480" Margin="0,20,0,10" Stretch="Uniform"  Source="Assets/cat2.jpeg"/>
    	 </InlineUIContainer>
    </Paragraph>






    Sunday, June 23, 2013 3:20 AM