Using Scale Layouts
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.
<!-- 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