title: Clipping Using Ellipse and binding it inside my user control in Windows RT
body: <p>I have an image and I am clipping the mouse area using an Ellipse in which I am quite successful.</p>
  
  <p>But I want that ellipse to be a part of my user control and the user control should move along with my finger and the clipping Ellipse should be inside the user control .
  The complete project can be downloaded from <a href="http://1drv.ms/1Fvqm0O" rel="nofollow">here</a></p>
  
  <p>My <strong>UserControl'sXAML</strong> is </p>
  
  <pre><code>&lt;UserControl
      x:Class="App78.Magnifier"
      xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
      xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
      xmlns:local="using:App78"
      xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
      xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
      mc:Ignorable="d"
      Height="230"
      Width="170"&gt;
  
  
      &lt;Grid Height="230" Width="170"&gt;
          &lt;Path Data="M25.533,0C15.457,0,7.262,8.199,7.262,18.271c0,9.461,13.676,19.698,17.63,32.338 c0.085,0.273,0.34,0.459,0.626,0.457c0.287-0.004,0.538-0.192,0.619-0.467c3.836-12.951,17.666-22.856,17.667-32.33 C43.803,8.199,35.607,0,25.533,0z M25.533,32.131c-7.9,0-14.328-6.429-14.328-14.328c0-7.9,6.428-14.328,14.328-14.328 c7.898,0,14.327,6.428,14.327,14.328C39.86,25.702,33.431,32.131,25.533,32.131z"
                Fill="#FFF4F4F5"
                Stretch="Fill"
                Stroke="Black"
                UseLayoutRounding="False"
                Height="227"
                Width="171" &gt;&lt;/Path&gt;
              &lt;Ellipse x:Name="MagnifierEllipse" x:FieldModifier="public"  Opacity="1" Visibility="Visible" HorizontalAlignment="Left" VerticalAlignment="Top" IsHitTestVisible="False" Width="150" Height="150" Stroke="White" StrokeThickness="3" Margin="11,8,0,0" &gt;
                  &lt;Ellipse.RenderTransform&gt;
                      &lt;TranslateTransform x:Name="MagnifierTransform" x:FieldModifier="public"/&gt;
                  &lt;/Ellipse.RenderTransform&gt;
  
                  &lt;Ellipse.Fill&gt;
                      &lt;ImageBrush
                      ImageSource="http://blog.al.com/space-news/2009/04/iss015e22574.jpg"
                      Stretch="None"
                      AlignmentX="Left"
                      AlignmentY="Top"&gt;
                          &lt;ImageBrush.Transform&gt;
                              &lt;TransformGroup&gt;
                                  &lt;TranslateTransform x:FieldModifier="public"
                                  x:Name="PositionTransform"/&gt;
                                  &lt;ScaleTransform x:FieldModifier="public"
                                  x:Name="ZoomTransform"/&gt;
                                  &lt;TranslateTransform x:FieldModifier="public"
                                  x:Name="CenterTransform" /&gt;
                              &lt;/TransformGroup&gt;
                          &lt;/ImageBrush.Transform&gt;
                      &lt;/ImageBrush&gt;
                  &lt;/Ellipse.Fill&gt;
              &lt;/Ellipse&gt;
  
      &lt;/Grid&gt;
  &lt;/UserControl&gt;
  </code></pre>
  
  <p>My <strong>MainPage.XAML</strong> is</p>
  
  <pre><code>&lt;Page
      x:Class="App78.MainPage"
      xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
      xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
      xmlns:local="using:App78"
      xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
      xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
  
      mc:Ignorable="d"&gt;
  
      &lt;Grid
          x:Name="LayoutGrid"
          Margin="0,0"
          Background="{ThemeResource ApplicationPageBackgroundThemeBrush}"
          Holding="LayoutGrid_Holding"
          PointerMoved="LayoutGrid_OnPointerMoved"
          PointerWheelChanged="LayoutGrid_OnPointerWheelChanged"&gt;
          &lt;Image
              x:Name="BigImage"
              HorizontalAlignment="Center"
              VerticalAlignment="Center"
              Stretch="Uniform"
              Source="http://blog.al.com/space-news/2009/04/iss015e22574.jpg" /&gt;
  
  
                  &lt;!--&lt;Ellipse 
              x:Name="MagnifierEllipse"
              Opacity="1"
              Visibility="Collapsed"
              HorizontalAlignment="Left"
              VerticalAlignment="Top"
              IsHitTestVisible="False"
              Width="150"
              Height="150"
              Stroke="White"
              StrokeThickness="3"
              Margin="-100"&gt;
                      &lt;Ellipse.RenderTransform&gt;
                          &lt;TranslateTransform
                      x:Name="MagnifierTransform"/&gt;
                      &lt;/Ellipse.RenderTransform&gt;
                      &lt;Ellipse.Fill&gt;
                          &lt;ImageBrush
                      ImageSource="http://blog.al.com/space-news/2009/04/iss015e22574.jpg"
                      Stretch="None"
                      AlignmentX="Left"
                      AlignmentY="Top"&gt;
                              &lt;ImageBrush.Transform&gt;
                                  &lt;TransformGroup&gt;
                                      &lt;TranslateTransform
                                  x:Name="PositionTransform"/&gt;
                                      &lt;ScaleTransform
                                  x:Name="ZoomTransform"/&gt;
                                      &lt;TranslateTransform
                                  x:Name="CenterTransform" /&gt;
                                  &lt;/TransformGroup&gt;
                              &lt;/ImageBrush.Transform&gt;
                          &lt;/ImageBrush&gt;
                      &lt;/Ellipse.Fill&gt;
                  &lt;/Ellipse&gt;--&gt;
          &lt;local:Magnifier x:Name="MagnifierTip" Visibility="Visible" /&gt;
      &lt;/Grid&gt;
  &lt;/Page&gt;
  </code></pre>
  
  <p>Please see the <strong>commented section</strong> of <strong>Ellipse</strong> , If I uncomment  , I clearly get a Ellipse that is doing the clip.</p>
  
  <p>My main requirenment is to get the Ellipse inside the user control , please refer the <a href="http://youtu.be/0Ie1Z-vk4aE" rel="nofollow">video</a> for more clarification</p>
  
  <p>My <strong>MainPage.XAML.CS</strong> has the following code</p>
  
  <pre><code>using System;
  using Windows.UI.Xaml.Controls;
  using Windows.UI.Xaml.Input;
  using Windows.UI.Xaml.Media;
  using Windows.UI.Xaml.Media.Imaging;
  
  namespace App78
  {
      public sealed partial class MainPage : Page
      {
          private double zoomScale = 2;
          private double pointerX = 0;
          private double pointerY = 0;
          private const double MinZoomScale = .25;
          private const double MaxZoomScale = 32;
  
  
          public MainPage()
          {
              this.InitializeComponent();
  
              var bi = (BitmapImage)BigImage.Source;
              bi.ImageOpened += bi_ImageOpened;
              this.SizeChanged += MainPage_SizeChanged;
          }
  
          void MainPage_SizeChanged(object sender, Windows.UI.Xaml.SizeChangedEventArgs e)
          {
              this.UpdateImageLayout();
          }
  
          void bi_ImageOpened(object sender, Windows.UI.Xaml.RoutedEventArgs e)
          {
              this.UpdateImageLayout();
          }
  
          private void UpdateImageLayout()
          {
              var bi = (BitmapImage)BigImage.Source;
              if (bi.PixelWidth &lt; this.LayoutGrid.ActualWidth &amp;&amp;
                  bi.PixelHeight &lt; this.LayoutGrid.ActualHeight)
              {
                  this.BigImage.Stretch = Stretch.None;
              }
              else
              {
                  this.BigImage.Stretch = Stretch.Uniform;
              }
  
              this.UpdateMagnifier();
          }
  
          private void LayoutGrid_OnPointerMoved(object sender, PointerRoutedEventArgs e)
          {
             // MagnifierTip.Visibility = Windows.UI.Xaml.Visibility.Collapsed;
              var point = e.GetCurrentPoint(this.LayoutGrid);
              this.pointerX = point.Position.X;
              this.pointerY = point.Position.Y;
              this.UpdateMagnifier();
          }
  
          private void UpdateMagnifier()
          {
              var bi = (BitmapImage)BigImage.Source;
  
              double offsetX = 0;
              double offsetY = 0;
              double imageScale = 1;
  
              var imageRatio = (double)bi.PixelWidth / bi.PixelHeight;
              var gridRatio = this.LayoutGrid.ActualWidth / this.LayoutGrid.ActualHeight;
  
              if (bi.PixelWidth &lt; this.LayoutGrid.ActualWidth &amp;&amp;
                  bi.PixelHeight &lt; this.LayoutGrid.ActualHeight)
              {
                  offsetX = 0.5 * (this.LayoutGrid.ActualWidth - bi.PixelWidth);
                  offsetY = 0.5 * (this.LayoutGrid.ActualHeight - bi.PixelHeight);
                  //imageScale = 1; - remains
              }
              else if (imageRatio &lt; gridRatio)
              {
                  offsetX = 0.5 * (this.LayoutGrid.ActualWidth - imageRatio * this.LayoutGrid.ActualHeight);
                  offsetY = 0;
                  imageScale = BigImage.ActualHeight / bi.PixelHeight;
              }
              else
              {
                  offsetX = 0;
                  offsetY = 0.5 * (this.LayoutGrid.ActualHeight - this.LayoutGrid.ActualWidth / imageRatio);
                  imageScale = BigImage.ActualWidth / bi.PixelWidth;
              }
  
              MagnifierTip.MagnifierTransform.X = this.pointerX;
             MagnifierTip.MagnifierTransform.Y = this.pointerY;
             MagnifierTip.PositionTransform.X = (-this.pointerX + offsetX) / imageScale;
             MagnifierTip.PositionTransform.Y = (-this.pointerY + offsetY) / imageScale;
             MagnifierTip. ZoomTransform.ScaleX = imageScale * zoomScale;
             MagnifierTip.ZoomTransform.ScaleY = imageScale * zoomScale;
             MagnifierTip.CenterTransform.X = MagnifierTip.MagnifierEllipse.ActualWidth / 2 - MagnifierTip.MagnifierEllipse.StrokeThickness / 2;
             MagnifierTip.CenterTransform.Y = MagnifierTip.MagnifierEllipse.ActualHeight / 2 - MagnifierTip.MagnifierEllipse.StrokeThickness / 2;
          }
  
          private void LayoutGrid_OnPointerWheelChanged(object sender, PointerRoutedEventArgs e)
          {
              if (e.GetCurrentPoint(this.LayoutGrid).Properties.MouseWheelDelta &gt; 0)
              {
                  zoomScale = Math.Max(MinZoomScale, Math.Min(MaxZoomScale, zoomScale * 1.2));
              }
              else
              {
                  zoomScale = Math.Max(MinZoomScale, Math.Min(MaxZoomScale, zoomScale / 1.2));
              }
  
              this.UpdateMagnifier();
          }
  
          private void LayoutGrid_Holding(object sender, HoldingRoutedEventArgs e)
          {
            //  MagnifierTip.Visibility = Windows.UI.Xaml.Visibility.Visible;
  
  
          }
      }
  }
  </code></pre>