star rating HexControls Custom User Controls

Hexxxer · June 30, 2017

As my first attempt at anything WPF programming related, I decided to try my hand at creating a custom star ratings tool.

Install for use

Download HexControls.dll
place the file in the plugins folder in your theme

add the reference

 xmlns:Hex="clr-namespace:HexControls;assembly=HexControls"

Use in a Theme

In a Game view call
```
 <Hex:StarRating /> 
```
- Pretty much it for the default use. The control will size to whatever space it is placed in.
- This will get you a red star with white border for an on star and a black star with white border for an off star.

Advanced Use

I've set up the control to allow users to do two things:

Modify the color properties for Star On/Star Off and their border
Modify two Star vectors layered on top of each other; this has been created to allow for more vibrant star designs using transparency.

Properties:

ColorOnStarOneFill - On Fill Color for Star one
ColorOnStarOneBorder - On Border Color for Star One
ColorOnStarTwoFill - On Fill Color for Star Two
ColorOnStarTwoBorder - On Border Color for Star Two

ColorOffStarOneFill - Off Fill Color for Star One
ColorOffStarOneBorder - Off Border Color for Star One
ColorOffStarTwoFill - Off Fill Color for Star Two
ColorOffStarTwoBorder - Off Border Color for Star Two

StarsMarginSize - Margin Between Each star
BorderStarOneSize - Size of the Border for Star One
BorderStarTwoSize - Size of the Border for Size Two

So, using these settings

<Hex:StarRating Panel.ZIndex="1000"
                             Grid.Column="11"
                             Grid.Row="1"
                             Grid.ColumnSpan="10"
                            
                             Grid.RowSpan="3"
                             HorizontalAlignment="Left"
                             VerticalAlignment="Top"
                                            
                             ColorOnStarOneFill="#BBC49A6C"
                             ColorOnStarOneBorder="#11111111"
                             ColorOnStarTwoFill="#BBC49A6C"
                             ColorOnStarTwoBorder="#11FFFFFF"
                                            
                             ColorOffStarOneFill="Black"
                             ColorOffStarOneBorder="White"
                             ColorOffStarTwoFill="#66000000"
                             ColorOffStarTwoBorder="White"
                             StarsMarginSize="10"
                             BorderStarOneSize="8"
                             BorderStarTwoSize="20"
                             SnapsToDevicePixels="True"/>