locked
WPF Visual Studio 2012 -- Blur & Transitions/Movements RRS feed

  • Question

  • Hey,

    I've been struggling in WPF, in Blend and VisualStudio2012, to get this Blur effect done the right way. But around every corner I'm being hit with a giant performance hammer.

    Right now I have this window (1920x1200 fullscreen) with many complex elements on it (lets call it the mainview). When I perform a doubleclick (or whatever-event) I wanted to show a screen covering the whole window (let's call it a topview). However the complex elements on the mainview should still be visible, but get a blur-effect. This is done with a viewbox that slides with the topview.

    Here I got my first problem, when I blur my mainview, and make my topview slide over my blurred mainview. It shocks and performs really poorly.

    This is pretty much fixable by removing the blur effect until after the transition. However it doesn't remedy the problem.
    This topview has a scrollviewer with items that a user can drag and drop to perform ordering changes etcetc. This drag & drop behaviour is done by making an image of the element and assign the touch/mouse actions to it.

    However when I move my item around, it lags around and stutters over my blurred mainview just like the transition of the topview.

    How can I fix this stuttering? When the blur is gone the stuttering stops as well. This is however not what I want.
    Can we fix this with normal WPF behaviour or should I rather try to do this in a repeating background task/thread?

    The normal WPF behaviour doesn't seem to be the solution. So I've tried doing this in a Background task. This had slightly more effect however I couldn't get the blur-effect added to my renderTargetBitmap.

    Can anyone help me out?
    ---------------------------------------------------
    This is how far I've got:

    private void BeginTask()
    {
    Task taskA = Task.Factory.StartNew(() =>
    {
    while (true)
    {
    Thread.Sleep(3000);
    Console.WriteLine("Image Creation Started");
    
    RenderTargetBitmap rtb = null;
    
    Application.Current.Dispatcher.Invoke(DispatcherPriority.Normal, new Action(delegate
    {
    try
    {
    // Update Your UI Here
    Console.WriteLine("Get element 2 B blurred");
    StackPanel panel = FindVisualChildByName<StackPanel>(Application.Current.MainWindow, "stackpanel");
    UIElement blurredElement = panel as UIElement;
    
    Size size = blurredElement.RenderSize;
    
    RenderTargetBitmap rtb2 = new RenderTargetBitmap((int)size.Width, (int)size.Height, 96, 96, PixelFormats.Pbgra32);
    
    rtb2.Render(blurredElement);
    rtb = (RenderTargetBitmap)rtb2.Clone();
    }
    catch (Exception e)
    {
    Console.WriteLine(e.Message.ToString());
    Console.WriteLine(e.StackTrace.ToString());
    }
    
    
    }));
    
    Console.WriteLine("Element was not null");
    
    //add blur here?
    
    Application.Current.Dispatcher.Invoke(DispatcherPriority.Normal, new Action(delegate
    {
    try
    {
    Console.WriteLine("Setting the new blurred bitmap to an Image");
    
    Image image = FindVisualChildByName<Image>(Application.Current.MainWindow, "someImage");
    if (image != null)
    {
    image.Source = (RenderTargetBitmap)rtb.Clone();
    }
    }
    catch (Exception e)
    {
    Console.WriteLine(e.StackTrace.ToString());
    }
    }));
    
    
    Console.WriteLine("End of Thread cycle");
    }
    }, TaskCreationOptions.LongRunning);
    }





    I've also found certain solutions that cannot help me since they are visualstudio2008/2010. And I couldn't convert them...

    *http://www.codeproject.com/Articles/642151/Pixel-shaders-in-a-background-thread-in-WPF
    *http://silverlight.bayprince.com/tutorials.php?tutorial=3

    Any help would be kindly appreciated.



     
    Monday, December 9, 2013 12:07 PM

Answers

  • Have a look at this example:
    BitmapSource bitmap=GetYourBitmap();
    Rectangle r=new Rectangle();
    r.Background=new ImageBrush(bitmap);
    r.Effect=yourEffect;
    
    Size sz=new Size(bitmap.PixelWidth, bitmap.PixelHeight);
    r.Measure(sz);
    r.Arrange(new Rect(sz);
    
    var rtb=new RenderTargetBitmap();
    rtb.Render(r);
    return rtb;//here is your bitmap with effects applied

    Hope this helps
    • Marked as answer by Yang,Chenfei Thursday, December 19, 2013 12:32 PM
    Friday, December 13, 2013 2:13 AM

All replies

  • That post is terribly outdated (2008) though. And I've found that the blur-effect is really intensive during transitions and movements (like drag&drop). And thus the experiment with background tasks/threads etc.

    Is it still relevant to my case. And can't this be solved with a bg process?

    Wednesday, December 11, 2013 8:40 AM
  • Have a look at this example:
    BitmapSource bitmap=GetYourBitmap();
    Rectangle r=new Rectangle();
    r.Background=new ImageBrush(bitmap);
    r.Effect=yourEffect;
    
    Size sz=new Size(bitmap.PixelWidth, bitmap.PixelHeight);
    r.Measure(sz);
    r.Arrange(new Rect(sz);
    
    var rtb=new RenderTargetBitmap();
    rtb.Render(r);
    return rtb;//here is your bitmap with effects applied

    Hope this helps
    • Marked as answer by Yang,Chenfei Thursday, December 19, 2013 12:32 PM
    Friday, December 13, 2013 2:13 AM