Advanced Effects in WPF?

Question

I've been trying to recreate this GUI purely in WPF, and I'm having problems:

• The shadow. The shadow on the main element doesn't show inside the fill - when using DropShadowEffect in WPF, it does. As of yet I've found no solution to this.
• Background images - the main element has a slight pattern in it, a diagonal one. But in WPF, I can't use background images like this. Chances are I'm just missing something.
• The slight inset, in the main element (at the top) - not easily replicated.

So anyway, I guess my question is, how can I accomplish these kinds of effects in WPF?

Answer 1

Hopefully this snippet will point you in the right direction:

<Grid>
    <Border x:Name="Blur"
            BorderThickness="5"
            CornerRadius="5"
            BorderBrush="#7F000000">
        <Border.Effect>
            <BlurEffect Radius="8" />
        </Border.Effect>
    </Border>
    <Border x:Name="Outter"
            BorderBrush="#CCD3D3D3"
            BorderThickness="1"
            CornerRadius="5"
            Margin="2">
        <Border.Background>
            <ImageBrush Viewbox="0,0,45,38"
                        ViewboxUnits="Absolute"
                        Viewport="0,0,45,38"
                        ViewportUnits="Absolute"
                        TileMode="Tile"
                        ImageSource="<SomeImageThatIsATileOfThePattern>"
                        Opacity="0.3"
                        Stretch="Fill" />
        </Border.Background>
    </Border>
    <Border x:Name="Inner"
            BorderThickness="0,1,0,0"
            CornerRadius="5"
            Margin="2,4,2,2"
            BorderBrush="#7FD3D3D3" />
    <ItemsControl Background="HotPink"
                  Margin="11"
                  Height="21" />
</Grid>

The result is:

[I used a generic image, just to show the repetition. The original image is W50xH38 in size - hope the repetition is noticeable]

Play with the values for Viewbox and Viewport to adjust to your image.

Of course, the ItemsControl should not have the pink background and its height should not be a constant, it was done for demo purposes.