Vertical Text in Xamarin Forms

Question

Hi

how to display text inside stackylayout as per screenshot.

Code

<StackLayout Grid.Row="1" Orientation="Horizontal" Margin="10,0,10,0">
<Frame BorderColor="{StaticResource ButtonBackgroundColor}" BackgroundColor="#bddfce" Grid.Row="0" Grid.Column="0">
<Label Text="january" FontAttributes="Bold" TextColor="{StaticResource LabelPlaceHolder}" FontSize="12" VerticalOptions="CenterAndExpand" HorizontalOptions="CenterAndExpand"/>
</Frame>
<Frame BorderColor="{StaticResource ButtonBackgroundColor}" Grid.Row="0" Grid.Column="1">
<Label Text="february" TextColor="{StaticResource LabelPlaceHolder}" FontSize="15" VerticalOptions="CenterAndExpand" HorizontalOptions="CenterAndExpand"/>
</Frame>
<Frame BorderColor="{StaticResource ButtonBackgroundColor}" Grid.Row="0" Grid.Column="2">
<Label Text="march" TextColor="{StaticResource LabelPlaceHolder}" FontSize="15" VerticalOptions="CenterAndExpand" HorizontalOptions="CenterAndExpand"/>
</Frame>
<Frame BorderColor="{StaticResource ButtonBackgroundColor}" Grid.Row="0" Grid.Column="3">
<Label Text="April" TextColor="{StaticResource LabelPlaceHolder}" FontSize="15" VerticalOptions="CenterAndExpand" HorizontalOptions="CenterAndExpand"/>
</Frame>
<Frame BorderColor="{StaticResource ButtonBackgroundColor}" Grid.Row="0" Grid.Column="4">
<Label Text="May" TextColor="{StaticResource LabelPlaceHolder}" FontSize="15" VerticalOptions="CenterAndExpand" HorizontalOptions="CenterAndExpand"/>
</Frame>
</StackLayout>

Answer 1

Hello,

You could try to set Rotation of the Label, refer to the following code:

<Frame BorderColor="{StaticResource ButtonBackgroundColor}" BackgroundColor="#bddfce" Grid.Row="0" Grid.Column="0">  
            <Label Text="FAJAR" Rotation="90" FontAttributes="Bold" TextColor="{StaticResource LabelPlaceHolder}" FontSize="12" VerticalOptions="CenterAndExpand" HorizontalOptions="CenterAndExpand"/>  
        </Frame>  

Pay attention to the width of the column. About Rotation, refer to https://learn.microsoft.com/en-us/dotnet/api/xamarin.forms.visualelement.rotation?view=xamarin-forms

Best Regards,
Wenyan Zhang

---

If the answer is the right solution, please click "Accept Answer" and kindly upvote it. If you have extra questions about this answer, please click "Comment".
Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.