Xamarin

Question

我有一个 Xamarin Forms 项目，我正在尝试像这样显示框架阴影

但它显示的是这样，阴影只出现在角落

我无法像第一张图一样到处显示

这是我的代码：

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:viewmodels="clr-namespace:AppCrijoya.ViewModels" 
             xmlns:model="clr-namespace:AppCrijoya.Models" 
             x:Class="AppCrijoya.Views.InvoicePage"
             x:DataType="viewmodels:InvoiceViewModel"
             Title="Facturas">
        <!--<ContentPage.BindingContext>
            <viewmodels:InvoiceViewModel />
        </ContentPage.BindingContext>-->

    <ContentPage.Content>

        <StackLayout BackgroundColor="White">
            <CollectionView x:Name="ListViewCart" 
                            ItemsSource="{Binding ListCart}" 
                            SelectionMode = "Single"
                            SelectedItem="{Binding CartSelected}"
                            SelectionChangedCommand="{Binding ShowAlertCommand}"
                            SelectionChangedCommandParameter="{Binding CartSelected, Source={RelativeSource Self}}"
                            >
                <CollectionView.ItemTemplate>
                    <DataTemplate x:DataType="model:Invoice">
                        
                            <Frame Margin="2" CornerRadius="30" HasShadow="True">
                                <Grid Margin="0" HorizontalOptions="FillAndExpand" VerticalOptions="Center" HeightRequest="160" RowSpacing="0" ColumnSpacing="0">
                                    <Grid.RowDefinitions>
                                        <RowDefinition Height="auto"/>
                                        <RowDefinition Height="auto"/>
                                        <RowDefinition Height="auto"/>
                                        <RowDefinition Height="auto"/>
                                        <RowDefinition Height="auto"/>
                                        <RowDefinition Height="auto"/>
                                        <RowDefinition Height="auto"/>
                                    </Grid.RowDefinitions>
                                    <Grid.ColumnDefinitions>
                                        <ColumnDefinition Width="5*"/>
                                        <ColumnDefinition Width="3*"/>
                                        <ColumnDefinition Width="2*"/>
                                    </Grid.ColumnDefinitions>
                                    <Label Grid.Row="0" Grid.Column="0" Text="Nombre del Cliente:" VerticalOptions="Start"/>
                                    <Label Grid.Row="0" Grid.Column="1" Grid.ColumnSpan="2" Text="{Binding Name}" VerticalOptions="Start"/>
                                    <Image Source="arrow_dropdown.png" HeightRequest="20" WidthRequest="20" Grid.Row="0" Grid.Column="3" VerticalOptions="End"/>

                                    <Label Grid.Row="1" Grid.Column="0" Text="Fecha Compra:" VerticalOptions="Start"/>
                                    <Label Grid.Row="1" Grid.Column="1" Grid.ColumnSpan="2" Text="{Binding Date}" VerticalOptions="Start"/>

                                    <Label Grid.Row="2" Grid.Column="0" Text="Monto Total:" VerticalOptions="Start"/>
                                    <Label Grid.Row="2" Grid.Column="1" Grid.ColumnSpan="2" Text="{Binding Total, Mode=TwoWay, StringFormat='{0:N2}€'}" VerticalOptions="Start"/>

                                    <Label Grid.Row="3" Grid.ColumnSpan="3" Text="Detalle Compra" VerticalOptions="Start"/>
                                    <BoxView Grid.Row="4" Grid.ColumnSpan="3" Color="Gray" HeightRequest="2" HorizontalOptions="Fill" />

                                    <Label Grid.Row="5" Grid.Column="0" Text="Nombre" VerticalOptions="Start" TextColor="#9C2424"/>
                                    <Label Grid.Row="5" Grid.Column="1" Text="Monto" VerticalOptions="Start" TextColor="#9C2424"/>
                                    <Label Grid.Row="5" Grid.Column="2" Text="Cantidad" VerticalOptions="Start" TextColor="#9C2424"/>

                                    <StackLayout Grid.Row="6" Grid.ColumnSpan="3" Margin="0" Padding="0">
                                        <CollectionView x:Name="ListViewOrders" 
                                                        ItemsSource="{Binding ListOrders}" 
                                                        SelectionMode = "None"
                                                        >
                                            <CollectionView.ItemTemplate>
                                                <DataTemplate x:DataType="model:CrOrder">
                                                  
                                                        <Grid RowSpacing="0" ColumnSpacing="0" Margin="0" MinimumHeightRequest="50">
                                                            <Grid.ColumnDefinitions>
                                                                <ColumnDefinition Width="5*"/>
                                                                <ColumnDefinition Width="3*"/>
                                                                <ColumnDefinition Width="2*"/>
                                                            </Grid.ColumnDefinitions>
                                                            <Grid.RowDefinitions>
                                                                <RowDefinition/>
                                                            </Grid.RowDefinitions>
                                                            <Label Grid.Row="0" Grid.Column="0" Text="{Binding Reference}" TextColor="Black" VerticalOptions="Center" FontSize="12" />
                                                            <Label Grid.Row="0" Grid.Column="1" Text="{Binding Price, StringFormat='{0:N2}€'}" TextColor="Black" VerticalOptions="End" FontSize="12" />
                                                            <Label Grid.Row="0" Grid.Column="2" Text="{Binding Quantity}"  TextColor="Black" VerticalOptions="End" FontSize="12"/>
                                                        </Grid>

                                                   
                                                </DataTemplate>
                                            </CollectionView.ItemTemplate>
                                        </CollectionView>
                                    </StackLayout>
                                </Grid>
                            </Frame>
                        
                    </DataTemplate>
                </CollectionView.ItemTemplate>
            </CollectionView>
        </StackLayout>
    </ContentPage.Content>
</ContentPage>

我该怎么做才能在框架周围显示阴影？请帮助和感谢。

编辑

这是我在 Frame 上设置 Margin=2 的结果

保证金=50

填充=50

只是为了展示它的行为方式

Answer 1

首先，您可以在您的项目中创建一个新的框架来检查原因是否是渲染器。如：

<Frame  Margin="20"  CornerRadius="10"  HasShadow="True">
   <Label Text="TestShaw" HorizontalOptions="Center"/>
</Frame>

如果阴影显示正确，原因可能是布局或框架的边距。所以你可以改变它的值。

如果阴影也显示不正确，您可能需要为框架使用自定义渲染器。如：

  [assembly: ExportRenderer(typeof(Myframe), typeof(MyFrameRenderer))]
  namespace App36.Droid
 {
    public class MyFrameRenderer : Xamarin.Forms.Platform.Android.FastRenderers.FrameRenderer
   {
    public MyFrameRenderer(Context context) : base(context)
    {
    }
    protected override void OnElementChanged(ElementChangedEventArgs<Frame> e)
    {
        base.OnElementChanged(e);
        CardElevation = 50;
        SetOutlineSpotShadowColor(Xamarin.Forms.Color.Black.ToAndroid());
        SetOutlineAmbientShadowColor(Xamarin.Forms.Color.Black.ToAndroid());
    }

  }    
}

但在我的项目中，它们都显示正确。因此，如果您需要更多信息，可以查看下面的 link。

Link:

这是我项目中的框架：

如果您的项目的平台是 ios，请检查这种情况：Forms frame isn't the same on iOS

Xamarin - 帧阴影显示不正确

Xamarin - Frame Shadow not showing properly

c#

xaml

xamarin.forms

.net-5