Xamarin.Forms XAML RelativeLayout can not scroll

LeLGLeLG Member ✭✭
edited April 11 in Xamarin.Forms

Hi guys, i have a piece of code like this
`

    <Frame CornerRadius="6" Padding="0">
        <ScrollView>
            <StackLayout Spacing="5"  BackgroundColor="White" Padding="10" >
                <Label Text="お客様番号はお届けしているお水に貼付されている伝票にてご確認いただけます。" TextColor="Black" FontSize="15"></Label>

                <Label Text="※記載がないお客様は当社カスタマーセンターまでご連絡ください。" TextColor="Black"  FontSize="15"></Label>

                <Image Source="voucher_sp.png"/>

            </StackLayout>
        </ScrollView>
    </Frame>
    <StackLayout>
        <Image Source="close_x_icon.png" HeightRequest="15" WidthRequest="15" VerticalOptions="Start" HorizontalOptions="End" x:Name="CloseIcon"/>
    </StackLayout>

</RelativeLayout>`

and i want to create a UI that looks like this image here.

But it does not works, i'm not sure where did i go wrong. please help me.

Best Answer

  • LeLGLeLG ✭✭
    Accepted Answer

    @yelinzh that is not the answer but thanks anyway.

    Here's my solution:

    `

        <ScrollView AbsoluteLayout.LayoutFlags="All" AbsoluteLayout.LayoutBounds="0, 0, 1, 1"  Margin="15">
            <Frame CornerRadius="4" Padding="0"
                HorizontalOptions="Center">
    
                <StackLayout Spacing="5"  BackgroundColor="White" Padding="10" >
                    <Label Text="お客様番号はお届けしているお水に貼付されている伝票にてご確認いただけます。" TextColor="Black" FontSize="15"></Label>
    
                    <Label Text="※記載がないお客様は当社カスタマーセンターまでご連絡ください。" TextColor="Black"  FontSize="15"></Label>
    
                    <Image Source="voucher_sp.png"/>
    
                </StackLayout>
    
            </Frame>
        </ScrollView>
    
        <ContentView AbsoluteLayout.LayoutFlags="PositionProportional" AbsoluteLayout.LayoutBounds="1, 0, -1, -1">
            <Image x:Name="CloseIcon" HeightRequest="30" WidthRequest="30">
                <Image.Source>
                    <OnPlatform
                      x:TypeArguments="ImageSource"
                      Android="close_x_icon.png"
                      iOS="close_x_icon.png" />
                </Image.Source>
            </Image>
        </ContentView>
    
    </AbsoluteLayout>`
    

Answers

  • JarvanJarvan Member, Xamarin Team Xamurai
    edited April 11

    @LeLG Try to change RelativeLayout to StackLayout and it'll work.

  • LeLGLeLG Member ✭✭

    @yelinzh StackLayout works fine, but the problem is that i am trying to get the [X] icon like in the image, which can not be done by using StackLayout

  • JarvanJarvan Member, Xamarin Team Xamurai

    Sorry, which one is [X] icon? There are several places marked in image ,I don't know which you mean?

  • robobororoboboro Member ✭✭

    @yelinzh the closing symbol in the right corner

  • JarvanJarvan Member, Xamarin Team Xamurai

    You can get the [X] icon by adding x:Name="".

    <Image x:Name="image" image" Source="xx.png" />
    
  • LeLGLeLG Member ✭✭
    Accepted Answer

    @yelinzh that is not the answer but thanks anyway.

    Here's my solution:

    `

        <ScrollView AbsoluteLayout.LayoutFlags="All" AbsoluteLayout.LayoutBounds="0, 0, 1, 1"  Margin="15">
            <Frame CornerRadius="4" Padding="0"
                HorizontalOptions="Center">
    
                <StackLayout Spacing="5"  BackgroundColor="White" Padding="10" >
                    <Label Text="お客様番号はお届けしているお水に貼付されている伝票にてご確認いただけます。" TextColor="Black" FontSize="15"></Label>
    
                    <Label Text="※記載がないお客様は当社カスタマーセンターまでご連絡ください。" TextColor="Black"  FontSize="15"></Label>
    
                    <Image Source="voucher_sp.png"/>
    
                </StackLayout>
    
            </Frame>
        </ScrollView>
    
        <ContentView AbsoluteLayout.LayoutFlags="PositionProportional" AbsoluteLayout.LayoutBounds="1, 0, -1, -1">
            <Image x:Name="CloseIcon" HeightRequest="30" WidthRequest="30">
                <Image.Source>
                    <OnPlatform
                      x:TypeArguments="ImageSource"
                      Android="close_x_icon.png"
                      iOS="close_x_icon.png" />
                </Image.Source>
            </Image>
        </ContentView>
    
    </AbsoluteLayout>`
    
Sign In or Register to comment.