---
title: Views
tags: uikit
---

# View

A `UIView` is the most basic view type. By itself, it does not do any rendering nor special layouting. The only thing it does is provide *grouping* of other views.

# Root

A `UIView` has to be (directly or indirectly) added to a `UIRootView` to be fully functional.

The `UIRootView? Root` property provides access to the view's current root view.

## Events

|Event|Description|
|-|-|
|`AddedToRoot(UIRootView, UIView)`|Fired whenever the view gets added to a root view.|
|`RemovedFromRoot(UIRootView, UIView)`|Fired whenever the view gets removed from a root view.|

# Subviews

The `IReadOnlyList<UIView> Subviews` property provides access to the view's subviews (child views).

The `UIView? Superview` property provides access to the view's superview (parent view).

Additional subviews can be added using the `UIView.AddSubview(UIView)` and `UIView.InsertSubview(int, UIView)` methods.

The order of the subviews matters -- it is also the order in which the views will be rendered. Views rendered first may become obscured by other views.

The subview order can be controller using the `UIView.BringSubviewToFront(UIView)`, `UIView.SendSubviewToBack(UIView)`, `UIView.PutSubviewAbove(UIView, UIView)` and `UIView.PutSubviewBelow(UIView, UIView)` methods.

Subviews can be removed using the `UIView.RemoveFromSuperview()` method.

## Events

|Event|Description|
|-|-|
|`AddedToSuperview(UIView, UIView)`|Fired whenever the view gets added to a superview.|
|`RemovedFromSuperview(UIView, UIView)`|Fired whenever the view gets removed from a superview.|
|`AddedSubview(UIView, UIView)`|Fired whenever a subview gets added to the view.|
|`RemovedSubview(UIView, UIView)`|Fired whenever a subview gets removed from the view.|

# Visibility

The `bool IsVisible` property allows you to easily disable rendering and input handling for a view and all of its subviews.

Additionally, the `IsVisibleChanged(UIView, bool, bool)` event can be used to be notified whenever this state changes.

# Hover state

You can use the `HoverState Hover` property to check whether a view is currently being hovered. The possible values are `None`, `Obscured` and `Direct`.

Additionally, the `HoverChanged(UIView, HoverState, HoverState)` event can be used to be notified whenever this state changes.

## Example

Using the `Hover` property we can implement tooltips for our UI.

// Properties:
private readonly Dictionary<UIView, string> Tooltips = new();

// On UI/layout setup:
UIView myView = new UIView().With(/* ... */);
Tooltips[myView] = "Super helpful";

// In a rendering hook
MyRootView.Draw(e.SpriteBatch);
string? tooltip = MyRootView.VisitAllViews(UIViewVisitingOrder.VisibleOrder)
    .Where(v => v.Hover == HoverState.Direct)
    .Where(v => Tooltips.ContainsKey(v))
    .FirstOrDefault()
    ?.Let(v => Tooltips[v]);
if (tooltip is not null)
    IClickableMenu.drawToolTip(
        e.SpriteBatch,
        tooltip.Value,
        null,
        null
    );

# `Drawable`

The `UIView.Drawable` subclass can be used to provide some kind of rendering for a view.

The `Drawable` subclass requires the `DrawSelf(RenderContext)` method to be implemented.

## Example

A simple `UIView.Drawable` implementation would be a view which renders a solid rectangle over its whole bounds.

:::warning
This is just an example. [`UIQuad`](https://hackmd.io/@Shockah/rJSFOXfM5) already provides this functionality, and more.
:::

using Microsoft.Xna.Framework;
using Microsoft.Xna.Framework.Graphics;
using Shockah.UIKit;
using Shockah.UIKit.Geometry;

namespace YourName.ModName
{
    public class UISolid: UIView.Drawable
    {
        public override void DrawSelf(RenderContext context)
        {
            context.SpriteBatch.Draw(
                texture: UITextureRect.Pixel.Texture,
                position: context.Offset,
                sourceRectangle: null,
                color: Color.BlueViolet,
                rotation: 0f,
                origin: Vector2.Zero,
                scale: Size,
                effects: SpriteEffects.None,
                layerDepth: 0f
            );
        }
    }
}