Press ESC to close

Xamarin Forms Rating Star ( Yıldızlı Değerlendirmesl )

Merhaba arkadaşlar. Bu yazımda çokça aradığım lakin bulamadığım bir konudan bahsedeceğim. Projenide herhangi bir şeyi değerlendirmek isteyebilirsiniz. Bu gerek kullanıcı değerlendirmesi olur, gerekse de bir ürün değerlendirmesi olur. Bunun için yıldızlar ile değerlendirmeye gerek duyabilirsiniz. Native olarak çok rahat bir şekilde ekrana koyup yapabiliyorsunuz ama Xamarin.Forms’da bu iş biraz karışıyor. Çok basit bir şekilde bunu halletmeye çalışacağız bu yazıda.

İlk olarak 2 adet yıldız fotoğrafına ihtiyacımız var. Bunlardan ilki içi boş olan yıldız. Diğeri ise yıldıza tıklandığında oluşacak içi sarı yıldız. Yıldızları hallettikten sonra tasarım kısmına geçiyoruz. Burada grid yapısıyla oluşturacağız. Ekranımızda kaç adet yıldız istiyorsak o kadar sütun oluşturuyoruz. Sonrasında ise 5 adet içi boş olan yıldızı buraya koyuyoruz.

Tasarım ekranı aşağıda ki gibidir.

 <StackLayout VerticalOptions="Center"
                 HorizontalOptions="Center">
        <Grid HorizontalOptions="Center">
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="Auto"/>
                        <ColumnDefinition Width="Auto"/>
                        <ColumnDefinition Width="Auto"/>
                        <ColumnDefinition Width="Auto"/>
                        <ColumnDefinition Width="Auto"/>
                    </Grid.ColumnDefinitions>
                    <Image Source="star_outline.png" 
                           Grid.Column="0"
                           HorizontalOptions="Center"
                           VerticalOptions="Center"
                           WidthRequest="20"
                           HeightRequest="20"
                           x:Name="star0">
                        <Image.GestureRecognizers>
                            <TapGestureRecognizer Tapped="Star0_Clicked"/>
                        </Image.GestureRecognizers>
                    </Image>
                    <Image Source="star_outline.png" 
                           WidthRequest="20"
                           HorizontalOptions="Center"
                           VerticalOptions="Center"
                           HeightRequest="20"
                           Grid.Column="1"
                           x:Name="star1"
                           >
                        <Image.GestureRecognizers>
                            <TapGestureRecognizer Tapped="Star1_Clicked"/>
                        </Image.GestureRecognizers>
                    </Image> 
                    <Image Source="star_outline.png" 
                           WidthRequest="20"
                           HeightRequest="20"
                           HorizontalOptions="Center"
                           VerticalOptions="Center"
                           Grid.Column="2"
                           x:Name="star2"
                           >
                        <Image.GestureRecognizers>
                            <TapGestureRecognizer Tapped="Star2_Clicked"/>
                        </Image.GestureRecognizers>
                    </Image>
                     <Image Source="star_outline.png" 
                           Grid.Column="3"
                            HorizontalOptions="Center"
                           VerticalOptions="Center"
                            WidthRequest="20"
                           HeightRequest="20"
                           x:Name="star3"
                           >
                        <Image.GestureRecognizers>
                            <TapGestureRecognizer Tapped="Star3_Clicked"/>
                        </Image.GestureRecognizers>
                    </Image>
                     <Image Source="star_outline.png" 
                            HorizontalOptions="Center"
                           VerticalOptions="Center"
                            WidthRequest="20"
                           HeightRequest="20"
                           Grid.Column="4"
                           x:Name="star4"
                           >
                        <Image.GestureRecognizers>
                            <TapGestureRecognizer Tapped="Star4_Clicked"/>
                        </Image.GestureRecognizers>
                    </Image>
                </Grid>
    </StackLayout>

Sonrasında ise bunların işlemlerini yapmamız gerekiyor. 5 yıldıza da tıklandığında olacaklar için fonksiyon yazmamız gerekiyor. Bu fonksiyonların içerisinde aslında sadece yıldızların resimlerini değiştiriyorum. Tabi bunların değiştirilip değiştilmeyeceğiniz kontrol etmemiz gerekiyor. Son olarak ise genel olarak bir yıldız derecelendirmesini değiştiren bir fonksiyon yazıyoruz. Aslında bunların hepsini tek seferde de halledebilirdik.  Resimlere bir command parameter atayıp, tıklandığında bunları gönderebilirdik. Basit olması açısından her yıldız için ayrı fonksiyon oluşturdum.

int ratinPoint = 0;
        bool changeable = true;
        public MainPage()
        {
            InitializeComponent();
        }
        #region Star Click Function
        void Star0_Clicked(object sender, EventArgs e)
        {
            if (changeable == true)
            {
                star0.Source = "star_selected.png";
                star1.Source = "star_outline.png";
                star2.Source = "star_outline.png";
                star3.Source = "star_outline.png";
                star4.Source = "star_outline.png";
                ratinPoint = 1;
            }

        }
        void Star1_Clicked(object sender, EventArgs e)
        {
            if (changeable == true)
            {
                star0.Source = "star_selected.png";
                star1.Source = "star_selected.png";
                star2.Source = "star_outline.png";
                star3.Source = "star_outline.png";
                star4.Source = "star_outline.png";
                ratinPoint = 2;

            }

        }
        void Star2_Clicked(object sender, EventArgs e)
        {
            if (changeable == true)
            {
                star0.Source = "star_selected.png";
                star1.Source = "star_selected.png";
                star2.Source = "star_selected.png";
                star3.Source = "star_outline.png";
                star4.Source = "star_outline.png";
                ratinPoint = 3;
            }

        }
        void Star3_Clicked(object sender, EventArgs e)
        {
            if (changeable == true)
            {
                star0.Source = "star_selected.png";
                star1.Source = "star_selected.png";
                star2.Source = "star_selected.png";
                star3.Source = "star_selected.png";
                star4.Source = "star_outline.png";
                ratinPoint = 4;
            }

        }
        void Star4_Clicked(object sender, EventArgs e)
        {
            if (changeable == true)
            {
                star0.Source = "star_selected.png";
                star1.Source = "star_selected.png";
                star2.Source = "star_selected.png";
                star3.Source = "star_selected.png";
                star4.Source = "star_selected.png";
                ratinPoint = 5;
            }

        }
        #endregion
        void ChangeRating(int ratingPoint)
        {
            if (changeable == true)
            {
                switch (ratingPoint)
                {
                    case 0:
                        {
                            star0.Source = "star_outline.png";
                            star1.Source = "star_outline.png";
                            star2.Source = "star_outline.png";
                            star3.Source = "star_outline.png";
                            star4.Source = "star_outline.png";
                            break;
                        }
                    case 1:
                        {
                            star0.Source = "star_selected.png";
                            star1.Source = "star_outline.png";
                            star2.Source = "star_outline.png";
                            star3.Source = "star_outline.png";
                            star4.Source = "star_outline.png";
                            break;
                        }
                    case 2:
                        {
                            star0.Source = "star_selected.png";
                            star1.Source = "star_selected.png";
                            star2.Source = "star_outline.png";
                            star3.Source = "star_outline.png";
                            star4.Source = "star_outline.png";
                            break;
                        }
                    case 3:
                        {
                            star0.Source = "star_selected.png";
                            star1.Source = "star_selected.png";
                            star2.Source = "star_selected.png";
                            star3.Source = "star_outline.png";
                            star4.Source = "star_outline.png";
                            break;
                        }
                    case 4:
                        {
                            star0.Source = "star_selected.png";
                            star1.Source = "star_selected.png";
                            star2.Source = "star_selected.png";
                            star3.Source = "star_selected.png";
                            star4.Source = "star_outline.png";
                            break;
                        }
                    case 5:
                        {
                            star0.Source = "star_selected.png";
                            star1.Source = "star_selected.png";
                            star2.Source = "star_selected.png";
                            star3.Source = "star_selected.png";
                            star4.Source = "star_selected.png";
                            break;
                        }
                    default:
                        {
                            star0.Source = "star_outline.png";
                            star1.Source = "star_outline.png";
                            star2.Source = "star_outline.png";
                            star3.Source = "star_outline.png";
                            star4.Source = "star_outline.png";
                            break;
                        }
                }
            }

        }

Aşağıda ekran görüntülerini görebilirsiniz.

Sorularınız olursa mail veya yorum atarak bana ulaşabilirsiniz. Dilerseniz projeyi Github’da paylaşabilirim. İyi çalışmalar.

Comments (2)

omersezer için bir yanıt yazın Yanıtı iptal et

E-posta adresiniz yayınlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir