Working with Graphics

Article
09/23/2009

The Graphic element allows you to display images. MCML supports BMP, EMF, GIF, JPG, PNG, TIFF, and Windows Media formats. Using the layout settings in the Graphic element, you can specify the alignment, the maximum and minimum sizes, and specify whether to preserve the aspect ratio.

Notes It is possible to apply settings that restrict the image so much that the image is not displayed at all. For more information, see Setting Minimum and Maximum Sizes.

To display dynamic images that are generated by code, write the image to a file first, and then reference the file.

Animated GIFs are not supported in MCML.

The following example shows different ways to display an image:

  <Image Name="ImageLibrary" Source="file://C:\Resources\GreenBall.png"/>

  <UI Name="Basic">
    <Content>
      <Panel>
        <Layout >
          <FlowLayout Orientation="Vertical" Spacing="10,10" ItemAlignment="Center"/>
        </Layout>
        <Children>
          <Graphic Name="FromImage" Content="image://me:ImageLibrary" />
          <Graphic Name="FromFile" Content="file://C:\Resources\BlueStar.png" />
          <Graphic Name="FromResx" Content="resx://TestApp/TestApp.Resources/RedCircle" />
          <Graphic Name="FromHttp" Content="http://play.mediacentersandbox.com/sample/6/FourBoxGraphic.png" />
        </Children>
      </Panel>
    </Content>
  </UI>

When applying a scale or rotation to an image, the image is scaled or rotated based on the top-left (0,0) corner of the image. Then, the image can appear to be displayed off center, even if you specify a centered alignment. You can change the point of scale or rotation using the CenterPointPercent and CenterPointOffset attributes as follows:

CenterPointPercent moves the point of scale or rotation based on a percentage of X and Y from the top-left corner. For example, to move the center point to the exact center (50% of X and of Y), you specify CenterPointPercent=".5, .5, 0".
CenterPointOffset moves the point of scale or rotation based on a pixel offset of X and Y from the top-left corner. For example, to move the center point to 20 pixels in both X and Y directions, you would specify CenterPointOffset="20, 20, 0".

If you specify values for both attributes, CenterPointPercent is applied first.

The following example shows how to display an image, and how different settings affect the way the image is displayed:

An example of various settings for images.

  <UI Name="Images">
    <Content>
      <Panel Layout="HorizontalFlow" >
        <Layout>
          <FlowLayout Orientation="Horizontal" Spacing="50,0" />
        </Layout>
        <Children>

          <!-- A simple way to display a 100 x 100 pixel image with superimposed text. -->
          <Graphic Content="file://C:\Resources\BlueStar.png" Margins="20,0,20,0" >
            <Children>
              <Text Content="Simple image display" Color="White" Font="Tahoma,12" WordWrap="true"/>
            </Children>
          </Graphic>

          <!-- A simple way to display a 100 x 100 pixel image, scaled up. The child Text element is also -->
          <!-- rescaled. The CenterPointPercent setting keeps the image centered within the space given to it. -->
          <Graphic Content="file://C:\Resources\BlueStar.png" Scale="2,2,2" CenterPointPercent=".5, 0, .5" Margins="20,0,20,0" >
            <Children>
              <Text Content="Scaling" Color="White" Font="Tahoma,12" WordWrap="true"/>
            </Children>
          </Graphic>

          <!-- An image centered within a colorfill. -->
          <ColorFill Content="Gray" MinimumSize="200,200" Margins="20,0,20,0">
            <Children>
              <Graphic Content="file://C:\Resources\BlueStar.png"  HorizontalAlignment="Center" VerticalAlignment="Center">
                <Children>
                  <Text Content="Alignment within parent" Color="White" Font="Tahoma,12" WordWrap="true" MaximumSize="200,0"/>
                </Children>
              </Graphic>
            </Children>
          </ColorFill>

          <!-- An image within a colorfill. The vertical and horizontal alignments are set to "Fill", so the image -->
          <!-- is scaled to fill the parent. -->
          <ColorFill Content="Gray"  MinimumSize="200,200" >
            <Children>
              <Graphic Content="file://C:\Resources\BlueStar.png" HorizontalAlignment="Fill" VerticalAlignment="Fill" >
                <Children>
                  <Text Content="Scaled to parent" Color="White" Font="Tahoma,12" WordWrap="true" />
                </Children>
              </Graphic>
            </Children>
          </ColorFill>

          <!-- The parent is smaller than the image and is set to a different aspect ratio. The image is scaled -->
          <!-- but is not set to preserve the original aspect ratio. -->
          <ColorFill Content="Gray" MaximumSize="50,100" >
            <Children>
              <Graphic Content="file://C:\Resources\BlueStar.png" HorizontalAlignment="Fill" VerticalAlignment="Fill" MaintainAspectRatio="false"  >
                <Children>
                  <Text Content="New aspect ratio" Color="White" Font="Tahoma,12" WordWrap="true" />
                </Children>
              </Graphic>
            </Children>
          </ColorFill>

        </Children>
      </Panel>
    </Content>
  </UI>

Sample Explorer

View Items – Graphic > all samples

See Also

Share via

Working with Graphics

Additional resources