Grid Splitter Overlap

Question

I'm trying to create an "overlap" effect (for lack of a better term). There will be a splitter that when moved, exposes a different view of two similar images (e.g. between colored and grayscale).

I plan on using CustomGridSplitter from WinRTXAMLToolkit (due to WinRT's lack of a splitter). I'm thinking of starting with a grid similar to:

<Grid>
    <Grid.RowDefinitions>
        <RowDefinition />
        <RowDefinition Height="10" />
        <RowDefinition />
    </Grid.RowDefinitions>
    <controls:CustomGridSplitter Grid.Row="1" Opacity="0.25"/>
</Grid>

... but I'm not sure how to proceed. If I specify two image controls on the first and third row (or column), how do prevent the image controls from moving (or so)? Also, is it possible to do this diagonally?

Answer 1

You could use two Rectangles that use an ImageBrush or two Image controls that use a Clip property to clip their contents. Unfortunately you can't have diagonal clips in WinRT, only rectangular ones. Maybe you could check if combining multiple RotateTransforms with a Clip would work, you never know. Other than above I would use a Slider instead of a GridSplitter for your scenario.