### Install Prowl.Paper NuGet Package

Source: https://prowl.gitbook.io/prowl.paper/index

Instructions on how to install the Prowl.Paper library into a .NET project using the .NET CLI or a NuGet Package Manager.

```.NET CLI
dotnet add package Prowl.Paper
```

--------------------------------

### Immediate-Mode UI Example (.NET)

Source: https://prowl.gitbook.io/prowl.paper/index

Demonstrates the difference between retained-mode and immediate-mode UI paradigms using C# and the Paper library. Immediate-mode simplifies UI updates by declaring the UI every frame.

```C#
// In a retained-mode system, you might do this:
var myButton =FindElementById("MyButton");
myButton.Roundness=10;
// If MyButton's Name or ID ever changes, this could break silently.
// In Paper, it's as simple as this:
paper.Box("MyButton").Rounded(10); // The roundness is set directly, every frame
```

--------------------------------

### Paper UI Render Loop Example

Source: https://prowl.gitbook.io/prowl.paper/index

Demonstrates the core render loop for Paper UI. It includes calling BeginFrame, defining UI elements like a colored box with text, and calling EndFrame to render the UI.

```C#
// In your main application loop (e.g., OnRenderFrame or similar)
void RenderUI(Paper paper, double deltaTime)
{
    // 1. Begin the UI frame
    paper.BeginFrame(deltaTime);
    // 2. Define your UI
    P.Box("MyFirstElement")
        .Size(250, 80)
        .Margin(P.Stretch())
        .BackgroundColor(System.Drawing.Color.ForestGreen)
        .Rounded(12)
        .Text(Text.Center("Hello, Paper!", Fonts.fontMedium, System.Drawing.Color.White));
    // 3. End the frame, which triggers layout and rendering
    paper.EndFrame();
}
```

--------------------------------

### Initialize Paper UI

Source: https://prowl.gitbook.io/prowl.paper/index

Initializes the Paper UI library with a custom renderer and screen dimensions. This is the first step in setting up your UI.

```C#
// In your application's startup code:
ICanvasRenderer myRenderer = new MyCustomRenderer(); // Or use one from the samples
double screenWidth = 1280;
double screenHeight = 720;
var paper = new Paper()(myRenderer, screenWidth, screenHeight);
```

--------------------------------

### Install Prowl Paper via NuGet

Source: https://prowl.gitbook.io/prowl.paper/overview

Provides the command-line instruction to install the Prowl.Paper NuGet package into a .NET project.

```bash
dotnet add package Prowl.Paper
```

--------------------------------

### Paper UI Render Loop Example

Source: https://prowl.gitbook.io/prowl.paper/overview

Demonstrates the core render loop for Paper UI. It includes calling BeginFrame, defining UI elements like a colored box with text, and calling EndFrame to render the UI.

```C#
// In your main application loop (e.g., OnRenderFrame or similar)
void RenderUI(Paper paper, double deltaTime)
{
    // 1. Begin the UI frame
    paper.BeginFrame(deltaTime);
    // 2. Define your UI
    P.Box("MyFirstElement")
        .Size(250, 80)
        .Margin(P.Stretch())
        .BackgroundColor(System.Drawing.Color.ForestGreen)
        .Rounded(12)
        .Text(Text.Center("Hello, Paper!", Fonts.fontMedium, System.Drawing.Color.White));
    // 3. End the frame, which triggers layout and rendering
    paper.EndFrame();
}
```

--------------------------------

### Nested Layouts with Rows and Columns

Source: https://prowl.gitbook.io/prowl.paper/overview/the-layout-engine

Illustrates how to build complex UIs by nesting Rows and Columns. This example shows a main Row containing two Columns: one for a sidebar and another for main content, demonstrating responsive UI construction.

```C#
using (paper.Row("MainLayout").Enter())
{
    // First child of the Row: a Column for a sidebar
    using (paper.Column("Sidebar").Width(200).Enter())
    {
        paper.Box("NavItem1").Height(40);
        paper.Box("NavItem2").Height(40);
    }
    // Second child of the Row: a Column for the main content
    using (paper.Column("Content").Enter())
    {
        paper.Box("Title").Height(60);
        paper.Box("Body");
    }
}
```

--------------------------------

### Load Font for Text Rendering

Source: https://prowl.gitbook.io/prowl.paper/index

Loads a font file using FontStashSharp to enable text rendering within the Paper UI. This involves creating a FontSystem and adding font data.

```C#
using FontStashSharp;
// Load font data from a file
var fontSystem = new FontSystem();
fontSystem.AddFont(File.ReadAllBytes("path/to/your/font.ttf"));
// Get a specific font size to use for drawing
var myFont = fontSystem.GetFont(18);
```

--------------------------------

### Event Bubbling Example

Source: https://prowl.gitbook.io/prowl.paper/overview/handling-user-interaction

Demonstrates event bubbling by attaching a single OnClick handler to a parent container. Clicks on child elements within the container will trigger the parent's handler.

```C#
// One handler on the parent
using (paper.Column("MyList").OnClick((r) => Console.WriteLine("List was clicked!")).Enter())
{
    // Clicking this will trigger the parent's OnClick
    paper.Box("Item1").Text(Text.Left("First Item", myFont, Color.Black));
    // Clicking this will ALSO trigger the parent's OnClick
    paper.Box("Item2").Text(Text.Left("Second Item", myFont, Color.Black));
}
```

--------------------------------

### Apply Elastic Easing to Scale Animation

Source: https://prowl.gitbook.io/prowl.paper/overview/the-animation-system

This example demonstrates how to use the `Easing.ElasticOut` function to create a bouncy effect when scaling an element. The animation transitions the ScaleX and ScaleY properties over 0.5 seconds.

```javascript
paper.Box("BouncyBox")
    .Scale(1.0)
    .Transition(GuiProp.ScaleX, 0.5, Easing.ElasticOut) // Use an elastic easing
    .Transition(GuiProp.ScaleY, 0.5, Easing.ElasticOut)
    .Hovered
        .Scale(0.8)
        .End();
```

--------------------------------

### Update Paper UI Resolution

Source: https://prowl.gitbook.io/prowl.paper/index

Updates the resolution of the Paper UI when the application window is resized. This ensures the UI scales correctly.

```C#
paper.SetResolution(newWidth, newHeight);
```

--------------------------------

### Initialize Paper UI

Source: https://prowl.gitbook.io/prowl.paper/overview

Initializes the Paper UI library with a custom renderer and screen dimensions. This is the first step in setting up your UI.

```C#
// In your application's startup code:
ICanvasRenderer myRenderer = new MyCustomRenderer(); // Or use one from the samples
double screenWidth = 1280;
double screenHeight = 720;
var paper = new Paper()(myRenderer, screenWidth, screenHeight);
```

--------------------------------

### Using Margin() for Spacing

Source: https://prowl.gitbook.io/prowl.paper/overview/the-layout-engine

Demonstrates the flexibility of the Margin() method in Prowl Paper. It shows how to apply margins to all sides, top/bottom and left/right, or individually to each side.

```C#
using (paper.Row("Container").Height(100).Enter())
{
    // By setting the left and right margin to Stretch(1.0),
    // the button will be perfectly centered horizontally.
    paper.Box("CenteredButton")
        .Width(150)
        .Margin(paper.Stretch(1.0), 0, paper.Stretch(1.0), 0);
}
```

--------------------------------

### C# Theming with Prowl Paper

Source: https://prowl.gitbook.io/prowl.paper/overview/styling-and-appearance/advanced-styling-reusable-style-definitions

Demonstrates how to theme an application using Prowl Paper by defining color variables in a `Themes` class, registering styles with these variables, and toggling themes by updating variables and re-registering styles.

```C#
public static class Themes
{
    public static Color primaryColor;
    public static Color backgroundColor;
    // ... other theme colors
    public static void ToggleTheme()
    {
        isDark = !isDark;
        if (isDark)
        {
            primaryColor = Color.FromArgb(255, 69, 135, 235);
            // ... set all dark theme colors
        }
        else
        {
            primaryColor = Color.FromArgb(255, 0, 149, 255);
            // ... set all light theme colors
        }
        // Re-register all styles with the new colors
        DefineStyles();
    }
    public static void DefineStyles()
    {
        // Use the theme variables to define styles
        paper.CreateStyleFamily("button")
            .Hovered(new StyleTemplate().BackgroundColor(primaryColor))
            // ... etc
            .Register();
        paper.CreateStyleFamily("card")
            .Base(new StyleTemplate().BackgroundColor(cardBackground))
            // ... etc
            .Register();
    }
}
```

--------------------------------

### Immediate-Mode vs Retained-Mode UI

Source: https://prowl.gitbook.io/prowl.paper/overview

Illustrates the difference between immediate-mode UI (used by Paper) and traditional retained-mode UI frameworks. Immediate-mode simplifies UI code by declaring the UI from scratch each frame, eliminating complex state management and data binding.

```C#
// In a retained-mode system, you might do this:
var myButton =FindElementById("MyButton");
myButton.Roundness=10;
// If MyButton's Name or ID ever changes, this could break silently.
// In Paper, it's as simple as this:
paper.Box("MyButton").Rounded(10); // The roundness is set directly, every frame
```

--------------------------------

### Create and Apply StyleTemplate

Source: https://prowl.gitbook.io/prowl.paper/overview/styling-and-appearance/advanced-styling-reusable-style-definitions

Demonstrates creating a StyleTemplate with specific properties like background color, border, and rounded corners, then registering it and applying it to a UI element.

```swift
var errorBoxTemplate = newStyleTemplate()
    .BackgroundColor(Color.Crimson)
    .BorderColor(Color.White)
    .BorderWidth(2)
    .Rounded(8);

paper.RegisterStyle("error-box", errorBoxTemplate);
paper.Box("ErrorMessage").Style("error-box");
```

--------------------------------

### Basic Row and Column Layouts

Source: https://prowl.gitbook.io/prowl.paper/overview/the-layout-engine

Demonstrates the creation of basic horizontal (Row) and vertical (Column) layouts using Prowl Paper. Rows arrange children horizontally, while Columns arrange them vertically. The `Enter()` method is used to define the scope of the layout.

```C#
using (paper.Row("MyRow").Enter())
{
paper.Box("Box1").Size(50); // Will be on the left
paper.Box("Box2").Size(50); // In the middle
paper.Box("Box3").Size(50); // On the right
}

using (paper.Column("MyColumn").Enter())
{
paper.Box("BoxA").Size(50); // Will be at the top
paper.Box("BoxB").Size(50); // In the middle
paper.Box("BoxC").Size(50); // At the bottom
}
```

--------------------------------

### ProwlScript: Animated Button with Hover and Active States

Source: https://prowl.gitbook.io/prowl.paper/overview/the-animation-system

Shows how to create an interactive button with smooth visual feedback using transitions for background color and scale. Transitions are defined in the base style, and hover/active states trigger the property changes.

```ProwlScript
paper.Box("AnimatedButton")
    .BackgroundColor(Color.Gray)
    .Scale(1.0)
    .Transition(GuiProp.BackgroundColor, 0.2)
    .Transition(GuiProp.ScaleX, 0.2)
    .Transition(GuiProp.ScaleY, 0.2)
    .Hovered
        .BackgroundColor(Color.CornflowerBlue)
        .End()
    .Active
        .Scale(0.9)
        .End();
```

--------------------------------

### Prowl Paper Frame Lifecycle

Source: https://prowl.gitbook.io/prowl.paper/overview/core-concepts

Explains the frame lifecycle in Prowl Paper, detailing the steps involved in BeginFrame(), the UI code definition, and EndFrame().

```APIDOC
Paper.BeginFrame(deltaTime)
  - Prepares Paper for a new UI definition.
  - Clears element data from the previous frame.
  - Sets up a root element filling the screen.
  - Processes user input since the last frame.

Your UI Code
  - Define UI elements using methods like Paper.Box(), Paper.Row().
  - Paper builds a hierarchy of elements in the background.

Paper.EndFrame()
  - Performs layout calculation based on defined rules (Width, Margin, Stretch).
  - Handles interaction (hover, click, drag).
  - Translates UI definition into drawing commands for the renderer.
```

--------------------------------

### ProwlScript: Animate Background Color Change

Source: https://prowl.gitbook.io/prowl.paper/overview/the-animation-system

Demonstrates how to smoothly animate the background color of a UI element when a state changes. This is achieved by applying the `.Transition()` method to the `GuiProp.BackgroundColor` property.

```ProwlScript
paper.Box("ToggleButton")
    .BackgroundColor(isToggled ?Color.Green:Color.Red)
    .Transition(GuiProp.BackgroundColor,0.3); // Animate the background color over 0.3s
```

--------------------------------

### Update Paper Input System

Source: https://prowl.gitbook.io/prowl.paper/overview/handling-user-interaction

This C# code snippet demonstrates how to forward raw input events from your application to Prowl Paper's input system. It includes updating pointer position, mouse button states, mouse wheel scroll, character input, and key states.

```C#
void UpdatePaperInput()
{
    // 1. Update mouse/pointer position
    paper.SetPointerPosition(yourMousePositionVector);
    // 2. Forward mouse button states (true for down, false for up)
    if (IsMouseButtonPressed(MouseButton.Left))
        paper.SetPointerState(PaperMouseBtn.Left, yourMousePositionVector, true);
    if (IsMouseButtonReleased(MouseButton.Left))
        paper.SetPointerState(PaperMouseBtn.Left, yourMousePositionVector, false);
    // Repeat for Right & Middle buttons...
    // 3. Forward mouse wheel scroll changes
    float wheelDelta = GetMouseWheelMove();
    if (wheelDelta != 0)
        paper.SetPointerWheel(wheelDelta);
    // 4. Forward keyboard character input for text fields
    int charCode = GetCharPressed();
    while (charCode > 0)
    {
        paper.AddInputCharacter(((char)charCode).ToString());
        charCode = GetCharPressed();
    }
    // 5. Forward key states for shortcuts, etc.
    if (IsKeyPressed(YourKeys.Enter))
        paper.SetKeyState(PaperKey.Enter, true);
    if (IsKeyReleased(YourKeys.Enter))
        paper.SetKeyState(PaperKey.Enter, false);
    // Repeat for other keys like Ctrl, Shift, A, B, C, etc.
}
```

--------------------------------

### Prowl Paper Percent Sizing

Source: https://prowl.gitbook.io/prowl.paper/overview/the-layout-engine

Specifies an element's size as a percentage of its parent's available space, enabling fluid layouts that adapt to different window sizes.

```C#
using (paper.Row("Container").Width(paper.Pixels(500)).Enter()) {
    // This box will be 50% of 500px = 250px wide
    paper.Box("Half").Width(paper.Percent(50));
    // This box will be 25% of 500px = 125px wide
    paper.Box("Quarter").Width(paper.Percent(25));
}
```

--------------------------------

### ProwlScript: Transition Method Signature

Source: https://prowl.gitbook.io/prowl.paper/overview/the-animation-system

Defines the signature for the `.Transition()` method used in Prowl Paper's animation system. It allows specifying the property to animate, the duration, and an optional easing function.

```ProwlScript
.Transition(GuiProp property, double duration, Easing easingFunction = null)
```

--------------------------------

### Apply Style Family to Element

Source: https://prowl.gitbook.io/prowl.paper/overview/styling-and-appearance/advanced-styling-reusable-style-definitions

Shows how to apply a registered style family to a UI element using the .Style() method. This automatically handles the element's state changes and applies the corresponding styles from the family.

```csharp
paper.Box("MyButton").Style("button");
```

--------------------------------

### Using Statement for UI Element Hierarchy in C#

Source: https://prowl.gitbook.io/prowl.paper/overview/core-concepts

Demonstrates how to use C#'s 'using' statement with Prowl Paper to manage UI element hierarchy. Entering a 'using' block sets a new parent container, and exiting reverts to the previous parent. This simplifies the creation of nested UI structures.

```C#
using (paper.Column("MyContainer").Enter())
{
    // Any element created here is a child of "MyContainer"
    paper.Box("Header");
    paper.Box("Content");
    paper.Box("Footer");
}
```

```C#
using (paper.Column("MainContainer").BackgroundColor(Color.LightGray).Enter())
{
    // This is a child of "MainContainer"
    using (paper.Row("Header").Height(60).BackgroundColor(Color.DarkBlue).Enter())
    {
        // This is a child of "Header"
        paper.Box("Logo").Size(60).BackgroundColor(System.Drawing.Color.IndianRed);
    } // "MainContainer" is the parent again here
    // This is another child of "MainContainer"
    paper.Box("ContentArea");
}
```

--------------------------------

### Define Base and Inherited Button Styles

Source: https://prowl.gitbook.io/prowl.paper/overview/styling-and-appearance/advanced-styling-reusable-style-definitions

Illustrates style inheritance using DefineStyle to create a base button style and a 'button-primary' variant that inherits properties. It shows how to define base properties, override specific styles (like colors), and register the complete style family.

```csharp
// 1. Define the base button style. It handles size, rounding, and transitions.
paper.DefineStyle("button")
    .Height(40)
    .Rounded(8)
    .Transition(GuiProp.BackgroundColor, 0.2)
    .Transition(GuiProp.ScaleX, 0.1);
// 2. Define the primary variant, inheriting from "button"
// This template only needs to specify what's different: the colors.
paper.DefineStyle("button-primary", "button")
    .BackgroundColor(Themes.primaryColor)
    .Hovered(new StyleTemplate().BackgroundColor(Themes.secondaryColor)); // Note: Hovered is part of the variant
// 3. Register the full style family for the primary button
paper.CreateStyleFamily("button-primary")
    .Base(Paper.GetStyle("button-primary")) // Use the inherited style as the base
    .Hovered(Paper.GetStyle("button-primary:hovered"))
    .Active(new StyleTemplate().Scale(0.95f))
    .Register();
// Usage:
paper.Box("PrimaryAction").Style("button-primary");
```

--------------------------------

### Create Interactive Button Style Family

Source: https://prowl.gitbook.io/prowl.paper/overview/styling-and-appearance/advanced-styling-reusable-style-definitions

Demonstrates creating a reusable style family for a button with interactive states (base, hover, active) using the StyleFamilyBuilder. It includes defining base appearance, transitions, hover effects, and active effects.

```csharp
paper.CreateStyleFamily("button")
    .Base(new StyleTemplate()
        // Base appearance
        .Height(40)
        .Rounded(8)
        .BackgroundColor(Themes.secondaryColor)
        // Define transitions for smooth effects
        .Transition(GuiProp.BackgroundColor, 0.2)
        .Transition(GuiProp.ScaleX, 0.1)
        .Transition(GuiProp.ScaleY, 0.1))
    .Hovered(new StyleTemplate()
        // On hover, change the background
        .BackgroundColor(Themes.primaryColor))
    .Active(new StyleTemplate()
        // When clicked, shrink slightly
        .Scale(0.95))
    .Register(); // Don't forget to register it!
```

--------------------------------

### Basic Click and Hover Events

Source: https://prowl.gitbook.io/prowl.paper/overview/handling-user-interaction

Demonstrates attaching click and hover event handlers to a button element. The OnClick event fires when the button is clicked, OnEnter fires when the mouse enters the button's bounds, and OnLeave fires when the mouse leaves.

```C#
paper.Box("MyButton")
    .Text(Text.Center("Click Me!", myFont, Color.White))
    .OnClick((rect) => Console.WriteLine("Button was clicked!"))
    .OnEnter((rect) => Console.WriteLine("Mouse entered the button area."))
    .OnLeave((rect) => Console.WriteLine("Mouse left the button area."));
```

--------------------------------

### Stopping Event Propagation

Source: https://prowl.gitbook.io/prowl.paper/overview/handling-user-interaction

Shows how to prevent an event from bubbling up the element hierarchy by setting StopPropagation to true on a specific element.

```C#
Paper.Box("ChildThatStopsEvents")
    .StopPropagation(true)
    .OnClick((r) => { /* This event will not bubble to the parent */ });
```

--------------------------------

### Interactive Button Styling

Source: https://prowl.gitbook.io/prowl.paper/overview/styling-and-appearance

Demonstrates how to style a button based on its interaction states (Focused, Hovered, Active) using Prowl Paper's built-in helpers. Styles are applied conditionally.

```C#
paper.Box("InteractiveButton")
    .BackgroundColor(Color.Gray) // Default state
    .Focused
        .BackgroundColor(Color.Blue) // Focused state
        .End()
    .Hovered
        .BackgroundColor(Color.LightGray) // Hover state
        .End()
    .Active
        .BackgroundColor(Color.DarkGray); // Active/Pressed state
        .End();
```

--------------------------------

### Load Font for Text Rendering

Source: https://prowl.gitbook.io/prowl.paper/overview

Loads a font file using FontStashSharp to enable text rendering within the Paper UI. This involves creating a FontSystem and adding font data.

```C#
using FontStashSharp;
// Load font data from a file
var fontSystem = new FontSystem();
fontSystem.AddFont(File.ReadAllBytes("path/to/your/font.ttf"));
// Get a specific font size to use for drawing
var myFont = fontSystem.GetFont(18);
```

--------------------------------

### Prowl Paper Stretch Sizing

Source: https://prowl.gitbook.io/prowl.paper/overview/the-layout-engine

Allows an element to fill remaining available space in a container. If multiple elements use Stretch, the space is divided based on their stretch factors.

```C#
using (paper.Row("Toolbar").Width(paper.Pixels(500)).Enter()) {
    // A fixed-size button on the left
    paper.Box("BackButton").Width(paper.Pixels(100));
    // The title bar takes up all the remaining space
    paper.Box("Title").Width(paper.Stretch(1.0));
    // A fixed-size button on the right
    paper.Box("MenuButton").Width(paper.Pixels(100));
}

using (paper.Row("SplitView").Enter()) {
    // Takes up 1/3 of the available space
    paper.Box("PanelA").Width(paper.Stretch(1.0));
    // Takes up 2/3 of the available space (twice the factor of PanelA)
    paper.Box("PanelB").Width(paper.Stretch(2.0));
}
```

--------------------------------

### Basic Styling: Colors and Borders

Source: https://prowl.gitbook.io/prowl.paper/overview/styling-and-appearance

Applies background color, border color, and border width to a Box element. The Box is sized to 200x100 pixels.

```Prowl Paper
paper.Box("StyledBox")
    .Size(200,100)
    .BackgroundColor(Color.CornflowerBlue)
    .BorderColor(Color.White)
    .BorderWidth(4);
```

--------------------------------

### Element Transformations

Source: https://prowl.gitbook.io/prowl.paper/overview/styling-and-appearance

Demonstrates how to apply transformations like translation, scaling, and rotation to elements in Prowl Paper. These transformations are applied from the element's center and do not affect layout.

```C#
paper.Box("TransformedBox")
    .Size(100)
    .BackgroundColor(Color.Purple)
    .Translate(50, 0)   // Move 50px to the right
    .Scale(1.5)         // Make it 50% larger
    .Rotate(45);        // Rotate 45 degrees
```

--------------------------------

### Style Application Order

Source: https://prowl.gitbook.io/prowl.paper/overview/styling-and-appearance

Illustrates that style application order matters in Prowl Paper. Later styles can override earlier ones, as shown with the `.Hovered` state overriding a conditional `.If()` state.

```C#
// This button will be LightGray when hovered, even if 'isToggled' is true,
// because .Hovered comes after .If().
paper.Box("OrderMatters")
    .BackgroundColor(Color.Gray)
    .If(isToggled)
        .BackgroundColor(Color.Green)
        .End()
    .Hovered
        .BackgroundColor(Color.LightGray)
        .End();
```

--------------------------------

### Custom Vector Drawing with AddActionElement

Source: https://prowl.gitbook.io/prowl.paper/overview/styling-and-appearance

Shows how to inject custom drawing commands into the Prowl Paper render pipeline using `AddActionElement`. This provides access to a low-level vector graphics API (`Canvas`) for drawing custom shapes.

```C#
using (paper.Box("ChartCanvas").Size(300, 150).Enter())
{
    // The lambda function receives the canvas and the element's rectangle
    paper.AddActionElement((canvas, rect) =>
    {
        // Draw a red diagonal line across the element
        canvas.BeginPath();
        canvas.MoveTo(rect.x, rect.y);
        canvas.LineTo(rect.x + rect.width, rect.y + rect.height);
        canvas.SetStrokeColor(Color.Red);
        canvas.SetStrokeWidth(3);
        canvas.Stroke();
    });
}
```

--------------------------------

### Prowl Paper Pixels Sizing

Source: https://prowl.gitbook.io/prowl.paper/overview/the-layout-engine

Defines an element's size using absolute screen pixels. Useful for elements that should maintain a fixed size regardless of screen dimensions.

```C#
paper.Box("FixedSize").Width(paper.Pixels(150)).Height(paper.Pixels(50));
```

--------------------------------

### Scroll and Keyboard Events

Source: https://prowl.gitbook.io/prowl.paper/overview/handling-user-interaction

Illustrates handling scroll wheel events and keyboard input. OnScroll fires when the mouse wheel is scrolled over an element, while OnKeyPressed and OnTextInput handle key presses and text input respectively when an element is focused.

```C#
/*
  * `OnScroll((delta, rect) => { ... })`: Fires when the mouse wheel is scrolled while the cursor is over the element. `delta` is the amount scrolled.
  * `OnKeyPressed((keyEvent) => { ... })`: Fires when a key is pressed while the element is focused.
  * `OnTextInput((textEvent) => { ... })`: Fires when character input is received while the element is focused, useful for text fields.
*/
```

--------------------------------

### Prowl Paper Auto Sizing

Source: https://prowl.gitbook.io/prowl.paper/overview/the-layout-engine

Determines an element's size automatically based on its content. For text, it fits the text; for containers, it encloses all children.

```C#
// This button's width will be calculated to fit its text exactly.
paper.Box("AutoButton")
    .Width(paper.Auto)
    .Height(40)
    .Text(Text.Center("A Button With Some Text", myFont, Color.Black));
// This Column's height will be exactly 150px (50 + 50 + 50).
using (paper.Column("AutoColumn").Height(paper.Auto).Enter()) {
    paper.Box("Child1").Height(50);
    paper.Box("Child2").Height(50);
    paper.Box("Child3").Height(50);
}
```

--------------------------------

### Custom Conditional Styling

Source: https://prowl.gitbook.io/prowl.paper/overview/styling-and-appearance

Shows how to apply styles based on custom boolean conditions using the `.If()` method in Prowl Paper. Styles within the `.If()` block override previous styles if the condition is true.

```C#
bool isToggled = true; // Your application's state
paper.Box("ToggleButton")
    .BackgroundColor(Color.Red)
    .If(isToggled)
        .BackgroundColor(Color.Green) // This overrides the red color if toggled
        .End();
```

--------------------------------

### Unique Element IDs in Prowl Paper

Source: https://prowl.gitbook.io/prowl.paper/overview/core-concepts

Explains how Prowl Paper generates unique element IDs using parent ID, string ID, and source line number. It shows valid and invalid ways to create elements, especially in loops, to avoid ID collisions and maintain UI state.

```C#
// Line 101
paper.Box("MyButton").Text(Text.Center("Button 1", myFont, Color.White));
// Line 102
paper.Box("MyButton").Text(Text.Center("Button 2", myFont, Color.White));
// Line 103
paper.Box("MyButton").Text(Text.Center("Button 3", myFont, Color.White));
```

```C#
for (int i = 0; i < 5; i++)
{
    // Every button here has the same parent, same string "MyButton",
    // and is created on the same line of code. This will fail!
    paper.Box("MyButton").Text(Text.Center($"Button", myFont, Color.White));
}
```

```C#
for (int i = 0; i < 5; i++)
{
    // By including 'i', we ensure the final
    // generated ID is unique for each button in the loop.
    paper.Box("MyButton", i).Text(Text.Center("Button", myFont, Color.White));
}
```

--------------------------------

### Update Paper UI Resolution

Source: https://prowl.gitbook.io/prowl.paper/overview

Updates the resolution of the Paper UI when the application window is resized. This ensures the UI scales correctly.

```C#
paper.SetResolution(newWidth, newHeight);
```

--------------------------------

### Advanced Drawing: Gradients

Source: https://prowl.gitbook.io/prowl.paper/overview/styling-and-appearance

Applies gradients to a Box element. Supports linear and radial gradients with specified colors and blending parameters.

```Prowl Paper
// A vertical linear gradient
paper.Box("LinearGradient")
    .BackgroundGradient(Gradient.Linear(0, 0, 0, 1, Color.Blue, Color.Aqua));
// A radial gradient from the center
paper.Box("RadialGradient")
    .BackgroundGradient(Gradient.Radial(0.5, 0.5, 10, 80, Color.Yellow, Color.Red));
```

--------------------------------

### Drag and Drop Events

Source: https://prowl.gitbook.io/prowl.paper/overview/handling-user-interaction

Shows how to implement drag-and-drop functionality. The OnDragging event handler is used to update an element's position based on mouse movement during a drag operation.

```C#
// A simple draggable element
paper.Box("Draggable")
    .OnDragging((start, rect) => {
        // 'rect' contains the delta of the mouse movement
        myElementPosition += rect.Delta;
    });
```

--------------------------------

### Prowl Paper SelfDirected Positioning

Source: https://prowl.gitbook.io/prowl.paper/overview/the-layout-engine

Removes an element from the normal layout flow, allowing precise placement relative to its parent's top-left corner using Left(), Top(), Right(), and Bottom() methods.

```C#
using (paper.Box("Canvas")
    .Width(500).Height(300)
    .Enter()) {
    // This element is NOT part of the normal layout flow.
    // It will be placed 20px from the left and 30px from the top
    // of the "Canvas" container.
    paper.Box("Overlay")
        .PositionType(PositionType.SelfDirected)
        .Left(20)
        .Top(30)
        .Size(100);
}
```

--------------------------------

### Advanced Drawing: Box Shadows

Source: https://prowl.gitbook.io/prowl.paper/overview/styling-and-appearance

Applies a box shadow to a Box element for a sense of depth. The shadow is defined by offset, blur, spread, and color.

```Prowl Paper
paper.Box("ShadowBox")
    .Size(150)
    .Rounded(10)
    .BackgroundColor(Color.White)
    //         OffsetX, OffsetY, Blur, Spread, Color
    .BoxShadow(5, 5, 15, 0, Color.FromArgb(100, 0, 0, 0));
```

--------------------------------

### Basic Styling: Rounded Corners

Source: https://prowl.gitbook.io/prowl.paper/overview/styling-and-appearance

Applies rounded corners to a Box element with a size of 150 pixels and a green background. The .Rounded() method can take a single value for all corners or specific values for each corner.

```Prowl Paper
paper.Box("RoundedBox")
    .Size(150)
    .BackgroundColor(Color.ForestGreen)
    .Rounded(20);
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.