Jump to content
LaunchBox Community Forums

Recommended Posts

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.Capture.thumb.PNG.399f409c649aefa0e768b28abd0b7b7e.PNG

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.Capture2.PNG.c0513aa6431709b7bd1f434173e6d20f.PNG

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

HexControls-0.5.zip

Edited by Hexxxer
Typos
Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

 Share

×
×
  • Create New...