BeepTestimonial

Overview

BeepTestimonial is a sophisticated testimonial display control designed for showcasing customer reviews, feedback, and endorsements. It provides multiple layout options, star ratings, and professional styling to enhance credibility and user engagement on websites and applications.

Built on the BeepControl foundation, it includes user photos, company logos, star ratings, and flexible layouts to match different design requirements. The control supports theme integration and automatic layout management for responsive design.

Key Features

Basic Usage

// Create a basic testimonial
var testimonial = new BeepTestimonial
{
    ViewType = TestimonialViewType.Classic,
    Testimonial = "This product exceeded my expectations!",
    Name = "John Smith",
    Position = "Software Developer",
    Username = "@johnsmith",
    Rating = "5",
    Size = new Size(350, 200),
    Location = new Point(10, 10)
};

// Add to form
this.Controls.Add(testimonial);

var testimonial = new BeepTestimonial
{
    ViewType = TestimonialViewType.SocialCard,
    Testimonial = "Amazing service and support!",
    Name = "Sarah Johnson",
    Position = "Marketing Director",
    Username = "@sarahj",
    Rating = "4",
    ImagePath = "images/sarah.jpg",
    CompanyLogoPath = "images/company_logo.png"
};

var minimal = new BeepTestimonial
{
    ViewType = TestimonialViewType.Minimal,
    Testimonial = "Clean and professional design.",
    Name = "Alex Chen",
    Position = "UI Designer"
};

View Types

Properties

View Configuration

Content Properties

Component Properties

Methods

Events

var testimonial = new BeepTestimonial
{
    ViewType = TestimonialViewType.SocialCard,
    Testimonial = "Great experience!",
    Name = "Jane Doe"
};

// Handle close button click
testimonial.Controls.OfType().First()
    .Controls.OfType().FirstOrDefault(b => b.Text == "×")
    ?.Click += (s, e) => {
        // Custom close handling
        testimonial.Visible = false;
        OnTestimonialClosed(testimonial);
    };

// Handle image click for profile view
testimonial.Controls.OfType().First()
    .Controls.OfType().FirstOrDefault()
    ?.Click += (s, e) => {
        ShowUserProfile(testimonial.Name);
    };

Examples

public void CreateCustomerReviews()
{
    var reviews = new[]
    {
        new { Name = "Alice Johnson", Position = "Product Manager", 
              Testimonial = "This solution transformed our workflow completely!", 
              Rating = "5", Image = "alice.jpg" },
        new { Name = "Bob Smith", Position = "Developer", 
              Testimonial = "Clean code and excellent documentation.", 
              Rating = "4", Image = "bob.jpg" },
        new { Name = "Carol Davis", Position = "Designer", 
              Testimonial = "Beautiful interface and intuitive design.", 
              Rating = "5", Image = "carol.jpg" }
    };

    var panel = new FlowLayoutPanel
    {
        Dock = DockStyle.Fill,
        FlowDirection = FlowDirection.TopDown,
        AutoScroll = true,
        Padding = new Padding(10)
    };

    foreach (var review in reviews)
    {
        var testimonial = new BeepTestimonial
        {
            ViewType = TestimonialViewType.Classic,
            Testimonial = review.Testimonial,
            Name = review.Name,
            Position = review.Position,
            Rating = review.Rating,
            ImagePath = $"images/{review.Image}",
            Margin = new Padding(0, 0, 0, 15)
        };

        panel.Controls.Add(testimonial);
    }

    this.Controls.Add(panel);
}

public class RotatingTestimonials : UserControl
{
    private Timer rotationTimer;
    private List testimonials;
    private BeepTestimonial currentTestimonial;
    private int currentIndex = 0;

    public RotatingTestimonials()
    {
        InitializeTestimonials();
        SetupRotation();
    }

    private void InitializeTestimonials()
    {
        testimonials = new List
        {
            new TestimonialData
            {
                Name = "Emma Wilson",
                Position = "CEO, TechCorp",
                Testimonial = "Outstanding results and professional service.",
                Rating = "5",
                ImagePath = "images/emma.jpg"
            },
            new TestimonialData
            {
                Name = "Michael Brown",
                Position = "Marketing Director",
                Testimonial = "Exceeded our expectations in every way.",
                Rating = "5",
                ImagePath = "images/michael.jpg"
            },
            new TestimonialData
            {
                Name = "Lisa Chen",
                Position = "Operations Manager",
                Testimonial = "Reliable, efficient, and cost-effective solution.",
                Rating = "4",
                ImagePath = "images/lisa.jpg"
            }
        };

        ShowCurrentTestimonial();
    }

    private void SetupRotation()
    {
        rotationTimer = new Timer
        {
            Interval = 5000 // 5 seconds
        };
        rotationTimer.Tick += (s, e) => RotateToNext();
        rotationTimer.Start();
    }

    private void ShowCurrentTestimonial()
    {
        if (currentTestimonial != null)
        {
            Controls.Remove(currentTestimonial);
            currentTestimonial.Dispose();
        }

        var data = testimonials[currentIndex];
        currentTestimonial = new BeepTestimonial
        {
            ViewType = TestimonialViewType.Minimal,
            Dock = DockStyle.Fill,
            Testimonial = data.Testimonial,
            Name = data.Name,
            Position = data.Position,
            Rating = data.Rating,
            ImagePath = data.ImagePath
        };

        Controls.Add(currentTestimonial);
    }

    private void RotateToNext()
    {
        currentIndex = (currentIndex + 1) % testimonials.Count;
        ShowCurrentTestimonial();
    }

    public void StopRotation() => rotationTimer?.Stop();
    public void StartRotation() => rotationTimer?.Start();
}

public class TestimonialData
{
    public string Name { get; set; }
    public string Position { get; set; }
    public string Testimonial { get; set; }
    public string Rating { get; set; }
    public string ImagePath { get; set; }
}

public class TestimonialGallery : UserControl
{
    private FlowLayoutPanel testimonialsPanel;
    private BeepButton btnLoadMore;
    private int currentPage = 0;
    private const int TestimonialsPerPage = 3;

    public TestimonialGallery()
    {
        InitializeGallery();
        LoadTestimonials();
    }

    private void InitializeGallery()
    {
        this.Size = new Size(800, 600);

        testimonialsPanel = new FlowLayoutPanel
        {
            Dock = DockStyle.Top,
            Height = 500,
            FlowDirection = FlowDirection.LeftToRight,
            WrapContents = true,
            AutoScroll = true,
            Padding = new Padding(10)
        };

        btnLoadMore = new BeepButton
        {
            Text = "Load More",
            Dock = DockStyle.Bottom,
            Height = 40
        };
        btnLoadMore.Click += LoadMoreTestimonials;

        Controls.Add(testimonialsPanel);
        Controls.Add(btnLoadMore);
    }

    private void LoadTestimonials()
    {
        var testimonialData = GetTestimonialData(currentPage, TestimonialsPerPage);

        foreach (var data in testimonialData)
        {
            var testimonial = new BeepTestimonial
            {
                ViewType = TestimonialViewType.Compact,
                Size = new Size(250, 200),
                Testimonial = data.Text,
                Name = data.AuthorName,
                Position = data.AuthorPosition,
                Rating = data.Rating.ToString(),
                ImagePath = data.AuthorImage,
                Margin = new Padding(5)
            };

            // Add hover effects
            testimonial.MouseEnter += (s, e) => {
                testimonial.BackColor = Color.LightGray;
            };

            testimonial.MouseLeave += (s, e) => {
                testimonial.BackColor = Color.White;
            };

            // Add click to expand
            testimonial.Click += (s, e) => {
                ShowExpandedTestimonial(data);
            };

            testimonialsPanel.Controls.Add(testimonial);
        }

        currentPage++;
        
        // Hide load more button if no more data
        if (testimonialData.Count < TestimonialsPerPage)
        {
            btnLoadMore.Visible = false;
        }
    }

    private void LoadMoreTestimonials(object sender, EventArgs e)
    {
        LoadTestimonials();
    }

    private void ShowExpandedTestimonial(TestimonialDataModel data)
    {
        var expandedForm = new Form
        {
            Size = new Size(500, 400),
            StartPosition = FormStartPosition.CenterParent,
            Text = $"Testimonial - {data.AuthorName}"
        };

        var expandedTestimonial = new BeepTestimonial
        {
            ViewType = TestimonialViewType.Classic,
            Dock = DockStyle.Fill,
            Testimonial = data.FullText ?? data.Text,
            Name = data.AuthorName,
            Position = data.AuthorPosition,
            Username = data.AuthorUsername,
            Rating = data.Rating.ToString(),
            ImagePath = data.AuthorImage,
            CompanyLogoPath = data.CompanyLogo
        };

        expandedForm.Controls.Add(expandedTestimonial);
        expandedForm.ShowDialog();
    }

    private List GetTestimonialData(int page, int count)
    {
        // In a real application, this would fetch from a database or API
        var allTestimonials = new List
        {
            new TestimonialDataModel
            {
                Text = "Excellent service and support!",
                AuthorName = "John Doe",
                AuthorPosition = "CTO",
                Rating = 5,
                AuthorImage = "john.jpg"
            },
            // Add more testimonials...
        };

        return allTestimonials.Skip(page * count).Take(count).ToList();
    }
}

public class TestimonialDataModel
{
    public string Text { get; set; }
    public string FullText { get; set; }
    public string AuthorName { get; set; }
    public string AuthorPosition { get; set; }
    public string AuthorUsername { get; set; }
    public string AuthorImage { get; set; }
    public string CompanyLogo { get; set; }
    public int Rating { get; set; }
}

Theming

BeepTestimonial provides comprehensive theme integration with specialized colors for testimonial elements:

// Theme-specific testimonial colors
var testimonial = new BeepTestimonial
{
    Theme = "DarkTheme"
};

// Automatic theme color application:
// - TestimonialBackColor: Background for testimonial card
// - TestimonialTextColor: Main testimonial text
// - TestimonialNameColor: Author name styling  
// - TestimonialDetailsColor: Username and position
// - TestimonialRatingColor: Star rating colors

public void CreateThemedTestimonialSection(string themeName)
{
    var testimonials = new[]
    {
        new BeepTestimonial { ViewType = TestimonialViewType.Classic, Theme = themeName },
        new BeepTestimonial { ViewType = TestimonialViewType.Compact, Theme = themeName },
        new BeepTestimonial { ViewType = TestimonialViewType.Minimal, Theme = themeName }
    };

    foreach (var testimonial in testimonials)
    {
        // Theme colors automatically applied
        testimonial.ApplyTheme();
    }
}

Best Practices

📝 Content Guidelines

• Authentic testimonials: Use real customer feedback for credibility
• Appropriate length: Keep testimonials concise while maintaining impact
• Complete information: Include name, position, and company when possible
• High-quality images: Use professional profile photos for better presentation

🎨 Design Guidelines

• Consistent layouts: Use the same view type across related testimonials
• Appropriate sizing: Choose view types based on available space
• Color consistency: Ensure testimonials match your overall design theme
• Spacing: Provide adequate spacing between multiple testimonials

⚡ Performance Tips

• Image optimization: Optimize profile images for faster loading
• Lazy loading: Load testimonials progressively for large collections
• Memory management: Dispose of testimonials when removing from UI
• Efficient updates: Update only changed properties to avoid unnecessary redraws

♿ Accessibility

• Alt text: Provide meaningful descriptions for profile images
• High contrast: Ensure sufficient color contrast for readability
• Keyboard navigation: Support keyboard access for interactive elements
• Screen readers: Structure content properly for screen reader compatibility