Last active
December 7, 2015 14:31
-
-
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
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!-- | |
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> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
rekt