Added the ability for Dropdown to display an arrow texture based on its open state

CHANGELOG.md

@@ -35,6 +35,7 @@ Additions
 - Added Panel.IsVisible method to check if a child element is visible
 - Added TextField.OnEnterPressed event
 - Added Tooltip.IgnoreViewport and allow overriding the default viewport using Tooltip.Viewport
+- Added the ability for Dropdown to display an arrow texture based on its open state
 
 Fixes
 - Fixed tooltips not being bounded correctly for viewports that don't start at the origin

Demos/UiDemo.cs

@@ -50,7 +50,10 @@ namespace Demos {
                 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),
-                AdditionalFonts = {{"Monospaced", new GenericSpriteFont(Demo.LoadContent<SpriteFont>("Fonts/MonospacedFont"))}}
+                AdditionalFonts = {{"Monospaced", new GenericSpriteFont(Demo.LoadContent<SpriteFont>("Fonts/MonospacedFont"))}},
+                DropdownClosedArrowTexture = new TextureRegion(this.testTexture, 40, 0, 8, 8),
+                DropdownOpenedArrowTexture = new TextureRegion(this.testTexture, 48, 0, 8, 8),
+                DropdownArrowPadding = new Padding(0, 4, 0, 0)
             };
             var untexturedStyle = new UntexturedStyle(this.SpriteBatch) {
                 TextScale = style.TextScale,

MLEM.Ui/Elements/Dropdown.cs

@@ -1,6 +1,8 @@
 using System.Linq;
 using Microsoft.Xna.Framework;
 using MLEM.Maths;
+using MLEM.Textures;
+using MLEM.Ui.Style;
 
 namespace MLEM.Ui.Elements {
     /// <summary>
@@ -14,12 +16,17 @@ namespace MLEM.Ui.Elements {
         /// </summary>
         public Panel Panel { get; private set; }
         /// <summary>
+        /// The <see cref="Image"/> that contains the currently active arrow texture for this dropdown, which is either <see cref="ClosedArrowTexture"/> or <see cref="OpenedArrowTexture"/>.
+        /// </summary>
+        public Image Arrow { get; private set; }
+        /// <summary>
         /// This property stores whether the dropdown is currently opened or not
         /// </summary>
         public bool IsOpen {
             get => !this.Panel.IsHidden;
             set {
                 this.Panel.IsHidden = !value;
+                this.UpdateArrowStyle();
                 this.OnOpenedOrClosed?.Invoke(this);
             }
         }
@@ -28,6 +35,41 @@ namespace MLEM.Ui.Elements {
         /// </summary>
         public GenericCallback OnOpenedOrClosed;
 
+        /// <summary>
+        /// A style property containing the <see cref="Padding"/> that should be passed to the <see cref="Arrow"/> child element.
+        /// </summary>
+        public StyleProp<Padding> ArrowPadding {
+            get => this.arrowPadding;
+            set {
+                this.arrowPadding = value;
+                this.UpdateArrowStyle();
+            }
+        }
+        /// <summary>
+        /// A style property containing the <see cref="TextureRegion"/> that should be displayed on this dropdown's <see cref="Arrow"/> when the dropdown is closed (<see cref="IsOpen"/> is <see langword="false"/>).
+        /// </summary>
+        public StyleProp<TextureRegion> ClosedArrowTexture {
+            get => this.closedArrowTexture;
+            set {
+                this.closedArrowTexture = value;
+                this.UpdateArrowStyle();
+            }
+        }
+        /// <summary>
+        /// A style property containing the <see cref="TextureRegion"/> that should be displayed on this dropdown's <see cref="Arrow"/> when the dropdown is open (<see cref="IsOpen"/> is <see langword="true"/>).
+        /// </summary>
+        public StyleProp<TextureRegion> OpenedArrowTexture {
+            get => this.openedArrowTexture;
+            set {
+                this.openedArrowTexture = value;
+                this.UpdateArrowStyle();
+            }
+        }
+
+        private StyleProp<TextureRegion> openedArrowTexture;
+        private StyleProp<TextureRegion> closedArrowTexture;
+        private StyleProp<Padding> arrowPadding;
+
         /// <summary>
         /// Creates a new dropdown with the given settings and no text or tooltip.
         /// </summary>
@@ -125,6 +167,8 @@ namespace MLEM.Ui.Elements {
             this.Panel = this.AddChild(new Panel(Anchor.TopCenter, Vector2.Zero, panelHeight == 0, scrollPanel, autoHidePanelScrollbar) {
                 IsHidden = true
             });
+            this.Arrow = this.AddChild(new Image(Anchor.CenterRight, new Vector2(-1, 1), this.ClosedArrowTexture));
+            this.UpdateArrowStyle();
             this.OnAreaUpdated += e => {
                 this.Panel.Size = new Vector2(e.Area.Width / e.Scale, panelHeight);
                 this.Panel.PositionOffset = new Vector2(0, e.Area.Height / e.Scale);
@@ -148,5 +192,19 @@ namespace MLEM.Ui.Elements {
             };
         }
 
+        /// <inheritdoc />
+        protected override void InitStyle(UiStyle style) {
+            base.InitStyle(style);
+            this.ArrowPadding = this.ArrowPadding.OrStyle(style.DropdownArrowPadding);
+            this.ClosedArrowTexture = this.ClosedArrowTexture.OrStyle(style.DropdownClosedArrowTexture);
+            this.OpenedArrowTexture = this.OpenedArrowTexture.OrStyle(style.DropdownOpenedArrowTexture);
+            this.UpdateArrowStyle();
+        }
+
+        private void UpdateArrowStyle() {
+            this.Arrow.Padding = this.Arrow.Padding.OrStyle(this.ArrowPadding, 1);
+            this.Arrow.Texture = this.IsOpen ? this.OpenedArrowTexture : this.ClosedArrowTexture;
+        }
+
     }
 }

MLEM.Ui/Style/UiStyle.cs

@@ -242,6 +242,22 @@ namespace MLEM.Ui.Style {
         /// This value is passed to <see cref="LinkCode"/>.
         /// </summary>
         public Color? LinkColor = Color.CornflowerBlue;
+        /// <summary>
+        /// The default padding that a <see cref="Dropdown"/>'s <see cref="Dropdown.Arrow"/> should have.
+        /// This value is passed to <see cref="Dropdown.ArrowPadding"/>.
+        /// </summary>
+        public Padding DropdownArrowPadding;
+        /// <summary>
+        /// The texture that a <see cref="Dropdown"/>'s <see cref="Dropdown.Arrow"/> should display when the dropdown is closed.
+        /// This value is passed to <see cref="Dropdown.ClosedArrowTexture"/>.
+        /// </summary>
+        public TextureRegion DropdownClosedArrowTexture;
+        /// <summary>
+        /// The texture that a <see cref="Dropdown"/>'s <see cref="Dropdown.Arrow"/> should display when the dropdown is open.
+        /// This value is passed to <see cref="Dropdown.OpenedArrowTexture"/>.
+        /// </summary>
+        public TextureRegion DropdownOpenedArrowTexture;
+
         /// <summary>
         /// A set of additional fonts that can be used for the <c>&lt;f FontName&gt;</c> formatting code
         /// </summary>