none
Why BitmapEffect is't working with custom canvas in wpf? RRS feed

  • Question

  • I am trying to add Bitmap Effect on a Drawing Group and I want to show it using OnRender() method of my custom canvas, but bitmap effect is not showing any effect.

    WPF - XAML

    <Window x:Class="WpfApp2.MainWindow"
           <!--..............
           some default codes
           ...............-->
           Title="MainWindow" Height="450" Width="800" KeyDown="Window_KeyDown">
       <Grid>
           <ScrollViewer HorizontalScrollBarVisibility="Visible" Name="scrollViewer">
           </ScrollViewer>
       </Grid>
    </Window>
    C# My custom canvas class

    public class MyCanvas : Canvas
       {
           public DrawingGroup drawingGroup;

           public MyCanvas()
           {
               drawingGroup = new DrawingGroup();
           }

           protected override void OnRender(DrawingContext dc)
           {
               base.OnRender(dc);
               dc.DrawDrawing(drawingGroup);
           }
       }
    C# My Main Program

    Creating my custom canvas
    MyCanvas Pad = new MyCanvas()
           {
               Name = "Pad",
               Width = 500,
               Height =500,    
               ClipToBounds = true

               Background = Brushes.White,
           };
    public MainWindow()
           {
               InitializeComponent();

               //adding canvas to scrollviewer
               scrollViewer.Content = Pad;

               //adding mouse event
               Pad.MouseDown += Pad_MouseDown;

           }


    private void Pad_MouseDown(object sender, MouseButtonEventArgs e)
           {
    //Creating new geometry
               EllipseGeometry ellipse= new EllipseGeometry(e.GetPosition((Canvas)sender), 50, 50);

               //Creating drawing using geometry
               GeometryDrawing geometryDrawing = new GeometryDrawing(Brushes.Red, (Pen)null, ellipse);

               //Creating drawing group in order to add Bitmap effect
               DrawingGroup drawingGroup = new DrawingGroup();
               drawingGroup.Children.Add(geometryDrawing);

               //Creating a bitmap effect
               BlurBitmapEffect blur = new BlurBitmapEffect();
               blur.Radius = 50;

               //Adding Bitmap effect to drawing group
               drawingGroup.BitmapEffect = blur;

               //Adding drawing group to my custom canvas
               Pad.drawingGroup.Children.Add(geometryDrawing);
           }


    Nehal Ahmad


    • Edited by NehalAhmad Tuesday, June 18, 2019 4:18 AM forget to add this code : Background = Brushes.White,
    Monday, June 17, 2019 2:41 PM

Answers

  • Sorry! but it is not very efficient. I have already tried some thing like it. I used shapes because I could directly apply effects onto them and can be added directly to the canvas without using any other parent element, but after adding too many ellipse it start lagging.

    I still did not get my answer. I thing this is not possible this way perhaps I am on wrong way, am I ?. 

    Thank you vary much for helping.


    Nehal Ahmad

    Hi NehalAhmad,   

    You may can try to change your ways.

    Best regards

    Yong Lu

    MSDN Community Support
    Please remember to click "Mark as Answer" the responses that resolved your issue, and to click "Unmark as Answer" if not. This can be beneficial to other community members reading this thread. If you have any compliments or complaints to MSDN Support, feel free to contact MSDNFSF@microsoft.com.

    • Marked as answer by NehalAhmad Monday, June 24, 2019 10:14 AM
    Monday, June 24, 2019 5:56 AM
    Moderator

All replies

  • I am trying to add Bitmap Effect on a Drawing Group and I want to show it using OnRender() method of my custom canvas, but bitmap effect is not showing any effect.

    WPF - XAML

    <Window x:Class="WpfApp2.MainWindow"
           <!--..............
           some default codes
           ...............-->
           Title="MainWindow" Height="450" Width="800" KeyDown="Window_KeyDown">
       <Grid>
           <ScrollViewer HorizontalScrollBarVisibility="Visible" Name="scrollViewer">
           </ScrollViewer>
       </Grid>
    </Window>
    C# My custom canvas class

    public class MyCanvas : Canvas
       {
           public DrawingGroup drawingGroup;

           public MyCanvas()
           {
               drawingGroup = new DrawingGroup();
           }

           protected override void OnRender(DrawingContext dc)
           {
               base.OnRender(dc);
               dc.DrawDrawing(drawingGroup);
           }
       }
    C# My Main Program

    Creating my custom canvas
    MyCanvas Pad = new MyCanvas()
           {
               Name = "Pad",
               Width = 500,
               Height =500,    
               ClipToBounds = true

           };
    public MainWindow()
           {
               InitializeComponent();

               //adding canvas to scrollviewer
               scrollViewer.Content = Pad;

               //adding mouse event
               Pad.MouseDown += Pad_MouseDown;

           }


    private void Pad_MouseDown(object sender, MouseButtonEventArgs e)
           {
    //Creating new geometry
               EllipseGeometry ellipse= new EllipseGeometry(e.GetPosition((Canvas)sender), 50, 50);

               //Creating drawing using geometry
               GeometryDrawing geometryDrawing = new GeometryDrawing(Brushes.Red, (Pen)null, ellipse);

               //Creating drawing group in order to add Bitmap effect
               DrawingGroup drawingGroup = new DrawingGroup();
               drawingGroup.Children.Add(geometryDrawing);

               //Creating a bitmap effect
               BlurBitmapEffect blur = new BlurBitmapEffect();
               blur.Radius = 50;

               //Adding Bitmap effect to drawing group
               drawingGroup.BitmapEffect = blur;

               //Adding drawing group to my custom canvas
               Pad.drawingGroup.Children.Add(geometryDrawing);
           }

    Nehal Ahmad

    Hi    NehalAhmad,

    The default background for a Canvas is Transparent, which allows hit tests to pass through it.

    You can set a Background Color.

    MyCanvas Pad = new MyCanvas()
            {
                Name = "Pad",
                Width = 500,
                Height = 500,
                ClipToBounds = true,
                Background = Brushes.White
            };
    

    Best regards

    Yong Lu



    MSDN Community Support
    Please remember to click "Mark as Answer" the responses that resolved your issue, and to click "Unmark as Answer" if not. This can be beneficial to other community members reading this thread. If you have any compliments or complaints to MSDN Support, feel free to contact MSDNFSF@microsoft.com.

    Tuesday, June 18, 2019 3:22 AM
    Moderator
  • Sorry, I forgot to include this code. I have already done it this is not my issue.

    Main issue is  I want a blurred ellipse and for this I am trying to add BlurBitmapEffect but it is not working.

    I want something like shown at bottom not like top.


    Nehal Ahmad

    Tuesday, June 18, 2019 4:15 AM
  • Sorry, I forgot to include this code. I have already done it this is not my issue.

    Main issue is  I want a blurred ellipse and for this I am trying to add BlurBitmapEffect but it is not working.

    I want something like shown at bottom not like top.


    Nehal Ahmad

    Hi     NehalAhmad,

    BlurBitmapEffect should apply to a visual object.

    A DrawingGroup is neither a Visual nor a UIElement, you might need to set the effect on the parent UI element instead.

    MyCanvas Pad = new MyCanvas()
            {
                Name = "Pad",
                Width = 500,
                Height = 500,
                ClipToBounds = true,
                Background = Brushes.White,
                Effect= new BlurEffect() { Radius = 20 }
                
        };
    
       private void Pad_MouseDown(object sender, MouseButtonEventArgs e)
            {
                //Creating new geometry
                EllipseGeometry ellipse = new EllipseGeometry(e.GetPosition((Canvas)sender), 50, 50);
                //Creating drawing using geometry
                GeometryDrawing geometryDrawing = new GeometryDrawing(Brushes.Red, (Pen)null, ellipse);
    
                DrawingImage dwra = new DrawingImage();
                dwra.Drawing = geometryDrawing;
                Pad.drawingGroup.Children.Add(geometryDrawing);
            }
    
    Or:

           private void Pad_MouseDown(object sender, MouseButtonEventArgs e)
            {
                //Creating new geometry
                EllipseGeometry ellipse = new EllipseGeometry(e.GetPosition((Canvas)sender), 50, 50);
                //Creating drawing using geometry
                GeometryDrawing geometryDrawing = new GeometryDrawing(Brushes.Red, (Pen)null, ellipse);
    
                DrawingImage dwra = new DrawingImage();
                dwra.Drawing = geometryDrawing;
    
                //Creating a bitmap effect
                BlurBitmapEffect blur = new BlurBitmapEffect();
                blur.Radius = 20;
    
                Pad.BitmapEffect = blur;
    
                Pad.drawingGroup.Children.Add(geometryDrawing);
            }
    

    BlurBitmapEffect



    Best regards

    Yong Lu


    MSDN Community Support
    Please remember to click "Mark as Answer" the responses that resolved your issue, and to click "Unmark as Answer" if not. This can be beneficial to other community members reading this thread. If you have any compliments or complaints to MSDN Support, feel free to contact MSDNFSF@microsoft.com.

    Wednesday, June 19, 2019 7:32 AM
    Moderator
  • If I set effect to Pad (Canvas) then it will apply to all children objects but I want to have some blurred ellipse and some sharp. 

    Nehal Ahmad

    Wednesday, June 19, 2019 8:51 PM
  • If I set effect to Pad (Canvas) then it will apply to all children objects but I want to have some blurred ellipse and some sharp. 

    Nehal Ahmad

    Hi    NehalAhmad,

    The following suggestion for your reference. It will not completely satisfy your program, please refer to ideas to improve your program.

    You can create DrawingImage and set it to Image control. Set the BlurBitmapEffect to the Image visual object.

    Finally, add the image control to the Canvas by the Canvas.SetLeft and Canvas.SetTop methods.

          private void Pad_MouseDown(object sender, MouseButtonEventArgs e)
            {
    
                DrawingImage drawingImage = new DrawingImage();
                //Creating new geometry
                double xsize = 50;
                double ysize = 50;
                EllipseGeometry ellipse = new EllipseGeometry(e.GetPosition((Canvas)sender), xsize, ysize);
                //Creating drawing using geometry
                GeometryDrawing geometryDrawing = new GeometryDrawing(Brushes.Red, (Pen)null, ellipse);
    
                DrawingImage dwra = new DrawingImage();
                dwra.Drawing = geometryDrawing;
    
                Image cursorImg = new Image();
                cursorImg.Source = dwra;
                cursorImg.Width = xsize;
                cursorImg.Height = ysize;
                cursorImg.Stretch = Stretch.Fill;
                cursorImg.Effect = new BlurEffect() { Radius = 20 };
                Canvas.SetLeft(cursorImg, e.GetPosition((Canvas)sender).X-(xsize/2));
                Canvas.SetTop(cursorImg, e.GetPosition((Canvas)sender).Y- (ysize / 2));
     
                Pad.Children.Add(cursorImg);
                Pad.UpdateLayout();
    
                //Pad.drawingGroup.Children.Add(geometryDrawing);
            }

    Best regards

    Yong Lu


    MSDN Community Support
    Please remember to click "Mark as Answer" the responses that resolved your issue, and to click "Unmark as Answer" if not. This can be beneficial to other community members reading this thread. If you have any compliments or complaints to MSDN Support, feel free to contact MSDNFSF@microsoft.com.

    Thursday, June 20, 2019 5:57 AM
    Moderator
  • Sorry! but it is not very efficient. I have already tried some thing like it. I used shapes because I could directly apply effects onto them and can be added directly to the canvas without using any other parent element, but after adding too many ellipse it start lagging.

    I still did not get my answer. I thing this is not possible this way perhaps I am on wrong way, am I ?. 

    Thank you vary much for helping.


    Nehal Ahmad

    Sunday, June 23, 2019 2:25 PM
  • Sorry! but it is not very efficient. I have already tried some thing like it. I used shapes because I could directly apply effects onto them and can be added directly to the canvas without using any other parent element, but after adding too many ellipse it start lagging.

    I still did not get my answer. I thing this is not possible this way perhaps I am on wrong way, am I ?. 

    Thank you vary much for helping.


    Nehal Ahmad

    Hi NehalAhmad,   

    You may can try to change your ways.

    Best regards

    Yong Lu

    MSDN Community Support
    Please remember to click "Mark as Answer" the responses that resolved your issue, and to click "Unmark as Answer" if not. This can be beneficial to other community members reading this thread. If you have any compliments or complaints to MSDN Support, feel free to contact MSDNFSF@microsoft.com.

    • Marked as answer by NehalAhmad Monday, June 24, 2019 10:14 AM
    Monday, June 24, 2019 5:56 AM
    Moderator