Hello friends. In this article, I would like to talk about a topic that I am not looking for. You may want to evaluate anything in your project. This is either a user evaluation or a product evaluation. You may need to evaluate with stars for this. Native as a very comfortable way you can put the screen, but Xamarin.Forms’da this business is a bit confused. In this article we will try to get it done in a very simple way.
First, we need 2 stars photos. The first one is the hollow star. The other is the yellow star that will be created when the star is clicked. After the stars are done, we are going to the design section. Here we will create the grid structure. How many stars on our screen we want to create a column. Then we put the five hollow stars here.
The design screen is as follows.
<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>
Then we need to do their operations. We need to write a function to be clicked on 5 stars. In these functions I am actually only changing the pictures of the stars. Of course, we need to check whether these will be changed. Finally, we write a function that generally changes a star rating. In fact, we could have done all this at once. We could assign a command parameter to the images and send them when clicked. For simplicity, I created a separate function for each star.
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;
}
}
}
}
You can see the screenshots below.
Comments (2)
Abdurhman Sefersays:
Saturday July 6th, 2019 at 07:09 PMSfRating reference Kullansak daha mantıklı değil mi hocam
omersezersays:
Sunday July 7th, 2019 at 01:30 PMTabiki de. İstediginizi kullanabilirsiniz. Ben kolaylıkla nasıl yapıldığını ve alternatif olması için yaptım.