Xamarin MasterDetailPage用图像填充页眉



我在Xamarin Forms上遇到了这个问题:listview 上的空白区域

我想用背景图像填补空白(我已经尝试过verticaloptions和horizontaloptions=fillandexpand,但什么都没发生(

XAML代码:

<StackLayout>
<ListView x:Name="MenuItemsListView"
SeparatorVisibility="None"
HasUnevenRows="true"
ItemsSource="{Binding MenuItems}">
<ListView.Header>
<Grid BackgroundColor="GhostWhite">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="10"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="10"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="30"/>
<RowDefinition Height="80"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="10"/>
</Grid.RowDefinitions>
<Image Grid.Column="0" Grid.Row="0" Grid.ColumnSpan="3" Grid.RowSpan="3" x:Name="circlebg" Source="" VerticalOptions="CenterAndExpand" HorizontalOptions="CenterAndExpand"></Image>

<Frame Grid.Column="1" Grid.Row="1" x:Name="circleFrame" HasShadow="False" Padding="0" Margin="0" VerticalOptions="Center" HorizontalOptions="Center" BackgroundColor="Black" BorderColor="White" CornerRadius="10" IsClippedToBounds="True">
<Image x:Name="circleImg" Source=""></Image>
</Frame>

<Label
x:Name="txtName"
Grid.Column="1"
Grid.Row="2"
TextColor="White"
Text=""
HorizontalTextAlignment="Center"
FontFamily="{StaticResource Montserrat-Medium}"
Style="{DynamicResource SubtitleStyle}"/>
</Grid>
</ListView.Header>
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell>
<StackLayout Orientation = "Horizontal" Margin = "10" HorizontalOptions="FillAndExpand">
<Image Source = "{Binding Image}" HorizontalOptions="Start" >
<Image.HeightRequest>
<OnPlatform x:TypeArguments="x:Double">
<On Platform="Android,Windows">30</On>
</OnPlatform>
</Image.HeightRequest>
</Image>
<Label Text = "{Binding Title}" 
VerticalOptions="FillAndExpand" 
FontFamily="{StaticResource Montserrat-Medium}"
VerticalTextAlignment="Center"
FontSize="18"/>
</StackLayout>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
</StackLayout>

那里有人知道我该怎么解决?提前感谢

更新:测试1-结果:结果测试1

<Image Aspect="Fill" Grid.Column="0" Grid.Row="0" Grid.ColumnSpan="3" Grid.RowSpan="3" x:Name="circlebg" Source="" VerticalOptions="CenterAndExpand" HorizontalOptions="CenterAndExpand"></Image>

测试2-结果:结果测试2

设置Aspect="填充";图像,它将填充空间。

<Image Aspect="Fill" Grid.Column="0" Grid.Row="0" Grid.ColumnSpan="3" Grid.RowSpan="3" x:Name="circlebg" Source="Images"  VerticalOptions="CenterAndExpand" HorizontalOptions="CenterAndExpand"></Image>

更新:

<Grid.RowDefinitions>
<RowDefinition Height="30"/>
<RowDefinition Height="80"/>
<RowDefinition Height="100"/>
</Grid.RowDefinitions>

最新更新