The ImageBox template, and its variations, allow for images to be displayed in various ways.

<ImageBox Components="Frame, ImageBlock" Controller="ImageBox"/>

<BoxIcon Components="Frame, ImageBlock, AspectRatioFitter" Controller="ImageBox" ClippingMode="Squeeze" Ratio="1" RatioMode="WidthControlsHeight"/>

<ImageLabel Components="ImageBlock" Controller="ImageBox"/>

<LabelIcon Components="ImageBlock, AspectRatioFitter" Controller="ImageBox" ClippingMode="Squeeze" Ratio="1" RatioMode="WidthControlsHeight"/>

Every variation has an ImageBlock component and ImageBox controller.

The ImageBox and BoxIcon templates define a Frame component.

The BoxIcon and LabelIcon templates define an AspectRatioFitter.

<ImageButton Size="128" Image="GameLogo"/>

Adding the ImageBox is enough for a normal image, the image attribute sets the image to the image with the given name, defined in the images resource node of the style sheet.

Note that by default, the image will be rendered at full size and overlap the element. This can be changed using the ImageBlock component's ClippingMode attribute.

<BoxIcon Size="128, 0" Image="GameLogo"/>

Adding the BoxIcon is enough for a normal icon. It will have a frame background and the given image, and try to match its height to its width. The image will automatically be squeezed into the element's content area.

<ImageLabel Size="128" Image="GameLogo"/>

Adding the ImageLabel is enough for a normal icon. It will be rendered at full size at the element's position.

<LabelIcon Size="128, 0" Image="GameLogo"/>

Adding the LabelIcon is enough for a normal icon. It will have the given image and try to match its height to its width. The image will automatically be squeezed into the element's content area.