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

[Daniel]

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>

 

 

 

 

[Petar Marchev]

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