Question

Need help with one thing. I have DataGrid, binding it to this class:

class Book
{
    public string Title { get; set; }
    public string Author { get; set; }
    public string Tags { get; set; }
    public string Year { get; set; }
    public string Description { get; set; }
    public string Path { get; set; }
    public int Rating { get; set; }
    public Statistics Stats { get; set; }
}

This is XAML:

<DataGrid AutoGenerateColumns="False" EnableRowVirtualization="True" ItemsSource="{Binding}" Margin="56,49,12,12" Name="booksDataGrid" RowDetailsVisibilityMode="VisibleWhenSelected" ColumnWidth="*" MinWidth="400" MinHeight="250">
        <DataGrid.Columns>
            <DataGridTextColumn x:Name="titleColumn" Binding="{Binding Path=Title}" Header="Title" Width="2*" />
            <DataGridTextColumn x:Name="authorColumn" Binding="{Binding Path=Author}" Header="Author" Width="*" />
            <DataGridTextColumn x:Name="tagsColumn" Binding="{Binding Path=Tags}" Header="Tags" Width="*" />
            <DataGridTextColumn x:Name="yearColumn" Binding="{Binding Path=Year}" Header="Year" Width="*" />
            <DataGridTextColumn x:Name="ratingColumn" Binding="{Binding Path=Rating}" Header="Rating" Width="*" />
        </DataGrid.Columns>
</DataGrid>

But I want to show Rating not like a number, but like a five images of stars. How can I convert int value to something like a panel with images?

Answer 1

You could try something like this:

class Book
{
    public string Title { get; set; }
    public string Author { get; set; }
    public string Tags { get; set; }
    public string Year { get; set; }
    public string Description { get; set; }
    public string Path { get; set; }
    public int Rating { get; set; }
    public Statistics Stats { get; set; }

  public string displayRating 
    {
        get
        {
            if (Rating > 0)
            {
                var temp = "";
                for (int i = 0; i < Rating; i++)
                {
                    temp += "*";
                }
                return temp;
            }
            return "No rating found";
        } 
    }
}

if your Rating property = 5, the displayRating property will be "*****".
You could bind that displayRating property to your gridview like this:

 <DataGridTextColumn x:Name="ratingColumn" Binding="{Binding Path=displayRating}" Header="Rating" Width="*" />

EDIT:

If the maximum amount of stars you are going to need isn’t a super big number (like 30+) you could just make a .jpg for each rating.
So you make a .jpg file with 1*, you make a .jpg with 2*..
Then in your displayRating string do the following:

  public string displayRating 
    {
        get{ return "pathToYourJpg" + Rating + ".jpg";}
    }

lets say that you have the following Jpg’s:

c:/users/desktop/rating1.jpg
c:/users/desktop/rating2.jpg
c:/users/desktop/rating3.jpg
c:/users/desktop/rating4.jpg

if your rating is 4, the displayProperty rating will return "c:/users/desktop/rating4.jpg" Use this path to bind it to your datagrid.

Something like this (not sure tho, havent actually done this myself, but it should be something like this):

<Image Source="{Binding Path=displayRating}" Stretch="Fill" Height="100" Width="100" />

this is just off the top of my head.. it’s one way how you could do it, not saying this is the best one 🙂