title: UWP - Use RenderTargetBitmap and only capture the visual area
body: <p>I want to use RenderTargetBitmap to just capture the visual area in UWP app.
  But the result is to capture the full element image in canvas that include offscreen's part.</p>
  <p>This is my application Image.</p>
  <p><a href="https://i.stack.imgur.com/290Gu.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/290Gu.png" alt="enter image description here" /></a></p>
  <p>This my MainPage.xaml</p>
  <pre><code>&lt;Page
  x:Class=&quot;RenderBitmapTest.MainPage&quot;
  xmlns=&quot;http://schemas.microsoft.com/winfx/2006/xaml/presentation&quot;
  xmlns:x=&quot;http://schemas.microsoft.com/winfx/2006/xaml&quot;
  xmlns:d=&quot;http://schemas.microsoft.com/expression/blend/2008&quot;
  xmlns:local=&quot;using:RenderBitmapTest&quot;
  xmlns:mc=&quot;http://schemas.openxmlformats.org/markup-compatibility/2006&quot;
  Width=&quot;1600&quot;
  Height=&quot;900&quot;
  Background=&quot;{ThemeResource ApplicationPageBackgroundThemeBrush}&quot;
  Loaded=&quot;Page_Loaded&quot;
  mc:Ignorable=&quot;d&quot;&gt;
  
  &lt;Grid&gt;
      &lt;Canvas
          x:Name=&quot;CanvasTest&quot;
          Width=&quot;1600&quot;
          Height=&quot;900&quot;
          Background=&quot;Gray&quot;&gt;
          &lt;Rectangle
              Canvas.Left=&quot;-150&quot;
              Canvas.Top=&quot;-150&quot;
              Width=&quot;300&quot;
              Height=&quot;300&quot;
              Fill=&quot;Green&quot; /&gt;
          &lt;Rectangle
              Canvas.Left=&quot;0&quot;
              Canvas.Top=&quot;150&quot;
              Width=&quot;300&quot;
              Height=&quot;300&quot;
              Fill=&quot;Blue&quot; /&gt;
  
          &lt;Image x:Name=&quot;Image&quot; Canvas.Left=&quot;300&quot; /&gt;
      &lt;/Canvas&gt;
  &lt;/Grid&gt;
  </code></pre>
  
  <p>This is RenderTargetBitmap Code.</p>
  <pre><code>public sealed partial class MainPage : Page
  {
      public MainPage()
      {
          this.InitializeComponent();
      }
  
      private async void Page_Loaded(object sender, RoutedEventArgs e)
      {
          CanvasTest.Measure(new Size(1600, 900));
          CanvasTest.Arrange(new Rect(0, 0, 1600, 900));
          var rtb = new RenderTargetBitmap();
          await rtb.RenderAsync(CanvasTest);
  
          await SaveToBitmapImage(rtb);
          //Image.Source = rtb;
  
      }
  
      private async Task SaveToBitmapImage(RenderTargetBitmap rtb)
      {
          StorageFolder storageFolder = ApplicationData.Current.LocalFolder;
          StorageFile storageFile = await storageFolder.CreateFileAsync(&quot;test.png&quot;, CreationCollisionOption.ReplaceExisting);
  
          var pixels = await rtb.GetPixelsAsync();
          using (IRandomAccessStream stream = await storageFile.OpenAsync(FileAccessMode.ReadWrite))
          {
              var encoder = await
              BitmapEncoder.CreateAsync(BitmapEncoder.JpegEncoderId, stream);
              byte[] bytes = pixels.ToArray();
              encoder.SetPixelData(BitmapPixelFormat.Bgra8, BitmapAlphaMode.Ignore,
                  (uint)rtb.PixelWidth, (uint)rtb.PixelHeight, 96, 96, bytes);
              await encoder.FlushAsync();
          }
      }
  </code></pre>
  <p>The result is
  <a href="https://i.stack.imgur.com/9i2aC.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/9i2aC.png" alt="enter image description here" /></a></p>
  <p>The expectation should is to only capture the yellow area.
  <a href="https://i.stack.imgur.com/5cy1y.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/5cy1y.png" alt="enter image description here" /></a></p>
  <p>Could anyone help to solve it?</p>
  <p>Thanks,
  Zack</p>