xaml ScrollViewer, blurred border - Windows Store App

Question

Is it somehow possible to have somekind of a blurred border when scrolling? For better understanding I added a picture of what I want to acchieve.

The restriction that I have is, that underneath the ScrollViewer I have got a background Image. Thus, I cant just use a filled Rectangle with white to transparent gradient at the left side of the ScrollViewer .

Answer 1

Since WinRT dropped support for OpacityMask and I'm not sure if you'd want to set it with an Alpha channel. With that said though, there's pretty much always a work around. So what if you just utilize the natural z-order instead and fake it? Something like this;

<!-- Grid as Container -->
<Grid>

    <ScrollViewer VerticalScrollBarVisibility="Disabled" HorizontalScrollBarVisibility="Visible">
        <!-- example backgrounds, like images, just for the concept example. -->
        <StackPanel Orientation="Horizontal">
            <Rectangle Height="75" Width="300" Fill="Red" Margin="20,0"/>
            <Rectangle Height="75" Width="300" Fill="Red" Margin="20,0"/>
            <Rectangle Height="75" Width="300" Fill="Red" Margin="20,0"/>
            <Rectangle Height="75" Width="300" Fill="Red" Margin="20,0"/>
            <Rectangle Height="75" Width="300" Fill="Red" Margin="20,0"/>
        </StackPanel>
    </ScrollViewer>

    <!-- An adhoc gradient overlay to just float over the ScrollViewer itself.
         Then using Margin to fit it to the shape of the Scrollviewer and still
         allow hit visibility to the scrollbar etc.  -->

    <Rectangle Width="50" HorizontalAlignment="Left" Margin="1,1,0,20">
        <Rectangle.Fill>
            <LinearGradientBrush EndPoint="1,0.5" StartPoint="0.1,0.5">
                <GradientStop Color="White" Offset="0.3"/>
                <GradientStop Color="Transparent" Offset="1"/>
            </LinearGradientBrush>
        </Rectangle.Fill>
    </Rectangle>

</Grid>

Of course you'll probably want to tweak some values like the Rectangle Margin in the example to make it look exactly right with your own setup, but the concept should be there and is an option. Hope this helps.