Xamarin MasterDetailPage用图像填充标题

问题描述

我在Xamarin Forms上遇到此问题： white empty space on listview

我想用背景图像填充空白区域（我已经尝试过verticaloptions和horizo​​ntaloptions = 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- 结果：result test 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-结果：result test 2

解决方法

将Aspect="Fill"设置为图像，它将填充空白。

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