SfRotator 사용하기

Syncfusion 의 SfRotator 는 아래 그림과 같이 이미지 등을 슬라이드로 보여주는 컨트롤입니다.

우선 보여줄 이미지를 준비합니다.

전 Images 폴더를 만들어 이미지를 넣었습니다.

이미지를 넣고 추가로 해야할건 각 이미지들의 속성에서 '빌드작업'을 '포함 리소스'로 변경해야합니다.

포함리소스 관련해서는 아래 포스팅 참고해주세요

2017/07/06 - [C#.NET/Xamarin] - (Xamarin Forms) 4.Image

 

이제 main1~5.jpg 그림파일을 5개를 이용해서 슬라이드 되도록 할것입니다.

우선  nuget 에서 SfRotator 를 검색해서 설치합니다.

 

아래처럼 xaml 파일을 작성합니다.

 

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:syncfusion="clr-namespace:Syncfusion.SfRotator.XForms;assembly=Syncfusion.SfRotator.XForms"
             x:Class="MiGong.HomePage">
    <ContentPage.Content>
        <StackLayout>
            <syncfusion:SfRotator x:Name="rotator" NavigationStripMode="Dots"  NavigationStripPosition="Bottom"
                                   EnableAutoPlay="true" NavigationDelay="3000"/>
            <Label Text="Welcome to Xamarin.Forms!"
                VerticalOptions="CenterAndExpand"
                HorizontalOptions="CenterAndExpand" />
        </StackLayout>
    </ContentPage.Content>
</ContentPage>

NavigationStripMode 는 네비게이션을 점으로 보일지 아니면 그냥 썸네일 방식으로 보여줄지 여부입니다.

NavigationStripPosition 은 네비게이션의 위치입니다.

EnableAutoPlay 는 자동으로 슬라이드가 될지 여부입니다.

NavigationDelay 는 자동으로 슬라이드되는 경우 정지될 시간입니다. (밀리초단위)

추가로 여러가지 속성이 있습니다.

아래 링크 참고해주세요

https://help.syncfusion.com/xamarin/sfrotator/overview

이제 비하인드 코드 xaml.cs 파일을 아래 처럼 작성합니다.

            List<SfRotatorItem> rotatorItem1 = new List<SfRotatorItem>();

            foreach (string imageName in new string[]{ "main1.jpg", "main2.jpg", "main3.jpg", "main4.jpg", "main5.jpg" })
            {
                SfRotatorItem item = new SfRotatorItem();
               
                Image image
                    = new Image()
                    {
                        Source = ImageSource.FromResource("MiGong.Images." + imageName),
                        Aspect = Aspect.AspectFill,
                        VerticalOptions = LayoutOptions.Center,
                        HeightRequest = 250
                        //WidthRequest = 400
                    };
               
                item.ItemContent = image;
                rotatorItem1.Add(item);
            }
            this.rotator.ItemsSource = rotatorItem1;

이제 실행해 보면 아래처럼 나타납니다.