themes HexControls 1.1.1

A collection of custom user controls to make custom themes easier.

I will be updating the tool periodically with new features.

Install for use

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

Screenshots Control.

Description

A control to randomly display a list of screenshots available for a game. It will stretch itself to the bounds of the container it is placed in.

Default Use in a Theme

<Hex:Screenshots/>

Advanced Use

Using the properties below will allow the user to effect the maximum number of screenshots shown, spacing  and border controls

Properties

ScreenshotBorderColor: Border Color
ScreenshotPanelOrientation: "Vertical"  or "Horizontal" Direction Screenshot span
ScreenshotMaxImages:   Number of maximum screenshots shown (Default is 4)
ScreenshotBorderSize:  How thick the border around the screenshot is. Setting the bordersize to zero will remove the border
ScreenshotCornerRadius: Curve around all edges of a scrrenshot
ScreenshotMarginSize= Space Between each screenshots edge

Example

      <Hex:Screenshots ScreenshotBorderColor="Blue"
                       ScreenshotPanelOrientation="Vertical"
                       ScreenshotMaxImages="10"
                       ScreenshotBorderSize="15"
                       ScreenshotCornerRadius="13"
                       ScreenshotMarginSize="5"
                       Grid.Column="15"
                       Grid.Row="3"
                       Grid.RowSpan="15"
                       Grid.ColumnSpan="15">

      </Hex:Screenshots>

Star Rating

Default 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.