User Interfaces

The User Interface can be customized to whatever you need.
The current library includes 15 controls at your disposal, but can easily be extended by custom controls or user controls.

BattleFury003.png

Setup
Included with the library are some defaults. This includes a Skin, Skin Definition, and Font.
The actual skin is just any graphics file that contains all the individual parts of your user interface.
The skin definition is a XML file that contains the size and position of each part.
The font can be any SpriteFont you want.

User interfaces are created by adding to your content directory a XAML file.
This XAML file will be loaded in your code and defines how your User Interface will look.

XAML Controls and Properties

User Interface
  • Properties
    • Name: Name of the user interface
    • Skin: Location of the skin to use
    • Font: Location of the font to use

All Controls
  • Properties
    • Name: Name of the control
    • Opacity: How transparent the control is
    • IsEnabled: Whether the control updates
    • IsVisible: Whether the control renders
    • Width: How wide the control is
    • Height: How tall the control is
    • X: Horizontal position of the control on the screen
    • Y: Vertical position of the control on the screen

Border
  • BorderColor: Color of the border

Button
  • Text: The content of the button
  • ForegroundColor: The text color
  • OnClick: Action to invoke when clicked

CelestialClock
  • Month: Numeric month
  • Day: Numeric day
  • Year: Numeric year
  • Hour: Numeric hour
  • Minute: Numeric minute
  • BorderColor: Color of the border

CheckBox
  • IsChecked: Whether the check box is checked
  • HighlightColor: Color of the control when mouse moves over it

Console
  • BackgroundColor: Color of the background
  • IsExpanded: Whether the control is expanded
  • ExpandSpeed: How fast the console drops down

ImageButton
  • ImageSource: Location of the image
  • HighlightedImageSource: Location of the image when control is highlighted
  • ClickedImageSource: Location of the image when control is clicked
  • OnClick Action that is invoked when control is clicked.

Panel
  • BorderColor Color of the border
  • BackgroundColor: Color of the background

ProgressBar
  • Value Value of the control
  • Minimum: Minimum value of the control
  • Maximum: Maximum value of the control
  • FillColor: Color the progress bar fill is
  • BorderColor: Color of the border

ProgressSelector
  • Value Value of the control
  • Minimum: Minimum value of the control
  • Maximum: Maximum value of the control
  • FillColor: Color the progress bar fill is
  • BorderColor: Color of the border

RadioButton
  • Text: Text to be displayed next to radio button
  • Group: Group at which the control belongs to.
  • IsChecked: Whether the radio button is checked
  • HighlightColor: Color when mouse is over control
  • ForegroundColor: Color of the text

Selector
  • SelectedIndex: Which index is selected for items
  • ItemsSource: Comma delimited list of items
  • ForegroundColor: Color of the text
  • BorderColor: Color of the border

Slider
  • Value Value of the control
  • Minimum: Minimum value of the control
  • Maximum: Maximum value of the control
  • GrooveColor: Color of the background groove
  • SlideColor: Color of the slide

TextBlock
  • Text: What text to be displayed
  • ForegroundColor: Color of the text

TextBox
  • Text: What text to be displayed and edited
  • BorderColor: Color of the borders
  • ForegroundColor: Color of the text

UpDown
  • Value Value of the control
  • Minimum: Minimum value of the control
  • Maximum: Maximum value of the control

Last edited Jul 13, 2013 at 8:58 AM by slyprid, version 2

Comments

No comments yet.