Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Can Maui configure a shadow in a line?

I´m developing an app in .net maui and i have a question i have not answered myself through browsing. I'm trying to apply a shadow to a border and the following code works perfectly.

   <Border 
    Style="{StaticResource light-theme-border}"
    Grid.Column="1"
    Grid.Row="3"
    Grid.ColumnSpan="7">
    <Border.Shadow>
        <Shadow 
                Brush="red"
                Offset="1,11"
                Radius="20"
                Opacity="0.25"/>
    </Border.Shadow>
   </Border>

But when i write shadow directly inside the border properties it catches the property but i don't know how to dump the [brush, offset, radius & opacity] info:

    <Border 
        Style="{StaticResource light-theme-border}"
        Grid.Column="1"
        Grid.Row="3"
        Grid.ColumnSpan="7"
        Shadow="???????????????????????????">
    </Border>
like image 392
pablo ramos Avatar asked Jan 31 '26 04:01

pablo ramos


1 Answers

You can then define and consume it as a resource (same what you did with Style property):

<ContentPage.Resources>
        <ResourceDictionary>
            <Shadow
                x:Key="CommonShadow"
                Brush="red"
                Offset="1,11"
                Radius="20"
                Opacity="0.25"/>
    <Border 
        Style="{StaticResource light-theme-border}"
        Grid.Column="1"
        Grid.Row="3"
        Grid.ColumnSpan="7"
        Shadow="{StaticResource CommonShadow}">
    </Border>

Or integrate it in your existing style of Border

<ContentPage.Resources>
        <ResourceDictionary>
    <Style x:Key="light-theme-border" TargetType="Border">
                <Setter Property="WidthRequest" Value="20" />
                <Setter Property="Shadow">
                    <Setter.Value>
                        <Shadow
                            Brush="red"
                            Opacity="1"
                            Radius="50"
                            Offset="20,20" />
                    </Setter.Value>
                </Setter>
            </Style>
    <Border 
        Style="{StaticResource light-theme-border}"
        Grid.Column="1"
        Grid.Row="3"
        Grid.ColumnSpan="7">
    </Border>

Or integrate it in your existing style of Border as a static resource

<ContentPage.Resources>
        <ResourceDictionary>
             <Shadow
                x:Key="CommonShadow"
                Brush="red"
                Offset="1,11"
                Radius="20"
                Opacity="0.25"/>

            <Style x:Key="light-theme-border" TargetType="Border">
                  <Setter Property="WidthRequest" Value="20" />
                  <Setter Property="Shadow" Value="{StaticResource CommonShadow}"/>
            </Style>
        </ResourceDictionary>
</ContentPage.Resources>

    <Border 
        Style="{StaticResource light-theme-border}"
        Grid.Column="1"
        Grid.Row="3"
        Grid.ColumnSpan="7">
    </Border>
like image 102
Cfun Avatar answered Feb 02 '26 01:02

Cfun



Donate For Us

If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!