[Xamarin] Auto Slide Image with CarouselView

하단에 메뉴가 있고 배경이 여러이미지로 슬라이딩되면서 변경되는 화면을 구성하는 방법을 소개한다.

우선 Grid 를 배치하고 Grid 안으로 CarouselView 를 위치하고 좌측 상단에 로고 이미지를

하단에는 메뉴 아이콘을 배치했으며 이미지가 가로로 스크롤이 되도록 CarouselView 의  ItemsLayout 속성을 "HorizontalList" 으로 설정한다.

<?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:d="http://xamarin.com/schemas/2014/forms/design"

             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"

             mc:Ignorable="d"

             x:Class="SlideImage.MainPage">

    <StackLayout Margin="0" Padding="0" HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand" BackgroundColor="Black">

        <Grid HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand" Margin="0" Padding="0" ColumnSpacing="0" RowSpacing="0" BackgroundColor="White">

            <CarouselView  x:Name="mainView" ItemsLayout="HorizontalList" Margin="0" BackgroundColor="LightYellow" HorizontalScrollBarVisibility="Always">

                <CarouselView.ItemTemplate>

                    <DataTemplate>

                        <Image Source="{Binding ImageSrc}" Aspect="Fill"/>

                    </DataTemplate>

                </CarouselView.ItemTemplate> 

            </CarouselView>

            <Image Source="keisoft_textlogo.png" WidthRequest="100" HeightRequest="30" VerticalOptions="Start" HorizontalOptions="Start" Margin="10,0,0,0"/>

            <StackLayout VerticalOptions="End" Padding="0,0,0,20" HorizontalOptions="Center" Orientation="Horizontal" Spacing="20">

                <Image Source="main_store.png" WidthRequest="60" HeightRequest="60" >

                    <Image.GestureRecognizers>

                        <TapGestureRecognizer Tapped="StoreButton_Clicked"></TapGestureRecognizer>

                    </Image.GestureRecognizers>

                </Image>

                <Image Source="main_menu.png" WidthRequest="60" HeightRequest="60" >

                    <Image.GestureRecognizers>

                        <TapGestureRecognizer Tapped="MenuButton_Clicked"></TapGestureRecognizer>

                    </Image.GestureRecognizers>

                </Image>

                <Image Source="main_order.png" WidthRequest="60" HeightRequest="60" >

                    <Image.GestureRecognizers>

                        <TapGestureRecognizer Tapped="CartButton_Clicked"></TapGestureRecognizer>

                    </Image.GestureRecognizers>

                </Image>

                <Image Source="main_member.png" WidthRequest="60" HeightRequest="60" >

                    <Image.GestureRecognizers>

                        <TapGestureRecognizer Tapped="PersonButton_Clicked"></TapGestureRecognizer>

                    </Image.GestureRecognizers>

                </Image>

            </StackLayout>

        </Grid>

    </StackLayout>

</ContentPage>

여기에 일정 시간 간격으로 이미지가 자동으로 스크롤이 되도록 Timer 를 이용해 처리하면 아래 와 같은 화면이 완성된다.

Device.StartTimer(TimeSpan.FromSeconds(3), (Func<bool>)(() =>
{
    this.mainView.Position = (this.mainView.Position + 1) % 3;
    return true;
}));

자동으로 가로로 스크롤 되며 터치로도 슬라이드 동작을 하면 스크롤 된다.

* 이미지는 저작권이 있으므로 마음대로 쓰면 안됨.

소스

https://github.com/kei-soft/Slide-Image