Applying filters such as sepia, b&w etc. on XAML image

Question

I want to apply filters to a XAML image. I load the image using the FileOpenPicker that sets the source of the XAML image from that file, after that I want to apply filters to it using buttons and once I'm satisfied with the outcome I want to save it. So far I've been able to load and save the image that is loaded onto the XAML image, but I've tried various SDK's such as ImageProcessor, Lumia Imaging SDK and now I'm trying to find the solution using Win2D, but I'm stuck and have completely no idea how to move forward. The fact that I'm trying to do it just on a XAML image without converting it to any other format may be the problem, but I couldn't find a solution to it. Is there an easy way to just apply the filters using one of the following SDK's?

Answer 1

The Windows Community Toolkit has some brushes which meet your requirement. For example, the BackdropSepiaBrush.

It's easy to apply SepiaEffect for the XAML image.

See my following code sample:

xmlns:media="using:Microsoft.Toolkit.Uwp.UI.Media"

<Grid>
    <Image x:Name="img" Source="Assets/panda.jpg"></Image>
    <Border BorderBrush="Black" BorderThickness="1" VerticalAlignment="Center" HorizontalAlignment="Center" Width="500" Height="700">
        <Border.Background>
            <media:BackdropSepiaBrush Intensity="0.85" />
        </Border.Background>
    </Border>
</Grid>

The official code sample is on GitHub. If you want to know other brushes, please check those samples.