在xamarin形式的其他图像之上的图像的一半

时间:2017-08-29 13:35:58

标签: xaml layout xamarin.forms

我正在使用xamarin表格 我需要创建一个布局,其中两个对象的位置如下:

enter image description here

另一个对象(正方形)上方的一半(圆圈)

我搜索过,似乎我需要使用相对布局...... 我试图将两个对象设置在同一个网格中(行和行0),然后使用constraintX将第二个设置在同一个Y中,因子0和负常数......但它没有做到工作。删除线条并且不能在这里显示,不幸的是......在这里发生的唯一事情是:两者在y中的位置相同,但我可以像上面的图像那样做... 有人可以用一个例子,想法或任何东西来帮助我吗?非常感谢你!

我的代码现在 - rodape图像是方形,重新加载是圆形 我现在事实上重新加载在广场下是错误的,但是,现在,它假装视觉......它给了我一个我想要的结果......但不完全

<!--Rodapé Grid-->
<RelativeLayout HorizontalOptions="FillAndExpand" 
                VerticalOptions="EndAndExpand" 
                BackgroundColor="Black">
    <Grid BackgroundColor="Red"
           RelativeLayout.WidthConstraint="{ConstraintExpression Type=RelativeToParent,
                                                                 Property=Width,
                                                                 Factor=1,
                                                                 Constant=0}">
        <Grid.RowDefinitions>
            <RowDefinition Height="*"/>
        </Grid.RowDefinitions>

        <Image Source="rodape.png" 
               Aspect="Fill"
               HorizontalOptions="FillAndExpand"
               Grid.Row="0"
               Grid.Column="0">
            <Image.GestureRecognizers>
                <TapGestureRecognizer Tapped="FranqueadoOnTapGestureRecognizerTapped"/>
            </Image.GestureRecognizers>
        </Image>
        <!--Escrito Rodapé-->
        <StackLayout Orientation="Vertical"
                     VerticalOptions="End"
                     HorizontalOptions="FillAndExpand"
                     Grid.Row="0"
                     Spacing="0"
                     Grid.Column="0">
            <Image Source="reloadicon.png"/>
            <StackLayout Orientation="Horizontal" 
                         HorizontalOptions="Center">
                <local:MyLabel NamedFontSize="Medium" 
                               FontSizeFactor="0.7" 
                               Text="Seja um Franqueado:"
                               TextColor="White"
                               FontAttributes="Bold"
                               Style="{StaticResource labelsfont}"/>
                <local:MyLabel NamedFontSize="Medium" 
                               FontSizeFactor="0.7" Text="montanaexpress.com"
                               Style="{StaticResource labelsfont}"
                               TextColor="{StaticResource laranjacolor}"/>              
            </StackLayout>
        </StackLayout>
    </Grid>
</RelativeLayout>

1 个答案:

答案 0 :(得分:6)

尝试这样的事情,我认为这更简单:

<Grid>
    <BoxView Grid.Column="0" Grid.Row="1"
             Color="Red"
             HeightRequest="20"
             HorizontalOptions="FillAndExpand"/>
    <Frame Grid.Column="0" Grid.Row="0" Grid.RowSpan="2"
           BackgroundColor="Yellow"
           HorizontalOptions="CenterAndExpand"
           VerticalOptions="CenterAndExpand"
           WidthRequest="40"
           HeightRequest="40"
           CornerRadius="40"
           Margin="0,5,0,10"/>
</Grid>

你会得到什么: enter image description here

修改

正如您在评论中所要求的,使用您的图片时,您应该执行以下操作:

<Grid>   
    <Image Grid.Row="1" Grid.Column="0"
           Source="rodape.png" 
           Aspect="Fill"
           HorizontalOptions="FillAndExpand">
        <Image.GestureRecognizers>
            <TapGestureRecognizer Tapped="FranqueadoOnTapGestureRecognizerTapped"/>
        </Image.GestureRecognizers>
    </Image>               
    <Image Grid.Column="0" Grid.Row="0" Grid.RowSpan="2"
           Source="reloadicon.png"
           HorizontalOptions="CenterAndExpand"
           VerticalOptions="Center"/>
</Grid>

注意:我无法弄清楚标签和图像应如何在布局中显示。您必须手动添加