Skip to content

This repository contains sample about how to work with RTL in Xamarin.Forms TreeView (SfTreeView)

Notifications You must be signed in to change notification settings

SyncfusionExamples/treeview-rtl-xamarin

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

6 Commits
 
 
 
 
 
 
 
 

Repository files navigation

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

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

You can also refer the following article.

https://www.syncfusion.com/kb/11414/how-to-work-with-rtl-in-xamarin-forms-treeview-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

TreeViewRTL

About

This repository contains sample about how to work with RTL in Xamarin.Forms TreeView (SfTreeView)

Topics

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages