Share via

Using Scale Layouts

  • Article

Using ScaleLayout, you can position graphics and specify how they can be scaled. You can use expanded form for custom settings. Or, use the inline form (Layout="Scale") to use the default settings: scaling down is allowed, scaling up is not allowed, and the aspect ratio is maintained.

The following example shows different ways to use ScaleLayout.

An example showing an image using different Scale layout settings.

<!-- This uses inline form for scale layout. -->
<ColorFill Content="White"  Layout="Scale" MaximumSize="50,50" Padding="10,10,10,10" >
  <Children>
    <Graphic Content="image://me:ImageLibrary"
        HorizontalAlignment="Fill" VerticalAlignment="Fill" />
  </Children>
</ColorFill>

<!-- This uses expanded form for scale layout. Scaling down is not allowed, -->
<!-- so the image is displayed at its original size beyond the parent. -->
<ColorFill Content="White" MaximumSize="50,50" Padding="10,10,10,10" >
  <Layout>
    <ScaleLayout AllowScaleDown="false" />
  </Layout>
  <Children>
    <Graphic Content="image://me:ImageLibrary"
        HorizontalAlignment="Fill" VerticalAlignment="Fill" />
  </Children>
</ColorFill>

<!-- This uses expanded form for scale layout with custom settings. -->
<!-- This layout is not square and allows the image to be displayed. -->
<!-- in a different aspect ratio. -->
<ColorFill Content="White" MaximumSize="150,350" Padding="10,10,10,10" >
  <Layout>
    <ScaleLayout AllowScaleDown="true" AllowScaleUp="false" MaintainAspectRatio="false"/>
  </Layout>
  <Children>
    <Graphic Content="image://me:ImageLibrary"
        HorizontalAlignment="Fill" VerticalAlignment="Fill" />
  </Children>
</ColorFill>

Sample Explorer

  • Layout > Scale ayout

See Also