Documentation

Scoreboard Layout Guidelines

Last Updated: May 16, 2017 11:01 pm

This page should help you to create your own scoreboard layout. Before reading this, make sure you're familiar with the Custom Scoreboards documentation and XAML/WPF.


  1. Layout
  2. Controls
  3. Control Resource Styles
  4. Adjustable Colors
  5. Images
  6. Animations and Effects
  7. Sport Layout Controls
    1. Multi-Sport
    2. American Football
    3. Rugby
    4. Baseball / Softball
    5. Soccer
    6. Tennis
    7. Hockey
    8. Basketball
    9. MMA
    10. Handball



Layout

Specifying your own Scoreboard is easy.
Create a new WPF layout with a Root Grid control and max width 813px:

< UserControl d:DesignHeight="668" d:DesignWidth="813">
	< Grid 	x:Name="Panel" Background="#FF0020EA" Margin="0,50,0,0"
		MinWidth="813" MaxWidth="813" Height="668" 
		VerticalAlignment="Top" HorizontalAlignment="Stretch">
	< /Grid>
< /UserControl>



Controls

Within this grid control, you can use whatever control you want to.
To extend your scoreboard with functionality, you need to set the names of your controls to one of available names.
LiveScore looks for all these controls in your layout, and uses them if they exist.
Set a name by using the x:Name tag, like this: x:Name="Panel".

Remember: Do not use duplicate names. Names and control types need to match.


Control Resource Styles

Some controls of your scoreboard are visual controls with a state that can be toggled, e.g. Bases, Outs, Strikes, ...
You can create your own styles for these toggle controls by defining custom user control resources.
Depending on your sport, different styles are available, and used when remote controlling your scoreboard
The code below, demonstrates a style for bases in a baseball scoreboard.

< UserControl.Resources>
   < Style x:Key="BaseON" TargetType="Rectangle">
	< Setter Property="Fill" Value="Yellow">
	< Setter Property="Stroke" Value="Yellow">
   < /Style>
   < Style x:Key="BaseOFF" TargetType="Rectangle">
	< Setter Property="Fill" Value="#FF525252">
	< Setter Property="Stroke" Value="#FF3F3F3F">
   < /Style>
< /UserControl.Resources>

// use it wherever you want to
Style = "{DynamicResource BaseOFF}" 



Adjustable Colors

Some colors of scoreboards can be adjusted and customized in the Live Score desktop application.
If you want to make your own scoreboard colors adjustable, create a color resource with the key names from the list below like the in this sample.

< UserControl.Resources>
   < LinearGradientBrush x:Key="PrimaryColor">
		< GradientStop Color="Black">< /GradientStop>
   < /LinearGradientBrush >
   < LinearGradientBrush x:Key="SecondaryColor">
		< GradientStop Color="Black">< /GradientStop>
   < /LinearGradientBrush >
< /UserControl.Resources>

// use it wherever you want to
< Style x:Key="BaseON" TargetType="Rectangle" >
	< Setter Property="Fill" Value="{DynamicResource PrimaryColor}" />
< /Style>

This is a list of available color resources that can be changed within the application if found in your scoreboard.

Style x:Name Category Description
AwayColor Team Colors Color for your Away Team
HomeColor Color for your Home Team
PrimaryColor Scoreboard Colors Main Color for your scoreboard
SecondaryColor Additional color for your scoreboard
TextColor Color for your scoreboard texts



Images

You can use any kind of images in your scoreboard by using the < image > control.
Make sure to set the Source property of your image as a relative path to your layout file.
After that set the same value for the Tag property of the control.
Live Score will automatically detect the image file by using the Tag property and calculate the absolute path of this file,
so that it will be displayed correctly, no matter where the file is stored.
Live Score provides dynamic images that can be edited within the GUI.
These images need to be named as mentioned in the Scoreboard Layout Guidelines.

< Image Source="myImage.png" Tag="myImage.png" Stretch="Fill" />



Animations

Animations help you to provide effects on certain events of your scoreboard.
These animations can be implemented by using WPF Storyboards.
A storyboard contains a timeline in which you can adjust all properties for multiple controls.
This means that you can e.g. move your scoreboard down and simultanously adjust its opacity.
You can either code your storyboard timeline on your own, or use the Timeline-Editor of Microsoft Expression Blend.
Live Score looks for defined storyboard names and triggers them on specific events.
You only need to make sure, that you use the corresponding names, which can be taken from the Sport Layout Controls below.


// Opacity Animation for Score-Home Label
< Storyboard x:Key="ScoreHomeAnimation">
  < DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="ScoreHome">
		< EasingDoubleKeyFrame KeyTime="0" Value="1"/>
		< EasingDoubleKeyFrame KeyTime="0:0:0.2" Value="0"/>
		< EasingDoubleKeyFrame KeyTime="0:0:0.4" Value="1"/>
  < /DoubleAnimationUsingKeyFrames>
< /Storyboard>



Multi Sport


Animations
Storyboard Name Category Type Description
ScoreAwayAnimation Scoring Storyboard Animation when away score changes
ScoreHomeAnimation Storyboard Animation when home score changes
SideAwayAnimation Storyboard Animation when side changes to away
SideHomeAnimation Storyboard Animation when side changes to home
Controls
Object x:Name Category Control Description
Panel Layout Grid root panel
TeamAway Scoring Label name of the away team
TeamHome Label name of the home team
ScoreAway Label score of the away team
ScoreHome Label score of the home team
GamesContainer Border will be toggled for games visible/invisible
GamesAway Label won games of the away team
GamesHome Label won games of the home team
SideAway Shape will be toggled for side visible/invisible
SideHome Shape will be toggled for side visible/invisible
TimeContainer Time Border will be toggled for time visible/invisible
Time Label current stopwatch time, e.g. 02:34 minutes
ShotClockContainer Border will be toggled for shot clock visible/invisible
ShotClock Label current shot clock second, e.g. 12
ImageAway Images Image logo for team away
ImageHome Image logo for team home
Image1 Image the first additional image (if existing)
Text1 Texts Label editable text for Textfield Text1



American Football


Animations
Storyboard Name Category Type Description
ScoreAwayAnimation Scoring Storyboard Animation when away score changes
ScoreHomeAnimation Storyboard Animation when home score changes
Styles
Style x:Name Category Control Description
TimeoutON Delay Style The ON style for available timeout shapes
TimeoutOFF Style The OFF style used timeout shapes
Controls
Object x:Name Category Control Description
Panel Layout Grid root panel
TeamAway Scoring Label name of the away team
TeamHome Label name of the home team
ScoreAway Label score of the away team
ScoreHome Label score of the home team
QuarterContainer Time Border will be toggled for quarter visible/invisible
Quarter Label current quarter
TimeContainer Border will be toggled for time visible/invisible
Time Label current stopwatch time, e.g. 02:34 minutes
DownsContainer Border will be toggled for downs and yards visible/invisible
DownsAndYards Label current progress of downs and yards, e.g. 2nd & 10
FlagContainer Delay Border will be toggled for flags
TimeoutContainer Border will be toggled for timeouts visible/invisible
TimeoutAway1 Border rectangle for timeout away 1
TimeoutAway2 Border rectangle for timeout away 2
TimeoutAway3 Border rectangle for timeout away 3
TimeoutHome1 Border rectangle for timeout home 1
TimeoutHome2 Border rectangle for timeout home 2
PossessionContainer Possession Border will be toggled for possession visible/invisible
PossessionAway Border possession indicator for away team
PossessionHome Border possession indicator for home team
LineOfScrimmageContainer Line of Scrimmage Border will be toggled for line-of-scrimmage visible/invisible
LineOfScrimmage Label text for line-of-scrimmage yards display. Use {{yards}} as placeholder in template text
ImageAway Images Image logo for team away
ImageHome Image logo for team home
Image1 Image the first additional image (if existing)



Rugby


Animations
Storyboard Name Category Type Description
ScoreAwayAnimation Scoring Storyboard Animation when away score changes
ScoreHomeAnimation Storyboard Animation when home score changes
Controls
Object x:Name Category Control Description
Panel Layout Grid root panel
TeamAway Scoring Label name of the away team
TeamHome Label name of the home team
ScoreAway Label score of the away team
ScoreHome Label score of the home team
TriesHome League / Union Label number of tries for home team
TriesAway Label number of tries for away team
PenaltiesHome Label number of penalties for home team
PenaltiesAway Label number of penalties for away team
ConversionsHome Label number of conversions for home team
ConversionsAway Label number of conversions for away team
FieldGoalsHome Label number of field goals for home team
FieldGoalsAway Label number of field goals for away team
GoalsHome AFL Label number of goals for home team
GoalsAway Label number of goals for away team
BehindsHome Label number of behinds for home team
BehindsAway Label number of behinds for away team
HalvesContainer Time Border will be toggled for halves visible/invisible
Halftime Label current half
TimeContainer Border will be toggled for time visible/invisible
Time Label current stopwatch time, e.g. 02:34 minutes
TimeOfDayContainer Border will be toggled for time-of-day visible/invisible
TimeOfDay Label displays the current time of day in a text label
ImageAway Images Image logo for team away
ImageHome Image logo for team home
Image1 Image the first additional image (if existing)
FlagContainer Flag Border will be toggled for flag visible/invisible
MetresGainedContainer Metres-Gained Border will be toggled for metres-gained visible/invisible
MetresGained Label number for the metres-gained value
SetTacklesContainer Set-Tackles Border will be toggled for set-tackles visible/invisible
SetTackles Label current value for set-tackles, e.g. 1st, 2nd, ...
TurnoversConcededAway Statistics Label number for turnovers away
TurnoversConcededHome Label number for turnovers home
TacklesAway Label number for tackles away
TacklesHome Label number for tackles home
TacklesMissedAway Label number for tackles-missed away
TacklesMissedHome Label number for tackles-missed home
LineBreaksAway Label number for linebreaks away
LineBreaksHome Label number for linebreaks home
PenaltiesConcededAway Label number for penalties away
PenaltiesConcededHome Label number for penalties home
ErrorsAway Label number for errors away
ErrorsHome Label number for errors home
TerritoryPercentageAway Label percentage value for territory away
TerritoryPercentageHome Label percentage value for territory home
PossessionPercentageAway Label percentage value for possession away
PossessionPercentageHome Label percentage value for possession home



Baseball / Softball


Animations
Storyboard Name Category Type Description
ScoreAwayAnimation Scoring Storyboard Animation when away score changes
ScoreHomeAnimation Storyboard Animation when home score changes
InningAnimation Inning Storyboard Animation when inning number or side changes
Styles
Style x:Name Category Control Description
BaseON Bases Style The ON style for your base rectangle
BaseOFF Style The OFF style for your base rectangle
CircleON Strikes/Balls/Outs Style The ON style for your circle shapes
CircleOFF Style The OFF style for your circle shapes
Controls
Object x:Name Category Control Description
Panel Layout Grid root panel
TeamAway Teams Label name of the away team
TeamHome Label name of the home team
RunsContainer Runs Border will be toggled for runs visible/invisible
ScoreAway Label score of the away team
ScoreHome Label score of the home team
InningContainer Inning Border will be toggled for outs visible/invisible
InningFull Label display for inning side and number (TOP 1, BOT 5)
Inning Label inning number
InningTop Shape shape for inning top
InningBottom Shape shape for inning bottom
BallsContainer Balls Border will be toggled for balls visible/invisible
BallsNumber Label number of balls
Balls1Circle Ellipse circle for ball #1
Balls2Circle Ellipse circle for ball #2
Balls3Circle Ellipse circle for ball #3
StrikesContainer Strikes Border will be toggled for strikes visible/invisible
StrikesNumber Label number of strikes
Strikes1Circle Ellipse circle for strike #1
Strikes2Circle Ellipse circle for strike #2
OutsContainer Outs Border will be toggled for outs visible/invisible
OutsNumber Label number of outs
Outs1Circle Ellipse circle for out #1
Outs2Circle Ellipse circle for out #2
BasesContainer Bases Border will be toggled for bases visible/invisible
Base1 Rectangle rectangle for base 1
Base2 Rectangle rectangle for base 2
Base3 Rectangle rectangle for base 3
ImageAway Images Image logo for team away
ImageHome Image logo for team home
Image1 Image the first additional image (if existing)
PitchCountContainer Pitching Border will be toggled for pitch count visible/invisible
PitchCount Label number of pitches for the current pitcher
HitsContainer Hits Border will be toggled for hits visible/invisible
HitsAway Label number of hits for guest team
HitsHome Label number of hits for home team
ErrorsContainer Errors Border will be toggled for errors visible/invisible
ErrorsAway Label number of errors for guest team
ErrorsHome Label number of errors for home team
LOBContainer Left On Base Border will be toggled for hits visible/invisible
LOBAway Label number of LOB for guest team
LOBHome Label number of LOB for home team



Soccer


Animations
Storyboard Name Category Type Description
ScoreAwayAnimation Scoring Storyboard Animation when away score changes
ScoreHomeAnimation Storyboard Animation when home score changes
Controls
Object x:Name Category Control Description
Panel Layout Grid root panel
TeamAway Scoring Label name of the away team
TeamHome Label name of the home team
ScoreAway Label score of the away team
ScoreHome Label score of the home team
Halftime Time Label current halftime of the game
TimeContainer Border will be toggled for time visible/invisible
Time Label current stopwatch time, e.g. 16:09 minutes
AdditionalTimeContainer Border will be toggled for additional time visible/invisible
AdditionalTime Label current stopwatch additional time, e.g. 5:00 minutes
ImageAway Images Image logo for team away
ImageHome Image logo for team home
Image1 Image the first additional image (if existing)
AggregateContainer Aggregate Mode Border will be toggled for aggregate mode visible/invisible
AggregateCaption Label the display caption of the aggregation goals
AggregateAway Label the aggregated goals of the away team
AggregateHome Label the aggregated goals of the home team



Tennis


Animations
Storyboard Name Category Type Description
ScoreAwayAnimation Scoring Storyboard Animation when away score changes
ScoreHomeAnimation Storyboard Animation when home score changes
Controls
Object x:Name Category Control Description
Panel Layout Grid root panel
TeamAway Label name of the away team
TeamHome Label name of the home team
SideAway Shape will be toggled for side visible/invisible
SideHome Shape will be toggled for side visible/invisible
ImageHome Image logo for team home
ImageAway Images Image logo for team away
Image1 Image the first additional image (if existing)
ScoreAway Scoring Label game score of the away team
ScoreHome Label game score of the home team
Set1Container - Set5Container Border will be toggled for set visible/invisible, use this to hide upcoming sets.
GamesAway1 - GamesAway5 Label number of won games in set 1-5 for guest-player
GamesHome1 - GamesHome5 Label number of won games in set 1-5 for home-player
TotalSetsAway Label number of won sets for away-player
TotalSetsHome Label number of won sets for home-player



Hockey


Animations
Storyboard Name Category Type Description
ScoreAwayAnimation Scoring Storyboard Animation when away score changes
ScoreHomeAnimation Storyboard Animation when home score changes
PeriodAnimation Period Storyboard Animation when period changes
PowerPlayON Penalties Storyboard Animation when power play starts
PowerPlayOFF Storyboard Animation when power play ends
Controls
Object x:Name Category Control Description
Panel Layout Grid root panel
TeamAway Label name of the away team
TeamHome Label name of the home team
ImageHome Image logo for team home
ImageAway Images Image logo for team away
Image1 Image the first additional image (if existing)
PeriodContainer Period Border will be toggled for period visible/invisible
Period Border current period of the game displayed as 1st, 2nd, 3rd and OT
PeriodNumber Border current period of the game displayed as 1, 2, 3 and OT
TimeContainer Time Border will be toggled for time visible/invisible
Time Label current stopwatch time, e.g. 16:09 minutes
ScoreAway Scoring Label game score of the away team
ScoreHome Label game score of the home team
EmptyNetAwayContainer Border NEW visible element for empty-net of the guest team
EmptyNetHomeContainer Border NEW visible element for empty-net of the home team
ShotsContainer Shots Border will be toggled for shots visible/invisible
ShotsAway Border current shots count for team away
ShotsHome Border current shots count for team home
PenaltyContainer Penalties Border will be toggled for penalties/powerplay visible/invisible
PenaltyAway1 Label formatted penalty time of player away 1 if set
PenaltyAway2 Label formatted penalty time of player away 2 if set
PenaltyHome1 Label formatted penalty time of player home 1 if set
PenaltyHome2 Label formatted penalty time of player home 2 if set
PenaltyPlayerAway1 Label player number of penalty away 1 if set
PenaltyPlayerAway2 Label player number of penalty away 2 if set
PenaltyPlayerHome1 Label player number of penalty home 1 if set
PenaltyPlayerHome2 Label player number of penalty home 2 if set
PowerPlayContainer Power Play Border will be automatically toggled for power-play visible/invisible
PowerPlayTime Label formatted power play time
PowerPlayText Label text to indicate the power play, e.g. 5 ON 4



Basketball


Animations
Storyboard Name Category Type Description
ScoreAwayAnimation Scoring Storyboard Animation when away score changes
ScoreHomeAnimation Storyboard Animation when home score changes
Controls
Object x:Name Category Control Description
Panel Layout Grid root panel
TeamAway Label name of the away team
TeamHome Label name of the home team
ImageHome Image logo for team home
ImageAway Images Image logo for team away
Image1 Image the first additional image (if existing)
PeriodContainer Period Border will be toggled for period visible/invisible
Period Border current period of the game displayed as 1st, 2nd, 3rd and OT
PeriodNumber Border current period of the game displayed as 1, 2, 3 and OT
TimeContainer Time Border will be toggled for time visible/invisible
Time Label current stopwatch time, e.g. 16:09 minutes
ShotClockContainer Border will be toggled for shot clock visible/invisible
ShotClock Label current shot clock time in seconds
ScoreAway Scoring Label game score of the away team
ScoreHome Label game score of the home team
BonusAway Border will be toggled for bonus away visible/invisible
BonusHome Border will be toggled for bonus home visible/invisible
FoulsContainer Fouls Border will be toggled for fouls visible/invisible
FoulsAway Label number of fouls of the away team
FoulsHome Label number of fouls of the home team
TimeoutContainer Timeouts Border will be toggled for timeouts visible/invisible
TimeoutsHomeNumber Label timeouts left for team home
TimeoutsAwayNumber Label timeout left for team away
TimeoutAway1 Shape timeout #1 for team away
TimeoutAway2 Shape timeout #2 for team away
TimeoutAway3 Shape timeout #3 for team away
TimeoutAway4 Shape timeout #4 for team away
TimeoutAway5 Shape timeout #5 for team away
TimeoutAway6 Shape timeout #6 for team away
TimeoutAway7 Shape timeout #7 for team away
TimeoutHome1 Shape timeout #1 for team home
TimeoutHome2 Shape timeout #2 for team home
TimeoutHome3 Shape timeout #3 for team home
TimeoutHome4 Shape timeout #4 for team home
TimeoutHome5 Shape timeout #5 for team home
TimeoutHome6 Shape timeout #6 for team home
TimeoutHome7 Shape timeout #7 for team home



MMA


Controls
Object x:Name Category Control Description
Panel Layout Grid root panel
Image1 Image the first additional image (if existing)
RoundsContainer Border will be toggled for rounds visible/invisible
Round Rounds Label displays the current round number
MaxRounds Label displays the maximum rounds number
TimeContainer Time Border will be toggled for time visible/invisible
Time Label current stopwatch time, e.g. 03:25 minutes
FightersContainer Fighters Border will be toggled for fighters visible/invisible
Fighter1 name of fighter 1
Fighter2 name of fighter 2



Handball


Animations
Storyboard Name Category Type Description
ScoreAwayAnimation Scoring Storyboard Animation when away score changes
ScoreHomeAnimation Storyboard Animation when home score changes
Controls
Object x:Name Category Control Description
Panel Layout Grid root panel
TeamAway Teams Label name of the away team
TeamHome Label name of the home team
ScoreAway Label score of the away team
ScoreHome Label score of the home team
PeriodContainer Period Border will be toggled for period visible/invisible
Period Border current period of the game displayed as 1st, 2nd, OT1 and OT2
TimeContainer Time Border will be toggled for time visible/invisible
Time Label current stopwatch time, e.g. 16:09 minutes
ExclusionContainer Exclusions Border will be toggled for exclusions visible/invisible
ExclusionAway1 Label formatted exclusion time of player away 1 if set
ExclusionAway2 Label formatted exclusion time of player away 2 if set
ExclusionPlayerAway1 Label player number of exclusion away 1 if set
ExclusionPlayerAway2 Label player number of exclusion away 2 if set
ExclusionHome1 Label formatted exclusion time of player home 1 if set
ExclusionHome2 Label formatted exclusion time of player home 2 if set
ExclusionPlayerHome1 Label player number of exclusion home 1 if set
ExclusionPlayerHome2 Label player number of exclusion home 2 if set
ImageAway Images Image logo for team away
ImageHome Image logo for team home
Image1 Image the first additional image (if existing)



Do you like this page? Help us and share it with your friends