Forum Xamarin.Forms

shell or ContentPage not rtl

fakhravarifakhravari Member ✭✭✭✭

hi
my project Shell

FlowDirection="RightToLeft" not working

example CarouselView read 20 items, Move images from left to right

How did the whole project align rtl?

Answers

  • mjdevelopermjdeveloper Member ✭✭✭
    edited February 2

    Hi
    I'm using FlowDirection="RightToLeft" in My Project and everything is ok.
    For CarouselView I use CarouselView.FormsPlugin NuGet package and Images move from left to right.

    in Persian
    سلام جناب فخرآوری حدس زدم ایرانی باشید
    پروژه من فارسی هست و از تو تمام فرم ها از فلودایرکشن استفاده می کنم و مشکلی توش ندارم
    برای نمایش اسلاید هم از پلاگین استفاده میکنم و حرکت عکس ها از چپ به راست هست
    مشکلاتی با کروزل ویوی خود زامارین داشتم و گذاشتمش کنار

  • fakhravarifakhravari Member ✭✭✭✭
    edited February 2
    درود :) چه خوش ایرانی ببینی از بوشهر هستم

    برای اسلایدر از چه پلاگینی استفاده میکنین
    نمونه پروژه دارین ضمیمه کنید
  • mjdevelopermjdeveloper Member ✭✭✭

    درود
    از این پلاگین استفاده می کنم
    CarouselView.FormsPlugin
    البته از چندین پلاگین دیگه هم استفاده شده در این فرم

    <?xml version="1.0" encoding="utf-8" ?>
    <ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
                 xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
                 x:Class="Shahvar.MainPageDetail"
                 xmlns:material="clr-namespace:XF.Material.Forms.UI;assembly=XF.Material"
                 xmlns:cv="clr-namespace:CarouselView.FormsPlugin.Abstractions;assembly=CarouselView.FormsPlugin.Abstractions"
                 xmlns:ff="clr-namespace:FFImageLoading.Forms;assembly=FFImageLoading.Forms"
    
                 Title="پیشخوان"
                 FlowDirection="RightToLeft"  >
        <ContentPage.Content>
            <ScrollView BackgroundColor="#FFFFFF" >
                <!--CFD8DC-->
                <Grid RowSpacing="10" Margin="0" >
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="50*" />
                        <ColumnDefinition Width="50*" />
                    </Grid.ColumnDefinitions>
                    <Grid.RowDefinitions>
                        <RowDefinition Height="Auto" />
                        <RowDefinition Height="Auto" />
                        <RowDefinition Height="Auto" />
                        <RowDefinition Height="Auto" />
                        <RowDefinition Height="Auto" />
                        <RowDefinition Height="*" />
                        <RowDefinition Height="Auto" />
                        <!--<RowDefinition Height="*" />
                            <RowDefinition Height="*" />-->
                    </Grid.RowDefinitions>
    
                    <material:MaterialCard IsVisible="{Binding HasSlide}" CornerRadius="0"  Margin="15,15,15,5" Grid.Column="0" BackgroundColor="#F1F1F1"  Grid.ColumnSpan="2" Grid.Row="0" Elevation="4" Padding="0">
                        <cv:CarouselViewControl x:Name="MainSlider" HeightRequest="150" Orientation="Horizontal" InterPageSpacing="10" 
                                                VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand"
    
                                                ShowIndicators="True">
                            <cv:CarouselViewControl.ItemTemplate>
                                <DataTemplate>
                                    <ContentView>
                                        <StackLayout HorizontalOptions="Fill" HeightRequest="150" >
                                            <!--<Image HeightRequest="150" Source="{Binding Slider_Image,Mode=TwoWay}" Aspect="AspectFill" VerticalOptions="Fill" HorizontalOptions="Fill"/>-->
                                            <ff:CachedImage DownsampleToViewSize="true" HeightRequest="150" Source="{Binding Slider_Image,Mode=TwoWay}" Aspect="AspectFill" VerticalOptions="Fill" HorizontalOptions="Fill">
                                            </ff:CachedImage>
                                        </StackLayout>
                                    </ContentView>
                                </DataTemplate>
                            </cv:CarouselViewControl.ItemTemplate>
                        </cv:CarouselViewControl>
                    </material:MaterialCard>
                    <Label x:Name="lblLoading" VerticalOptions="Center" Text="در حال بارگزاری اسلاید..." Grid.Column="0" Grid.ColumnSpan="2" HorizontalOptions="Fill" HorizontalTextAlignment="Center"/>
    
    
                    <material:MaterialCard x:Name="btnLogin" CornerRadius="10" Elevation="7" BackgroundColor="#A5D6A7" Margin="5,5,15,15"
                                               Padding="10"  Grid.Row="1" Grid.Column="0" IsClickable="true" Clicked="TapGestureRecognizer_Tapped">
                        <StackLayout Orientation="Vertical">
                            <!--BackgroundColor="#64b5f6"-->
                            <Image Source="login72.png" HorizontalOptions="Center" HeightRequest="64" 
                                       WidthRequest="64"></Image>
                            <Label Text="ورود به سامانه" Margin="0,10,0,10" HorizontalOptions="Center" FontFamily="{StaticResource FontFamily.IRANSansWeb}"></Label>
                        </StackLayout>
                    </material:MaterialCard>
                    <material:MaterialCard x:Name="btnHelp" CornerRadius="10" Elevation="7" BackgroundColor="#81D4FA" Margin="15,5,5,15"
                                               Padding="10" Grid.Column="1" Grid.Row="1" IsClickable="true" Clicked="TapGestureRecognizer_Tapped">
                        <StackLayout Orientation="Vertical">
                            <Image Source="ic_help64.png" HorizontalOptions="Center" HeightRequest="64" 
                                       WidthRequest="64"></Image>
                            <Label Text="راهنمای نرم افزار" Margin="0,10,0,10" HorizontalOptions="Center" FontFamily="{StaticResource FontFamily.IRANSansWeb}">
                            </Label>
                        </StackLayout>
                    </material:MaterialCard>
    
                    <Label Margin="10,0" x:Name="lblCompanyName"  Grid.Column="0" Grid.ColumnSpan="2" HorizontalTextAlignment="Center" Grid.Row="2" FontSize="18" VerticalOptions="Center" HorizontalOptions="FillAndExpand" />
                    <Label Margin="10,0" x:Name="lblCompanyPhone" Grid.Column="0" Grid.ColumnSpan="2" HorizontalTextAlignment="Center" Grid.Row="3" FontSize="14" VerticalOptions="Center" HorizontalOptions="FillAndExpand"/>
                    <Label Margin="10,0" x:Name="lblCompanyEmail" Grid.Column="0" Grid.ColumnSpan="2" HorizontalTextAlignment="Center" Grid.Row="4" FontSize="14" VerticalOptions="Center" HorizontalOptions="FillAndExpand"/>
    
                    <StackLayout Grid.Row="6" HorizontalOptions="Center" Orientation="Horizontal" Margin="0,10,0,0" Grid.Column="0" Grid.ColumnSpan="2">
                        <Label x:Name="lblVersion" Text="Shahvar V2.3" TextColor="#546E7A" FontSize="12" />
                    </StackLayout>
    
                </Grid>
    
            </ScrollView>
        </ContentPage.Content>
    </ContentPage>
    

    cs code:
    لیست تصاویر از وب سرویس گرفته میشه

    List<Por_Slider> slideList = await apiBase.SelectCompanySliderAsync(company.Company_ID.ToString());
                    if (slideList.Count > 0)
                    {
                        foreach (var slide in slideList)
                        {
                            slide.Slider_Image = Settings.Web_URL + "/files/" + slide.Slider_Image;
                        }
                    }
    
                    MainSlider.ItemsSource = slideList;
    

    یه همچین خروجی میده این فرم

  • fakhravarifakhravari Member ✭✭✭✭

    ممنون
    این ShowIndicators
    چطوری میاد بچسبه به اخر اسلایدر
    تو عکس خودرتونم خوب یکم فاصله داره مال من رفته زیر اسلایدر انگار یه فوتر شده

  • fakhravarifakhravari Member ✭✭✭✭

    کنترل CarouselView.FormsPlugin
    چه قابلیت بهتری نسبت به CarouselView
    داره

  • mjdevelopermjdeveloper Member ✭✭✭

    Hi
    Indicators UI position and size hasn't developed yet in last version
    https://github.com/alexrainman/CarouselView#roadmap

    . هنوز تو نسخه نهایی این مورد انجام نشده که تغییر سایز و مکان ایندیکیتور رو بتوانید تغییر دهید
    تو رودمپ این مورد هست لینک رو نگاه بندازید

  • fakhravarifakhravari Member ✭✭✭✭

    مثال اجرا کردم خروجی نهایی مثل
    CarouselView
    هست
    و نمایش ایتم ها درست هست و ترتیب رعایت شده
    در CarouselView میشه IndicatorView بالا پاین کرد




    <CarouselView.ItemTemplate>


                                                <ffimageloading:CachedImage.GestureRecognizers>
                                                    <TapGestureRecognizer Tapped="TapGestureRecognizer_Tapped" BindingContext="{Binding .}" />
                                                </ffimageloading:CachedImage.GestureRecognizers>
    
                                            </ffimageloading:CachedImage>
                                        </StackLayout>
                                    </DataTemplate>
                                </CarouselView.ItemTemplate>
                            </CarouselView>
                            <IndicatorView ItemsSourceBy="carouselView" Margin="0,-10,0,0" Padding="0" MaximumVisible="10" IndicatorColor="#a62623" SelectedIndicatorColor="Indigo" HorizontalOptions="CenterAndExpand" />
                        </StackLayout>
                    </Frame>
    
  • fakhravarifakhravari Member ✭✭✭✭

    البته مشکل توی CollectionView هست که میخوام لیست نشون بدم اما


                            <Frame Padding="0" Margin="0" BackgroundColor="#690a3d" HeightRequest="40">
                                <Label Text="محصولات برجسته" HorizontalOptions="CenterAndExpand" VerticalOptions="CenterAndExpand" TextColor="White" FontSize="Medium" FontAttributes="Bold" />
                            </Frame>
    
                            <CollectionView x:Name="Itm1" ItemSizingStrategy="MeasureAllItems" HeightRequest="275" BackgroundColor="Transparent">
    
                                <CollectionView.ItemsLayout>
                                    <GridItemsLayout Orientation="Horizontal" Span="1" SnapPointsAlignment="Center" HorizontalItemSpacing="15" VerticalItemSpacing="15"/>
                                </CollectionView.ItemsLayout>
    
                                <CollectionView.ItemTemplate>
                                    <DataTemplate>
                                        <Frame BorderColor="Gray" CornerRadius="4" Padding="1" WidthRequest="155">
    
                                            <StackLayout Orientation="Vertical" HorizontalOptions="Start" VerticalOptions="Start" Spacing="1">
    
                                                <ffimageloading:CachedImage LoadingPlaceholder="VatanBGSLogo" ErrorPlaceholder="VatanBGSLogo" DownsampleToViewSize="true" Source="{Binding ImageName}"  Aspect="Fill" HeightRequest="150" >
                                                    <ffimageloading:CachedImage.GestureRecognizers>
                                                        <TapGestureRecognizer BindingContext="{Binding .}" Tapped="ClickImage" />
                                                    </ffimageloading:CachedImage.GestureRecognizers>
                                                </ffimageloading:CachedImage>
                                                <BoxView Color="Gray" HeightRequest="0.5" HorizontalOptions="FillAndExpand" />
                                                <Label Text="{Binding NameEn}"  FontSize="14" HorizontalOptions="CenterAndExpand" VerticalOptions="CenterAndExpand"/>
                                                <Label FontAttributes="Bold" TextColor="#5c5cd6" Text="{Binding TotalPrice, StringFormat='🛒 {0:N0}'}" VerticalOptions="CenterAndExpand" HorizontalOptions="CenterAndExpand"></Label>
    
                                                <Grid ColumnSpacing="0" RowSpacing="0" HorizontalOptions="FillAndExpand">
                                                    <Grid.ColumnDefinitions>
                                                        <ColumnDefinition Width="*" />
                                                        <ColumnDefinition Width="*" />
                                                        <ColumnDefinition Width="*"/>
                                                    </Grid.ColumnDefinitions>
                                                    <Grid.RowDefinitions>
                                                        <RowDefinition />
                                                    </Grid.RowDefinitions>
                                                    <StackLayout HorizontalOptions="FillAndExpand" Grid.Column="0" Grid.Row="0" BackgroundColor="Transparent">
                                                        <Button Clicked="Plus_Clicked" ImageSource="add_circle" ClassId="Step1" CommandParameter="{Binding .}" BackgroundColor="Transparent"></Button>
                                                    </StackLayout>
                                                    <StackLayout HorizontalOptions="FillAndExpand" Grid.Column="1" Grid.Row="0" BackgroundColor="Transparent">
                                                        <Entry HorizontalTextAlignment="Center" Text="{Binding TedadDarBag}" Keyboard="Numeric"></Entry>
                                                    </StackLayout>
                                                    <StackLayout HorizontalOptions="FillAndExpand" Grid.Column="2" Grid.Row="0" BackgroundColor="Transparent">
                                                        <Button Clicked="Minus_Clicked" ImageSource="remove_circle" ClassId="Step1" CommandParameter="{Binding .}" BackgroundColor="Transparent"></Button>
                                                    </StackLayout>
                                                </Grid>
                                            </StackLayout>
    
                                        </Frame>
                                    </DataTemplate>
                                </CollectionView.ItemTemplate>
    
                                <CollectionView.EmptyView>
                                    <Label Text="موردی یافت نشد" HorizontalOptions="Center" />
                                </CollectionView.EmptyView>
    
                            </CollectionView>
                        </StackLayout>
                    </Frame>
    

    مجبور شدم اینجوری بیارم اخر که اول من بشه
    Itm1.ScrollTo(Home1[Home1.Count-2], animate: false);

  • mjdevelopermjdeveloper Member ✭✭✭

    Well, what's the problem?
    بسیار عالی الان مشکل چی هست؟

  • fakhravarifakhravari Member ✭✭✭✭
    edited February 2

    الان یه مسله متوجه شدم
    CarouselView و CollectionView
    درست نمایش میدهند
    اما سکرول که میکنی انگار یک جور
    ltr هست
    نیست rtl

    یعنی اسلاد ها با دست که حرکت میدیم از چپ به راست است
    ولی باید از راست به چپ باشه :D

  • fakhravarifakhravari Member ✭✭✭✭

  • mjdevelopermjdeveloper Member ✭✭✭
    edited February 2

    شما می تونی قبل از اینکه آیتم رورس رو ست کنی به کروزل پوزیشن بدی و آیتم آخری رو بدی که از راست به چپ بشه

    myCarousel.Position = YoutList.Count -1;
    myCarousel.ItemSource = YoutList;
    
  • fakhravarifakhravari Member ✭✭✭✭
    edited February 2
    میشه داده ها رو revers کرد
    و بگی از ایتم اخر شروع کنه
    اما زمان لود صفحه کندی دار
    چون باید اسکرول کنه بره اخر صفحه

    قابلیت راست چین صفحه نباید این جور باشه
  • LandLuLandLu Member, Xamarin Team Xamurai

    If you want others to be assistance try to use English to describe your issues.

  • mjdevelopermjdeveloper Member ✭✭✭

    Hi @fakhravari
    You can reverse your list with:

    YourList.Reverse();
    return YourList;
    
  • mjdevelopermjdeveloper Member ✭✭✭

    Hi @LandLu
    We apologise, We mustn't write in Persian in this public forum .

  • fakhravarifakhravari Member ✭✭✭✭
    edited February 3

    sped fast items CoverFlowView?

    @mjdeveloper
    سرعت بیشتری میشه داد به حرکت ایتن ها . الان خیلی کند است و 1 ایتم به ایتم میره :# ؟

  • fakhravarifakhravari Member ✭✭✭✭

    see https://github.com/AndreiMisiukevich/CardView#custom-animations
    There are many methods involved.
    Exactly which method does this task

  • minhhoang2188minhhoang2188 Member

    @fakhravari said:

    I like it. Could you please send the code to me. thanks

  • fakhravarifakhravari Member ✭✭✭✭

    @minhhoang2188 said:

    @fakhravari said:

    I like it. Could you please send the code to me. thanks

    https://forums.xamarin.com/post/quote/177236/Comment_401969

Sign In or Register to comment.