The Media Center Sandbox

I'd like to show an image in a fixed size panel and have the image shrink to fit so that it's aspect ratio is retained.

I've tried all sorts of layout combinations without success. Does anyone have an example layout that does this?

Thanks.
Glenn.

GlennM:

I'd like to show an image in a fixed size panel and have the image shrink to fit so that it's aspect ratio is retained.

I've tried all sorts of layout combinations without success. Does anyone have an example layout that does this?

Thanks.
Glenn.

Hi -

You are meant to be able to do this using the MaintainAspectRatio and Scale Layouts - however I have never got this to work properly and think its a bug (and the MCML sampler also replicates this issue).

If you know what the aspect ratio is of the image you are displaying - the best workaround is to use managed code to provide a Size object back to the UI (and set the MaximumSize/MinimumSize attributes of the holder or the graphic) so this way you can calculate your 'ScaleToFit' dimensions via code. (and work with different end user screen aspect ratios)

You can alternatively use a combination Scale/Clip elements but this can be harder to work with.

Niall

 

 

I'd agree with this - I've not been able to get it to work either.  Niall - did you bug this with Microsoft?

Andrew

Hi all,

MaintainAspectRatio works in my situration.
I have a colorfill to stretch photos to full screen, without changing the aspact ratio of photo when clients use16:9 LCD TV.


You can try using SizingPolicy instead of scale layout.

    <Content>
          <ColorFill Content="Transparent" Layout="Center">
          <Children>
            <ColorFill Name=" ImageColorFill" Content="Black" Margins="10,0,0,0">
              <!-- add Scale workaround for 16:9-->
              <Children>
                <Graphic Name="Display" Content="[loading]" MaintainAspectRatio="true" SizingPolicy="SizeToConstraint" />
              </Children>
            </ColorFill>
          </Children>
        </ColorFill>
    </Content>

Thanks for the replies everyone. I got it working. The trick was to use a transparent ColorFill rather than a Panel (as shown in mhk's example above). This seems to handle the MaintainAspectRatio setting correctly.

Glenn.

 

I didn't have the sizingpolicy on my graphic element - I'll have a look and see if that makes a difference.  If it does then it means that maintainaspectratio is overridden by the alignment attributes.

Cheers,
Andrew

Theres another Trick to get this working:

                  <Panel Name="ImageContainer">
                    <LayoutInput>
                      <AnchorLayoutInput Left="Parent,0" Right="Parent,0,250" Top="Label,1" Bottom="Label,1,375" />
                    </LayoutInput>
                    <Children>
                      <Panel Layout="VerticalFlow">
                        <Children>
                          <Graphic Content="[Option!PropertySet.#Image!Image]"
                                   Name="Image"                              
                                   MinimumSize="200,0"
                                   MaintainAspectRatio="true">
                          </Graphic>
                        </Children>
                      </Panel>
                    </Children>
                  </Panel>

The second Panel with Layout "VerticalFlow" allow me to resize the image, but maintain the aspect ratio.