Xamarin forms: Frame Shadow custom renderer

Question

I have a custom renderer to be able to change the properties of the Layer that mount the shadow, however this frame after shown on the screen, when I need to change its size does not "take" the shadow together. The shadow stays where I was before, I use a custom renderer because the native shadow is very "strong" and I have not found a way to change it.

Any suggestions for what is missing so that this is normal? I have already tried to take it to the propertychanged of the frame and have it do the Draw again but it was not solved.

Custom renderer:

public override void Draw(CGRect rect)
        {
            base.Draw(rect);
            Layer.ShadowRadius = 3;
            Layer.ShouldRasterize = true;
            Layer.ShadowColor = UIColor.Gray.CGColor;
            Layer.ShadowOffset = new CGSize(0, 1);
            Layer.ShadowOpacity = 0.25f;
            Layer.ShadowPath = UIBezierPath.FromRoundedRect(Layer.Bounds, Element.CornerRadius).CGPath;
            Layer.MasksToBounds = false;
        }

Cardfarme xaml:

<?xml version="1.0" encoding="utf-8" ?>
<customControls:CardFrame
    x:Class="dragon.Views.UserControls.CardListUserControl"
    xmlns="http://xamarin.com/schemas/2014/forms"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
    xmlns:b="clr-namespace:Prism.Behaviors;assembly=Prism.Forms"
    xmlns:customControls="clr-namespace:dragon.CustomControls;assembly=dragon"
    HasShadow="True"
    MinimumHeightRequest="160">

    <Frame
        x:Name="ColoredFrame"
        CornerRadius="3"
        HasShadow="False">
        <Frame Style="{StaticResource CardWhiteFrame}">
            <StackLayout
                x:Name="Teste"
                HorizontalOptions="Fill"
                Spacing="10"
                Style="{StaticResource CardContentStacklayoutStyle}">
                <StackLayout HorizontalOptions="Fill" Orientation="Horizontal">
                    <Label
                        x:Name="HeaderLabel"
                        Style="{StaticResource CardHeaderTextStyle}"
                        Text="{Binding HeaderText}" />
                    <Image
                        x:Name="ImgAbout"
                        Margin="0,5,0,15"
                        HorizontalOptions="EndAndExpand"
                        Source="about1.png" />
                </StackLayout>

                <ListView
                    x:Name="CardItemsList"
                    ItemsSource="{Binding ItemsList}"
                    SeparatorColor="LightGray"
                    VerticalOptions="StartAndExpand">
                    <ListView.ItemTemplate>
                        <DataTemplate>
                            <ViewCell>
                                <Grid Margin="5,0,10,0">
                                    <Grid.ColumnDefinitions>
                                        <ColumnDefinition Width="*" />
                                        <ColumnDefinition Width="Auto" />
                                    </Grid.ColumnDefinitions>
                                    <Label
                                        Grid.Column="0"
                                        HorizontalOptions="Start"
                                        LineBreakMode="TailTruncation"
                                        Text="{Binding .}"
                                        TextColor="#333333"
                                        VerticalOptions="Center" />
                                    <Grid
                                        Grid.Column="1"
                                        HorizontalOptions="FillAndExpand"
                                        VerticalOptions="FillAndExpand">
                                        <Grid.GestureRecognizers>
                                            <TapGestureRecognizer Command="{Binding Path=BindingContext.RemoveCommand, Source={x:Reference CardItemsList}}" CommandParameter="{Binding .}" />
                                        </Grid.GestureRecognizers>
                                        <BoxView
                                            x:Name="RemoveBoxView"
                                            Grid.Column="1"
                                            CornerRadius="2"
                                            HeightRequest="3"
                                            HorizontalOptions="Center"
                                            VerticalOptions="Center"
                                            WidthRequest="30"
                                            Color="{StaticResource DefaultRedColor}" />
                                    </Grid>
                                </Grid>
                            </ViewCell>
                        </DataTemplate>
                    </ListView.ItemTemplate>
                </ListView>
                <Entry
                    x:Name="EntryOfNewItemToInsert"
                    IsVisible="False"
                    Placeholder="Inserir novo item"
                    Text="{Binding NewItemToAdd}"
                    Unfocused="EntryOfNewItemToInsert_Unfocused">
                    <Entry.Behaviors>
                        <b:EventToCommandBehavior Command="{Binding InserNewItemCommand}" EventName="Unfocused" />
                    </Entry.Behaviors>
                </Entry>
                <Button
                    x:Name="Button"
                    Clicked="Button_Clicked"
                    Style="{StaticResource DefaultOrangeButtonStyle}"
                    Text="{Binding ButtonText}" />
            </StackLayout>
        </Frame>
    </Frame>
</customControls:CardFrame>

Print:

In the image we have the first card with items inside the list that makes it expand and in the other card without changes in the list (no need to expand) is correct as it should, remembering that if the native shadow works, and Android is working too because it has no custom renderer applied.

Luiz Negrini Luiz Negrini · Accepted Answer · 2018-10-23T20:01:39

Override OnElementPropertyChanged like this:

protected override void OnElementPropertyChanged(object sender, System.ComponentModel.PropertyChangedEventArgs e)
{
     var rect = new CGRect(0, 0, 0, 0);
     SetNeedsDisplay();
}

Xamarin forms: Frame Shadow custom renderer

1 Answers