Question

Youtube has a nice control for votes like below screenshots,

Is there anything similar in WPF already or if I need to do it by myself, how to do it? I’m new to WPF, XAML and all, so I have this question.

Answer 1

I am not familiar that anything exactly like this already exists, there are Sparkline controls in some of the proprietary controls such as Telerik RadControls, but nothing exactly the same to the YouTube votes.

But it should be easy enough to create your own control using XAML.

Let’s take a look, the control exists from 3 labels, a line that shows progress and two icons. To position this elements in a WPF user control, you can use a grid with three rows and two columns.

<Grid>
    <Grid.RowDefinitions>
        <RowDefinition Height="Auto" />
        <RowDefinition Height="Auto" />
        <RowDefinition Height="Auto" />
    </Grid.RowDefinitions>

    <Grid.ColumnDefinitions>
        <ColumnDefinition />
        <ColumnDefinition Width="Auto" />
    </Grid>
</Grid>

The labels are then placed into first and last rows using the XAML attributes Grid.Row and Grid.Column. The icons in last row can be placed using a StackPanel or just creating more columns, do as you wish. Everything here is easy.

The problem is the spark line, which I suggest you create two rectangles placed on top of one another. Both should go into second row, and span through all columns, you can achieve this using Grid.ColumnSpan attribute. First rectangle represents the background, so choose a light color for it. The second one represents the actual vote counter and should be colored red or green, depending on the votes.

Give all elements a name and you are finished with XAML (except minor corrections such as Margins and Horizontal or Vertical Alignments).

In code, create three properties for user control, all of type Integer (int). One for view count and two for up and down votes. Those properties can either be bound to labels in XAML, or you can update the values manually. Read more about Data binding here: http://wpftutorial.net/DataBindingOverview.html

To correctly place the rectangle that displays vote counter, you should just calculate the percentage of upvotes based on the properties, use the following code for help:

double percentage = UpvoteCount / (double)(UpvoteCount + DownvoteCount);

Note that I cast the sum to double, to keep percentage a floating point number (or you would always get a zero). From here all you need to do is to rescale the width of the rectangle to the appropriate percentage, considering that the background rectangle spans 100%. You can do this with the following code:

voteProgress.Width = percentage * voteBackground.ActualWidth;

In this case voteProgress and voteBackground are the names of your rectangles. Youtube also uses different colors, which you can change based on your calculated percentage:

if (percentage > 0.5)
   voteProgress.Fill = new SolidColorBrush(Colors.Green);
else
   voteProgress.Fill = new SolidColorBrush(Colors.Red);

The percentage MUST be calculated each time the size of the control changes (or number of votes), so look into SizeChanged event.

For more information and details, please read WPF tutorial, courtesy of Christian Moser.

http://wpftutorial.net