Split Page Diagonally

LeoJHarrisLeoJHarris NZMember ✭✭✭

Hi looking at information to do something like the below but with an image:

Basically I want split diagonally with an image/media one side and some text the other side.

As a note I'm using a tablet device in landscape and hoping to do from one corner to the other.

Any suggestions would be helpful.

Best Answer

  • LeoJHarrisLeoJHarris NZ ✭✭✭
    Accepted Answer

    @RHudson

    Got this working with the Absolute layout and the help of ShapeView i.e. XFShapeView

    <AbsoluteLayout HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand">
    
            <ffimageloading:CachedImage
                AbsoluteLayout.LayoutBounds="0,0,1,.5"
                AbsoluteLayout.LayoutFlags="All"
                Aspect="AspectFill"
                Source="{Binding BannerImage}" />
    
            <xfshapeview:ShapeView
                AbsoluteLayout.LayoutBounds="1,.5,400, 1600"
                AbsoluteLayout.LayoutFlags="PositionProportional"
                HorizontalOptions="Center"
                Rotation="-90"
                ShapeType="Triangle"
                WidthRequest="400"
                Color="Black" />
    
            <ffimageloading:CachedImage
                AbsoluteLayout.LayoutBounds="20,.5,150,150"
                AbsoluteLayout.LayoutFlags="YProportional"
                Aspect="AspectFit"
                DownsampleToViewSize="true"
                ErrorPlaceholder="{StaticResource ErrorImageIcon}"
                HeightRequest="150"
                RetryCount="3"
                RetryDelay="1000"
                Source="{Binding LogoImage}"
                WidthRequest="150">
                <ffimageloading:CachedImage.Transformations>
                    <fftransformations:CircleTransformation BorderHexColor="#ffffff" BorderSize="5" />
                </ffimageloading:CachedImage.Transformations>
            </ffimageloading:CachedImage>
    
            <Label
                AbsoluteLayout.LayoutBounds=".6,.6,.5,.1"
                AbsoluteLayout.LayoutFlags="All"
                FontSize="34"
                HorizontalOptions="End"
                LineBreakMode="WordWrap"
                Text="Some content here."
                TextColor="White" />
    
        </AbsoluteLayout>
    

    The values could be change further but it works for me.

Answers

  • LandLuLandLu Member, Xamarin Team Xamurai

    This is a Q&A forum. You should post your code snippets and describe what issues you are facing instead of only posting an image here.
    We won't implement the whole effect for you.

  • RHudsonRHudson CAMember ✭✭✭

    Use an AbsoluteLayout.

    Place the main image at the top, the animated gif or whatever that is

    Create another rectangular image that has a triangular transparent section in the upper-left and a solid section lower-right, colored the same as your page background. Positioned so it overlays the main image

    Same with the circle avatar.

    Read up on AbsoluteLayouts, it's well documented.

  • LeoJHarrisLeoJHarris NZMember ✭✭✭
    @RHudson thanks for your feedback. Ill give that a go. Tbh what ive done and working on is taking the native android lib and binding that up in a .net lib. Ive got the .aar file and created android binding lib. Just working on creating the xamarin forms wrapper for it. Its my first attempt at this. But so far have created the android binding library.
  • LeoJHarrisLeoJHarris NZMember ✭✭✭

    @Landau thanks for the feedback have opened a new question on the forums regarding creating a consumable library of a native android library (same in this question) that I'm trying to use for Xamarin.Forms projects.

    https://forums.xamarin.com/discussion/152932/consume-a-ui-component-in-xf-from-binding-library-android/p1?new=1

    I'm trying an honest and earnest attempt to get this to work including some code and screenshots of my current attempt and issues. My first attempt at this.

    If I get a answer for that and get it working Ill reference this question.

    Thanks.

    hope that okay.

  • LeoJHarrisLeoJHarris NZMember ✭✭✭
    Accepted Answer

    @RHudson

    Got this working with the Absolute layout and the help of ShapeView i.e. XFShapeView

    <AbsoluteLayout HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand">
    
            <ffimageloading:CachedImage
                AbsoluteLayout.LayoutBounds="0,0,1,.5"
                AbsoluteLayout.LayoutFlags="All"
                Aspect="AspectFill"
                Source="{Binding BannerImage}" />
    
            <xfshapeview:ShapeView
                AbsoluteLayout.LayoutBounds="1,.5,400, 1600"
                AbsoluteLayout.LayoutFlags="PositionProportional"
                HorizontalOptions="Center"
                Rotation="-90"
                ShapeType="Triangle"
                WidthRequest="400"
                Color="Black" />
    
            <ffimageloading:CachedImage
                AbsoluteLayout.LayoutBounds="20,.5,150,150"
                AbsoluteLayout.LayoutFlags="YProportional"
                Aspect="AspectFit"
                DownsampleToViewSize="true"
                ErrorPlaceholder="{StaticResource ErrorImageIcon}"
                HeightRequest="150"
                RetryCount="3"
                RetryDelay="1000"
                Source="{Binding LogoImage}"
                WidthRequest="150">
                <ffimageloading:CachedImage.Transformations>
                    <fftransformations:CircleTransformation BorderHexColor="#ffffff" BorderSize="5" />
                </ffimageloading:CachedImage.Transformations>
            </ffimageloading:CachedImage>
    
            <Label
                AbsoluteLayout.LayoutBounds=".6,.6,.5,.1"
                AbsoluteLayout.LayoutFlags="All"
                FontSize="34"
                HorizontalOptions="End"
                LineBreakMode="WordWrap"
                Text="Some content here."
                TextColor="White" />
    
        </AbsoluteLayout>
    

    The values could be change further but it works for me.

  • LeoJHarrisLeoJHarris NZMember ✭✭✭
    edited April 3

    I also changed the values of the LayoutBounds of the shapeview from Xaml to be more consistent with different device size in code behind using the device screen dimensions.

    I also added 25 to slightly overshoot the screen just a little at the triangular tip end as it wasnt quite reaching:

    AbsoluteLayout.SetLayoutBounds((CurrentPage as WelcomePage).DiagonalTriangleShapeView, new Rectangle(1, 0.5, App.ScreenWidth + 25, App.ScreenWidth + 25));
    (CurrentPage as WelcomePage).DiagonalTriangleShapeView.WidthRequest = App.ScreenHeight / 2;
    (CurrentPage as WelcomePage).DiagonalTriangleShapeView.HeightRequest = App.ScreenWidth;
    

    If there is a better way to do that Id be interested to know.

Sign In or Register to comment.