0

I am creating a software that uses iOS' design aesthetic. It is a full screen music application and it uses the current track artwork as the blur background of the whole window.

so after i grab and save the CurrentTrackArtwork. I use it as the source for my image control. 

 <Image x:Name="PTrackCoverBlur" width="1450" height="1450" Opacity="0">
       <BlurEffect Radius="15" KernelType="Box" RenderingBias="Performance" RenderOptions.BitmapScalingMode="LowQuality" RenderOptions.EdgeMode="Aliased"/>
 </image>

however, i need a high quality blur that won't make the application hangs up during the saving of the image and reshowing it as a blurred image. but i can't set a Blur Radius higher than 15, or even make it a Gaussian Blur, i even set the RenderingBias to "Performance" but still i'm still having a lag. (everytime the track changes, i set the opacity of the image control to 0 using a storyboard, that's where the lag happens)

<Storyboard x:Key="FadeOutBlurCover" Completed="FadeOutBlurCover_Completed">
        <DoubleAnimation Duration="0:0:0.30" Storyboard.TargetName="PTrackCoverBlur" Storyboard.TargetProperty="Opacity" To="0"/>
        <ColorAnimation Duration="0:0:0.30" Storyboard.TargetName="AppContentMask" Storyboard.TargetProperty="(Panel.Background).(SolidColorBrush.Color)" To="#CCFFFFFF"/>
    </Storyboard>

then I try getting the current track artwork again and reset the image opacity to 1 using a storyboard to reshow the background

 <Storyboard x:Key="FadeInBlurCover" Completed="FadeInBlurCover_Completed">
            <DoubleAnimation Duration="0:0:0.20" Storyboard.TargetName="PTrackCoverBlur" Storyboard.TargetProperty="Opacity" To="1"/>
            <ColorAnimation Duration="0:0:0.20" Storyboard.TargetName="AppContentMask" Storyboard.TargetProperty="(Panel.Background).(SolidColorBrush.Color)" To="#CCF9F9F9"/>
        </Storyboard>

MY PROBLEM IS, it's what makes the application lags and hangs up. when i remove this BlurEffect, everything is smooth, every storyboard works as expected. but the Blur background is one of the most important asset of my application and i don't want to remove it,

Is there anyway that I can load a blur programatically and save it including the blur so i won't have to use a BlurEffect but still have Blur in my application. I prefer VB but any language will be okay.

This application i'm creating is a full functioned music player that is connected to iTunes through COM and there is a lot going on when a track changes, like reloading the previously played tracks. get the information of the new track, show the list of the top played songs and etc. that's is why if anyone can give me a code for a new way to blur an image will be the perfect solution for my application.

Mon Tolentino
  • 23
  • 4

1 Answers1

0

Blur on its own is not too bad. It isn't the best performance but gets really bad when you add opacity and animation. When you think about the number of redraws and recalculates you can kinda see why.

A possible solution would be to transition in your object, then during idle time, capture and present it as an image - use RenderTargetBitmap as described in this stack overflow. Once it is an image, the animation back out will be easier as your just animating an image.

Community
  • 1
  • 1
kidshaw
  • 3,423
  • 2
  • 16
  • 28
  • can you send me a sample code for this one? i'm having a hard time figuring out how this RenderTargetBitmap works. – Mon Tolentino Aug 16 '14 at 05:35
  • what i actually need is *when the song changes, i need to fade out the image and reget the current track artwork* reapply the blur resave the image but this time whit blur effect then use the newly save image as the background image and fade it back in – Mon Tolentino Aug 16 '14 at 05:39