mirror of
https://github.com/Ellpeck/MLEM.git
synced 2024-12-25 01:39:23 +01:00
added checkboxes and radio buttons and did some changes to the demo
This commit is contained in:
parent
4bd18fd171
commit
c114d775d4
12 changed files with 169 additions and 86 deletions
|
@ -11,7 +11,7 @@ with.
|
|||
<!--
|
||||
Modify this string to change the font that will be imported.
|
||||
-->
|
||||
<FontName>BitPotionExt</FontName>
|
||||
<FontName>Arial</FontName>
|
||||
|
||||
<!--
|
||||
Size is a float value, measured in points. Modify this value to change
|
||||
|
|
Binary file not shown.
Before Width: | Height: | Size: 1 KiB After Width: | Height: | Size: 896 B |
|
@ -28,66 +28,70 @@ namespace Examples {
|
|||
|
||||
var style = new UntexturedStyle(this.SpriteBatch) {
|
||||
Font = new GenericSpriteFont(LoadContent<SpriteFont>("Fonts/TestFont")),
|
||||
TextScale = 0.2F,
|
||||
TextScale = 0.1F,
|
||||
PanelTexture = this.testPatch,
|
||||
ButtonTexture = new NinePatch(new TextureRegion(this.testTexture, 24, 8, 16, 16), 4),
|
||||
TextFieldTexture = new NinePatch(new TextureRegion(this.testTexture, 24, 8, 16, 16), 4),
|
||||
ButtonHoveredColor = Color.LightGray,
|
||||
TextFieldHoveredColor = Color.LightGray
|
||||
ScrollBarBackground = new NinePatch(new TextureRegion(this.testTexture, 8, 0, 4, 8), 1, 1, 2, 2),
|
||||
ScrollBarScrollerTexture = new NinePatch(new TextureRegion(this.testTexture, 12, 0, 4, 8), 1, 1, 2, 2),
|
||||
CheckboxTexture = new NinePatch(new TextureRegion(this.testTexture, 24, 8, 16, 16), 4),
|
||||
CheckboxCheckmark = new TextureRegion(this.testTexture, 24, 0, 8, 8),
|
||||
RadioTexture = new NinePatch(new TextureRegion(this.testTexture, 16, 0, 8, 8), 3),
|
||||
RadioCheckmark = new TextureRegion(this.testTexture, 32, 0, 8, 8)
|
||||
};
|
||||
var untexturedStyle = this.UiSystem.Style;
|
||||
this.UiSystem.Style = style;
|
||||
this.UiSystem.GlobalScale = 5;
|
||||
|
||||
var root = new Panel(Anchor.Center, new Vector2(100, 80), Point.Zero, false, true, new Point(5, 10));
|
||||
var root = new Panel(Anchor.Center, new Vector2(80, 100), Point.Zero, false, true, new Point(5, 10));
|
||||
this.UiSystem.Add("Test", root);
|
||||
|
||||
root.AddChild(new Paragraph(Anchor.AutoLeft, 1, "This is a test text that is hopefully long enough to cover at least a few lines, otherwise it would be very sad."));
|
||||
root.AddChild(new Paragraph(Anchor.AutoLeft, 1, "This is a small demo for MLEM.Ui, a user interface library that is part of (M)LEM (L)ibrary by (E)llpeck for (M)onoGame."));
|
||||
var image = root.AddChild(new Image(Anchor.AutoCenter, new Vector2(20, 20), new TextureRegion(this.testTexture, 0, 0, 8, 8)) {IsHidden = true});
|
||||
root.AddChild(new Button(Anchor.AutoCenter, new Vector2(1, 15), "Test Button") {
|
||||
root.AddChild(new Button(Anchor.AutoCenter, new Vector2(1, 10), "Toggle Image") {
|
||||
OnClicked = (element, button) => {
|
||||
if (button == MouseButton.Left)
|
||||
image.IsHidden = !image.IsHidden;
|
||||
}
|
||||
});
|
||||
root.AddChild(new Button(Anchor.AutoCenter, new Vector2(1, 15), "Change Style") {
|
||||
root.AddChild(new Button(Anchor.AutoCenter, new Vector2(1, 10), "Change Style") {
|
||||
OnClicked = (element, button) => {
|
||||
if (button == MouseButton.Left)
|
||||
this.UiSystem.Style = this.UiSystem.Style == untexturedStyle ? style : untexturedStyle;
|
||||
},
|
||||
PositionOffset = new Point(0, 1),
|
||||
HasCustomStyle = true,
|
||||
Texture = this.testPatch,
|
||||
HoveredColor = Color.LightGray
|
||||
});
|
||||
root.AddChild(new TextField(Anchor.AutoLeft, new Vector2(1, 15)));
|
||||
|
||||
root.AddChild(new VerticalSpace(3));
|
||||
root.AddChild(new Button(Anchor.AutoLeft, new Vector2(15), "+") {
|
||||
root.AddChild(new Paragraph(Anchor.AutoCenter, 1, "Text input:", true));
|
||||
root.AddChild(new TextField(Anchor.AutoLeft, new Vector2(1, 10)) {PositionOffset = new Point(0, 1)});
|
||||
|
||||
root.AddChild(new VerticalSpace(3));
|
||||
root.AddChild(new Paragraph(Anchor.AutoLeft, 1, "Zoom in or out:"));
|
||||
root.AddChild(new Button(Anchor.AutoLeft, new Vector2(10), "+") {
|
||||
OnClicked = (element, button) => {
|
||||
if (element.Root.Scale < 2)
|
||||
element.Root.Scale += 0.1F;
|
||||
}
|
||||
});
|
||||
root.AddChild(new Button(Anchor.AutoInline, new Vector2(15), "-") {
|
||||
root.AddChild(new Button(Anchor.AutoInline, new Vector2(10), "-") {
|
||||
OnClicked = (element, button) => {
|
||||
if (element.Root.Scale > 0.5F)
|
||||
element.Root.Scale -= 0.1F;
|
||||
}
|
||||
},
|
||||
PositionOffset = new Point(1, 0)
|
||||
});
|
||||
root.AddChild(new Button(Anchor.AutoInline, new Vector2(30, 15), "Woop") {
|
||||
PositionOffset = new Point(2, 0),
|
||||
OnClicked = (element, button) => CoroutineHandler.Start(Woop(element))
|
||||
});
|
||||
}
|
||||
|
||||
private static IEnumerator<Wait> Woop(Element element) {
|
||||
var angle = 0;
|
||||
var startScale = element.Root.Scale;
|
||||
while (angle < 180) {
|
||||
element.Root.Scale = startScale + (float) Math.Sin(MathHelper.ToRadians(angle));
|
||||
angle++;
|
||||
yield return new WaitSeconds(0.01F);
|
||||
}
|
||||
root.AddChild(new VerticalSpace(3));
|
||||
root.AddChild(new Checkbox(Anchor.AutoLeft, new Vector2(1, 10), "Checkbox 1!"));
|
||||
root.AddChild(new Checkbox(Anchor.AutoLeft, new Vector2(1, 10), "Checkbox 2!") {PositionOffset = new Point(0, 1)});
|
||||
|
||||
root.AddChild(new VerticalSpace(3));
|
||||
root.AddChild(new RadioButton(Anchor.AutoLeft, new Vector2(1, 10), "Radio button 1!"));
|
||||
root.AddChild(new RadioButton(Anchor.AutoLeft, new Vector2(1, 10), "Radio button 2!") {PositionOffset = new Point(0, 1)});
|
||||
}
|
||||
|
||||
protected override void Draw(GameTime gameTime) {
|
||||
|
|
|
@ -1,53 +0,0 @@
|
|||
using System;
|
||||
using Microsoft.Xna.Framework;
|
||||
using Microsoft.Xna.Framework.Graphics;
|
||||
using MLEM.Extensions;
|
||||
using MLEM.Font;
|
||||
using MLEM.Ui.Style;
|
||||
|
||||
namespace MLEM.Ui.Elements {
|
||||
public class AutoScaledText : Element {
|
||||
|
||||
private IGenericFont font;
|
||||
private float textScale;
|
||||
private string text;
|
||||
|
||||
public string Text {
|
||||
get => this.text;
|
||||
set {
|
||||
this.text = value;
|
||||
this.SetAreaDirty();
|
||||
}
|
||||
}
|
||||
public Color Color = Color.White;
|
||||
|
||||
public AutoScaledText(Anchor anchor, Vector2 size, string text, IGenericFont font = null) : base(anchor, size) {
|
||||
this.Text = text;
|
||||
this.font = font;
|
||||
this.IgnoresMouse = true;
|
||||
}
|
||||
|
||||
public override void ForceUpdateArea() {
|
||||
base.ForceUpdateArea();
|
||||
|
||||
this.textScale = 0;
|
||||
Vector2 measure;
|
||||
do {
|
||||
this.textScale += 0.1F;
|
||||
measure = this.font.MeasureString(this.Text) * this.textScale;
|
||||
} while (measure.X <= this.DisplayArea.Size.X / this.Scale && measure.Y <= this.DisplayArea.Size.Y / this.Scale);
|
||||
}
|
||||
|
||||
public override void Draw(GameTime time, SpriteBatch batch, float alpha, Point offset) {
|
||||
var pos = this.DisplayArea.Location.ToVector2() + this.DisplayArea.Size.ToVector2() / 2 + offset.ToVector2();
|
||||
this.font.DrawCenteredString(batch, this.Text, pos, this.textScale * this.Scale, this.Color * alpha, true, true);
|
||||
base.Draw(time, batch, alpha, offset);
|
||||
}
|
||||
|
||||
protected override void InitStyle(UiStyle style) {
|
||||
base.InitStyle(style);
|
||||
this.font = style.Font;
|
||||
}
|
||||
|
||||
}
|
||||
}
|
|
@ -10,13 +10,11 @@ namespace MLEM.Ui.Elements {
|
|||
public NinePatch Texture;
|
||||
public NinePatch HoveredTexture;
|
||||
public Color HoveredColor;
|
||||
public AutoScaledText Text;
|
||||
public Paragraph Text;
|
||||
|
||||
public Button(Anchor anchor, Vector2 size, string text = null) : base(anchor, size) {
|
||||
if (text != null) {
|
||||
this.Text = new AutoScaledText(Anchor.Center, Vector2.One, text) {
|
||||
IgnoresMouse = true
|
||||
};
|
||||
this.Text = new Paragraph(Anchor.Center, 1, text, true);
|
||||
this.AddChild(this.Text);
|
||||
}
|
||||
}
|
||||
|
|
77
MLEM.Ui/Elements/Checkbox.cs
Normal file
77
MLEM.Ui/Elements/Checkbox.cs
Normal file
|
@ -0,0 +1,77 @@
|
|||
using Microsoft.Xna.Framework;
|
||||
using Microsoft.Xna.Framework.Graphics;
|
||||
using MLEM.Extensions;
|
||||
using MLEM.Input;
|
||||
using MLEM.Textures;
|
||||
using MLEM.Ui.Style;
|
||||
|
||||
namespace MLEM.Ui.Elements {
|
||||
public class Checkbox : Element {
|
||||
|
||||
public NinePatch Texture;
|
||||
public NinePatch HoveredTexture;
|
||||
public Color HoveredColor;
|
||||
public TextureRegion Checkmark;
|
||||
public Paragraph Label;
|
||||
|
||||
private bool checced;
|
||||
public bool Checked {
|
||||
get => this.checced;
|
||||
set {
|
||||
if (this.checced != value) {
|
||||
this.checced = value;
|
||||
this.OnCheckStateChange?.Invoke(this, this.checced);
|
||||
}
|
||||
}
|
||||
}
|
||||
public CheckStateChange OnCheckStateChange;
|
||||
|
||||
public Checkbox(Anchor anchor, Vector2 size, string label, bool defaultChecked = false) : base(anchor, size) {
|
||||
this.checced = defaultChecked;
|
||||
|
||||
this.OnClicked += (element, button) => {
|
||||
if (button == MouseButton.Left)
|
||||
this.Checked = !this.Checked;
|
||||
};
|
||||
|
||||
if (label != null) {
|
||||
this.Label = new Paragraph(Anchor.CenterRight, 0, label, true);
|
||||
this.AddChild(this.Label);
|
||||
}
|
||||
}
|
||||
|
||||
protected override Point CalcActualSize(Rectangle parentArea) {
|
||||
var size = base.CalcActualSize(parentArea);
|
||||
if (this.Label != null)
|
||||
this.Label.Size = new Vector2((size.X - size.Y) / this.Scale, 1);
|
||||
return size;
|
||||
}
|
||||
|
||||
public override void Draw(GameTime time, SpriteBatch batch, float alpha, Point offset) {
|
||||
var tex = this.Texture;
|
||||
var color = Color.White * alpha;
|
||||
if (this.IsMouseOver) {
|
||||
if (this.HoveredTexture != null)
|
||||
tex = this.HoveredTexture;
|
||||
color = this.HoveredColor * alpha;
|
||||
}
|
||||
|
||||
var boxDisplayArea = new Rectangle(this.DisplayArea.Location, new Point(this.DisplayArea.Height)).OffsetCopy(offset);
|
||||
batch.Draw(tex, boxDisplayArea, color, this.Scale);
|
||||
if (this.Checked)
|
||||
batch.Draw(this.Checkmark, boxDisplayArea, Color.White * alpha);
|
||||
base.Draw(time, batch, alpha, offset);
|
||||
}
|
||||
|
||||
protected override void InitStyle(UiStyle style) {
|
||||
base.InitStyle(style);
|
||||
this.Texture = style.CheckboxTexture;
|
||||
this.HoveredTexture = style.CheckboxHoveredTexture;
|
||||
this.HoveredColor = style.CheckboxHoveredColor;
|
||||
this.Checkmark = style.CheckboxCheckmark;
|
||||
}
|
||||
|
||||
public delegate void CheckStateChange(Checkbox box, bool checced);
|
||||
|
||||
}
|
||||
}
|
|
@ -338,6 +338,17 @@ namespace MLEM.Ui.Elements {
|
|||
return lastChild;
|
||||
}
|
||||
|
||||
protected IEnumerable<Element> GetSiblings(bool hiddenAlso) {
|
||||
if (this.Parent == null)
|
||||
yield break;
|
||||
foreach (var child in this.Parent.Children) {
|
||||
if (!hiddenAlso && child.IsHidden)
|
||||
continue;
|
||||
if (child != this)
|
||||
yield return child;
|
||||
}
|
||||
}
|
||||
|
||||
public virtual void Update(GameTime time) {
|
||||
foreach (var child in this.SortedChildren)
|
||||
child.Update(time);
|
||||
|
|
|
@ -29,6 +29,7 @@ namespace MLEM.Ui.Elements {
|
|||
this.text = text;
|
||||
this.font = font;
|
||||
this.centerText = centerText;
|
||||
this.IgnoresMouse = true;
|
||||
}
|
||||
|
||||
protected override Point CalcActualSize(Rectangle parentArea) {
|
||||
|
|
35
MLEM.Ui/Elements/RadioButton.cs
Normal file
35
MLEM.Ui/Elements/RadioButton.cs
Normal file
|
@ -0,0 +1,35 @@
|
|||
using Microsoft.Xna.Framework;
|
||||
using MLEM.Input;
|
||||
using MLEM.Ui.Style;
|
||||
|
||||
namespace MLEM.Ui.Elements {
|
||||
public class RadioButton : Checkbox {
|
||||
|
||||
public string Group;
|
||||
|
||||
public RadioButton(Anchor anchor, Vector2 size, string label, bool defaultChecked = false, string group = "") :
|
||||
base(anchor, size, label, defaultChecked) {
|
||||
this.Group = group;
|
||||
|
||||
// don't += because we want to override the checking + unchecking behavior of Checkbox
|
||||
this.OnClicked = (element, button) => {
|
||||
if (button == MouseButton.Left) {
|
||||
this.Checked = true;
|
||||
foreach (var sib in this.GetSiblings(true)) {
|
||||
if (sib is RadioButton radio && radio.Group == this.Group)
|
||||
radio.Checked = false;
|
||||
}
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
protected override void InitStyle(UiStyle style) {
|
||||
base.InitStyle(style);
|
||||
this.Texture = style.RadioTexture;
|
||||
this.HoveredTexture = style.RadioHoveredTexture;
|
||||
this.HoveredColor = style.RadioHoveredColor;
|
||||
this.Checkmark = style.RadioCheckmark;
|
||||
}
|
||||
|
||||
}
|
||||
}
|
|
@ -11,7 +11,6 @@ namespace MLEM.Ui.Elements {
|
|||
|
||||
public NinePatch Background;
|
||||
public NinePatch ScrollerTexture;
|
||||
public Color HoveredColor;
|
||||
public Point ScrollerOffset;
|
||||
public Point ScrollerSize;
|
||||
private float maxValue;
|
||||
|
@ -78,7 +77,6 @@ namespace MLEM.Ui.Elements {
|
|||
base.InitStyle(style);
|
||||
this.Background = style.ScrollBarBackground;
|
||||
this.ScrollerTexture = style.ScrollBarScrollerTexture;
|
||||
this.HoveredColor = style.ScrollBarHoveredColor;
|
||||
}
|
||||
|
||||
public delegate void ValueChanged(Element element, float value);
|
||||
|
|
|
@ -14,7 +14,14 @@ namespace MLEM.Ui.Style {
|
|||
public Color TextFieldHoveredColor;
|
||||
public NinePatch ScrollBarBackground;
|
||||
public NinePatch ScrollBarScrollerTexture;
|
||||
public Color ScrollBarHoveredColor;
|
||||
public NinePatch CheckboxTexture;
|
||||
public NinePatch CheckboxHoveredTexture;
|
||||
public Color CheckboxHoveredColor;
|
||||
public TextureRegion CheckboxCheckmark;
|
||||
public NinePatch RadioTexture;
|
||||
public NinePatch RadioHoveredTexture;
|
||||
public Color RadioHoveredColor;
|
||||
public TextureRegion RadioCheckmark;
|
||||
public IGenericFont Font;
|
||||
public float TextScale = 1;
|
||||
|
||||
|
|
|
@ -16,7 +16,12 @@ namespace MLEM.Ui.Style {
|
|||
this.TextFieldHoveredColor = Color.LightGray;
|
||||
this.ScrollBarBackground = GenerateTexture(batch, Color.LightBlue);
|
||||
this.ScrollBarScrollerTexture = GenerateTexture(batch, Color.Blue);
|
||||
this.ScrollBarHoveredColor = Color.LightGray;
|
||||
this.CheckboxTexture = GenerateTexture(batch, Color.LightBlue);
|
||||
this.CheckboxHoveredColor = Color.LightGray;
|
||||
this.CheckboxCheckmark = GenerateTexture(batch, Color.Blue).Region;
|
||||
this.RadioTexture = GenerateTexture(batch, Color.AliceBlue);
|
||||
this.RadioHoveredColor = Color.LightGray;
|
||||
this.RadioCheckmark = GenerateTexture(batch, Color.CornflowerBlue).Region;
|
||||
this.Font = new EmptyFont();
|
||||
}
|
||||
|
||||
|
|
Loading…
Reference in a new issue