stigzler
stigzler

Reputation: 993

Implementing multiple shader Effects on a WPF Content Control

I'm designing an app which allows users to place UIElements on a Canvas and move them about (think diagramming apps). This allows any UIElement (Images, Video etc) to be added.

I'm doing this through code-only, so not full xmal/mvvm architecture. I'm needing some help with conceptualisation/structure. The aim is to be able to apply multiple Effects to the custom ContentControl that contains the UIElement (e.g. Blur, Monotone and DropShadow). Reading into this, it appears as though WPF only allows one shader/Effect per UiElement.

I have seen some hacky approaches that suggest nesting the visual inside other content controls and applying shaders to those 'outer controls.' However, I just can't conceptualise how I will do this with my current architecture.

An abstraction of my current code:

Public Class DesignItem
    Inherits ContentControl

    Public Property Position() as Point
    Public Property Size() as Size
    ' Amongst others..
End Class

Public Class MainApp

    Public Sub New()

        Dim im As New Image

        With im
            .Source = New BitmapImage(New Uri("C:\Users\dave\Pictures\CaveMan.png"))
        End With

        Dim myGreyScaleEffect As New GrayscaleEffect
        Dim myBlurEffect As New BlurEffect
        Dim myDropShadowEffect As New DropShadowEffect
        
        Dim di As New DesignItem
        With di
            .Position = New Point(100 + i, 100 + i)
            .Effect = myGreyScaleEffect
        End With

        Dim designSurface as new DesignSurface()        

        designSurface.AddDesignItem(di)
        
    End Sub

End Class

Public Class DesignSurface

    Public Sub AddDesignItem(di As DesignItem)
        Canvas.SetLeft(di, di.Position.X)
        Canvas.SetTop(di, di.Position.Y)
        DesignCanvas.Children.Add(di)
    End Sub

End Class

Conceptually, I will need to nest the DesignItem di inside two other border controls to host the other two shader effects (dropshadow and blur). I reference the original di throughout DesignSurface, but short of creating numerous parent DesignItems for the original and copying properties 'outwards' (which seems wasteful/smelly) I'm a bit stuck on how to approach this. Just a shame multi Effects on one UiElement wasn't built into WPF.

Any ideas? (P.S. Forgive the vb - it's a very old code base from when I was still in short pants!)

Upvotes: 0

Views: 42

Answers (0)

Related Questions