在 xamarin 表单布局中自动调整图像大小

Question

我对 xamarin 表单很陌生，所以如果我问了明显的问题，我很抱歉。 我需要建立一个带有标签和图片的框架。它应该如下所示

现在我已经试过了：

<Frame OutlineColor="#2e5982"
    BackgroundColor="#2e5982"
    HorizontalOptions="Fill"
    Grid.Column="0"
    Margin="0">
    <Frame.Content>
        <StackLayout Orientation="Vertical" HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand">
            <Label x:Name="LbSecsHead" Font="Arial" TextColor="White" Text="Status" HorizontalOptions="Center"/>
            <Grid HorizontalOptions="Fill" VerticalOptions="Fill">
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="50*"/>
                    <ColumnDefinition Width="50*"/>
                </Grid.ColumnDefinitions>
                <StackLayout Orientation="Vertical" VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand" Grid.Column="0">
                    <StackLayout Orientation="Horizontal" BackgroundColor="Accent">
                        <Image x:Name="SignalSec6" Source="{local:ImageResource Fusion.Pictures.GreenSignalMaterialOff.png}" Aspect="Fill" HorizontalOptions="Start" VerticalOptions="Start"/>
                        <Label Font="Arial" TextColor="White" Text="6" HorizontalOptions="Center"/>
                    </StackLayout>
                </StackLayout>
                <StackLayout Orientation="Vertical" VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand" Grid.Column="1">
                    <StackLayout Orientation="Horizontal">
                        <Image x:Name="SignalSec5" Source="{local:ImageResource Fusion.Pictures.GreenSignalMaterialOn.png}" Aspect="Fill" HorizontalOptions="Start" VerticalOptions="Start"/>
                        <Label Font="Arial" TextColor="White" Text="5" HorizontalOptions="Center"/>
                   </StackLayout>                                        
               </StackLayout>
           </Grid>
       </StackLayout>
   </Frame.Content>
</Frame>

框架位于外部布局的网格列内，这里我只限于前两个图标，因为垂直堆叠的多个相同项目的结果是相同的。不管我用水平和垂直选项做了多少次试验，我总是得到这个：

相对于外部布局的框架尺寸正确，但内部元素不正确。奇怪的想法（至少对我来说）是图片看起来像是在堆栈布局之外，从布局的粉红色背景可以看出。基本上我需要图片来自动调整布局。

任何提示将不胜感激

谢谢

Answer 1

您需要使用Span：

Spans – 将元素配置为跨越多行或多列。

<Label Text="SEC" FontSize="40" HorizontalOptions="CenterAndExpand"/>
<Grid HorizontalOptions="CenterAndExpand">
  <Grid.RowDefinitions>
    <RowDefinition Height="80" /> 
    <RowDefinition Height="80" /> 
    <RowDefinition Height="80" /> 
    <RowDefinition Height="80" /> 

  </Grid.RowDefinitions>
  <Grid.ColumnDefinitions>
    <ColumnDefinition Width="80" />
    <ColumnDefinition Width="80" />
  </Grid.ColumnDefinitions>

 <StackLayout Grid.Row="0" Grid.Column="0" VerticalOptions="CenterAndExpand" Orientation="Horizontal">
              <Image HeightRequest="30" WidthRequest="30" Source="https://www.warm-glass.co.uk/images/products/20cm-deep-royal-blue-precut-glass-circle-11145052.jpg" />
              <Label Text="6" FontSize="30" TextColor="Gray" /> 
 </StackLayout>

 <StackLayout Grid.Row="1" Grid.Column="0" VerticalOptions="CenterAndExpand" Orientation="Horizontal">
              <Image HeightRequest="30" WidthRequest="30" Source="https://www.warm-glass.co.uk/images/products/20cm-deep-royal-blue-precut-glass-circle-11145052.jpg" />
              <Label Text="4" FontSize="30" TextColor="Gray" /> 
 </StackLayout>            

 <StackLayout Grid.Row="2" Grid.Column="0" VerticalOptions="CenterAndExpand" Orientation="Horizontal">
              <Image HeightRequest="30" WidthRequest="30" Source="https://www.warm-glass.co.uk/images/products/20cm-deep-royal-blue-precut-glass-circle-11145052.jpg" />
              <Label Text="2" FontSize="30" TextColor="Gray" /> 
 </StackLayout>             

 <StackLayout Grid.Row="3" Grid.Column="0" VerticalOptions="CenterAndExpand" Orientation="Horizontal">
              <Image HeightRequest="30" WidthRequest="30" Source="https://www.warm-glass.co.uk/images/products/20cm-deep-royal-blue-precut-glass-circle-11145052.jpg" />
              <Label Text="0" FontSize="30" TextColor="Gray" />    
 </StackLayout>


 <StackLayout Grid.Row="0" Grid.RowSpan="2" Grid.Column="1"
              VerticalOptions="CenterAndExpand" Orientation="Horizontal" >
              <Image HeightRequest="30" WidthRequest="30" Source="https://www.warm-glass.co.uk/images/products/20cm-deep-royal-blue-precut-glass-circle-11145052.jpg" />
              <Label Text="5" FontSize="30" TextColor="Gray" /> 
 </StackLayout>           


 <StackLayout Grid.Row="1" Grid.RowSpan="2" Grid.Column="1"
              VerticalOptions="CenterAndExpand" Orientation="Horizontal" >
              <Image HeightRequest="30" WidthRequest="30" Source="https://www.warm-glass.co.uk/images/products/20cm-deep-royal-blue-precut-glass-circle-11145052.jpg" />
              <Label Text="3" FontSize="30" TextColor="Gray" />  
 </StackLayout>          

 <StackLayout Grid.Row="2" Grid.RowSpan="2" Grid.Column="1"
              VerticalOptions="CenterAndExpand" Orientation="Horizontal" >
              <Image HeightRequest="30" WidthRequest="30" Source="https://www.warm-glass.co.uk/images/products/20cm-deep-royal-blue-precut-glass-circle-11145052.jpg" />
              <Label Text="1" FontSize="30" TextColor="Gray" />  
 </StackLayout> 


</Grid>