Prevent Rectangles/Font From Being Cached/Blurred WPF

Question

I have a project where I'm using Canvas, Rectangle and some Labels to create various UI elements. I have an effect where, when I roll over these elements, they are slightly scaled up to indicate to the user that the control is alive and will respond to input. The issue I'm having however, is that these elements seem to be getting cached as bitmaps and when they scale up, they all blur. The vector elements in Canvas, the text, etc.

Notice the difference between the Statistics button and the Filter Settings button (of the same size) below.

I've only found a couple suggestions for fixing this, and neither seem to be working. The first is to set the BitmapScalingMode in the main window to Fant.

xmlns:Media="clr-namespace:System.Windows.Media;assembly=PresentationCore"
Media:RenderOptions.BitmapScalingMode="Fant"

The second was to do the same thing programmatically for individual items, yet the problem still persists.

Note, a third suggestion was to set the scaling mode in XAML and increase the RenderAtScale value, but again this had no effect.

<Rectangle.CacheMode>
     <BitmapCache EnableClearType="true" RenderAtScale="4"/>
</Rectangle.CacheMode>

Wondering if anyone knows how to solve this. Thanks in advance.

Answer 1

After doing some more digging, I found the answer is another answer. Usually in this situation, I would just delete my question and not answer, but this situation is similar, not exactly the same, to the Q and A linked here.

From the linked answer:

I encountered a problem the other day when I used a border which had a DropShadowEffect applied. The result was that all text inside that border was extremely blurry. It doesn't matter if text was inside other panels or directly under the border - any text block that is child of parent that has an Effect applied seems to be affected.

It turns out however, that text isn't the only thing affected. I had a very mild drop shadow placed on these elements, and it caused everything to go fuzzy, including vector art. The proposed solution is to create separate elements that live outside the hierarchy of the elements you are trying to keep crisp, and then apply the effect to those elements.