star rating HexControls Custom User Controls

[Hexxxer]

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"/>

 

Will give you a result like this.

Pretty weird right? Well have a go and see what you can come up with.

HexControls-0.5.zip

Edited June 30, 2017 by Hexxxer
Typos

[neil9000]

Long time no see @Hexxxer, great to see you back here, and now creating plug ins as well!! Excellent work.  

[Hexxxer]

thanks @neil9000, it seems a lot has changed in the past 6 months! I'm looking forward to contributing something new.