Effects like a Blur\Shadows

[vertexpipeline]

I want to make a card in Material Design that implies shadow effect. Are there any capabilities to do it?

WPF has a Effect Parameter, does Avalonia has something similar?

[danwalmsley]

No built in effects yet, perhaps it might be possible with some kind of border and a gradient brush. Would be nice to get support for this though.

[vertexpipeline]

How I understood, rendering API doesn't support shaders like in WPF?

[Sorien]

You don't need shader support, there is shadow effect build in d2d https://msdn.microsoft.com/en-us/library/windows/desktop/hh706334(v=vs.85).aspx and skia https://developer.xamarin.com/api/member/SkiaSharp.SKImageFilter.CreateDropShadow/ but its not implemented in avalonia

#124

[vertexpipeline]

Thanks, I'll try to implement this feature where I can

[maxkatz6]

Just for case, there is BoxShadow in Avalonia 0.10+
#3871

Although there still no convenient in-app blur.

[balthild]

In Avalonia v0.10.0-rc1, If I wrap BoxShadow value into multiple lines, for example,

                    <Setter Property="BoxShadow">
                        <Setter.Value>
                            inset -1 0 1 -1 #10000000,
                            inset -2 0 2 -2 #20000000,
                            inset -6 0 6 -6 #16000000,
                            inset -16 0 16 -16 #16000000
                        </Setter.Value>
                    </Setter>

then the view cannot load (but don't throw any exceptions). Is this intended?

[maxkatz6]

but don't throw any exceptions

It throws:
System.FormatException: 'One of the identified items was in an invalid format.'
Avalonia.Media.BoxShadow.Parse(string)
Avalonia.Media.BoxShadows.Parse(string)

It can't parse '\n' separator.
Following code works fine:

<Setter Property="BoxShadow">
    <Setter.Value>
        inset -1 0 1 -1 #10000000, inset -2 0 2 -2 #20000000, inset -6 0 6 -6 #16000000, inset -16 0 16 -16 #16000000
    </Setter.Value>
</Setter>

I am not sure if it is expected by CSS specs or should be filled a bug for that.

[balthild]

Oh, sorry... Didn't noticed that the exception is caught internally.

In CSS, newlines are allowed between tokens for all property, but not inside quoted values. Sometimes newlines are useful for keeping code tidy. The following code is valid in Chrome and Firefox:

.ugly-syntax {
  box-shadow: 10px  
      5px         5px
   blue,
-10px -10px 4px
   red;
font-family: Segoe
                UI, sans-serif;
}

and this does not:

.invalid-syntax {
font-family: "Segoe
                UI", sans-serif;
}

[maxkatz6]

We have BoxShadow for a while and now we have effects Effect="blur(10)" syntax in 11.0