首页 文章

以xamarin形式布局自动调整图像

提问于
浏览 次
1

我对xamarin表格很新，所以如果我问明显的问题，对不起 . 我需要在其中构建一个带有标签和图片的框架 . 它应该如下所示

the desired result

到现在为止我试过这个：

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

框架位于外部布局的网格列内，此处我仅限于前两个图标，因为垂直堆叠的多个相同项目的结果相同 . 无论我使用水平和垂直选项进行过多次尝试，我总能得到：

actual result

相对于外部布局的框架尺寸是正确的，但不是内部的元素 . 奇怪的想法（至少对我而言）是这张照片看起来像是在stacklayout之外，正如布局的粉红色背景所示 . 基本上我需要图片来自动调整布局 .

任何提示都将不胜感激

谢谢

xamarin.forms

1 回答

  • 0

    你需要使用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>
    回复于

相关问题