Update UI textbox from object

Question

I would like to implement a way to pass messages to the UI from an object with computationally intensive methods in order to inform the user of the status and progress of the computations. While doing this the UI should remain responsive, i.e. the computations are performed on another thread. I've read about delegates, backgroundworkers and so on, but I find them very confusing and have not been able to implement them in my application. Here is a simplified application with the same general idea as my application. The textbox in the UI is here updated after the computationally intensive method is completed:

<Window x:Class="UpdateTxtBox.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Title="UpdateTxtBox" Height="350" Width="525">
<Grid>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="1*" />
        <ColumnDefinition Width="1*" />
    </Grid.ColumnDefinitions>
    <Button Content="Start" Height="23" HorizontalAlignment="Left" Margin="94,112,0,0" Name="btnStart" VerticalAlignment="Top" Width="75" Click="btnStart_Click" />
    <TextBox Grid.Column="1" HorizontalAlignment="Stretch"  Margin="0,0,0,0" Name="txtBox" VerticalAlignment="Stretch" TextWrapping="Wrap" VerticalScrollBarVisibility="Visible" />
</Grid>

namespace UpdateTxtBox
{
    /// <summary>
    /// Interaction logic for MainWindow.xaml
    /// </summary>
    public partial class MainWindow : Window
    {
        public MainWindow()
        {
            InitializeComponent();
        }

        private void btnStart_Click(object sender, RoutedEventArgs e)
        {
            MyTextProducer txtProducer = new MyTextProducer();
            txtProducer.ProduceText();
            txtBox.Text = txtProducer.myText;
        }
    }
}

The computationally intensive class:

namespace UpdateTxtBox
{
    public class MyTextProducer
    {
        public string myText { get; private set; }

        public MyTextProducer()
        {
            myText = string.Empty;
        }

        public void ProduceText()
        {
            string txt;

            for (int i = 0; i < 10; i++)
            {
                txt = string.Format("This is line number {0}", i.ToString());
                AddText(txt);
                Thread.Sleep(1000);
            }
        }

        private void AddText(string txt)
        {
            myText += txt + Environment.NewLine;
        }
    }
}

How can a modify this code so that the textbox is updated each time the AddText method is called?

Anders Arpi · Accepted Answer · 2012-07-23 12:40:31Z

2

The basic problem here is that you are doing computationally intensive operations on the UI thread, which locks up the UI (as you yourself have figured out). The solution to this is to kick off a separate thread and then update the UI from that. But you are then faced with the problem that only the UI thread is allowed to update the UI. This is solved by using the Dispatcher class, which handles all this icky stuff for you.

This is a nice, fleshed our article on the Dispatcher and how to use it: http://msdn.microsoft.com/en-us/magazine/cc163328.aspx

Note that there are other ways to handle this sort of UI updating with delayed/slow tasks, but I'd say this is a sufficient solution to your problem.

edited Jul 23, 2012 at 12:40

answered Jul 23, 2012 at 12:35

Anders Arpi

8,4373 gold badges35 silver badges49 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Elfendahl Over a year ago

I tried to play around with this but was unable to get it to work. It would help a lot if you could modify my code above so that it works using the Dispatcher class.

Anders Arpi Over a year ago

Hi! I'm sorry to hear that. I had the same problems with the Dispatcher (and that article). The solution was to actually read the entire article and not just skim it for 'the magic code'. If you want a cut and paste solution that works, see paul's answer. It's done by the book and incorporates well into a proper WPF application.

LPL · Accepted Answer · 2012-07-23 13:25:03Z

As you are using WPF, I would suggest you use databinding, here is an example implementation of your code:

<Window x:Class="UpdateTxtBox.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Title="UpdateTxtBox" Height="350" Width="525">
    <Grid>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="1*" />
            <ColumnDefinition Width="1*" />
        </Grid.ColumnDefinitions>
        <Button Content="Start" Height="23" HorizontalAlignment="Left" Margin="94,112,0,0" Name="btnStart" VerticalAlignment="Top" Width="75" Click="btnStart_Click" />
        <TextBox Grid.Column="1" HorizontalAlignment="Stretch" Margin="0,0,0,0" Name="txtBox" VerticalAlignment="Stretch" TextWrapping="Wrap" VerticalScrollBarVisibility="Visible" Text="{Binding Path=myText}" />
    </Grid>
</Window>

note that the textbox Content property is now databound.

public partial class MainWindow : Window
{
    MyTextProducer txtProducer;

    public MainWindow()
    {
        InitializeComponent();

        txtProducer = new MyTextProducer();
        this.DataContext = txtProducer;
    }

    private void btnStart_Click(object sender, RoutedEventArgs e)
    {
        Task.Factory.StartNew(txtProducer.ProduceText);
        txtBox.Text = txtProducer.myText;
    }
}

note the this.DataContext = txtProducer line, this is how you tell the binding where to look for values

public class MyTextProducer : INotifyPropertyChanged
{
    private string _myText;
    public string myText { get { return _myText; } set { _myText = value; RaisePropertyChanged("myText"); } }

    public MyTextProducer()
    {
        myText = string.Empty;
    }

    public void ProduceText()
    {
        string txt;

        for (int i = 0; i < 10; i++)
        {
            txt = string.Format("This is line number {0}", i.ToString());
            AddText(txt);
            Thread.Sleep(1000);
        }
    }

    private void AddText(string txt)
    {
        myText += txt + Environment.NewLine;
    }

    public event PropertyChangedEventHandler PropertyChanged;

    public void RaisePropertyChanged(string propName)
    {
        if (PropertyChanged != null)
            PropertyChanged(this, new PropertyChangedEventArgs(propName));
    }
}

MyTextProducer now implements INotifyPropertyChanged, so any changes to the myText property will automatically be reflected in the UI.

This worked wonderfully! And it was so simple! I had actually tried implementing INotifyPropertyChanged, but couldn't get it working without freezing the interface. Thanks for your help!

Collectives™ on Stack Overflow

Update UI textbox from object

2 Answers 2

2 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related