Hello from nadiacomanici.com!
Hi everybody!
As you may have noticed, I have my own domain! I still have some work to do in order to import and setup the site as I want, but in a few days everything should be in place. Of course, a few days starting from next week, because I am leaving on holiday tomorrow, so I don't really have a lot of free time right now.
So, until then, all the best to all of you!
WPF Ribbon (CTP) – Part 5 – Creating Custom Controls and Viewing Templates
Creating Custom Controls
Sometimes the default controls might not be enough for our needs. So what can we do then? Well, it's simple: create our own controls. For example the CTP version does not have a color picker, but we can create our own.
Entire Tutorial:
- WPF Ribbon (CTP) – Part 1 – Add Ribbon and Customize
- WPF Ribbon (CTP) – Part 2 – Adding tabs and groups
- WPF Ribbon (CTP) – Part 3 – Adding Ribbon Controls
- WPF Ribbon (CTP) – Part 4 – Resizing Groups
- WPF Ribbon (CTP) – Part 5 – Creating Custom Controls and Viewing Templates
- WPF Ribbon (CTP) – Part 6 – Creating a Ribbon Color Control
Summary
- Step 1: Creating a new application
- Step 2: Implementing the IRibbonControl interface
- Step 3: Changing the template of an existing RibbonControl - e.g. RibbonTextBox
- Step 3a: Removing the image from the RibbonTextBox
- Step 3b: Set a fixed width for the visual text area inside the RibbonTextBox
- Step 3c: Set a fixed width for the label and text area inside the RibbonTextBox
- Step 4: Viewing the templates of the basic ribbon controls
- RibbonTab
- RibbonButton
- RibbonDropDownButton
- RibbonSplitButton
- RibbonCheckBox
- RibbonTextBox
- RibbonLabel
- RibbonComboBox
WPF Ribbon (CTP) – Part 2 – Adding tabs and groups
Continuing the application from the previous tutorial, we will add tabs and groups on them.
Entire Tutorial:
- WPF Ribbon (CTP) – Part 1 – Add Ribbon and Customize
- WPF Ribbon (CTP) – Part 2 – Adding tabs and groups
- WPF Ribbon (CTP) – Part 3 – Adding Ribbon Controls
- WPF Ribbon (CTP) – Part 4 – Resizing Groups
- WPF Ribbon (CTP) – Part 5 – Creating Custom Controls and Viewing Templates
- WPF Ribbon (CTP) – Part 6 – Creating a Ribbon Color Control
Summary
- Common Properties for the Ribbon Controls
- Step 1: Adding Tabs
- From XAML
- From Code-Behind
- RibbonTab's Properties
- Why some properties seem to have no visual effect?
- Issues
- Step 2: Adding Groups
- From XAML
- From Code-Behind
- RibbonGroup's Properties
- Issues
WPF Ribbon (CTP) – Part 1 – Add Ribbon and Customize
The ribbon-like look and feel seems to be a general trend. Once we got used with look and feel of the Office applications, we might as well want to use it our own applications.
For .NET users, the ribbon is accesible using MFC Feature Pack or the WPF CTP release. I will focus on the WPF version, which can be found on wpf.codeplex.com, where you can find a discussion list and an issue traker list. Being the CTP release, there still are some known issues and some of the controls that you normally have in an Office application are not yet available (for exemple Color Picker, Color Button, Gallery etc), but hopefully this things will be solved when the Ribbon V1 will be available.
After you downloaded the WPF Ribbon binaries, you can start creating your first application that uses the ribbon.
Minimum requirements for this tutorial:
- Visual Studio 2008 SP1 and .NET Framework 3.5 - needed for this version of ribbon to work; in .Net Framework 4.0 a better version for the WPF ribbon will be available.
- Basic knowledge about WPF and bindings
Entire Tutorial:
- WPF Ribbon (CTP) – Part 1 – Add Ribbon and Customize
- WPF Ribbon (CTP) – Part 2 – Adding tabs and groups
- WPF Ribbon (CTP) – Part 3 – Adding Ribbon Controls
- WPF Ribbon (CTP) – Part 4 – Resizing Groups
- WPF Ribbon (CTP) – Part 5 – Creating Custom Controls and Viewing Templates
- WPF Ribbon (CTP) – Part 6 – Creating a Ribbon Color Control
Summary
- Step1: Creating a new WPF Application Project
- Step 2: Including the RibbonControlsLibrary.dll
- Step 3: Adding the Ribbon inside the main window
- Step 4: Customizing the Ribbon
- Step 5: Adding images as resources to the project
- Step 6a: Defining the RibbonApplicationMenu from XAML
- Step 6b: Defining the RibbonApplicationMenuItem from Code Behind
- Loading an image from code behind
- Creating a RibbonCommand from code behind
- Step 7: Defining a RibbonSeparator in XAML
- Step 8: Defining a RibbonApplicationSplitMenuItem in XAML
- Step 9: Defining the RibbonApplicationMenu.RecentItemList
- Step 10: Defining the Quick Access Toolbar (QAT)
- Step 11: Removing the titlebar
Geek Meet #5 in Brasov
Last Saturday, on the 25th of July 2009, I participated at Geek Meet #5, which was held in Brasov, at the "Okian" Library. The first presentation was mine, about "Genetic Algorithms" and you can download it from here - it's in Romanian, and soon, I hope to also add the translated version in English.
Dispose()
Today I encountered a very interesting problem : If I have a class that implements the IDisposable interface, when is the Dispose() method called?
Well, I initially thought that the Garbage Collection (GC) calls it, but actually Dispose() is a method like any other and should be called explicitly, by the developer!
Well, than what is the relationship between the CG and Dispose()? First of all, Dispose() is not a destructor, so it can't free the object's memory, instead it should be used in order to clean-up the unmanaged resources (because the GC has no knowledge of anything not allocated on the managed heap), like database connections, bitmaps, opened streams or files.
Be careful, because Dispose() is not thread-save and can be called by two threads in the same time on the same object! A very nice answer and more details are given on Chris Lyon's WebLog
Architecture Explorer in VS2010 Beta
Visual Studio 2010 Beta is public and can be freely downloaded from here, and you can choose from 2 editions: Visual Studio 2010 Professional Edition and Visual Studio Team System 2010.
I downloaded a few weeks ago the Team System edition and started to make some projects and discover what's new. The most interesting thing I found new in this version is the UML support (finally, I don't need another tool to design the diagrams!) and the architecture support, in a new window called Architecture Explorer. I tried to find some detailed information about what can be done with this new functionality, but unfortunately I didn't find enough, so I was back to my initial thought: just try and see what it can do!
You can view the Architecture Explorer window by selecting it in the View menu (for now it does not have a key shortcut combination). A new window will appear and you have 2 ways of viewing an exiting project from the architectural perspective:
- Class View
- Solution View
Architecture Explorer
The basic idea of this Architecture Explorer is that it allows you to navigate easy between different levels of the project, going from a top and general view (the solution's projects, for example) inside a more detailed vision (to class members and even code implementation). From one level to another there is always a new panel that can be hidden or displayed and you can go back just by clicking a intuitive arrow.
In the Class View situation, the levels for navigations would be: Namespaces -> Types (classes and interfaces) -> Members (methods or attributes for a class); If you choose a method, you can go further and see the parameters, the blocks of code and so on.
Architecture Explorer - Class View
In the Solution View situation, the levels for navigations would be: Projects -> Project Items (which is like a directory structure - it contains the files and the folders in that project) -> Classes -> Members (from here it's the same as Class View)
Architect Explorer - Solution View
For each level in the Architect Explorer, there is a filter, which can be used by selecting the header of the level's column and afterwards selecting the 'down' arrow, which will popup the filter's options. I will present some of them as images, because the options are very intuitive.
 Filters for Projects |
 Filters for Project Items |
 Filters for Classes |
 Filters for Members |
 Filters for Code |
The basic options on the Architect Explorer are:
- Export DGML File - allows you to save the DGML (Directed Graph Markup Language) file somewhere on the disk; If you want to find out more about DGML, read here.
- Refresh Content - refreshes the Architecture Explorer's visual content
- Save Query to Favorites - afterwards you can access it via the Architecture Explorer window
- Create new Graph Document and populate it with the contents of the current selection - you must select a element layer, and VS will generate for you a diagram (using Directed Graph Markup Language) that contains the full path you got to that element; You can see this diagram in the main window and also, you can see the generated dgml code (but more on that in another post)
DGML Example Generated from Architect Explorer
- Copy the selected nodes from the Architect Explorer to the current active Document Graph , which will add in the current diagram the nodes and the relationships between them, like this:
DGML Example with Relationship Between Nodes
That's just a preview on what the Architect Explorer can do, I hope this made you curious and you'll give it a try and use it, because it has great flexibility, it is intuitive, user-friendly and also:
- It can generate diagrams from existing code (this is a great advantage of build-in tools).
- It makes it easier to explain a certain part of a solution to any team member.
- It simplifies the communication process between the team members (architects and developers).
- It offers a simple and efficient way of understanding the system and its components, the way they are related and can be used; it will reduce considerably the time needed to get acquainted with the code and the project.