{"id":1507,"date":"2018-11-02T21:53:02","date_gmt":"2018-11-02T21:53:02","guid":{"rendered":"https:\/\/sezeromer.com\/?p=1507"},"modified":"2023-02-27T21:34:32","modified_gmt":"2023-02-27T18:34:32","slug":"xamarin-forms-baslangic-ekrani-slider","status":"publish","type":"post","link":"https:\/\/sezeromer.com\/en\/xamarin-forms-baslangic-ekrani-slider\/","title":{"rendered":"Xamarin Forms Slider"},"content":{"rendered":"

Hello friends. In this article, when the application is opened, we will make a screen that introduces the application. When you try to search on the Internet, you can see it as a Welcome Slider. Someone installing your app; Normally there is a Nuget package for everything but there wasn’t for this when you first open the app. It’s actually a bit complex to make. We will solve this problem with Absotute Layout, Carousel View and a few Grids inside. I will create it from 3 pages to be an example.<\/p>\n

First I throw an Absolute Layout. This covers the entire screen. Then I throw a Carousel View into this layout. I can show different screens by turning it sideways with Carousel View. Since I give the Carousel View to the whole screen, I provide a page transition view. If you want, you can fill in the Data Template according to you. There are 5 buttons at the bottom of the page. 2 of these buttons are for back and forth. The other 3 buttons show which page we are on.<\/p>\n

\n
 <AbsoluteLayout VerticalOptions=\"FillAndExpand\">\r\n        <carousel:CarouselView x:Name=\"carouselView\"\r\n                               ItemsSource=\"{Binding .}\"\r\n                               IsNativeStateConsistent=\"true\"\r\n                               PositionSelected=\"Handle_PositionSelected\"\r\n                               IsInNativeLayout=\"true\"\r\n                               AbsoluteLayout.LayoutBounds=\"0,0,1,1\"\r\n                               AbsoluteLayout.LayoutFlags=\"HeightProportional, WidthProportional\">\r\n            <carousel:CarouselView.ItemTemplate>\r\n                <DataTemplate>\r\n                    <Grid BackgroundColor=\"{Binding BackgroundColor}\">\r\n                        <Grid.RowDefinitions>\r\n                            <RowDefinition Height=\"*\"\/>\r\n                            <RowDefinition Height=\"*\"\/>\r\n                            <RowDefinition Height=\"*\"\/>\r\n                        <\/Grid.RowDefinitions>\r\n                            <Label Text=\"{Binding Name}\"\r\n                                   HorizontalOptions=\"Center\"\r\n                                   VerticalOptions=\"Center\"\r\n                           \/>\r\n                    <\/Grid>\r\n                <\/DataTemplate>\r\n            <\/carousel:CarouselView.ItemTemplate>\r\n        <\/carousel:CarouselView>\r\n        <Grid AbsoluteLayout.LayoutBounds=\"0,1,1,1\"\r\n               AbsoluteLayout.LayoutFlags=\"HeightProportional, WidthProportional\"\r\n              VerticalOptions=\"EndAndExpand\"\r\n                >\r\n            <Grid.ColumnDefinitions>\r\n                <ColumnDefinition Width=\"Auto\"\/>\r\n                <ColumnDefinition Width=\"*\"\/>\r\n                <ColumnDefinition Width=\"Auto\"\/>\r\n            <\/Grid.ColumnDefinitions>\r\n        <Button Text=\"Geri\"\r\n                TextColor=\"White\"\r\n                BorderRadius=\"10\"\r\n                Grid.Column=\"0\"\r\n                x:Name=\"buttonGeri\"\r\n                            Clicked=\"buttonGeri_Clicked\"\r\n                BackgroundColor=\"Red\"\r\n                \/>\r\n            <Grid Grid.Column=\"1\"\r\n                  HorizontalOptions=\"Center\">\r\n                <Grid.ColumnDefinitions>\r\n                    <ColumnDefinition Width=\"*\"\/>\r\n                    <ColumnDefinition Width=\"*\"\/>\r\n                    <ColumnDefinition Width=\"*\"\/>\r\n                <\/Grid.ColumnDefinitions>\r\n                <StackLayout Grid.Column=\"0\"\r\n                             HorizontalOptions=\"Center\"\r\n                             VerticalOptions=\"Center\">\r\n                    <Button \r\n                        BackgroundColor=\"Transparent\"\r\n                        HeightRequest=\"20\"\r\n                        WidthRequest=\"20\"\r\n                        x:Name=\"button1\"\r\n                        CornerRadius=\"10\"\r\n                        BorderWidth=\"2\"\r\n                        BorderColor=\"Navy\"\/>\r\n                <\/StackLayout>\r\n                <StackLayout Grid.Column=\"1\"\r\n                             HorizontalOptions=\"Center\"\r\n                             VerticalOptions=\"Center\">\r\n                    <Button Grid.Column=\"1\"\r\n                        BackgroundColor=\"Transparent\"\r\n                        HeightRequest=\"20\"\r\n                        WidthRequest=\"20\"\r\n                        x:Name=\"button2\"\r\n                            CornerRadius=\"10\"\r\n                        BorderWidth=\"2\"\r\n                            \r\n                        BorderColor=\"Navy\"\/>\r\n                <\/StackLayout>\r\n                <StackLayout Grid.Column=\"2\"\r\n                             VerticalOptions=\"Center\"\r\n                             HorizontalOptions=\"Center\">\r\n                    <Button BackgroundColor=\"Transparent\"\r\n                        HeightRequest=\"20\"\r\n                            x:Name=\"button3\"\r\n                        WidthRequest=\"20\"\r\n                            CornerRadius=\"10\"\r\n                        BorderWidth=\"2\"\r\n                        BorderColor=\"Navy\"\/>\r\n                <\/StackLayout>\r\n                \r\n            <\/Grid>\r\n            <Button Text=\"\u0130leri\"\r\n                TextColor=\"White\"\r\n                    x:Name=\"buttonIleri\"\r\n                    Clicked=\"buttonIleri_Clicked\"\r\n                BorderRadius=\"10\"\r\n                Grid.Column=\"2\"\r\n                BackgroundColor=\"Green\"\r\n                \/>\r\n        <\/Grid>\r\n        \r\n    <\/AbsoluteLayout><\/pre>\n<\/div>\n
Once you’ve done the design part, it’s necessary to give it a function. For this, we need to switch to the cs side. Of course, first I need to create a model. I’m creating this model to show what will happen on the screen. For simplicity I will change the backgrounds of the screens and just put different text on the screen. I create a list and add 3 yields to this list. Then I bind this list into my Carousel View.<\/p>\n
I need to add functionality to the forward and back buttons. I am checking the position of Carousel View. If it is not more than the one in the list, I increase the position of the Carousel View by one and change the back panes of the round buttons that I put at the bottom of the screen to inform the user which page they are on. The forward and back buttons are very similar.<\/p>\n
Then, when the Carousel View is moved sideways, we can get the design we want after changing the backgrounds of the round buttons.<\/p>\n
\n
public partial class MainPage : ContentPage\r\n    {\r\n        List<Model> liste;\r\n        public MainPage()\r\n        {\r\n            InitializeComponent();\r\n            liste = new List<Model>\r\n            {\r\n                new Model\r\n                {\r\n                    Name = \"Omer\",\r\n                    BackgroundColor = \"Black\"\r\n                },\r\n                new Model\r\n                {\r\n                    Name = \"Ebu\",\r\n                    BackgroundColor = \"Green\"\r\n                },\r\n                new Model\r\n                {\r\n                    Name = \"Bar\u0131\u015f\",\r\n                    BackgroundColor = \"Yellow\"\r\n                }\r\n            };\r\n\r\n            carouselView.BindingContext = liste;\r\n            ChangeBackground(carouselView);\r\n\r\n        }\r\n\r\n        void buttonIleri_Clicked(object sender, System.EventArgs e)\r\n        {\r\n            if (carouselView.Position +1 !=liste.Count)\r\n            {\r\n                carouselView.Position = carouselView.Position + 1;\r\n                ChangeBackground(carouselView);\r\n\r\n            }\r\n        }\r\n\r\n        void buttonGeri_Clicked(object sender, System.EventArgs e)\r\n        {\r\n            if (carouselView.Position != 0)\r\n            {\r\n                carouselView.Position = carouselView.Position - 1;\r\n                ChangeBackground(carouselView);\r\n\r\n            }\r\n\r\n        }\r\n        void ChangeBackground(CarouselView carouselView)\r\n        {\r\n            switch (carouselView.Position)\r\n            {\r\n                case 0:\r\n                    {\r\n                        button1.BackgroundColor = Color.White;\r\n                        button2.BackgroundColor = Color.Transparent;\r\n                        button3.BackgroundColor = Color.Transparent;\r\n                        break;\r\n                    }\r\n                case 1:\r\n                    {\r\n                        button1.BackgroundColor = Color.Transparent;\r\n                        button2.BackgroundColor = Color.White;\r\n                        button3.BackgroundColor = Color.Transparent;\r\n                        break;\r\n                    }\r\n                case 2:\r\n                    {\r\n                        button1.BackgroundColor = Color.Transparent;\r\n                        button2.BackgroundColor = Color.Transparent;\r\n                        button3.BackgroundColor = Color.White;\r\n                        break;\r\n                    }\r\n                default:\r\n                    {\r\n                        button1.BackgroundColor = Color.White;\r\n                        button2.BackgroundColor = Color.Transparent;\r\n                        button3.BackgroundColor = Color.Transparent;\r\n                        break;\r\n                    }\r\n            }\r\n        }\r\n\r\n        void Handle_PositionSelected(object sender, Xamarin.Forms.SelectedPositionChangedEventArgs e)\r\n        {\r\n            ChangeBackground(carouselView);\r\n        }\r\n    }<\/pre>\n<\/div>\n
An example of the project is as follows.<\/p>\n
\"\"<\/p>\n
If you have questions, you can reach us by sending an e-mail or comment.<\/p>","protected":false},"excerpt":{"rendered":"
Hello friends. In this article, when the application is opened, we will make a screen that introduces the application. When you try to search on the Internet, you can see it as a Welcome Slider. Someone installing your app; Normally there is a Nuget package for everything but there wasn’t for this when you first […]<\/p>\n","protected":false},"author":1,"featured_media":1513,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[289,288,3],"tags":[114,585,583,556,132,115,129,145,566,584,22],"class_list":["post-1507","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-android","category-ios","category-xamarin-ile-yapilmis-projeler","tag-android","tag-asolute","tag-carousel","tag-froms","tag-grid","tag-ios","tag-layout","tag-slider","tag-view","tag-welcome","tag-xamarin"],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/sezeromer.com\/en\/wp-json\/wp\/v2\/posts\/1507"}],"collection":[{"href":"https:\/\/sezeromer.com\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/sezeromer.com\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/sezeromer.com\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/sezeromer.com\/en\/wp-json\/wp\/v2\/comments?post=1507"}],"version-history":[{"count":7,"href":"https:\/\/sezeromer.com\/en\/wp-json\/wp\/v2\/posts\/1507\/revisions"}],"predecessor-version":[{"id":2615,"href":"https:\/\/sezeromer.com\/en\/wp-json\/wp\/v2\/posts\/1507\/revisions\/2615"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/sezeromer.com\/en\/wp-json\/wp\/v2\/media\/1513"}],"wp:attachment":[{"href":"https:\/\/sezeromer.com\/en\/wp-json\/wp\/v2\/media?parent=1507"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/sezeromer.com\/en\/wp-json\/wp\/v2\/categories?post=1507"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/sezeromer.com\/en\/wp-json\/wp\/v2\/tags?post=1507"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}