图像位于框架顶部(中心位置)的绝对布局或其他任何xamarin形式

时间:2019-07-11 06:45:45

标签: xamarin xamarin.forms

我必须承认,绝对布局是不会引起我注意的事情。 你能帮忙吗?

我需要在少数屏幕上将图像放在框架-网格等上方,所以我必须找到一种可行的解决方案。

这是我想要实现的

enter image description here

这就是我用boxview(紫色)做的,应该是我的img1。

MyXaml

  <AbsoluteLayout>
    <StackLayout Margin="20">
        <BoxView Color="Purple" WidthRequest="40" HeightRequest="40" 
             AbsoluteLayout.LayoutBounds="0,0,1,1"
             AbsoluteLayout.LayoutFlags="All"></BoxView>
        <Frame
        Padding="0"
        BorderColor="Green"
        CornerRadius="10">
            <Grid>
                <Grid.RowDefinitions>
                    <RowDefinition Height="50" />
                    <RowDefinition Height="50" />
                    <RowDefinition Height="*" />
                    <RowDefinition Height="Auto" />
                    <RowDefinition Height="Auto" />
                </Grid.RowDefinitions>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="*" />
                    <ColumnDefinition Width="*" />
                </Grid.ColumnDefinitions>

                <Grid Grid.Row="0" Grid.ColumnSpan="2">
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="Auto" />
                        <ColumnDefinition Width="*" />
                        <ColumnDefinition Width="*" />
                        <ColumnDefinition Width="Auto" />
                        <ColumnDefinition Width="Auto" />
                    </Grid.ColumnDefinitions>

                    <BoxView Grid.Row="0" Grid.Column="0" Margin="5" Color="Red"/>
                    <BoxView Grid.Row="0" Grid.Column="4" Margin="5" Color="GreenYellow"/>
                </Grid>

                <Label Grid.Row="1" Grid.Column="0" Grid.ColumnSpan="2" HeightRequest="50" BackgroundColor="Coral" Margin="20,0,20,0"
                TextColor="White" Text="Label 3" />
                <!--other stuff down here -->
            </Grid>
        </Frame>
    </StackLayout>
</AbsoluteLayout>

我的结果(如您所见,当我想要的只是上面中间的boxview时,我得到一个长矩形)。你能帮忙吗?

enter image description here

1 个答案:

答案 0 :(得分:3)

这应该可以帮助您入门(我修改了我的演示,因此请进行相应调整):

enter image description here

<AbsoluteLayout x:Name="ViewControls" AbsoluteLayout.LayoutBounds="1,1,1,.50" AbsoluteLayout.LayoutFlags="All" BackgroundColor="#66000000" Margin="10,10,10,10">
    <Frame CornerRadius="10" Margin="20,20,20,20" BackgroundColor="Black" AbsoluteLayout.LayoutFlags="All" AbsoluteLayout.LayoutBounds="1,1,1,1">
        <Grid Margin="1">
            <Grid.RowDefinitions>
                <RowDefinition Height="Auto" />
                <RowDefinition Height="Auto" />
            </Grid.RowDefinitions>
            <Label Text="Left" BackgroundColor="White" HorizontalTextAlignment="Center" Grid.Column="0" />
            <Label Text="Right" BackgroundColor="White" HorizontalTextAlignment="Center" Grid.Column="2" />
            <Label Text="Across Page" BackgroundColor="White" HorizontalTextAlignment="Center" Grid.Row="1" Grid.Column="0" Grid.ColumnSpan="3" />
        </Grid>
    </Frame>
    <Image Source="yt.png" 
        BackgroundColor="Transparent"
        AbsoluteLayout.LayoutFlags="PositionProportional"  
        AbsoluteLayout.LayoutBounds=".5,0,50,50" />
</AbsoluteLayout>