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)
Abdurhman Sefersays:
Cumartesi Temmuz 6th, 2019 at 19:09SfRating reference Kullansak daha mantıklı değil mi hocam
omersezersays:
Pazar Temmuz 7th, 2019 at 13:30Tabiki de. İstediginizi kullanabilirsiniz. Ben kolaylıkla nasıl yapıldığını ve alternatif olması için yaptım.