Skip to content

Instantly share code, notes, and snippets.

@voidtuxic
Last active December 7, 2015 14:31
Show Gist options
  • Save voidtuxic/ef8d6f19d6b785feefbb to your computer and use it in GitHub Desktop.
Save voidtuxic/ef8d6f19d6b785feefbb to your computer and use it in GitHub Desktop.
Getting a useable cropped content with zero transform and correct size in UWP XAML
<!--
Full is your viewmodel containing the whole of your content (whatever control, here as an example an image)
Part is your viewmodel containing the area to crop
Part has a clipping rect, and 2 offset (OffsetX and OffsetY) why are basicaly -Rect.X and -Rect.Y. This puts the cropped part
on the top left of the grid and allow natural clipping through its render
protip : surround with a ViewBox if the size needs to be fluid in your UI
-->
<Grid Width="{Binding Part.Rect.Width}" Height="{Binding Part.Rect.Height}">
<Grid Width="{Binding Full.Width}" Height="{Binding Full.Height}">
<Grid>
<Grid.Clip>
<RectangleGeometry Rect="{Binding Part.Rect}"/>
</Grid.Clip>
<Grid.RenderTransform>
<TranslateTransform X="{Binding OffsetX}" Y="{Binding OffsetY}"/>
</Grid.RenderTransform>
<Image Width="{Binding Full.Width}" Height="{Binding Full.Height}" VerticalAlignment="Top" HorizontalAlignment="Left"/>
</Grid>
</Grid>
</Grid>
@tinanigro
Copy link

rekt

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment