CODEWITHSUNDEEP
c#wpfxaml
mattsven
mattsven

Reputation: 23253

Advanced Effects in WPF?

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

enter image description here

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

Upvotes: 3

Views: 1289

Answers (1)

XAMeLi
XAMeLi

Reputation: 6289

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:

The result

[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.

Upvotes: 2

Related Questions