Daniel Palme

Daniel Palme

.NET consultant from Germany.

Blog > MetroBackUp - Applying Metro UI and Flow Design (Event-Based Components)

MetroBackUp - Applying Metro UI and Flow Design (Event-Based Components)

Four years ago I wrote one of my first WPF applications. It was named 'BackUp' and enabled you to keep directories in sync (similiar to Microsoft's SyncToy).
Actually I learned a lot of the WPF stack by creating this application, but since I did use code behind instead of the MVVM pattern, it was a good occasion for refactoring the code and applying a new UI.
In this post I will present the new Metro UI and describe my experience in using event-based components for the synchronization workflow.

Metro UI

As a fan of minimalist UIs, I really like the Metro design. The twitter client MetroTwit has brought me to the idea to create a Metro inspired UI for BackUp.

This was the old UI:

BackUp

And this is the new UI of MetroBackUp:

MetroBackUp

Creating the Metro UI required some XAML styles. An other possibility would have been to use Metro Toolkit or MahApps.Metro.

Flow Design (Event-Based Components)

After looking at the visual part it's time to explore the synchronization workflow.
Since synchronization consists of several consecutive steps, I decided to use Event-Based Components (short: EBC) for the implementation of the workflow. In Flow-Design notation the process has the following high-level components:

SynchronizeWorkflow

EBC + WPF

EBCs are a programming paradigm spreaded by Ralf Westphal. The basics of EBC are explained on the project page of Event-Based Components Binder.
EBCs are not aware of a WPF UI, so we need an approach to trigger an EBC workflow from a WPF view. This can be done by using an ICommand implementation that throws an event when it gets executed. This event can be used to trigger the workflow. The ICommand can be bound within the view; e.g. to a button.

Conclusion

EBCs worked very well in my usecase. My viewmodels only contain some ICommands that trigger EBC actions. The synchronization code is spitted into some high cohesive EBCs, which can be understood easily.
EBCs were only used for the synchronization workflow, other actions are just implemented in the viewmodel (e.g. adding a new synchronization task). I chose this pragmatic approach, since the effort would have been disproportionate to the benefits.
Perhaps there will be a chance to use EBCs in a larger project. Would be interesting to see, how they work in long term scenarios.

Advantages

  • High cohesive classes with one functionality can be easily archived
  • Components are composable, testable and exchangeable
  • Interception can be applied without changing components

Disadvantages

  • Without a design sketch it's hard to understand workflows within an application, since you can't simply navigate from component to component
  • Binding components together can be complex

Download

The installer and source code is available for download and can also be found on Codeplex.


Subscribe to RSS Feed

Tags: .NET, C#, WPF
 

Related posts

 

New comment

:

:

:

:

 

Comments

#1
Rasmus

Rasmus

09/12/2011

Thanks for the application! It really works great and I don't understand why it haven't received more attention.

Have you considered implementing FTP backup?
 
#2
Daniel

Daniel

09/12/2011

@Rasmus:
Thanks for your comment.
I have no plans to add FTP support.
 
#3
Inet

Inet

09/23/2011

Very nice application!

I had been thinking of a way to script the synchronization of my work->home pc and it wasn't pretty. Metrobackup solve the problem completely.



--------Suggestions--------

1. Ability to execute jobs via command line. Users could then automate the jobs via a scheduler

2. Include option to backup/restore specific registry branches. IE: I use putty and it stores profiles this way. [HKEY_CURRENT_USER\Software\SimonTatham]

3. Run a script/batch file or exe as an item in a job.

4. Method to Inverse a job. When you create a backup job (A->B), create the inverse of that job named B->A. yes, you can do it manually, but its a pain.
 
#4
Daniel

Daniel

09/24/2011

@Inet:
Thanks for your feedback.
A command line version already exists: MetroBackUp_Console.exe
 
#5
Rasmus

Rasmus

10/13/2011

@Daniel
Ok. Keep up the good work. :-)
 
#6
inet

inet

01/04/2012

Suggestion for new feature:

Currently when you select a job and then click sync, it takes a long time (for large file sets) to get to the next point where you select "ok" to begin the backup.

1. If a person is certain they want to do the next step, give the option to proceed without making them wait for the OK prompt.

2. Having the ability to put multiple jobs in a queue would be nice as well. Click the ones you want to run, then walk away.
 
#7
Daniel

Daniel

01/04/2012

@inet:
Thanks for your feedback. I can't say when a release will be available, I'm working on some other projects at the moment. You can give the command line version a try. There you don't have to confirm the synchronization.
 
#8
terapone

terapone

01/30/2012

i am very happy
this soft works smooth and nice action for me
very thanks

i deletede as named all synchro soft
becourse not free

 
#9
Govind

Govind

09/03/2013

Hi,

I am trying to understand your code on how the actual view is getting launched still no luck. Is it possible to explain how the flow is done two view with empty windows ?

Thaks,
 
#10
Govind

Govind

09/03/2013

Ignore my earlier comments. I got it work and wasn't injecting the ViewModel properly on App.Xaml

Nice work and trickier too. Is there a way we can inject ViewModel in each step instead of associating in app.xaml. For large application it could be very complicated. Thanks.