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:
2 Answers, 1 is accepted
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/.
Rank 1
Silver
Bronze
Rank 1
Silver
Bronze
Hi Daniel,
Please send me the exact definition of the Button and on what platform you're reproducing the issue. Thank you in advance
Rank 1
Silver
Bronze
<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}"/>
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?
Rank 1
Silver
Bronze
Rank 1
Iron
Iron
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.
Rank 1
Silver
Bronze
Rank 1
Iron
Iron
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/.
Rank 1
Iron
Iron
Hey Team, How about widthRequest and HeightRequest properties issues? it seems doesn't work on Window Platform
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.
Rank 1
Silver
Bronze
Hi,
I removed StackLayouts with "AndExpand" and is not working on my side.
Thanks,
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.
Rank 1
Silver
Bronze
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.
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.
Rank 1
Silver
Bronze
the vertical stacklyout is above the button.
I wiil do it.
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>
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"; }