Рисование изображения с использованием эффектов размытия в UWP имеет неправильный размер для изображения

Я хочу размыть изображение с помощью ползунка. Для этого я использовал эффекты Win2D Blur и нарисовал изображение в CanvasControl и добавил холст поверх фактического изображения.

Загрузите образец здесь

Шаги. 1. Добавлен CanvasControl при нажатии кнопки. Он добавит дочерний элемент в сетку поверх фактического элемента 2. Измените ползунок, чтобы применить размытие 3. Проблема: изображение растянуто, его размер слишком велик и выглядит как обрезанное. Не в указанном размере (500, 400)

[XAML]

<Grid>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="7*"/>
                <ColumnDefinition Width="3*"/>
            </Grid.ColumnDefinitions>
        <Grid x:Name="imageGrid">
            <Image x:Name="image" Source="Flower1.jpg" Width="500" Height="400"
                       HorizontalAlignment="Left" VerticalAlignment="Top"/>
        </Grid>
        <StackPanel Grid.Column="1" Orientation="Vertical">

            <Button Content="AddCanvas" Width="100" x:Name="addCanvas"
                        Click="AddCanvas_Click"/>

            <StackPanel Orientation="Horizontal">
                <TextBlock Text="Blur" Width="100"/>
                <Slider x:Name="slider" Minimum="0" Maximum="5" Width="200"
                        ValueChanged="Slider_ValueChanged"/>
            </StackPanel>

        </StackPanel>
    </Grid>

[C #]

        bool isBlurred;
        GaussianBlurEffect blur = new GaussianBlurEffect();
        CanvasControl canv = new CanvasControl();
        CanvasBitmap cbi;

        public MainPage()
        {
            this.InitializeComponent();
        }
        private void AddCanvas_Click(object sender, RoutedEventArgs e)
        {
            canv.HorizontalAlignment = HorizontalAlignment.Left;
            canv.VerticalAlignment = VerticalAlignment.Top;
            canv.Draw += Canv_Draw;
            canv.CreateResources += Canv_CreateResources;
            canv.Height = 400;
            canv.Width = 500;

            imageGrid.Children.Add(canv);
        }

        private void Canv_Draw(Microsoft.Graphics.Canvas.UI.Xaml.CanvasControl sender, Microsoft.Graphics.Canvas.UI.Xaml.CanvasDrawEventArgs args)
        {
            args.DrawingSession.Units = CanvasUnits.Pixels;
            if (isBlurred)
            {
                args.DrawingSession.DrawImage(blur, new Rect(0, 0, 500, 400), new Rect(0, 0, 500, 400));
            }
        }

        private void Canv_CreateResources(Microsoft.Graphics.Canvas.UI.Xaml.CanvasControl sender, Microsoft.Graphics.Canvas.UI.CanvasCreateResourcesEventArgs args)
        {
            args.TrackAsyncAction(CreateResourcesAsync(sender).AsAsyncAction());
        }
        async Task CreateResourcesAsync(CanvasControl sender)
        {
            cbi = await CanvasBitmap.LoadAsync(sender, "Flower1.jpg");
        }

        private void Slider_ValueChanged(object sender, RangeBaseValueChangedEventArgs e)
        {
            isBlurred = true;
            blur.Source = cbi;
            blur.BlurAmount = (float)e.NewValue;
            canv.Invalidate();
        }

Я хочу динамически применить эффекты размытия к изображению с помощью ползунка. Но я не хочу менять фактическое изображение на размытие. Итак, я использовал холст поверх фактического изображения и рисовал с эффектом размытия.

С уважением,

Бхаратхи.