Circle button

2 Answers 316 Views
Button
Daniel
Top achievements
Rank 1
Silver
Bronze
Daniel asked on 08 Mar 2022, 07:50 AM

Hi,

I used this link and i have some problem:

https://docs.telerik.com/devtools/maui/controls/button/howto/button-howto-create-circle-button

 <telerik:RadButton  x:Name="pushedFiles"
                         WidthRequest="120"
                        HeightRequest="120"                                
                        Text="Pulled"
                        FontSize="Micro"
                        TextColor="White"
                         CornerRadius="60" 
                         BorderWidth ="8"
                         BorderColor="Green"
                         BackgroundColor="White"
                         Margin="20"/>

1.Only when I hover the button the text appear.

2.I want when I hover the button border width will be greater and when i get out it go to it normal widg\th.

3.You have mistake with namespace:

Daniel
Top achievements
Rank 1
Silver
Bronze
commented on 08 Mar 2022, 08:13 AM

4. I used these code behind and the text not center why ?


private void LoadData()
    {
        long totalPushedFilesCount = GetPushedTotalFiles();
		long totalPulledFilesCount = GetPulledTotalFiles();
		long totalFailedFilesCount = GetFailedFolderTotalFiles();

		var totalFilesCount = totalPushedFilesCount + totalPulledFilesCount + totalFailedFilesCount;
		totalFiles.Text = totalFilesCount > 0 ? totalFilesCount.ToString() : 0.ToString();
		totalFiles.Text += Environment.NewLine;
		totalFiles.Text += "Totals Files";

	}

Daniel
Top achievements
Rank 1
Silver
Bronze
commented on 08 Mar 2022, 08:22 AM

5. Missing tooltip.

2 Answers, 1 is accepted

Sort by
0
Yana
Telerik team
answered on 11 Mar 2022, 11:19 AM

Hello Daniel,

I will go straight to the raised issues:

1. This is due to the fact the TextColor and BackgroundColor are both White, please change one of those to something else.

2. Currently this feature is not available, you can check this thread for more details: https://www.telerik.com/forums/button-style-hand-when-mouse-over-like-in-css

3. Thank you for pointing this out, I'll fix it right away.

4. You just need to apply HorizontalContentAlignment property to the Button with value "Center".

5. Please check the following enhancement suggestion in .NET MAUI repo: [Enhancement] Add ToolTip and ToolTipPlacement properties

Let me know if you have any additional questions on this.

Regards,
Yana
Progress Telerik

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

Daniel
Top achievements
Rank 1
Silver
Bronze
commented on 13 Mar 2022, 07:08 AM

4. Is not working- I set  HorizontalContentAlignment property to the Button with value "Center"
Daniel
Top achievements
Rank 1
Silver
Bronze
commented on 13 Mar 2022, 07:22 AM

I want the number of records will be centered
Daniel
Top achievements
Rank 1
Silver
Bronze
commented on 14 Mar 2022, 06:30 AM

This.
Yana
Telerik team
commented on 14 Mar 2022, 09:25 AM

Hi Daniel,

Please send me the exact definition of the Button and on what platform you're reproducing the issue. Thank you in advance

Daniel
Top achievements
Rank 1
Silver
Bronze
commented on 14 Mar 2022, 09:29 AM

In Window machine.
 <telerik:RadButton  x:Name="totalFiles"
                        WidthRequest="135"
                        HeightRequest="135"                                
                        TextColor="Black"
                        FontSize="Micro"
                        CornerRadius="60" 
                         BorderWidth ="8"
                         BorderColor="Purple"
                         BackgroundColor="White"
                         Margin="20" 
                         HorizontalContentAlignment="Center"
                         Text="{Binding TotalFiles, Mode=TwoWay}"/>

Yana
Telerik team
commented on 15 Mar 2022, 02:11 PM

I checked this and it shows a different result on my side on Windows - the text is not split into two rows even with LineBreakMode property applied. This, however, comes from the .NET MAUI Button we're inheriting from. 

In what container have you placed the RadButton, can you send me the page xaml?

Daniel
Top achievements
Rank 1
Silver
Bronze
commented on 15 Mar 2022, 03:23 PM

HorizontalStackLayout
Allen
Top achievements
Rank 1
Iron
Iron
commented on 17 Mar 2022, 03:05 AM | edited

Actually , I met same issue: 4.

And one more question: when I tried to use widthRequest and HeightRequest properties, it is works on Android  but does not work on Windows Desktop.

Daniel
Top achievements
Rank 1
Silver
Bronze
commented on 17 Mar 2022, 06:59 AM | edited

So it bug on RadButton ? Can I fix the button look up that text will be centered.
Allen
Top achievements
Rank 1
Iron
Iron
commented on 17 Mar 2022, 07:04 AM

Second question, I think so, but let's see what Tech Support say!  
Yana
Telerik team
commented on 21 Mar 2022, 02:45 PM

I am not able to reproduce the issue with WidthRequest and HeightRequest on Windows, can you send me the layout together with the Button definition?
Daniel
Top achievements
Rank 1
Silver
Bronze
commented on 21 Mar 2022, 02:50 PM

Addded
0
Yana
Telerik team
answered on 21 Mar 2022, 02:44 PM

Hi guys,

Regarding HorizontalContentAlignment - indeed there is different behavior on Android and Windows, so I logged this as a bug report in our public feedback item, you can track its status at the link below:

Button: HorizontalContentAlignment does not work consistently on different platforms

Please have in mind the same behavior can be observed with the .NET MAUI Button control - it seems by default the button content is centered, still, the text is not centered on Windows. That's why the item is logged for additional research and is yet to be decided what's the most appropriate way to handle it.

Regards,
Yana
Progress Telerik

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

Allen
Top achievements
Rank 1
Iron
Iron
commented on 21 Mar 2022, 02:49 PM

Hey Team,  How about widthRequest and HeightRequest properties issues? it seems doesn't work on Window Platform

Yana
Telerik team
commented on 23 Mar 2022, 12:30 PM

Hi Allen,

WidthRequest and HeightRequest are properly applied on my side, still, be careful with StackLayouts with "AndExpand" modifiers as they play around with layout space and can lead to unexpected results.

Daniel
Top achievements
Rank 1
Silver
Bronze
commented on 23 Mar 2022, 01:02 PM

Hi,

I removed StackLayouts with "AndExpand" and is not working on my side.

Thanks,

Yana
Telerik team
commented on 24 Mar 2022, 02:13 PM

Hi Daniel,

I've tested the setup you have and the buttons are correctly aligned on my side:

Anyway, WidthRequest and HeightRequest are not specific to the Telerik .NET MAUI Button and if you experience any issues with the layout,  I would assume it's more related to .NET MAUI itself. Please test it with regular .NET MAUI Buttons instead and let me know how it goes.

Daniel
Top achievements
Rank 1
Silver
Bronze
commented on 24 Mar 2022, 02:38 PM

1. I want that number one will be center not left.

2. I didnt covert the app yet to preview 14,

i would do on sunday and let you know my results.

Lance | Senior Manager Technical Support
Telerik team
commented on 24 Mar 2022, 03:01 PM

Hi Daniel,

This is the same behavior that MAUI Button has, Yana's details above explain this further.

Workaround Solution

If you'd like a perfectly centered, multi-line presentation, sometimes it's better to use an extra layer on top where you have more control over the Label rendering.

For example:

<Grid>
    <RadButton Text="" />

    <VerticalStackLayout HorizontalOptions="Center"
                            VerticalOptions="Center">
        <Label Text="4"
                FontAttributes="Bold"
                HorizontalOptions="Center"
                VerticalOptions="Center"
                InputTransparent="True" />
        <Label Text="Total Files"
                HorizontalOptions="Center"
                VerticalOptions="Center"
                InputTransparent="True" />
    </VerticalStackLayout>
</Grid>

An additional bonus to taking this approach is you can make the numerical part bold, which is a common setup.

Daniel
Top achievements
Rank 1
Silver
Bronze
commented on 24 Mar 2022, 03:15 PM | edited

the vertical stacklyout is above the button.

I wiil do it.

Lance | Senior Manager Technical Support
Telerik team
commented on 24 Mar 2022, 03:24 PM

Correct. A Grid element in XAML doesn't stack child elements unless you put them into separate Grid rows/columns (this is true for every XAML platform, not just MAUI).

This means you can layer stuff, like I did above where the VerticalStackLayout sits on top of the RadButton.

Pro-Tip

In order for you to understand how things are laid out, I highly recommend using a temporary BackgroundColor. This will help you mentally understand where these things are being rendered and how big they are.

<Grid BackgroundColor="Black"
      HorizontalOptions="Center"
      VerticalOptions="Center">
    <RadButton Text="" BackgroundColor="Green" />

    <VerticalStackLayout HorizontalOptions="Center"
                         VerticalOptions="Center"
                         BackgroundColor="Red">
        <Label Text="4"
                FontAttributes="Bold"
                HorizontalOptions="Center"
                VerticalOptions="Center"
                InputTransparent="True" />
        <Label Text="Total Files"
                HorizontalOptions="Center"
                VerticalOptions="Center"
                InputTransparent="True" />
    </VerticalStackLayout>
</Grid>

Tags
Button
Asked by
Daniel
Top achievements
Rank 1
Silver
Bronze
Answers by
Yana
Telerik team
Share this question
or