BeepAppBar

Overview

BeepAppBar is a comprehensive application title bar control that provides a modern, professional interface for Windows Forms applications. It combines logo display, title text, search functionality, notifications, user profile management, theme switching, and window controls in a single cohesive component.

Built on the BeepControl foundation, BeepAppBar features draggable form functionality, integrated search with autocomplete, notification badges, dropdown menus, responsive layout, and comprehensive theming support. Perfect for modern desktop applications, dashboards, and enterprise software interfaces.

Key Features

Visual Preview

Basic Usage

// Create and configure the app bar
var appBar = new BeepAppBar
{
    Dock = DockStyle.Top,
    Height = 48,
    Title = "My Application",
    LogoImage = "app-logo.svg",
    ShowSearchBox = true,
    SearchBoxPlaceholder = "Search...",
    ShowNotificationIcon = true,
    ShowProfileIcon = true,
    ShowThemeIcon = true
};

// Handle app bar events
appBar.OnButtonClicked += AppBar_OnButtonClicked;
appBar.OnSearchBoxSelected += AppBar_OnSearchBoxSelected;
appBar.Clicked += AppBar_Clicked;

this.Controls.Add(appBar);

private void AppBar_OnButtonClicked(object sender, BeepAppBarEventsArgs e)
{
    switch (e.Name)
    {
        case "Profile":
            ShowUserProfile();
            break;
        case "Notifications":
            ShowNotifications();
            break;
        case "Theme":
            // Theme switching is handled automatically
          //  Console.WriteLine("Theme changed");
            break;
        case "Logo":
            ShowAboutDialog();
            break;
    }
}

private void AppBar_OnSearchBoxSelected(object sender, BeepAppBarEventsArgs e)
{
    string searchText = e.Selectedstring;
    PerformSearch(searchText);
}

private void AppBar_Clicked(object sender, BeepMouseEventArgs e)
{
  //  Console.WriteLine($"Clicked on: {e.Name}");
}

// Configure search autocomplete
appBar.AutoCompleteMode = AutoCompleteMode.SuggestAppend;
appBar.AutoCompleteSource = AutoCompleteSource.CustomSource;

// Add search suggestions
var searchSuggestions = new List
{
    "Dashboard",
    "Reports",
    "Settings",
    "Users",
    "Analytics",
    "Billing",
    "Support"
};

appBar.AddToSearchBoxAutoCompleteSource(searchSuggestions);

Properties

Display Properties

Search Properties

Icon Visibility Properties

Behavior Properties

Events

// BeepAppBarEventsArgs provides access to:
public class BeepAppBarEventsArgs : EventArgs
{
    public string Name { get; set; }           // Component name ("Profile", "Theme", etc.)
    public BeepButton Button { get; set; }     // The button that was clicked
    public SimpleItem SelectedItem { get; set; } // Selected menu item
    public string Selectedstring { get; set; }   // Selected text or search string
}

// Example usage
private void AppBar_OnButtonClicked(object sender, BeepAppBarEventsArgs e)
{
  //  Console.WriteLine($"Button: {e.Name}");
    
    if (e.SelectedItem != null)
    {
      //  Console.WriteLine($"Selected: {e.SelectedItem.Text}");
    }
    
    if (!string.IsNullOrEmpty(e.Selectedstring))
    {
      //  Console.WriteLine($"Text: {e.Selectedstring}");
    }
}

Methods

// Show notification badge
appBar.ShowBadgeOnNotificationIcon("5");

// Configure dragging behavior
appBar.SetDraggableAreas("Title", "Logo", "Empty");
appBar.SetFormDraggingEnabled(true);

// Add search autocomplete
var suggestions = new List { "Users", "Reports", "Settings" };
appBar.AddToSearchBoxAutoCompleteSource(suggestions);

// Show/hide components dynamically
appBar.HideShowLogo(false);
appBar.HideShowTitle(true);

// Show custom context menu
var menuItems = new BindingList
{
    new SimpleItem { Text = "Option 1", ImagePath = "icon1.svg" },
    new SimpleItem { Text = "Option 2", ImagePath = "icon2.svg" }
};
appBar.ShowContextMenu(menuItems, new Point(100, 50));

Examples

public partial class MainForm : Form
{
    private BeepAppBar appBar;

    public MainForm()
    {
        InitializeComponent();
        SetupAppBar();
        SetupForm();
    }

    private void SetupAppBar()
    {
        appBar = new BeepAppBar
        {
            Dock = DockStyle.Top,
            Height = 50,
            Title = "Enterprise Dashboard",
            LogoImage = "company-logo.svg",
            LogoSize = new Size(40, 40),
            ShowSearchBox = true,
            SearchBoxPlaceholder = "Search employees, reports, projects...",
            ShowNotificationIcon = true,
            ShowProfileIcon = true,
            ShowThemeIcon = true,
            EnableFormDragging = true
        };

        // Configure search
        appBar.AutoCompleteMode = AutoCompleteMode.SuggestAppend;
        appBar.AutoCompleteSource = AutoCompleteSource.CustomSource;
        
        var searchItems = new List
        {
            "Dashboard", "Analytics", "Reports", "Users", "Settings",
            "Projects", "Tasks", "Calendar", "Messages", "Files"
        };
        appBar.AddToSearchBoxAutoCompleteSource(searchItems);

        // Set up events
        appBar.OnButtonClicked += AppBar_OnButtonClicked;
        appBar.OnSearchBoxSelected += AppBar_OnSearchBoxSelected;
        appBar.SelectedItemChanged += AppBar_SelectedItemChanged;

        // Add to form
        this.Controls.Add(appBar);
    }

    private void SetupForm()
    {
        this.FormBorderStyle = FormBorderStyle.None;
        this.StartPosition = FormStartPosition.CenterScreen;
        this.Size = new Size(1200, 800);
        this.WindowState = FormWindowState.Normal;
    }

    private void AppBar_OnButtonClicked(object sender, BeepAppBarEventsArgs e)
    {
        switch (e.Name)
        {
            case "Profile":
                ShowUserProfileMenu();
                break;
            case "Notifications":
                ShowNotificationsPanel();
                break;
            case "Theme":
                // Theme is handled automatically by BeepAppBar
                break;
            case "Logo":
                ShowAboutDialog();
                break;
        }
    }

    private void AppBar_OnSearchBoxSelected(object sender, BeepAppBarEventsArgs e)
    {
        string searchQuery = e.Selectedstring;
        if (!string.IsNullOrWhiteSpace(searchQuery))
        {
            PerformGlobalSearch(searchQuery);
        }
    }

    private void AppBar_SelectedItemChanged(object sender, SelectedItemChangedEventArgs e)
    {
        if (e.SelectedItem != null)
        {
            ProcessMenuSelection(e.SelectedItem.Text);
        }
    }

    private void ShowUserProfileMenu()
    {
        // User profile menu is automatically shown by BeepAppBar
        // You can customize it by handling SelectedItemChanged event
    }

    private void ShowNotificationsPanel()
    {
        // Show notification count badge
        appBar.ShowBadgeOnNotificationIcon("3");
        
        // Open notifications side panel or popup
        var notificationsForm = new NotificationsForm();
        notificationsForm.Show();
    }

    private void PerformGlobalSearch(string query)
    {
        // Implement global search functionality
        var searchResults = SearchEngine.Search(query);
        ShowSearchResults(searchResults);
    }

    private void ShowSearchResults(List results)
    {
        // Display search results in main content area
        var resultsPanel = new SearchResultsPanel(results);
        // Add to main content area
    }
}

public class CustomAppBarForm : Form
{
    private BeepAppBar appBar;

    protected override void OnLoad(EventArgs e)
    {
        base.OnLoad(e);
        
        CreateCustomAppBar();
        ApplyCustomStyling();
    }

    private void CreateCustomAppBar()
    {
        appBar = new BeepAppBar
        {
            Dock = DockStyle.Top,
            Height = 56,
            Title = "Custom Styled App",
            LogoImage = "brand-logo.svg"
        };

        // Custom theming
        appBar.Theme = "DarkTheme";
        appBar.BackColor = Color.FromArgb(25, 25, 25);
        appBar.ForeColor = Color.White;
        appBar.UseGradientBackground = true;
        appBar.GradientStartColor = Color.FromArgb(45, 45, 45);
        appBar.GradientEndColor = Color.FromArgb(25, 25, 25);

        // Respond to theme changes
        BeepThemesManager.ThemeChanged += (s, themeName) =>
        {
            appBar.ApplyTheme();
            ApplyCustomStyling();
        };

        this.Controls.Add(appBar);
    }

    private void ApplyCustomStyling()
    {
        // Apply custom styling after theme changes
        if (appBar.Theme == "DarkTheme")
        {
            appBar.LogoSize = new Size(48, 48);
            appBar.SearchBoxPlaceholder = "Search in dark mode...";
        }
        else
        {
            appBar.LogoSize = new Size(40, 40);
            appBar.SearchBoxPlaceholder = "Search...";
        }
    }
}

public class SearchIntegratedForm : Form
{
    private BeepAppBar appBar;
    private SearchService searchService;

    protected override void OnLoad(EventArgs e)
    {
        base.OnLoad(e);
        
        searchService = new SearchService();
        SetupAdvancedSearch();
    }

    private void SetupAdvancedSearch()
    {
        appBar = new BeepAppBar
        {
            Dock = DockStyle.Top,
            Height = 48,
            Title = "Search Demo",
            ShowSearchBox = true
        };

        // Configure advanced autocomplete
        appBar.AutoCompleteMode = AutoCompleteMode.SuggestAppend;
        appBar.AutoCompleteSource = AutoCompleteSource.CustomSource;

        // Load initial search suggestions
        LoadSearchSuggestions();

        // Handle search events
        appBar.OnSearchBoxSelected += async (s, e) =>
        {
            if (!string.IsNullOrWhiteSpace(e.Selectedstring))
            {
                await PerformRealTimeSearch(e.Selectedstring);
            }
        };

        this.Controls.Add(appBar);
    }

    private async void LoadSearchSuggestions()
    {
        // Load search suggestions from various sources
        var suggestions = new List();
        
        // Add recent searches
        suggestions.AddRange(await searchService.GetRecentSearches());
        
        // Add popular searches
        suggestions.AddRange(await searchService.GetPopularSearches());
        
        // Add system commands
        suggestions.AddRange(new[]
        {
            "Settings", "Help", "About", "Logout", "Preferences"
        });

        appBar.AddToSearchBoxAutoCompleteSource(suggestions);
    }

    private async Task PerformRealTimeSearch(string query)
    {
        try
        {
            // Show loading indicator
            appBar.SearchBoxPlaceholder = "Searching...";

            // Perform search
            var results = await searchService.SearchAsync(query);

            // Update autocomplete with new suggestions
            var newSuggestions = results.Select(r => r.Title).ToList();
            appBar.AddToSearchBoxAutoCompleteSource(newSuggestions);

            // Display results
            ShowSearchResults(results);

            // Reset placeholder
            appBar.SearchBoxPlaceholder = "Search...";
        }
        catch (Exception ex)
        {
            MessageBox.Show($"Search error: {ex.Message}", "Error", 
                          MessageBoxButtons.OK, MessageBoxIcon.Error);
        }
    }

    private void ShowSearchResults(List results)
    {
        // Implementation for displaying search results
        var resultsForm = new SearchResultsForm(results);
        resultsForm.Show(this);
    }
}

Theming

BeepAppBar provides comprehensive theming with specialized app bar theme properties:

var appBar = new BeepAppBar
{
    Theme = "DarkTheme",
    UseThemeFont = true,
    ApplyThemeButtons = true
};

// Theme automatically applies:
// - AppBarBackColor: Main app bar background
// - AppBarForeColor: Main app bar text color
// - AppBarTitleForeColor: Title text color
// - AppBarTitleBackColor: Title background color
// - AppBarButtonBackColor: Button background colors
// - AppBarButtonForeColor: Button text/icon colors
// - AppBarTextBoxBackColor: Search box background
// - AppBarTextBoxForeColor: Search box text color

// Apply theme manually if needed
appBar.ApplyTheme();

Specialized App Bar Theme Properties

• AppBarBackColor - Main app bar background color
• AppBarForeColor - Main app bar text color
• AppBarGradiantStartColor - Gradient start color
• AppBarGradiantEndColor - Gradient end color
• AppBarTitleForeColor - Title text color
• AppBarTitleBackColor - Title background color
• AppBarTitleStyle - Title font styling
• AppBarTextStyle - General text font styling
• AppBarButtonBackColor - Button background color
• AppBarButtonForeColor - Button text/icon color
• AppBarTextBoxBackColor - Search box background
• AppBarTextBoxForeColor - Search box text color
• AppBarMinButtonColor - Minimize button color
• AppBarMaxButtonColor - Maximize button color
• AppBarCloseButtonColor - Close button color

Best Practices

?? Visual Design

• Consistent branding: Use appropriate logo size and company colors
• Clear hierarchy: Make the title prominent but not overwhelming
• Icon clarity: Use recognizable icons for notifications, profile, and theme
• Responsive layout: Test at different window sizes to ensure proper layout

?? Search Functionality

• Meaningful autocomplete: Provide relevant search suggestions
• Performance: Implement debounced search to avoid excessive API calls
• Clear feedback: Show loading states and search result counts
• Contextual results: Tailor search results to current application context

?? Notification Management

• Badge visibility: Use notification badges sparingly to maintain impact
• Real-time updates: Update notification counts in real-time
• Clear indicators: Provide clear visual feedback for notification states
• Accessibility: Ensure notification badges are screen reader accessible

??? User Interaction

• Drag areas: Configure appropriate drag areas for form movement
• Hover states: Provide clear hover feedback for interactive elements
• Menu organization: Organize profile and theme menus logically
• Keyboard support: Ensure all functionality works with keyboard navigation