WPF：在后台不断更新 UI

Question

I am currently trying to continuously change the color of buttons in the background. I currently have the buttons updating in the same thread as the UI. This severely slows down using the UI elements. I've tried doing background workers but I cant get it to continuously do it. It just updates them once at start. Here is pseudo-code of what I am doing now.

   private void UpdateButton(object sender, EventArgs e)
        {
            foreach (object obj in ButtonGrid.Children)
            {
              if (obj != null && obj.HasColor)
                {
                  if (obj.State.ON){
                   obj.Color = obj.color_off;
                  }
                  else{
                    obj.Color = new RadialGradientBrush(((SolidColorBrush)Brushes.White).Color, ((SolidColorBrush)obj.color_on).Color)
                  }
                }
            }
        }

     public MainWindow()
        {
          InitializeComponent();

          if (!InitializeSkinning())
          {
            ErrorAndExitNoPipe();
          }
          m_timer = new DispatcherTimer();
          m_timer.Tick += UpdateButton;
          m_timer.Start();
        }

How I tried to do background worker.

private void UpdateButton(object sender, EventArgs e)
    {
        foreach (object obj in ButtonGrid.Children)
        {
          if (obj != null && obj.HasColor)
            {
              if (obj.State.ON){
               obj.Color = obj.color_off;
              }
              else{
                obj.Color = new RadialGradientBrush(((SolidColorBrush)Brushes.White).Color, ((SolidColorBrush)obj.color_on).Color)
              }
            }
        }
    }

 public MainWindow()
    {
      InitializeComponent();

      if (!InitializeSkinning())
      {
        ErrorAndExitNoPipe();
      }
     worker = new BackgroundWorker();
      worker.DoWork += (sender, e) => {
        //UpdateButton(sender, e);
      };
      worker.RunWorkerCompleted += (sender, eventArgs) => {
        UpdateButton(sender, eventArgs);
      };
      worker.RunWorkerAsync();
    }

EDIT ADD XAML CODE

Its just a grid that Im filling with color and using as buttons.

<!-- Button Grid-->
        <Grid x:Name="ButtonGrid" Grid.Column="1" Grid.Row="1" Grid.ColumnSpan="1" Grid.RowSpan="3">
          <Grid.RowDefinitions>
            <RowDefinition />
            <RowDefinition />
            <RowDefinition />
            <RowDefinition />
            <RowDefinition />
            <RowDefinition />
            <RowDefinition />
            <RowDefinition />
            <RowDefinition />
            <RowDefinition />
          </Grid.RowDefinitions>
          <Grid.ColumnDefinitions>
            <ColumnDefinition />
            <ColumnDefinition />
            <ColumnDefinition />
            <ColumnDefinition />
            <ColumnDefinition />
            <ColumnDefinition />
          </Grid.ColumnDefinitions>
        </Grid>

I am parsing XML file for what image the buttons and functionality each button has. I just need to change the the boarder color where they are enabled or disabled continuously.

private void ParseButton(XmlNode button_node)
    {
        if (button_node.Name == "button")
        {
            int row_num = 1;
            XmlAttribute row_num_attr = button_node.Attributes["row"];
            if (row_num_attr != null)
            {
                try { row_num = Convert.ToInt32(row_num_attr.Value); } finally { }
            }

            int col_num = 1;
            XmlAttribute col_num_attr = button_node.Attributes["column"];
            if (col_num_attr != null)
            {
                try { col_num = Convert.ToInt32(col_num_attr.Value); } finally { }
            }

            Button Button = new Button();
            Button.HorizontalAlignment = HorizontalAlignment.Center;
            Button.VerticalAlignment = VerticalAlignment.Center;

            Button.PreviewMouseDown += PushButton;
            Button.PreviewMouseUp += ReleaseButton;

            Grid.SetRow(Button, row_num - 1);
            Grid.SetColumn(Button, col_num - 1);

            Button.BorderBrush = Brushes.Gray;
            Button.BorderThickness = new Thickness(0);
            Button.ButtonBackground = Brushes.Transparent;

            ParsePlcInfo(Button, button_node);

            string overlay_string = "";
            DirectoryInfo di = new DirectoryInfo(@"resources\\Buttons\" + button_node.InnerText);
            FileInfo[] files = di.GetFiles("*");
            foreach (FileInfo file in files)
            {
                if (System.IO.Path.GetFileNameWithoutExtension(file.Name) == button_node.InnerText)
                {
                    if (file.Extension == ".xml")
                    {
                        continue;
                    }
                    else if (file.Extension == ".xaml")
                    {
                        Viewbox vb = new Viewbox();
                        Canvas canvas = XamlReader.Load(new StreamReader(file.FullName).BaseStream) as Canvas;
                        vb.Child = canvas;
                        Canvas.SetZIndex(vb, -1);
                        Button.contentGrid.Children.Add(vb);
                        break;
                    }
                    else if (file.Extension == ".svg")
                    {
                        overlay_string = @"resources\\Buttons\" + button_node.InnerText + @"\" + button_node.InnerText + ".svg";
                        Image image = new Image() { Source = SvgReader.Load(new StreamReader(overlay_string).BaseStream) };
                        Canvas.SetZIndex(image, -1);
                        try { Button.contentGrid.Children.Add(image); } finally { }
                        break;
                    }
                }
            }

            ButtonGrid.Children.Add(Button);
        }
    }

Answer 1

If i'm not mistaken, the worker will do its work and finish. Since you're not looping anywhere, it will call the "UpdateButton" method once and stop working.

worker.DoWork += (sender, e) => {
    while (true)
    {
        UpdateButton(sender, e);
    }
};

Something along the lines of this should be the fix of your problem. Maybe add some Thread.Sleep() so you don't execute the method too many times.

Answer 2

UI elements have to be updated on the UI thread, there's no way around that. The most you'd be able to do with a background thread is to put the calculations that determine the new color into the background, and then only call the UI thread to do the actual update. However, judging by the code there, there aren't really many "calculations" to speak of, so I doubt that would help you much.

It's hard to say for certain without knowing what ButtonGrid is, but it seems like what you're trying to do would be better accomplished using DataTemplate s, Style s and DataTrigger s. You can create a Style for your visual elements where a DataTrigger would set the color based on other properties. This would be more in line with how WPF was designed to be used.

That being said, if you insist on doing it this way, you might be able to get things more responsive by using Dispatcher.Invoke(Action, DispatcherPriority) . Using this you can tell the WPF framework to run each color update at a lower DispatcherPriority , which should give user input the right of way. Here's an example:

    private void UpdateButton(object sender, EventArgs e)
    {
        foreach (object obj in ButtonGrid.Children)
        {
            Application.Current.Dispatcher.Invoke(() =>
            {
                if (obj != null && obj.HasColor)
                {
                    if (obj.State.ON)
                    {
                        obj.Color = obj.color_off;
                    }
                    else
                    {
                        obj.Color = new RadialGradientBrush(((SolidColorBrush)Brushes.White).Color, ((SolidColorBrush)obj.color_on).Color);
                    }
                }
            }, System.Windows.Threading.DispatcherPriority.Background);
        }
    }

The above code would be run without using a background worker. And user input should be handled between each obj in the loop.