我有一個 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
只是為了展示它的行為方式
uj5u.com熱心網友回復：
首先，您可以在專案中創建一個新框架來檢查原因是否是渲染器。如：
<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());
}
}
}
但在我的專案中，它們都正確顯示。因此，如果您需要更多資訊，可以查看以下鏈接。
鏈接：
如果您的專案的平臺是 ios，請檢查這種情況：Forms frame is not the same on iOS
轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/478594.html