winrt-xaml 1.0.0

<nav class="navbar">
  <div class="container">
    <div class="nav-brand">
      <h1>🦀 WinRT-XAML</h1>
      <span class="version">v0.1.0</span>
    </div>
    <div class="nav-links">
      <a href="#overview">Overview</a>
      <a href="#quickstart">Quick Start</a>
      <a href="#examples">Examples</a>
      <a href="#api">API</a>
      <a href="https://github.com/pegasusheavy/winrt-xaml" target="_blank">GitHub</a>
    </div>
  </div>
</nav>

<main class="main-content">
  <!-- Hero Section -->
  <section id="overview" class="hero">
    <div class="container">
      <h1 class="hero-title">Build Modern Windows Apps in Rust</h1>
      <p class="hero-subtitle">
        WinRT-XAML brings native Windows Runtime XAML controls to Rust through XAML Islands.
        Create beautiful, production-ready Windows applications with Fluent Design styling,
        event handling, scrolling, and 15 styled examples to get started.
      </p>
      <div class="hero-buttons">
        <a href="#quickstart" class="btn btn-primary">Get Started</a>
        <a href="#examples" class="btn btn-secondary">View 15 Examples</a>
      </div>
      <div class="features-grid">
        <div class="feature">
          <div class="feature-icon">🎨</div>
          <h3>Modern Styling</h3>
          <p>Fluent Design with dark themes, colors, and rounded corners</p>
        </div>
        <div class="feature">
          <div class="feature-icon">🎯</div>
          <h3>Event Handling</h3>
          <p>Click events with Rust closures and callbacks</p>
        </div>
        <div class="feature">
          <div class="feature-icon">📜</div>
          <h3>Scrolling Support</h3>
          <p>ScrollViewer for content that exceeds window bounds</p>
        </div>
        <div class="feature">
          <div class="feature-icon">🔒</div>
          <h3>Memory Safe</h3>
          <p>RAII-based COM lifetime management, zero leaks</p>
        </div>
        <div class="feature">
          <div class="feature-icon">⚡</div>
          <h3>High Performance</h3>
          <p>Minimal FFI overhead (~5-10ns per call)</p>
        </div>
        <div class="feature">
          <div class="feature-icon">📚</div>
          <h3>Well Documented</h3>
          <p>Extensive docs: Architecture, Build System, Status</p>
        </div>
      </div>
    </div>
  </section>

  <!-- Quick Start Section -->
  <section id="quickstart" class="section">
    <div class="container">
      <h2>Quick Start</h2>

      <div class="step">
        <h3>1. Add to Your Cargo.toml</h3>
        <pre class="code-block"><code>[dependencies]
winrt-xaml = "0.1.0"
windows = {{ '{' }}version = "0.58", features = ["Win32_Foundation", "Win32_UI_WindowsAndMessaging"]{{ '}' }}</code></pre>
      </div>

      <div class="step">
        <h3>2. Build the C++ Helper (One-time)</h3>
        <pre class="code-block"><code>cd xaml_islands_helper
./build.bat</code></pre>
      </div>

      <div class="step">
        <h3>3. Create Your First WinRT App</h3>
        <pre class="code-block"><code>use winrt_xaml::xaml_native::*;
use windows::Win32::System::Com::{{'{'}CoInitializeEx, CoUninitialize, COINIT_APARTMENTTHREADED{'}'}}

;

fn main() -> Result<()> {{'{'}
    // Initialize COM
    unsafe {{'{'} CoInitializeEx(None, COINIT_APARTMENTTHREADED).ok(); {'}'}

    // Initialize XAML
    let _manager = XamlManager::new()?;

    // Create host window
    let host_hwnd = create_host_window()?;

    // Create XAML source and attach to window
    let mut xaml_source = XamlSource::new()?;
    let island_hwnd = xaml_source.attach_to_window(host_hwnd)?;

    // Create a button
    let button = XamlButton::new()?;
    button.set_content("Hello WinRT!")?;
    button.set_size(200.0, 50.0)?;

    // Display it
    xaml_source.set_content_element(&button.as_uielement())?;

    // Show and run
    unsafe {{'{'} ShowWindow(island_hwnd, SW_SHOW); {'}'}
    run_message_loop()?;

    unsafe {{'{'} CoUninitialize(); {'}'}
    Ok(())
{'}'}
</code></pre>
      </div>
    </div>
  </section>

  <!-- Available Controls -->
  <section id="controls" class="section alt-bg">
    <div class="container">
      <h2>Available WinRT Controls</h2>
      <div class="controls-grid">
        <div class="control-card">
          <h3>XamlButton</h3>
          <p>Interactive button with click events and styling</p>
          <code>button.on_click(|| {...})?</code>
        </div>
        <div class="control-card">
          <h3>XamlTextBlock</h3>
          <p>Text display with fonts, colors, and weights</p>
          <code>textblock.set_font_weight(700)?</code>
        </div>
        <div class="control-card">
          <h3>XamlTextBox</h3>
          <p>Text input/output with placeholders</p>
          <code>textbox.get_text()?</code>
        </div>
        <div class="control-card">
          <h3>XamlStackPanel</h3>
          <p>Vertical/horizontal layout with spacing</p>
          <code>panel.set_spacing(20.0)?</code>
        </div>
        <div class="control-card">
          <h3>XamlGrid</h3>
          <p>Grid layout for complex UIs</p>
          <code>grid.add_child(&element)?</code>
        </div>
        <div class="control-card">
          <h3>XamlScrollViewer</h3>
          <p>Scrollable content container</p>
          <code>scroll.set_content(&panel)?</code>
        </div>
      </div>

      <h3 style="margin-top: 2rem;">Styling Features</h3>
      <div class="controls-grid">
        <div class="control-card">
          <h3>Colors</h3>
          <p>ARGB format: background, foreground</p>
          <code>set_background(0xFF0078D4)?</code>
        </div>
        <div class="control-card">
          <h3>Padding & Margin</h3>
          <p>Control spacing and layout</p>
          <code>set_padding(20, 15, 20, 15)?</code>
        </div>
        <div class="control-card">
          <h3>Corner Radius</h3>
          <p>Rounded corners for modern look</p>
          <code>set_corner_radius(10.0)?</code>
        </div>
      </div>
    </div>
  </section>

  <!-- Examples -->
  <section id="examples" class="section">
    <div class="container">
      <h2>15 Production-Ready Examples</h2>
      <p style="text-align: center; margin-bottom: 2rem; opacity: 0.9;">
        All examples feature modern dark themes with Fluent Design styling
      </p>

      <h3>Featured Examples</h3>
      <div class="examples-grid">
        <div class="example-card highlight">
          <h3>📜 Scrollable List</h3>
          <p>30 items with ScrollViewer, color-coded badges</p>
          <code>cargo run --example scrollable_list</code>
        </div>
        <div class="example-card highlight">
          <h3>🧮 Functional Calculator</h3>
          <p>Full calculator with event handling</p>
          <code>cargo run --example winrt_calculator_functional</code>
        </div>
        <div class="example-card highlight">
          <h3>💬 Chat Interface</h3>
          <p>Chat UI with text input/output</p>
          <code>cargo run --example chat_interface</code>
        </div>
      </div>

      <h3>Application Examples</h3>
      <div class="examples-grid">
        <div class="example-card">
          <h3>✅ Todo App</h3>
          <p>Add/clear todo items</p>
          <code>cargo run --example todo_app</code>
        </div>
        <div class="example-card">
          <h3>📝 Form Demo</h3>
          <p>Multi-field registration form</p>
          <code>cargo run --example form_demo</code>
        </div>
        <div class="example-card">
          <h3>⚙️ Settings Panel</h3>
          <p>Settings with theme toggles</p>
          <code>cargo run --example settings_panel</code>
        </div>
        <div class="example-card">
          <h3>🎨 Color Picker</h3>
          <p>Interactive color selection</p>
          <code>cargo run --example color_picker</code>
        </div>
      </div>

      <h3>Basic Examples</h3>
      <div class="examples-grid">
        <div class="example-card">
          <h3>🔢 Counter</h3>
          <p>4 operations: inc/dec/reset/double</p>
          <code>cargo run --example counter</code>
        </div>
        <div class="example-card">
          <h3>⚡ Simple Counter</h3>
          <p>Minimal counter example</p>
          <code>cargo run --example counter_simple</code>
        </div>
        <div class="example-card">
          <h3>🎨 WinRT Controls</h3>
          <p>Showcase all controls</p>
          <code>cargo run --example winrt_controls_demo</code>
        </div>
        <div class="example-card">
          <h3>🔄 WinRT Counter</h3>
          <p>Interactive counter</p>
          <code>cargo run --example winrt_counter</code>
        </div>
        <div class="example-card">
          <h3>🪟 Basic Window</h3>
          <p>Click counter demo</p>
          <code>cargo run --example basic_window</code>
        </div>
        <div class="example-card">
          <h3>👋 Simple Window</h3>
          <p>Hello World with styling</p>
          <code>cargo run --example simple_window</code>
        </div>
      </div>
    </div>
  </section>

  <!-- API Documentation -->
  <section id="api" class="section alt-bg">
    <div class="container">
      <h2>API Reference</h2>

      <div class="api-section">
        <h3>XamlManager</h3>
        <p>Manages the Windows XAML framework. Must be kept alive for the duration of XAML usage.</p>
        <pre class="code-block"><code>let _manager = XamlManager::new()?;</code></pre>
      </div>

      <div class="api-section">
        <h3>XamlSource</h3>
        <p>DesktopWindowXamlSource for hosting XAML content in Win32 windows.</p>
        <pre class="code-block"><code>let mut source = XamlSource::new()?;
let island_hwnd = source.attach_to_window(host_hwnd)?;
source.set_content_element(&element.as_uielement())?;</code></pre>
      </div>

      <div class="api-section">
        <h3>XamlButton</h3>
        <p>Interactive button with click events, styling, and modern design.</p>
        <pre class="code-block"><code>let button = XamlButton::new()?;
button.set_content("Click Me")?;
button.set_size(200.0, 50.0)?;
button.set_background(0xFF0078D4)?;  // Microsoft blue
button.set_corner_radius(10.0)?;
button.on_click(|| {{'{'}
    println!("Button clicked!");
{'}'}})?;</code></pre>
      </div>

      <div class="api-section">
        <h3>XamlTextBox</h3>
        <p>Text input/output control with text retrieval.</p>
        <pre class="code-block"><code>let textbox = XamlTextBox::new()?;
textbox.set_placeholder("Enter text...")?;
textbox.set_size(300.0, 56.0)?;
textbox.set_background(0xFF2D2D2D)?;

// Get text from textbox
let text = textbox.get_text()?;</code></pre>
      </div>

      <div class="api-section">
        <h3>XamlStackPanel</h3>
        <p>Layout container with vertical/horizontal orientation and spacing.</p>
        <pre class="code-block"><code>let panel = XamlStackPanel::new()?;
panel.set_vertical(true)?;
panel.set_spacing(20.0)?;
panel.set_background(0xFF1A1A1A)?;
panel.set_padding(30.0, 30.0, 30.0, 30.0)?;
panel.add_child(&button.as_uielement())?;</code></pre>
      </div>

      <div class="api-section">
        <h3>XamlScrollViewer</h3>
        <p>Scrollable container for content that exceeds window bounds.</p>
        <pre class="code-block"><code>let scroll = XamlScrollViewer::new()?;
scroll.set_vertical_scroll_mode(ScrollMode::Enabled)?;
scroll.set_vertical_scrollbar_visibility(ScrollBarVisibility::Auto)?;
scroll.set_content(&panel.as_uielement())?;</code></pre>
      </div>
    </div>
  </section>

  <!-- Architecture -->
  <section id="architecture" class="section">
    <div class="container">
      <h2>Architecture</h2>
      <div class="architecture-diagram">
        <div class="arch-layer">
          <strong>Rust Application</strong>
          <p>Your Code</p>
        </div>
        <div class="arch-arrow">↓</div>
        <div class="arch-layer">
          <strong>winrt_xaml::xaml_native</strong>
          <p>Safe Rust API</p>
        </div>
        <div class="arch-arrow">↓ FFI</div>
        <div class="arch-layer">
          <strong>xaml_islands_helper.dll</strong>
          <p>C++ Bridge</p>
        </div>
        <div class="arch-arrow">↓ C++/WinRT</div>
        <div class="arch-layer">
          <strong>Windows.UI.Xaml.*</strong>
          <p>WinRT APIs</p>
        </div>
        <div class="arch-arrow">↓</div>
        <div class="arch-layer highlight">
          <strong>Fluent Design Rendering</strong>
          <p>Native Windows</p>
        </div>
      </div>
    </div>
  </section>

  <!-- Footer -->
  <footer class="footer">
    <div class="container">
      <div class="footer-content">
        <div class="footer-section">
          <h4>Documentation</h4>
          <a href="https://github.com/pegasusheavy/winrt-xaml/blob/develop/README.md">README</a>
          <a href="https://github.com/pegasusheavy/winrt-xaml/blob/develop/BUILD_SYSTEM.md">Build System</a>
          <a href="https://github.com/pegasusheavy/winrt-xaml/blob/develop/ARCHITECTURE.md">Architecture</a>
          <a href="https://github.com/pegasusheavy/winrt-xaml/blob/develop/PROJECT_STATUS.md">Project Status</a>
        </div>
        <div class="footer-section">
          <h4>Resources</h4>
          <a href="https://github.com/pegasusheavy/winrt-xaml">GitHub</a>
          <a href="https://github.com/pegasusheavy/winrt-xaml/tree/develop/examples">15 Examples</a>
          <a href="https://github.com/pegasusheavy/winrt-xaml/blob/develop/TESTING.md">Testing</a>
          <a href="https://github.com/pegasusheavy/winrt-xaml/blob/develop/CHANGELOG.md">Changelog</a>
        </div>
        <div class="footer-section">
          <h4>Community</h4>
          <a href="https://github.com/pegasusheavy/winrt-xaml/issues">Issues</a>
          <a href="https://github.com/pegasusheavy/winrt-xaml/pulls">Pull Requests</a>
          <a href="https://github.com/pegasusheavy/winrt-xaml/blob/develop/CONTRIBUTING.md">Contributing</a>
          <a href="https://www.patreon.com/c/PegasusHeavyIndustries">Support on Patreon</a>
        </div>
        <div class="footer-section">
          <h4>License</h4>
          <p>Licensed under MIT or Apache-2.0</p>
          <p>© 2025 Pegasus Heavy Industries</p>
          <p style="margin-top: 1rem; opacity: 0.8;">
            ✅ Production-Ready v0.1.0
          </p>
        </div>
      </div>
    </div>
  </footer>
</main>

<router-outlet />