CODEWITHSUNDEEP
c#wpfcanvasvisualization
RayRayRay
RayRayRay

Reputation: 35

WPF how to update UI while runtime

Ok, my problem is the following:

I have a UI showing a Canvas where i have many black circles and one red circle

So: If i press the Button "Start" my code moves the red Circle 10 times a bit to the right. In the Logic i calculate all the intersections after every move. so i calculate them 10 times. But now i want to update the UI after every move and show the intersections.

Here a code-example

        for(int i = 0; i < 10; i++)
        {
            rc.xValue += 20;
            calculateIntersections();
            //now here the UI should be updated
            Thread.Sleep(1000);
        }

So i would get a "Visualization" from the calculation in the Logic.

How can i realize this?

My problem why i can´t use binding (or i don´t know the other ways) is that with a binding i would see only the last step from my moves. so i would see the redcircle after moving 200 to the right ..... But i want to see every step.

What i tried. I counted the steps and incresed this with every button-click. But thats noch comfortable. I want this like a "film" without clicking every time. And it´s much easier with many "foreach" than with many "counters".

Upvotes: 2

Views: 1546

Answers (1)

Nugi
Nugi

Reputation: 872

a Property has to call PropertyChanged event that come from INotifyPropertyChanged interface to make binding work. Here is the fastest way to achieve that.

in code behind

public partial class MainWindow : Window, INotifyPropertyChanged
{
    private double _rcXValue;
    public double RcXValue
    {
      get { return _rcXValue; }
      set
      {
        _rcXValue = value;
        if (PropertyChanged != null)
          PropertyChanged(this, new PropertyChangedEventArgs("RcXValue"));
      }
    }

    public MainWindow()
    {
      InitializeComponent();
    }

    private async void Button_Click(object sender, RoutedEventArgs e)
    {
      for (int i = 0; i < 10; i++)
      {
        RcXValue += 20; //UI should be updated automatically
        calculateIntersections();
        await Task.Delay(1000);
      }
    }

    public event PropertyChangedEventHandler PropertyChanged;
}

in XAML

<Window x:Class="WpfApp.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow" Height="350" Width="525"
        DataContext="{Binding RelativeSource={RelativeSource Self}}">
    <Grid>
        <Grid>
            <Grid.RowDefinitions>
                <RowDefinition Height="260*"/>
                <RowDefinition Height="59*"/>
            </Grid.RowDefinitions>
            <Canvas>
                <Ellipse Fill="Red" Height="17" Canvas.Left="{Binding RcXValue}" Stroke="Black" Canvas.Top="107" Width="17"/>
            </Canvas>
            <Button Content="Button" Grid.Row="1" Click="Button_Click"/>
        </Grid>
    </Grid>
</Window>

Upvotes: 3

Related Questions