Forum Xamarin Xamarin.Forms

How make a circle label?

osharkoosharko USMember ✭✭
edited July 2017 in Xamarin.Forms

Hi, i have a list of label and i have to add into a label a text and then a counter. The counter must be a circle with a number in it.

This is the code of the counter:
<Grid> <Grid.ColumnDefinitions> <ColumnDefinition Width="6*" /> <ColumnDefinition Width="4*" /> </Grid.ColumnDefinitions> <cr:ExtendedLabel x:Name="InnerLabel" Grid.Column="0" FontSize="25" FontWeight="Normal" HorizontalOptions="FillAndExpand" HorizontalTextAlignment="End" TextColor="White" VerticalOptions="CenterAndExpand" VerticalTextAlignment="Center" /> <Label x:Name="Etichetta" Text="1" Grid.Column="1" HorizontalTextAlignment="Start"/> </Grid>
This code just to that...

Does anyone knows how to do that circle for the counter?

Thanks a lot

Tagged:

Answers

  • RyanDixonRyanDixon USMember ✭✭✭

    Lazy route: Wrap in frame and adjust the CornerRadius property.
    Proper route: Custom renderers... :wink:

    imo: I have used the lazy route in so many apps I have lost count aha

  • osharkoosharko USMember ✭✭

    @RyanDixon said:
    Lazy route: Wrap in frame and adjust the CornerRadius property.
    Proper route: Custom renderers... :wink:

    imo: I have used the lazy route in so many apps I have lost count aha

    so i just take a pic of the circle, and then i use it as a background?
    p.s. what does CornerRadius property is about? image or label?

    proper router would be better, but i really don't know how to do it :D

  • osharkoosharko USMember ✭✭

    @JohnHardman said:
    @osharko - The "lazy" route should be to use a Frame, with the CornerRadius property set to the radius you want for the circle, and the Content property set to a Label that contains the number to display. Unfortunately, there is a Xamarin.Forms bug on UWP that means you don't get the desired result currently ( https://bugzilla.xamarin.com/show_bug.cgi?id=56914 ). On Android and iOS, it works as long as you are really careful with properties - tweak some that you think should make no difference and it goes horribly wrong, due to other Xamarin.Forms bugs.

    The "lazy" code (in C#, with hard-coded colors and text) is:

            Frame frame = new Frame
            {
                CornerRadius = 30,
                HeightRequest = 60,
                WidthRequest = 60,
                BackgroundColor = Color.Lime,
                OutlineColor = Color.Lime,
                HorizontalOptions = LayoutOptions.Start,
                VerticalOptions = LayoutOptions.Start,
                Margin = 0,
                Padding = 0,
                Content = new Label
                {
                    Text = "2",
                    BackgroundColor = Color.Lime,
                    TextColor = Color.White,
                    Margin = 0,
                    HorizontalOptions = LayoutOptions.Center,
                    VerticalOptions = LayoutOptions.Center,
                    HorizontalTextAlignment = TextAlignment.Center,
                    VerticalTextAlignment = TextAlignment.Center
                }
            };
    

    And you then use frame in whatever layout it is used in. (Obviously, I'm using C# here - you may want to map this to XAML, and you will probably want to use a binding to get the text from your view model).

    There are alternatives that are far more resilient, but with increasing amount of effort required. A couple are:
    (1) using a Grid to overlay a Label on the center of an Image of a circle works, but requires an Image of the desired size and color.
    (2) using custom renderers for each target platform

    Thank you a lot for replying with the code :smile:
    This app in xamarin.form use some part of code in xamarin.forms and almost everything in xamarin.windowsphone (this is not an app made by me, i'm only working on the issue). So, the frame should not works in my case?

  • osharkoosharko USMember ✭✭

    ehm...
    Frame doesn't contain a definition for cornerRadius.
    How could i do?

  • JohnHardmanJohnHardman GBUniversity admin
    edited July 2017

    @osharko - What version of the Xamarin.Forms NuGet are you using?

    Details of Frame and CornerRadius can be found at https://developer.xamarin.com/api/type/Xamarin.Forms.Frame/

  • osharkoosharko USMember ✭✭

    @JohnHardman said:
    @osharko - What version of the Xamarin.Forms NuGet are you using?

    Details of Frame and CornerRadius can be found at https://developer.xamarin.com/api/type/Xamarin.Forms.Frame/

    now i'm updating the windows.forms package.

    The problem is related to the first code i attached on the top of the discussion. there i have a label where the counter is. If I surround the label with , it doesn't work.... so:
    This is the code of the entire row
    `

                          <common:CommonButtonAndLabel x:Name="Bozze"
                                               BackgroundColor="{x:Static utils:ColorResources.MediolanumBlue}"
                                               Text="{utils:Translate F24BozzeLabel}">
                              <common:CommonButtonAndLabel.GestureRecognizers>
                                    <TapGestureRecognizer Tapped="BozzeTgr_Tapped" />
                                </common:CommonButtonAndLabel.GestureRecognizers>
                            </common:CommonButtonAndLabel>`
    

    This is the code of the counter and some istruction for the text previous of the counter:
    <cr:ExtendedLabel x:Name="InnerLabel" Grid.Column="0" FontSize="25" FontWeight="Normal" HorizontalOptions="FillAndExpand" HorizontalTextAlignment="End" TextColor="White" VerticalOptions="CenterAndExpand" VerticalTextAlignment="Center"/> <Label x:Name="Etichetta" FontSize="20" Grid.Column="1" HorizontalTextAlignment="Start" TextColor="Blue" BackgroundColor="White"/>

  • JohnHardmanJohnHardman GBUniversity admin

    @osharko - I'm assuming there's stuff missing from your post ("If I surround the label with ,"). With what?

    Where is the Frame in your updated code? Two people have said that is a way to go, but it's not in your posted code.

    Also, when posting code to the forum, can you check the format is laid out as expected. Trying to read code that doesn't contain CR/LF at the end of the line is tiresome.

    I'm off to do some work on my own project now. I'll try to check back later to see what progress there is.

  • osharkoosharko USMember ✭✭
    • if I surround the label with page, so
    • I deleted the frame, because writing it, i have a crash during the load of the layout.
    • now updating xamarin.forms CornerRadius is valid, but writing it into the c# code, i can't see it. I'll try converting it to xaml code.
    • Yep, sorry for the bad format of the code, but i haven't understad how to set it properly.
    • Thank you very much for helping me :smile:
  • osharkoosharko USMember ✭✭
    edited July 2017

    Now I tryied so:
    <Frame CornerRadius="60" HeightRequest="40" WidthRequest="40" BackgroundColor="White" HorizontalOptions="EndAndExpand" VerticalOptions="Start" Padding="0"> <Label x:Name="Etichetta" FontSize="20" Grid.Column="1" TextColor="#2497d5" BackgroundColor="White" HorizontalOptions="Center" VerticalOptions="Center" HorizontalTextAlignment="Center" VerticalTextAlignment="Center"/> </Frame>

    but the counter is in the wrong place and is square, not round.

    (sorry for the code format, but idk how do it better..)

  • JohnHardmanJohnHardman GBUniversity admin

    @osharko - Your CornerRadius wants to be half of HeightRequest, so if HeightRequest = 40, WidthRequest = 40, CornerRadius will be 20. You will need to adjust these to cope with the size of the contained text - the larger FontSize is, the larger HeightRequest, WidthRequest and CornerRadius will need to be.

  • osharkoosharko USMember ✭✭

    By only changing the cornerradius value to 20, the result is this.

    How could I move the counter after the word Bozze (that now is under the counter)?
    And then... ther corner is still square... must i update something else?

  • AlessandroCaliaroAlessandroCaliaro ITMember ✭✭✭✭✭
  • osharkoosharko USMember ✭✭

    oh, thanks... But I see that it doesn't work on xamarin.wp. am'I right?

  • AlessandroCaliaroAlessandroCaliaro ITMember ✭✭✭✭✭

    eggià... sorry

  • osharkoosharko USMember ✭✭

    @AlessandroCaliaro said:
    eggià... sorry

    no problem, thank you :smile:

  • JohnHardmanJohnHardman GBUniversity admin

    @osharko - as per my earlier comment - "On Android and iOS, it works as long as you are really careful with properties - tweak some that you think should make no difference and it goes horribly wrong, due to other Xamarin.Forms bugs."

    The properties I used in the code provided above were carefully chosen. Start with those to get it working. Only then start changing things.

  • osharkoosharko USMember ✭✭

    @JohnHardman said:
    @osharko - as per my earlier comment - "On Android and iOS, it works as long as you are really careful with properties - tweak some that you think should make no difference and it goes horribly wrong, due to other Xamarin.Forms bugs."

    The properties I used in the code provided above were carefully chosen. Start with those to get it working. Only then start changing things.

    ok, i'm sorry, I misunderstanding.
    but even doing like your code, the situation is similar

  • JohnHardmanJohnHardman GBUniversity admin

    @osharko -

    Is that on Android emulator?
    Does the same happen on a physical Android device?
    Does the same happen on a physical iOS device?
    What version of the Xamarin.Forms NuGet are you using?
    What version of Android are you testing on?
    What version of iOS are you testing on?

  • osharkoosharko USMember ✭✭
    edited July 2017

    @JohnHardman
    this is made with xamarin.forms but only for windowsphone. android and iOs is made in native language. (not my choice).
    Xamarin.forms from nuget is the last.
    So... what could i do?

  • JohnHardmanJohnHardman GBUniversity admin

    @osharko - WinPhone 8.x? If so, then you're even more likely to hit Xamarin.Forms bugs. Plus Xamarin are deprecating WinPhone 8.x Xamarin.Forms support, so are unlikely to spend time fixing bugs.

    As I mentioned previously:

    "There are alternatives that are far more resilient, but with increasing amount of effort required. A couple are:
    (1) using a Grid to overlay a Label on the center of an Image of a circle works, but requires an Image of the desired size and color.
    (2) using custom renderers for each target platform"

    If you are working on WinPhone 8.x, I'd try (1) but if that fails then move on to (2). I don't build for WinPhone 8.x anymore, but I think (1) was working when I last used it on WinPhone 8.x

  • osharkoosharko USMember ✭✭

    yes, win8.1
    mmmh the problem is that i don't how to do this. (i started this project, but i knwo how work with c# and not with xamarin.forms xaml (which has not preview).
    The properties of the grid would be the same? or it will change?

  • mentat9mentat9 Member

    @JohnHardman said:
    @osharko - The "lazy" route should be to use a Frame, with the CornerRadius property set to the radius you want for the circle, and the Content property set to a Label that contains the number to display. Unfortunately, there is a Xamarin.Forms bug on UWP that means you don't get the desired result currently (). On Android and iOS, it works as long as you are really careful with properties - tweak some that you think should make no difference and it goes horribly wrong, due to other Xamarin.Forms bugs.

    The "lazy" code (in C#, with hard-coded colors and text) is:

            Frame frame = new Frame
            {
                CornerRadius = 30,
                HeightRequest = 60,
                WidthRequest = 60,
                BackgroundColor = Color.Lime,
                OutlineColor = Color.Lime,
                HorizontalOptions = LayoutOptions.Start,
                VerticalOptions = LayoutOptions.Start,
                Margin = 0,
                Padding = 0,
                Content = new Label
                {
                    Text = "2",
                    BackgroundColor = Color.Lime,
                    TextColor = Color.White,
                    Margin = 0,
                    HorizontalOptions = LayoutOptions.Center,
                    VerticalOptions = LayoutOptions.Center,
                    HorizontalTextAlignment = TextAlignment.Center,
                    VerticalTextAlignment = TextAlignment.Center
                }
            };
    

    And you then use frame in whatever layout it is used in. (Obviously, I'm using C# here - you may want to map this to XAML, and you will probably want to use a binding to get the text from your view model).

    There are alternatives that are far more resilient, but with increasing amount of effort required. A couple are:
    (1) using a Grid to overlay a Label on the center of an Image of a circle works, but requires an Image of the desired size and color.
    (2) using custom renderers for each target platform

    @JohnHardman: I can't thank you enough for referencing the above bug. I have a repro of the same behavior with my custom BoxView renderer on UWP and trying to come up with a workaround has been driving me crazy. I finally somehow found this thread from a web search, and got workaround details out of the bug description. Although I wasn't sure it was identical (that issue only mentioned Frame controls), I have confirmed that the same workaround works for BoxView. Deeply appreciated!

  • NareeNaree Member
    edited March 2018

    Frame is working fine for circle view with text in both Xamarin iOS and Android .
    xaml code :

                <Frame HeightRequest="40" WidthRequest="40" CornerRadius="20" HorizontalOptions="Start" VerticalOptions="Start" Margin="0" Padding="0" 
                           BackgroundColor="Maroon">
                            <Label Text="SG" TextColor="White" HorizontalOptions="Center" VerticalOptions="Center" 
                            HorizontalTextAlignment="Center" VerticalTextAlignment="Center"></Label> 
                    </Frame> 
    
  • NareeNaree Member
    edited March 2018

    Frame is working fine for circle view with text in both iOS and android .
    Xaml Code:

    • <Frame HeightRequest="40" WidthRequest="40" CornerRadius="20" HorizontalOptions="Start" VerticalOptions="Start" Margin="0" Padding="0"
    • BackgroundColor="Maroon">
    • <Label Text="SG" TextColor="White" HorizontalOptions="Center" VerticalOptions="Center"
    • HorizontalTextAlignment="Center" VerticalTextAlignment="Center">
  • @AlessandroCaliaro said:
    Luigi, I use this

    Thank you , It helped me

  • UnreachableCodeUnreachableCode USMember ✭✭✭

    Crucial to set the padding to 0 or you won't get a perfect circle.

Sign In or Register to comment.