How do I (elegantly) transpose textbox over label at specific part of string?

前端 未结 10 402
谎友^
谎友^ 2020-12-16 11:54

I\'ll be feeding a number of strings into labels on a Windows Form (I don\'t use these a lot). The strings will be similar to the following:

\"The qui

10条回答
  •  囚心锁ツ
    2020-12-16 12:42

    To satisfy this requirement, IMO it's better to use those features of Windows Forms which allow interoperability with HTML or WPF and Host a WebBrowser control or a WPF ElementHost to show the content to users. Before reading this answer, please consider:

    • Users should not be able to clear the ____ fields. If they can clear them, once they moved to another blank, they will lose the ability to find the cleared field.
    • It's better to allow users to use Tab key to move between ____ fields.
    • As it's mentioned in the question: A MaskTextBox won't work as I need multiline support.
    • As it's mentioned in the question: There'll be 300+ strings so mixing a lot of Windows Forms control is not a good idea.

    Using Html as View of a C# model and show it in WebBrowser control

    Here I will share a simple answer based on showing HTML in WebBrowser control. As an option you can use a WebBrowser control and create suitable html to show in WebBrowser control using a mode class.

    The main idea is creating an html output based on the quiz model (including the original text and ragnes of blanks) and rendering the model using html and showing it in a WebBrowser control.

    For example using following model:

    quiz = new Quiz();
    quiz.Text = @"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.";
    quiz.Ranges.Add(new SelectionRange(6, 5));
    quiz.Ranges.Add(new SelectionRange(30, 7));
    quiz.Ranges.Add(new SelectionRange(61, 2));
    quiz.Ranges.Add(new SelectionRange(82, 6));
    

    It will render this output:

    fill in the blank - initial

    Then after the user entered values, it will show this way:

    fill in the blank - having answers

    And at last, when you click on Show Result button, it will show the correct answers in green color, and wrong answers in red color:

    fill in the blank - showing results

    Code

    You can download full working source code for example here:

    • r-aghaei/FillInTheBlankQuizSample

    The implementation is quiet simple:

    public class Quiz
    {
        public Quiz() { Ranges = new List(); }
        public string Text { get; set; }
        public List Ranges { get; private set; }
        public string Render()
        {
            /* rendering logic*/
        }
    }
    

    Here is the complete code of the Quiz class:

    public class Quiz
    {
        public Quiz() { Ranges = new List(); }
        public string Text { get; set; }
        public List Ranges { get; private set; }
        public string Render()
        {
            var content = new StringBuilder(Text);
            for (int i = Ranges.Count - 1; i >= 0; i--)
            {
                content.Remove(Ranges[i].Start, Ranges[i].Length);
                var length = Ranges[i].Length;
                var replacement = $@"";
                content.Insert(Ranges[i].Start, replacement);
            }
            var result = string.Format(Properties.Resources.Template, content);
            return result;
        }
    }
    
    public class SelectionRange
    {
        public SelectionRange(int start, int length)
        {
            Start = start;
            Length = length;
        }
        public int Start { get; set; }
        public int Length { get; set; }
    }
    

    And here is the content of the html template:

    
        
        
        
        
        
        
        
    {0}

提交回复
热议问题