We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

How to work with RTL in Xamarin.Forms TreeView (SfTreeView)

Platform: Xamarin.Forms |
Control: SfTreeView |
Published Date: April 16, 2020 |
Last Revised Date: April 16, 2020

You can use SfTreeView with RTL in Xamarin.Forms by setting the FlowDirection property for SfTreeView.

XAML

Set FlowDirection as RightToLeft to TreeView.

<treeview:SfTreeView x:Name="treeView" ItemHeight="40" Indentation="15" ExpanderWidth="40" AutoExpandMode="AllNodesExpanded" VerticalOptions="Center"
                        FlowDirection="{OnPlatform Android='RightToLeft',iOS='RightToLeft'}" ItemTemplateContextType="Node" ChildPropertyName="SubFiles" 
                        ItemsSource="{Binding ImageNodeInfo}">
    <treeview:SfTreeView.ItemTemplate>
        <DataTemplate>
            <ViewCell>
                <ViewCell.View>
                    <Grid x:Name="grid" Padding="5,5,5,5" RowSpacing="0">
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="40" />
                            <ColumnDefinition Width="*" />
                        </Grid.ColumnDefinitions>
                        <Image Source="{Binding Content.ImageIcon}" VerticalOptions="Center" HorizontalOptions="Center"
                                HeightRequest="35" WidthRequest="35"/>
                        <Grid Grid.Column="1" RowSpacing="1" Padding="1,0,0,0" VerticalOptions="Center">
                            <Label Text="{Binding Content.ItemName}" LineBreakMode="NoWrap" VerticalTextAlignment="Center" HorizontalOptions="{OnPlatform iOS='StartAndExpand'}"/>
                        </Grid>
                    </Grid>
                </ViewCell.View>
            </ViewCell>
        </DataTemplate>
    </treeview:SfTreeView.ItemTemplate>
</treeview:SfTreeView>

In UWP platform, the ScrollView is not changed when RTL is enabled (framework issue). To overcome this issue, set the FlowDirection property in constructor of MainPage in UWP renderer.

C#

Set FlowDirection to RightToLeft in constructor of MainPage

namespace TreeViewXamarin.UWP
{
    public sealed partial class MainPage
    {
        public MainPage()
        {
            this.InitializeComponent();
            this.FlowDirection = FlowDirection.RightToLeft;
            SfTreeViewRenderer.Init();
            LoadApplication(new TreeViewXamarin.App());
        }
    }
}

Output

TreeView Rtl support

View sample in GitHub

2X faster development

The ultimate Xamarin UI toolkit to boost your development speed.
ADD COMMENT
You must log in to leave a comment

Please sign in to access our KB

This page will automatically be redirected to the sign-in page in 10 seconds.

Up arrow icon

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile