question

EduardoGomez-1870 avatar image
0 Votes"
EduardoGomez-1870 asked LeonLu-MSFT answered

UI help design Bubbles

I al not very much off a designer

Can somebody knows how to achieve this

I already know that I can achieve a Bubbles using <Path

but there is no way to add a Editor on a Bubbles

or label inside a buble.

I also need the editor to grow height as I type

124556-screenshot-2021-08-19-082141.png



Maybe you @LeonLu-MSFT

By the way @LeonLu-MSFT how are you so good with Xamarin forms, any recommendation to be better

dotnet-xamarin
5 |1600 characters needed characters left characters exceeded

Up to 10 attachments (including images) can be used with a maximum of 3.0 MiB each and 30.0 MiB total.

1 Answer

LeonLu-MSFT avatar image
0 Votes"
LeonLu-MSFT answered

Hello,​

Welcome to our Microsoft Q&A platform!

You need the editor to grow height as you type, so draw Bubbles using <Path>, we need calculate the point at the runtime (It is quite complex). So I want to separate the Bubbles to two parts: Frame with corner and the draw the a triangle with <Path>. Then put two parts in the RelativeLayout, Here is code.


<RelativeLayout HorizontalOptions="FillAndExpand" >
            <Frame
                RelativeLayout.XConstraint="{ConstraintExpression Type=Constant, Constant=0}"
                 RelativeLayout.YConstraint="{ConstraintExpression Type=Constant, Constant=0}"
                RelativeLayout.WidthConstraint="{ConstraintExpression Type=RelativeToParent, Property=Width, Factor=1}"
                x:Name="myFrame"
                 Padding="0"
                 BackgroundColor="#00CCFF"
                 CornerRadius="20"
                 IsClippedToBounds="True" HorizontalOptions="FillAndExpand" VerticalOptions="Center">
                <Editor
                    x:Name="Editor1"
                    Text="this"
                     AutoSize="TextChanges"
                     HorizontalOptions="FillAndExpand"
                     VerticalOptions="FillAndExpand" />
            </Frame>

            <Path Stroke="white" 
                Fill="#00CCFF"
                Aspect="Uniform"
                StrokeLineJoin="Round"
                 RelativeLayout.XConstraint="{ConstraintExpression Type=RelativeToView, ElementName=myFrame, Property=Width,Constant=-140}"
                 RelativeLayout.YConstraint="{ConstraintExpression Type=RelativeToView, ElementName=myFrame, Property=Height,Constant=-8 }"
                 RelativeLayout.WidthConstraint="100"
                 RelativeLayout.HeightConstraint="50" >
                <Path.Data>
                    <PathGeometry>
                        <PathGeometry.Figures>
                            <PathFigureCollection>
                                <PathFigure StartPoint="0,0">
                                    <PathFigure.Segments>
                                        <PathSegmentCollection>
                                            <PolyBezierSegment Points="0,0 10,0 15,10 15,0 20,0 30,0" />
                                        </PathSegmentCollection>
                                    </PathFigure.Segments>
                                </PathFigure>
                            </PathFigureCollection>
                        </PathGeometry.Figures>
                    </PathGeometry>
                </Path.Data>
            </Path>
        </RelativeLayout>


Here is running screenshot.

124675-image.png

124587-image.png

124655-image.png


This way is not perfect, hope others have a better way to achieve it.

Best Regards,

Leon Lu



If the response is helpful, please click "Accept Answer" and upvote it.

Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.



image.png (6.8 KiB)
image.png (13.5 KiB)
image.png (9.0 KiB)
5 |1600 characters needed characters left characters exceeded

Up to 10 attachments (including images) can be used with a maximum of 3.0 MiB each and 30.0 MiB total.