BusyIndicator is not working in silverlight MVVM - c#

Hi all,
i need to block the screen using busyindicator. when i click the view (Sample.xaml) the event was written in (Sample.xaml.cs) that leads to execute the code that was written in a separate class named (Sample.cs). So in the separate class file i have the implementation of busyindicator. but it doesn't work.
Sample.xaml:
<UserControl x:Class="Pool.View.CadViewer"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:toolkit="http://schemas.microsoft.com/winfx/2006/xaml/presentation/toolkit"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d" d:DesignHeight="400" d:DesignWidth="400">
<Grid>
<toolkit:BusyIndicator IsBusy="{Binding IsBusy}">
<Grid x:Name="CadLayoutRoot" MouseLeftButtonUp="CadLayoutRoot_MouseLeftButtonUp" MouseRightButtonDown="CadLayoutRoot_MouseRightButtonDown" MouseRightButtonUp="CadLayoutRoot_MouseRightButtonUp" MouseLeftButtonDown="CadLayoutRoot_MouseLeftButtonDown" MouseMove="CadLayoutRoot_MouseMove" MouseWheel="CadLayoutRoot_MouseWheel" LostMouseCapture="CadLayoutRoot_LostMouseCapture" >
</Grid>
</toolkit:BusyIndicator>
</Grid>
</UserControl>
Sample.xaml.cs:
private void CadLayoutRoot_MouseLeftButtonUp(object sender, MouseButtonEventArgs e)
{
UpdateViewAndViewModel();
}
private void UpdateViewAndViewModel()
{
Sample bfmobj = new BFM(View.CadViewer.radius2, View.CadViewer.model.Blocks,
View.CadViewer.Step, View.CadViewer.StepType, View.CadViewer.StepPosition);
}
Sample.cs:
public class Sample: ViewModelBase
{
public BFM(bool radius, DxfBlockCollection block, string step, string steptype, string stepposition)
{
this.Radius = radius;
this.Block = block;
this.Step = step;
this.StepType = steptype;
this.StepPosition = stepposition;
GetBFMPart();
}
private bool _isBusy;
public bool IsBusy
{
get { return _isBusy; }
set
{
if (_isBusy != value)
{
_isBusy = value;
OnPropertyChanged("IsBusy");
}
}
}
public void GetBFMPart()
{
IsBusy = true;
//code sample
IsBusy = false;
}
}
In the Function GetBFMPart i had the code to retrieve the data. So i need to block the Screen till the the data to be retrieved. How to do that? Please Help me to fix this issue..

Well, for a start, you're creating your Sample object but not setting it as the DataContext for your view. Either modify the existing ViewModel/DataContext or replace it with the new Sample object you've created.
private void UpdateViewAndViewModel()
{
Sample bfmobj = new BFM(View.CadViewer.radius2, View.CadViewer.model.Blocks,
View.CadViewer.Step, View.CadViewer.StepType, View.CadViewer.StepPosition);
this.DataContext = bfmobj;
}
However, I think you may also run into issues to do with threading, but I'm not very familiar with Silverlight.
In standard WPF, the framework is waiting for your function to complete before it can update the UI, as your function is running on the UI thread. And since your function effectively doesn't change the value of that bool (it does, but because nothing else can execute before it's finished, the value remains unchanged), the UI stays the same.
You need to run your code that "does the work" on a separate thread, the easiest way to do this is to use a task:
public void GetBFMPart()
{
IsBusy = true;
var task = Task.Factory.StartNew(delegate
{
// do your work here then set IsBusy = false
for (int i = 0; i < 5; i++)
{
System.Threading.Thread.Sleep(1000);
}
IsBusy = false;
});
}

I found Two Way and UpdateSourceTrigger to work
<toolkit:BusyIndicator HorizontalAlignment="Stretch" VerticalAlignment="Stretch"
BusyContent="{Binding BusyMessage,Mode=TwoWay,UpdateSourceTrigger=PropertyChanged}"
IsBusy="{Binding UserControlIsBusy,Mode=TwoWay,UpdateSourceTrigger=PropertyChanged}"
d:IsHidden="True" />

Related

How to know if window/GUI has been updated [duplicate]

This question already has answers here:
Wait for animation, render to complete - XAML and C#
(2 answers)
In WPF, is there a "render complete" event?
(3 answers)
How to detect when a WPF control has been redrawn?
(2 answers)
Is there a DataGrid "rendering complete" event?
(1 answer)
Showing a WPF loading message until after UI finishes updating
(2 answers)
Closed 2 years ago.
Background:
I have an application that collects data, does calculations and presents them to the user in graphs in a window. For each set of data I take a picture of the window and store it as a .png on the harddrive so that the user can go back and check the result later.
Problem:
Currently, I update the viewmodel with the new data and then have a Task.Delay(...) as to give the application some time to render the new content on the view. But sometimes I will get a picture of the previous dataset if the delay wasn't enough, I can increase the delay time to make it happen less often but that in turn will slow down the program unneccesarilly. I'm basically looking for a smart way to check if the view have been rendered with the new dataset rather than have a dumb delay.
I've looked into Window.ContentRendered event. But that only seems to fire the first time a window is rendered, so I would have to close and re-create a new window for every picture if I want to use that one and that just feels like unneccesary overhead to me. I would need something similar that fires everytime it is re-rendered, or some other way to know if the view is ready for the picture?
Short Answer: Yes, you can do this by calling your picture-saving method on the Dispatcher thread when it is idle by giving it a priority of DispatcherPriority.ApplicationIdle.
Long Answer: Here's a sample showing this at work. I have here an app that updates a viewmodel's text property when you click a button, but it takes a couple of seconds for it to update the control that is bound to it because the text is huge.
The moment I know the new data is trying to be shown, I issue a Dispatcher command to wait for the UI to be idle before I do something:
Dispatcher.Invoke((Action)(() => { // take your picture here }), DispatcherPriority.ApplicationIdle);
MainWindowViewModel.cs
public class MainWindowViewModel : INotifyPropertyChanged
{
private string messages;
private string controlText;
public MainWindowViewModel Parent { get; private set; }
public string Messages { get => this.messages; set { this.messages = value; OnPropertyChanged(); } }
public string ControlText { get => this.controlText; set { this.controlText = value; OnPropertyChanged(); } }
public void UpdateWithNewData()
{
var strBuilder = new StringBuilder();
for (int i = 0; i < 100000; i++)
{
strBuilder.AppendLine($"{DateTime.Now:HH:mm:ss.ffffff}");
}
// This will update the TextBox that is bound to this property,
// but it will take awhile because the text is HUUUUGE.
this.ControlText = strBuilder.ToString();
}
public MainWindowViewModel()
{
this.ControlText = "This area will take a while to render when you click the button below.";
}
public event PropertyChangedEventHandler PropertyChanged;
public void OnPropertyChanged([CallerMemberName] string propertyName = null)
{
this.PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
}
}
MainWindow.xaml
<Window x:Class="_65951670.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
Title="MainWindow" Height="450" Width="800">
<Grid>
<Grid.RowDefinitions>
<RowDefinition/>
<RowDefinition/>
</Grid.RowDefinitions>
<Grid Background="LightSalmon">
<Grid.RowDefinitions>
<RowDefinition/>
<RowDefinition/>
</Grid.RowDefinitions>
<TextBox IsReadOnly="True" Text="{Binding ControlText,UpdateSourceTrigger=PropertyChanged}" TextWrapping="Wrap" Margin="5" HorizontalScrollBarVisibility="Disabled" VerticalScrollBarVisibility="Visible"/>
<Button Grid.Row="1" HorizontalAlignment="Center" VerticalAlignment="Center" Padding="15,5" Content="Update Above With Lots Of Text" Click="Button_Click"/>
</Grid>
<Grid Grid.Row="1">
<TextBox Text="{Binding Messages}" TextWrapping="Wrap" VerticalScrollBarVisibility="Visible" HorizontalScrollBarVisibility="Disabled" Margin="5" IsReadOnly="True"/>
</Grid>
</Grid>
</Window>
MainWindow.xaml.cs
public partial class MainWindow : Window
{
private MainWindowViewModel viewModel;
public MainWindow()
{
InitializeComponent();
viewModel = new MainWindowViewModel();
this.DataContext = viewModel;
this.viewModel.PropertyChanged += ViewModel_PropertyChanged;
}
private void ViewModel_PropertyChanged(object sender, System.ComponentModel.PropertyChangedEventArgs e)
{
if (e.PropertyName == nameof(this.viewModel.ControlText))
{
var sw = new Stopwatch();
sw.Start();
this.viewModel.Messages += $"Property Changed: {DateTime.Now:HH:mm:ss.ffffff}\n";
// If you got here, you know that the DataContext has changed, but you don't know when it will be done rendering.
// So use Dispatcher and wait for it to be idle before performing another action.
// Put your picture-saving method inside of the 'Action' here.
Dispatcher.BeginInvoke(DispatcherPriority.ApplicationIdle, (Action)(() =>
{
this.viewModel.Messages += $"UI Became Idle At: {DateTime.Now:HH:mm:ss.ffffff}\nIt took {sw.ElapsedMilliseconds} ms to render, Take Picture Now!";
}));
}
}
}
private void Button_Click(object sender, RoutedEventArgs e)
{
this.viewModel.UpdateWithNewData();
}
}

How to use progressBar in WPF

I am trying to incorporate a progress bar in my main window after a button is pressed and the button is running its process. I know I am just missing something simple but I'm still new to WPF as I mainly use Windows Forms.
My XML is structured as follows:
<Window x:Class="Program1.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:local="clr-namespace:Program1"
mc:Ignorable="d"
Title="Program1" Height="1029" Width="1300" SnapsToDevicePixels="True" BorderThickness="0" Margin="0" ResizeMode="NoResize" Closing="Window_Closing"
x:Name="FirstWindow">
<Grid x:Name="Grid1">
<Button x:Name="btnPopulate" Content="Populate" HorizontalAlignment="Left" Margin="243,66,0,0" VerticalAlignment="Top" Width="118" Height="29" Click="btnPopulate_Click"/>
<Button x:Name="btnClear" Content="Clear" HorizontalAlignment="Left" Margin="366,66,0,0" VerticalAlignment="Top" Width="118" Height="29" Click="btnClear_Click"/>
<ProgressBar x:Name="progressBar" HorizontalAlignment="Left" Height="30" Margin="10,943,0,0" VerticalAlignment="Top" Width="351"/>
</Grid>
</Window>
I have my populate button click method as follows:
private void btnPopulate_Click(object sender, RoutedEventArgs e)
{
Thread backgroundThread = new Thread(
new ThreadStart(() =>
{
for (int n = 0; n < 100; n++)
{
Thread.Sleep(50);
progressBar.Value = n;
};
}
));
backgroundThread.Start();
}
The issue I am facing is that I am getting this error:
The name 'progressBar' does not exist in the current context
and I am unsure how I can access the progressBar control from my button click method.
I know I am likely missing something simple but I'm still trying to get the hang of WPF.
You cannot access to controls from a thread that didn't create them (old Win32 limitation). You have to use UI Sync Context to access to UI elements from background thread something like this
Somewhere in the class define field
SynchronizationContext ctx = SynchronizationContext.Current ?? new SynchronizationContext();
and then use it:
void RunOnGuiThread(Action action)
{
this.ctx.Post(o => action(), null);
}
You can also use tasks using TaskScheduler:
private readonly TaskScheduler uiSyncContext;
then define it
this.uiSyncContext = TaskScheduler.FromCurrentSynchronizationContext();
and use
var task = Task.Factory.StartNew(delegate
{
/// do something
});
this.CompleteTask(task, TaskContinuationOptions.OnlyOnRanToCompletion, delegate
{
/// do something that use UI controls
});
public void CompleteTask(Task task, TaskContinuationOptions options, Action<Task> action)
{
task.ContinueWith(delegate
{
action(task);
task.Dispose();
}, CancellationToken.None, options, this.uiSyncContext);
}
simplyfied version: You start another Thread that can't modify your UI-Thread-Content.
This solution solves it, but you still should learn about MVVM
private void btnPopulate_Click(object sender, RoutedEventArgs e)
{
SynchronizationContext context = SynchronizationContext.Current;
Thread backgroundThread = new Thread(
new ThreadStart(() =>
{
for (int n = 0; n < 100; n++)
{
Thread.Sleep(50);
context?.Post(new SendOrPostCallback((o) =>
{
progressBar.Value = n;
}), null);
};
}
));
backgroundThread.Start();
}
You should use Dispatcher.Invoke or Dispatcher.BeginInvoke methods because progressBar belongs to another thread. In other words, instead of
progressBar.Value = n;
use
Dispatcher.Invoke(new Action(()=> { progressBar.Value = n; }));
and your code should work, unless there are some typo in the names.
Please see this post for better choices in populating a ProgressBar.
Furthermore, Grid and Margin are not a good choice. Instead use DockPanel or add RowDefinitions or ColumnDefinitions to your Grid.
Where is your btnPopulate_Click() method being declared? If in the MainWindow class, then the field containing the reference to the element should exist. Please provide a good Minimal, Complete, and Verifiable code example that reliably reproduces the compile-time error message you describe.
In the meantime…
Do note that your code is otherwise entirely wrong as well. It would be best to use MVVM and simply set the progress bar state value on a view model property, binding that property to your progress bar. You also should use some other mechanism than starting a dedicated thread for dealing with background operations. I understand the code you posted is just for practice, but it's good to get into the habit of doing things the right way.
Here are some options that would be better than what you have now, and would also be better than either of the other two answers posted so far.
If dealing with a single long-running operation that has good intermittent checkpoints where you can report progress:
First, define your view model:
class ViewModel : INotifyPropertyChanged
{
private double _progressValue;
public double ProgressValue
{
get { return _progressValue; }
set { _UpdatePropertyField(ref _progressValue, value); }
}
public event PropertyChangedEventHandler PropertyChanged;
private void _UpdatePropertyField<T>(
ref T field, T value, [CallerMemberName] string propertyName = null)
{
if (!EqualityComparer.Default.Equals(field, value))
{
field = value;
PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
}
}
}
Then in your C# code for the window:
class MainWindow : Window
{
private readonly ViewModel _viewModel = new ViewModel();
public MainWindow()
{
DataContext = _viewModel;
InitializeComponent();
}
private void btnPopulate_Click(object sender, RoutedEventArgs e)
{
Task.Run(() =>
{
for (int n = 0; n < 100; n++)
{
// simulates some costly computation
Thread.Sleep(50);
// periodically, update the progress
_viewModel.ProgressValue = n;
}
});
}
}
And then in your XAML, bind the view model's ProgressValue property to the ProgressBar.Value property:
<Window x:Class="Program1.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:local="clr-namespace:Program1"
mc:Ignorable="d"
Title="Program1" Height="1029" Width="1300" SnapsToDevicePixels="True"
BorderThickness="0" Margin="0" ResizeMode="NoResize" Closing="Window_Closing"
x:Name="FirstWindow">
<Grid x:Name="Grid1">
<Button x:Name="btnPopulate" Content="Populate" HorizontalAlignment="Left"
Margin="243,66,0,0" VerticalAlignment="Top" Width="118" Height="29"
Click="btnPopulate_Click"/>
<Button x:Name="btnClear" Content="Clear" HorizontalAlignment="Left"
Margin="366,66,0,0" VerticalAlignment="Top" Width="118" Height="29"
Click="btnClear_Click"/>
<ProgressBar HorizontalAlignment="Left" Height="30" Margin="10,943,0,0"
VerticalAlignment="Top" Width="351" Value="{Binding ProgressValue}"/>
</Grid>
</Window>
If your long-running operation is actually made up of smaller, asynchronous operations, then you could do something like this instead:
private async void btnPopulate_Click(object sender, RoutedEventArgs e)
{
for (int n = 0; n < 100; n++)
{
// simulates one of several (e.g. 100) asynchronous operations
await Task.Delay(50);
// periodically, update the progress
_viewModel.ProgressValue = n;
}
}
Note that in this second example, you could skip the view model altogether, because the assignment for the progress value occurs in the UI thread, and so it's safe to just assign directly to the ProgressBar.Value property there. But you should still use a view model anyway, because that's more in keeping with the standard WPF paradigm and the expectations of the WPF API (i.e. you can do it the other way, but you'll be fighting the intent of the designers of the WPF API, which will lead to more frustration and difficulty).

How to refresh oxyplot plot when data changes

Oxyplot graphs 13 points which are derived from the 6 user input text boxes. The values in the text boxes are held in public variables in the MainWindow.xaml.cs class. The variables are updated when the user presses enter in the text box. How would I make the refresh button refresh the graph.
private void RefreshButton_Click(object sender, RoutedEventArgs e)
{
//Refresh The Graph
}
I think that this would be done using the
PlotModel.RefreshPlot()
method, but I am not sure how to implement it because of Oxyplot's poor documentation.
I just updated to a new version of OxyPlot via NuGet. I'm using OxyPlot.Wpf v20014.1.277.1 and I think you now need to call InvalidatePlot(bool updateData) on the PlotModel instead of RefreshPlot (which is no longer available). I tested this in my sample code and it worked as expected.
If you want to refresh the plot and update the data collections, you need to pass true to the call:
PlotModel.InvalidatePlot(true)
Give x:Name to OxyPlot instance in XAML:
<oxy:Plot x:Name="Plot1"/>
and on button click handler, refresh like this:
private void RefreshButton_Click(object sender, RoutedEventArgs e)
{
Plot1.RefreshPlot(true);
}
The cleanest way I've found to get "sort of" auto-update is reacting to CollectionChanged on the collection that is LineSeries' ItemsSource.
In ViewModel:
ObservableCollection<DataPoint> Data { get; set; }
= new ObservableCollection<DataPoint>();
public PlotModel PlotModel
{
get { return _plot_model; }
set
{
_plot_model = value;
RaisePropertyChanged(() => PlotModel);
}
}
PlotModel _plot_model;
// Inside constructor:
Data.CollectionChanged += (a, b) => PlotModel.InvalidatePlot(true);
In the current OxyPlot.Wpf (1.0.0-unstable1983) you have two options:
Bind the Series.ItemsSource property from XAML to a collection in your viewmodel and exchange the whole collection, when you need an update. This also allows for concurrent async updates with larger data sets.
Bind the Plot.InvalidateFlag property of type int to your viewmodel and increment whenever you need an update. I haven't tested this approach, though.
The following code illustrates both options (pick one). XAML:
<oxy:Plot InvalidateFlag="{Binding InvalidateFlag}">
<oxy:Plot.Series>
<oxy:LineSeries ItemsSource="{Binding DataSeries}" />
</oxy:Plot.Series>
</oxy:Plot>
Updates on the ViewModel:
private async Task UpdateAsync()
{
// TODO do some heavy computation here
List<DataPoint> data = await ...
// option 1: Trigger INotifyPropertyChanged on the ItemsSource.
// Concurrent access is ok here.
this.DataSeries = data; // switch data sets
// option 2: Update the data in place and trigger via flag
// Only one update at a time.
this.DataSeries.Clear();
data.ForEach(this.DataSeries.Add);
this.InvalidateFlag++;
}
After having the same question with the same issue, it would seem that the only working solution (at least to my point of view) is as followed :
PlotView.InvalidatePlot(true)
Doing so, after updating one or multple Series do refresh your PlotView.
The refresh rate depends on how often, or at which rate your serie(s) is/are updated.
Here is a code snippet (on Xamarin Android but should work anyway) :
PlotView resultsChart = FindViewById<PlotView>(Resource.Id.resultsChart);
PlotModel plotModel = new PlotModel
{
// set here main properties such as the legend, the title, etc. example :
Title = "My Awesome Real-Time Updated Chart",
TitleHorizontalAlignment = TitleHorizontalAlignment.CenteredWithinPlotArea,
LegendTitle = "I am a Legend",
LegendOrientation = LegendOrientation.Horizontal,
LegendPlacement = LegendPlacement.Inside,
LegendPosition = LegendPosition.TopRight
// there are many other properties you can set here
}
// now let's define X and Y axis for the plot model
LinearAxis xAxis = new LinearAxis();
xAxis.Position = AxisPosition.Bottom;
xAxis.Title = "Time (hours)";
LinearAxis yAxis = new LinearAxis();
yAxis.Position = AxisPosition.Left;
yAxis.Title = "Values";
plotModel.Axes.Add(xAxis);
plotModel.Axes.Add(yAxis);
// Finally let's define a LineSerie
LineSeries lineSerie = new LineSeries
{
StrokeThickness = 2,
CanTrackerInterpolatePoints = false,
Title = "Value",
Smooth = false
};
plotModel.Series.Add(lineSerie);
resultsChart.Model = plotModel;
Now, whenever you need to add DataPoints to your LineSerie and to updated automatically the PlotView accordingly, just do as followed :
resultsChart.InvalidatePlot(true);
Doing so will automatically refresh your PlotView.
On a side note, the PlotView will also be updated when an event occurs such as a touch, a pinch to zoom, or any kind of UI-related events.
I hope I could help. I had trouble with this for a very long time.
Exists three alternatives how refresh plot (from OxyPlot documentation):
Change the Model property of the PlotView control
Call Invalidate on the PlotView control
Call Invalidate on the PlotModel
Another two years later... this solution works for me, because I have no oxyplot models and I´m missing some of the named functions from above.
code behind:
public partial class LineChart : UserControl
{
public LineChart()
{
InitializeComponent();
DataContext = this;
myChart.Title = "hier könnte Ihr Text stehen!";
this.Points = new List<DataPoint>();
randomPoints();
}
public IList<DataPoint> Points { get; private set; }
public void randomPoints()
{
Random rd = new Random();
String myText = "";
int anz = rd.Next(30, 60);
for (int i = 0; i < anz; i++)
myText += i + "," + rd.Next(0, 99) + ";";
myText = myText.Substring(0, myText.Length - 1);
String[] splitText = myText.Split(';');
for (int i = 0; i < splitText.Length; i++)
{
String[] tmp = splitText[i].Split(',');
Points.Add(new DataPoint(Double.Parse(tmp[0].Trim()), Double.Parse(tmp[1].Trim())));
}
while (Points.Count > anz)
Points.RemoveAt(0);
myChart.InvalidatePlot(true);
}
}
To update your data don't exchange the whole IList, rather add some new DataPoints to it and remove old ones at position 0.
XAML:
<UserControl x:Class="UxHMI.LineChart"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:local="clr-namespace:UxHMI"
xmlns:oxy="http://oxyplot.org/wpf"
mc:Ignorable="d"
d:DesignHeight="300" d:DesignWidth="300">
<Grid x:Name="Container" Background="White">
<oxy:Plot x:Name="myChart" Title="{Binding Title}" FontFamily="Bosch Sans Medium" Foreground="#FF0C6596" FontSize="19" Canvas.Left="298" Canvas.Top="32" Background="AliceBlue" Margin="0,0,10,0">
<oxy:Plot.Series>
<oxy:LineSeries x:Name="ls" Background="White" ItemsSource="{Binding Points}" LineStyle="Solid" Color="ForestGreen" MarkerType="None" MarkerSize="5" MarkerFill="Black">
</oxy:LineSeries>
</oxy:Plot.Series>
</oxy:Plot>
<Button x:Name="button" Content="Random" HorizontalAlignment="Left" Margin="0,278,0,0" VerticalAlignment="Top" Width="75" Click="button_Click"/>
</Grid>
important are the x:Name="myChart" and ItemsSource="{Binding Points}"
I hope this is useful for someone out there

WPF UI thread freeze on loading bunch of items in TreeView

In a past few months I've played a lot with the TreeView and now I get to the UI freeze problem. It comes when you have large amount of the items and the data part for those Items are created very quickly but creating TreeViewItems and visualizing those (it must be done on UI thread) takes a time.
Let's take Shell browser and C:\Windows\System32 directory as an example. (I reworked http://www.codeproject.com/Articles/24237/A-Multi-Threaded-WPF-TreeView-Explorer solution for that.) This directory has ~2500 files and folders.
The DataItem and Visual loading are implemented in different threads but as the file and directory info are read quickly it gives no benefit. Application freezes when it creates TreeViewItems and makes those visible.
I've tried:
Set a different DispatcherPriorities for the UI thread when to load items, for example the window was interactive (I was able to move it) with DispatcherPriority.ContextIdle, but then items were loaded really slow..
Create and visualize items in blocks, like 100 items per once, but hat no benefit, the UI thread still were freezing..
My goal is that the application would be interactive while loading those item's!
At the moment I have only one idea how to solve this, to implement my own control which tracks window size, scrollbar position and loads only the items which are visable, but it's not so easy to do that and I'm not sure that at the end performance would be better.. :)
Maybe somebody has idea how to make application interactive while loading bunch of visual items?!
Code:
Complete Solution could be found there: http://www.speedyshare.com/hksN6/ShellBrowser.zip
Program:
public partial class DemoWindow
{
public DemoWindow()
{
InitializeComponent();
this.Loaded += DemoWindow_Loaded;
}
private readonly object _dummyNode = null;
delegate void LoaderDelegate(TreeViewItem tviLoad, string strPath, DEL_GetItems actGetItems, AddSubItemDelegate actAddSubItem);
delegate void AddSubItemDelegate(TreeViewItem tviParent, IEnumerable<ItemToAdd> itemsToAdd);
// Gets an IEnumerable for the items to load, in this sample it's either "GetFolders" or "GetDrives"
// RUNS ON: Background Thread
delegate IEnumerable<ItemToAdd> DEL_GetItems(string strParent);
void DemoWindow_Loaded(object sender, RoutedEventArgs e)
{
var tviRoot = new TreeViewItem();
tviRoot.Header = "My Computer";
tviRoot.Items.Add(_dummyNode);
tviRoot.Expanded += OnRootExpanded;
tviRoot.Collapsed += OnItemCollapsed;
TreeViewItemProps.SetItemImageName(tviRoot, #"Images/Computer.png");
foldersTree.Items.Add(tviRoot);
}
void OnRootExpanded(object sender, RoutedEventArgs e)
{
var treeViewItem = e.OriginalSource as TreeViewItem;
StartItemLoading(treeViewItem, GetDrives, AddItem);
}
void OnItemCollapsed(object sender, RoutedEventArgs e)
{
var treeViewItem = e.OriginalSource as TreeViewItem;
if (treeViewItem != null)
{
treeViewItem.Items.Clear();
treeViewItem.Items.Add(_dummyNode);
}
}
void OnFolderExpanded(object sender, RoutedEventArgs e)
{
var tviSender = e.OriginalSource as TreeViewItem;
e.Handled = true;
StartItemLoading(tviSender, GetFilesAndFolders, AddItem);
}
void StartItemLoading(TreeViewItem tviSender, DEL_GetItems actGetItems, AddSubItemDelegate actAddSubItem)
{
tviSender.Items.Clear();
LoaderDelegate actLoad = LoadSubItems;
actLoad.BeginInvoke(tviSender, tviSender.Tag as string, actGetItems, actAddSubItem, ProcessAsyncCallback, actLoad);
}
void LoadSubItems(TreeViewItem tviParent, string strPath, DEL_GetItems actGetItems, AddSubItemDelegate actAddSubItem)
{
var itemsList = actGetItems(strPath).ToList();
Dispatcher.BeginInvoke(DispatcherPriority.Normal, actAddSubItem, tviParent, itemsList);
}
// Runs on Background thread.
IEnumerable<ItemToAdd> GetFilesAndFolders(string strParent)
{
var list = Directory.GetDirectories(strParent).Select(itemName => new ItemToAdd() {Path = itemName, TypeOfTheItem = ItemType.Directory}).ToList();
list.AddRange(Directory.GetFiles(strParent).Select(itemName => new ItemToAdd() {Path = itemName, TypeOfTheItem = ItemType.File}));
return list;
}
// Runs on Background thread.
IEnumerable<ItemToAdd> GetDrives(string strParent)
{
return (Directory.GetLogicalDrives().Select(x => new ItemToAdd(){Path = x, TypeOfTheItem = ItemType.DiscDrive}));
}
void AddItem(TreeViewItem tviParent, IEnumerable<ItemToAdd> itemsToAdd)
{
string imgPath = "";
foreach (ItemToAdd itemToAdd in itemsToAdd)
{
switch (itemToAdd.TypeOfTheItem)
{
case ItemType.File:
imgPath = #"Images/File.png";
break;
case ItemType.Directory:
imgPath = #"Images/Folder.png";
break;
case ItemType.DiscDrive:
imgPath = #"Images/DiskDrive.png";
break;
}
if (itemToAdd.TypeOfTheItem == ItemType.Directory || itemToAdd.TypeOfTheItem == ItemType.File)
IntAddItem(tviParent, System.IO.Path.GetFileName(itemToAdd.Path), itemToAdd.Path, imgPath);
else
IntAddItem(tviParent, itemToAdd.Path, itemToAdd.Path, imgPath);
}
}
private void IntAddItem(TreeViewItem tviParent, string strName, string strTag, string strImageName)
{
var tviSubItem = new TreeViewItem();
tviSubItem.Header = strName;
tviSubItem.Tag = strTag;
tviSubItem.Items.Add(_dummyNode);
tviSubItem.Expanded += OnFolderExpanded;
tviSubItem.Collapsed += OnItemCollapsed;
TreeViewItemProps.SetItemImageName(tviSubItem, strImageName);
tviParent.Items.Add(tviSubItem);
}
private void ProcessAsyncCallback(IAsyncResult iAR)
{
// Call end invoke on UI thread to process any exceptions, etc.
Dispatcher.BeginInvoke(System.Windows.Threading.DispatcherPriority.Normal, (Action)(() => ProcessEndInvoke(iAR)));
}
private void ProcessEndInvoke(IAsyncResult iAR)
{
try
{
var actInvoked = (LoaderDelegate)iAR.AsyncState;
actInvoked.EndInvoke(iAR);
}
catch (Exception ex)
{
// Probably should check for useful inner exceptions
MessageBox.Show(string.Format("Error in ProcessEndInvoke\r\nException: {0}", ex.Message));
}
}
private struct ItemToAdd
{
public string Path;
public ItemType TypeOfTheItem;
}
private enum ItemType
{
File,
Directory,
DiscDrive
}
}
public static class TreeViewItemProps
{
public static string GetItemImageName(DependencyObject obj)
{
return (string)obj.GetValue(ItemImageNameProperty);
}
public static void SetItemImageName(DependencyObject obj, string value)
{
obj.SetValue(ItemImageNameProperty, value);
}
public static readonly DependencyProperty ItemImageNameProperty;
static TreeViewItemProps()
{
ItemImageNameProperty = DependencyProperty.RegisterAttached("ItemImageName", typeof(string), typeof(TreeViewItemProps), new UIPropertyMetadata(string.Empty));
}
}
Xaml:
<Window x:Class="ThreadedWpfExplorer.DemoWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="clr-namespace:ThreadedWpfExplorer"
Title="Threaded WPF Explorer" Height="840" Width="350" Icon="/ThreadedWpfExplorer;component/Images/Computer.png">
<Grid>
<TreeView x:Name="foldersTree">
<TreeView.Resources>
<Style TargetType="{x:Type TreeViewItem}">
<Setter Property="HeaderTemplate">
<Setter.Value>
<DataTemplate DataType="ContentPresenter">
<Grid>
<StackPanel Name="spImg" Orientation="Horizontal">
<Image Name="img"
Source="{Binding
RelativeSource={RelativeSource
Mode=FindAncestor,
AncestorType={x:Type TreeViewItem}},
Path=(local:TreeViewItemProps.ItemImageName)}"
Width="20" Height="20" Stretch="Fill" VerticalAlignment="Center" />
<TextBlock Text="{Binding}" Margin="5,0" VerticalAlignment="Center" />
</StackPanel>
</Grid>
</DataTemplate>
</Setter.Value>
</Setter>
</Style>
</TreeView.Resources>
</TreeView>
</Grid>
</Window>
Alternative Loading items in blocks:
private const int rangeToAdd = 100;
void LoadSubItems(TreeViewItem tviParent, string strPath, DEL_GetItems actGetItems, AddSubItemDelegate actAddSubItem)
{
var itemsList = actGetItems(strPath).ToList();
int index;
for (index = 0; (index + rangeToAdd) <= itemsList.Count && rangeToAdd <= itemsList.Count; index = index + rangeToAdd)
{
Dispatcher.BeginInvoke(DispatcherPriority.Normal, actAddSubItem, tviParent, itemsList.GetRange(index, rangeToAdd));
}
if (itemsList.Count < (index + rangeToAdd) || rangeToAdd > itemsList.Count)
{
var itemsLeftToAdd = itemsList.Count % rangeToAdd;
Dispatcher.BeginInvoke(DispatcherPriority.Normal, actAddSubItem, tviParent, itemsList.GetRange((rangeToAdd > itemsList.Count) ? index : index - rangeToAdd, itemsLeftToAdd));
}
}
What you're looking for is known as UI Virtualization and is supported by a number of different WPF controls. Regarding the TreeView in particular, see this article for details on how to turn on virtualization.
One major caveat is that in order to benefit from this feature, you need to use the ItemsSource property and provide items from a collection rather than adding items directly from your code. This is a good idea to do anyway, but it may require some restructuring to get it functional with your existing code.
Why not just create your observable collection and bind to it from xaml?
Check out the MvvM design pattern and you just create a class, and point the xaml at it, in there, from the initialisation, create your list, and then tell the treeview to bind to that list, displaying properties of the each item in your list.
I know this is a little scant on info, but to do MvvM is really easy and just look through stackoverflow and you'll see examples.
You really don't need to call begininvoke on every item - and that's just not from an mvvm point of view - just bind to a list.
You can use indexed 'levels' to your objects too.
Another helpful technique is this regard, is Data Virtualization. There is a good article and sample project on CodeProject, that talks about Data Virtualization in WPF.

How to get Items count from CollectionViewSource?

I am using CollectionViewSource to filter the records displayed in a ListBox. The xaml follows.
<Window x:Class="WPFStarter.ListBoxItemsFilter.ListBoxFilterUsingCollectionViewSource"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
x:Name="userControl"
Title="ListBoxFilterUsingCollectionViewSource" Height="300" Width="300">
<Window.Resources>
<CollectionViewSource Source="{Binding ElementName=userControl, Path=DataContext.Items}"
x:Key="cvs" Filter="CollectionViewSource_Filter"/>
</Window.Resources>
<StackPanel Orientation="Vertical">
<TextBox x:Name="txtSearch" TextChanged="txtSearch_TextChanged"/>
<TextBlock x:Name="txtSummary" Grid.Column="0" HorizontalAlignment="Right" VerticalAlignment="Bottom" FontSize="8"></TextBlock>
<ListBox ItemsSource="{Binding Source={StaticResource cvs}}" DisplayMemberPath="First"/>
</StackPanel>
</Window>
And here is my code-behing ( please don;t mind this code-behind, in the real application i am using the best of MVVM for this scenario).
public partial class ListBoxFilterUsingCollectionViewSource : Window
{
private string _text="";
private readonly CollectionViewSource _viewSource;
public ListBoxFilterUsingCollectionViewSource()
{
InitializeComponent();
_viewSource = this.FindResource("cvs") as CollectionViewSource;
}
private void CollectionViewSource_Filter(object sender, FilterEventArgs e)
{
var character = e.Item as Character;
e.Accepted = character != null && character.First.ToLower().Contains(_text.ToLower());
}
private void txtSearch_TextChanged(object sender, TextChangedEventArgs e)
{
_text = txtSearch.Text;
_viewSource.View.Refresh();
SetSummary();
}
private void SetSummary()
{
var initialCount = 10; //HELP????
var filteredCount = 10; //HELP????
txtSummary.Text = String.Format("{0} of {1}", filteredCount, initialCount);
}
}
QUESTION:
I Need help in writing the "SetSummary" method, wherein i can get the "initialCount" and the "filteredCount" from CollectionViewSource object.
Thanks for your interest.
You could also do _viewSource.View.Cast<object>().Count() for the filtered list and _viewSource.View.SourceCollection.Cast<object>().Count() for the original.
I think the better solution is, as usual, Linq!
_viewSource.View.Cast<[your_type]>().Count();
...or...
_viewSource.View.Cast<object>().Count();
...if you don't know the items' type at runtime!
The source collection and collectionview both implements IEnumerable so you can always iterate over them and count how many are in them. But I would only recommend doing this if you have no access to the actual collection you used as source.
private void SetSummary()
{
int initialCount = 0;
foreach(var item in _viewSource.View.SourceCollection)
{
initialCount++;
}
int filteredCount = 0;
foreach (var item in _viewSource.View)
{
filteredCount++;
}
}
If you're doing MVVM, you could have your VM create a collection view rather than one being created on your behalf by the CollectionViewSource. Then, you have control over what type of CVS is created, so you can create a ListCollectionViewSource, which has a Count property. It really depends on the properties of the data you're filtering.
var count = DataGrid.ItemsSource.OfType<object>().Count();
public static int Count(this ICollectionView view)
{
var index = 0;
foreach (var unused in view)
{
index++;
}
return index;
}

Categories