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：

跨度 –将元素配置为跨多个行或列。

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

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

1 个答案: