Buttons in telerik:RadDockLayout.Dock="Left" not arrange properly

1 Answer 17 Views
Button DockLayout
Daniel
Top achievements
Rank 1
Silver
Bronze
Daniel asked on 06 Mar 2022, 02:36 PM

Hi,


        <Grid telerik:RadDockLayout.Dock="Left"  WidthRequest="250" >
            <Grid.RowDefinitions>
                <RowDefinition Height="Auto"/>
                <RowDefinition Height="*"/>
            </Grid.RowDefinitions>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="*"/>
            </Grid.ColumnDefinitions>
            <VerticalStackLayout >
                <telerik:RadButton AutomationId="button" Text="Dashboard" Clicked="OnDashboaredClicked" ImageSource="dashboard.png"  WidthRequest="200" HeightRequest="50" FontSize="Micro"/>
                <telerik:RadButton AutomationId="button" Text="Routes"   Clicked="OnRoutesClicked" ImageSource="routes.png"   WidthRequest="200" HeightRequest="50"  FontSize="Micro"/>
                <telerik:RadButton AutomationId="button" Text="Schedulers"  Clicked="OnScedulersClicked" ImageSource="schedules.png"  WidthRequest="200" HeightRequest="50"  FontSize="Micro"/>
                <telerik:RadButton AutomationId="button" Text="Settings"  Clicked="OnSettingsClicked" ImageSource="settings.png" WidthRequest="200" HeightRequest="50"  FontSize="Micro"/>
                <telerik:RadButton AutomationId="button" Text="History"  Clicked="OnHistoryClicked" ImageSource="history.png"  WidthRequest="200" HeightRequest="50"  FontSize="Micro"/>
            </VerticalStackLayout>
            <Image Grid.Row="1" Source="smallwave.png" Aspect="Fill" HorizontalOptions="Fill" VerticalOptions="End" HeightRequest="70" />
        </Grid>

 

 

 

 

1 Answer, 1 is accepted

Sort by
0
Petar Marchev
Telerik team
answered on 07 Mar 2022, 07:19 PM

Hello Daniel,

First of all I would like to explain that the buttons are properly arranged. They are centered, more precisely the content (image+text) is centered. I am attaching an image for your reference.

You have not specified how you want the buttons to be arranged, i.e. how the images and texts should be arranged. So I have to make a little guess here - something along the lines of two columns - images in the first, texts in the second. If this is so, you can easily achieve this by setting the HorizontalContentAlignment of each button to Start. This will place the image to the left and the text right next to it.

Make sure that the images you use have the same width.

I used this code for the test:

 

<VerticalStackLayout HorizontalOptions="Start" BackgroundColor="#55667788">
  <telerikMauiControls:RadButton ImageSource="available.png" Text="available" HorizontalContentAlignment="Start" />
  <telerikMauiControls:RadButton ImageSource="away.png" Text="away" HorizontalContentAlignment="Start" />
  <telerikMauiControls:RadButton ImageSource="busy.png" Text="busy" HorizontalContentAlignment="Start" />
</VerticalStackLayout>

 

I am also attaching an image of the output I get.

I hope this helps.

Regards,
Petar Marchev
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/.

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