<Page 
  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  Background="White" Margin="20">
  <Page.Resources>
    <BitmapImage x:Key="ExampleImage" UriSource="sampleImages\square.jpg" />
  </Page.Resources>
  <ScrollViewer>
    <StackPanel Margin="20">

      <Image Source="{StaticResource ExampleImage}" Width="100" Height="100" Stretch="Fill" />


      <!-- Viewbox to Viewport -->
      <StackPanel Orientation="Horizontal" Margin="30">

        <Image Source="{StaticResource ExampleImage}" Width="100" Height="100" Stretch="Fill"  />

        <Image Source="{StaticResource ExampleImage}" Width="150" Height="150" Stretch="Uniform"
               Margin="30,0,0,0" Opacity="0.25" />

        <Grid Margin="30,0,0,0">
          <Rectangle Width="200" Height="200">
          <Rectangle.Fill>
            <ImageBrush ImageSource="{StaticResource ExampleImage}"
                        Stretch="UniformToFill" Opacity="0.25" />
          </Rectangle.Fill>
        </Rectangle>
        <Rectangle Width="200" Height="100" Stroke="Black" StrokeThickness="1">
          <Rectangle.Fill>
            <ImageBrush ImageSource="{StaticResource ExampleImage}"
                        Stretch="UniformToFill" />
          </Rectangle.Fill>
        </Rectangle>
      </Grid>
      </StackPanel>

      <!-- Map -->
      <StackPanel Orientation="Horizontal" Margin="30">

        <Rectangle Width="200" Height="100" Stroke="Black" StrokeThickness="1" VerticalAlignment="Top">
          <Rectangle.Fill>
            <ImageBrush ImageSource="{StaticResource ExampleImage}"
                        Stretch="UniformToFill" />
          </Rectangle.Fill>
        </Rectangle>

        <Border BorderBrush="LimeGreen" Margin="30,0,0,0" VerticalAlignment="Top" 
        BorderThickness="1" HorizontalAlignment="Left"
        Padding="0" Opacity="0.25">
          <Rectangle Width="200" Height="100"
                     RenderTransformOrigin="0.5,0.5">
            <Rectangle.Fill>
              <ImageBrush ImageSource="{StaticResource ExampleImage}"
                          Stretch="UniformToFill" />
            </Rectangle.Fill>
            <Rectangle.LayoutTransform>
              <TransformGroup>
                <ScaleTransform ScaleX="0.75" />
              </TransformGroup>
            </Rectangle.LayoutTransform>
          </Rectangle>
        </Border>
        
        <Border BorderBrush="LimeGreen" Margin="30,0,0,10" VerticalAlignment="Top" 
                BorderThickness="1" HorizontalAlignment="Left"
                Padding="0">
          <Rectangle Width="200" Height="100"
                     RenderTransformOrigin="0.5,0.5">
            <Rectangle.Fill>
              <ImageBrush ImageSource="{StaticResource ExampleImage}"
                          Stretch="UniformToFill" />
            </Rectangle.Fill>
            <Rectangle.LayoutTransform>
              <TransformGroup>
                <ScaleTransform ScaleX="0.5" />
              </TransformGroup>
            </Rectangle.LayoutTransform>
          </Rectangle>
        </Border>
      </StackPanel>

      <!-- Rotate -->
      <StackPanel Orientation="Horizontal" Margin="30">

        <Border BorderBrush="LimeGreen" Margin="0,0,0,10" 
           BorderThickness="1" HorizontalAlignment="Left"
           Padding="0" VerticalAlignment="Center">
          <Rectangle Width="200" Height="100"
                     RenderTransformOrigin="0.5,0.5">
            <Rectangle.Fill>
              <ImageBrush ImageSource="{StaticResource ExampleImage}"
                          Stretch="UniformToFill" />
            </Rectangle.Fill>
            <Rectangle.LayoutTransform>
              <TransformGroup>
                <ScaleTransform ScaleX="0.5" />
              </TransformGroup>
            </Rectangle.LayoutTransform>
          </Rectangle>
        </Border>

        <Grid Margin="30,0,0,0" Width="150">

          
          <Border BorderBrush="LimeGreen"
            BorderThickness="1" HorizontalAlignment="Center" VerticalAlignment="Center"
            Padding="0" RenderTransformOrigin="0.5,0.5" Opacity="0.25">
            <Rectangle Width="200" Height="100"
                       RenderTransformOrigin="0.5,0.5">
              <Rectangle.Fill>
                <ImageBrush ImageSource="{StaticResource ExampleImage}"
                            Stretch="UniformToFill" />
              </Rectangle.Fill>
              <Rectangle.LayoutTransform>
                <TransformGroup>
                  <ScaleTransform ScaleX="0.5" />
                  
                </TransformGroup>
              </Rectangle.LayoutTransform>
            </Rectangle>
            <Border.RenderTransform>
              <RotateTransform Angle="45" />
            </Border.RenderTransform>
          </Border>
        </Grid>

        <Border BorderBrush="LimeGreen"  VerticalAlignment="Center"
        BorderThickness="1" HorizontalAlignment="Left"
        Padding="0" Margin="30,0,0,0">
          <Rectangle Width="200" Height="100"
                     RenderTransformOrigin="0.5,0.5">
            <Rectangle.Fill>
              <ImageBrush ImageSource="{StaticResource ExampleImage}"
                          Stretch="UniformToFill" />
            </Rectangle.Fill>
            <Rectangle.LayoutTransform>
              <TransformGroup>
                <ScaleTransform ScaleX="0.5" />
                <RotateTransform Angle="90" />
              </TransformGroup>
            </Rectangle.LayoutTransform>
          </Rectangle>
        </Border>
      </StackPanel>


      <StackPanel Orientation="Horizontal">

        <Border BorderBrush="LimeGreen"  VerticalAlignment="Center"
   BorderThickness="1" HorizontalAlignment="Left"
   Padding="0" Margin="30,0,0,0">
          <Rectangle Width="200" Height="100"
                     RenderTransformOrigin="0.5,0.5">
            <Rectangle.Fill>
              <ImageBrush ImageSource="{StaticResource ExampleImage}"
                          Stretch="UniformToFill" />
            </Rectangle.Fill>
            <Rectangle.LayoutTransform>
              <TransformGroup>
                <ScaleTransform ScaleX="0.5" />
                <RotateTransform Angle="90" />
              </TransformGroup>
            </Rectangle.LayoutTransform>
          </Rectangle>
        </Border>

        <Border BorderBrush="LimeGreen"  VerticalAlignment="Center"
          BorderThickness="1" HorizontalAlignment="Left"
          Padding="0" Margin="30,0,0,0" Opacity="0.25"
          RenderTransformOrigin="0.5,0.5">
          <Rectangle Width="200" Height="100"
                     RenderTransformOrigin="0.5,0.5">
            <Rectangle.Fill>
              <ImageBrush ImageSource="{StaticResource ExampleImage}"
                          Stretch="UniformToFill" />
            </Rectangle.Fill>
            <Rectangle.LayoutTransform>
              <TransformGroup>
                <ScaleTransform ScaleX="0.5" />
                <RotateTransform Angle="90" />
              </TransformGroup>
            </Rectangle.LayoutTransform>
          </Rectangle>
          <Border.LayoutTransform>
            <ScaleTransform ScaleX="1.5" />
          </Border.LayoutTransform>
        </Border>
        
      <Grid Margin="30,0,0,0">
        
        <!-- <SnippetGraphicsMMRelativeTransformExample2Inline> -->
        <Rectangle Width="200" Height="100" Stroke="Black" StrokeThickness="1">
          <Rectangle.Fill>
            <ImageBrush Stretch="UniformToFill">
              <ImageBrush.ImageSource>
                <BitmapImage UriSource="sampleImages\square.jpg" />
              </ImageBrush.ImageSource>
              <ImageBrush.RelativeTransform>
                <RotateTransform CenterX="0.5" CenterY="0.5" Angle="90" />
              </ImageBrush.RelativeTransform>
            </ImageBrush>
          </Rectangle.Fill>
        </Rectangle>
        <!-- </SnippetGraphicsMMRelativeTransformExample2Inline> -->
      </Grid>
      </StackPanel>
      
      

    </StackPanel>

  </ScrollViewer>
  
  
</Page>
