Circle button

[Daniel]

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]

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]

5. Missing tooltip.

[Yana]

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

[Daniel]

4. Is not working- I set  HorizontalContentAlignment property to the Button with value "Center"

[Daniel]

I want the number of records will be centered

[Daniel]

This.

[Yana]

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]

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]

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]

HorizontalStackLayout

[Allen]

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]

So it bug on RadButton ? Can I fix the button look up that text will be centered.

[Allen]

Second question, I think so, but let's see what Tech Support say!  

[Yana]

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]

Addded

[Yana]

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

[Allen]

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

[Yana]

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]

Hi,

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

Thanks,

[Yana]

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]

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 | Manager Technical Support]

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]

the vertical stacklyout is above the button.

I wiil do it.

[Lance | Manager Technical Support]

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>