Home > Net >  Can Maui configure a shadow in a line?
Can Maui configure a shadow in a line?

Time:09-29

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>

CodePudding user response:

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>
  • Related