Another chart in WPF

August 21, 2007


A few weeks back I posted a WPF-based chart in my blog. Currently in one of my projects I need to deploy charts that support displaying multiple data series side-by-side and showing the value tick on the top similar as Google Finance charts does. So based on my previous WPF chart, I developed this “another chart” that can support multiple series. Here I also used the performance optimization with streamGeometry to enhance the chart memory consumption and response speed. I have to admit this chart is heavily inspired by the features in the Google Finance charts.

You can take a look at the final chart in action:

[Updated 8/4/2008]

The download link has been updated. CLick the following link to download the source code:

http://www.box.net/shared/tsk8so30gc


Mini Task Pane in WPF

August 20, 2007


I was searching for a sample task pane implementation in WPF that I can use in one of my applications. What I was looking for is something that works similar as the mini task pane that exists in Windows XP Explorer.Originally I thought templating the Expander should be easy. But after couple of trials, I gave up and instead went the route to build my own composite User Control to completely customize the look and feel I need. It turned out building such task pane in XAML is fairly straightforward and not difficult at all. This again proves the “Power of Composition” in the design philosophy in WPF. The animation and the effects are pretty standard: ScaleTransform animation for the bottom panel and the RotateTransform animation on the header image icon when the expander is clicked. I really like WPF more and more comparing to the old days when I was working with Win Forms. This will be a non-trivial task if implemented in Windows Forms.

Here is the results of the mini task pane I’ve built.

You can get the source code of the demo project here.

[Updated: 1/16/2009]

New source code link updated here


A Data-Bound progress bar in WPF

August 15, 2007

Several weeks ago I posted a sample progress bar using rectangle overlay to achieve gradient looking and text overlay. But that control was C# code-driven to update the UI. Here I’ve improved it to utilize ValueConverters and Data Binding, so you can update its source data and the UI can automatically updates.

The XAML part of the ProgressBar control is listed as following. I am using two-column grid to simulate the progress bar container:

Then you can define your custom ValueConverter to convert percentage progress values to grid column widths. The following shows the ValueConverter for the ProgressBar Column Width property inside the parent grid:

You can create other types of ValueConverter to suit your needs.

Once you are done , then in your code you can easily adjust your progress data without manually coding against the Progress Bar UI anymore:

This has advantages in situations where you need to implement data-driven applications without in-depth knowledge of the visualization layer.

The finished UI will look like this:

[Update 8/27/2007]

After some study of the ControlTemplate in WPF, especially those special meaning PART elements in a control template, I realized this could be implemented with a ControlTemplate with all XAML approach. 

The key to the control template is to use the PART_Track and PART_Indicator element to contain the rectangle areas.

[Update: 1/16/2009]

Sample code (all XAML) posted here


“Smart Tag” type of popup in WPF

August 14, 2007

The other day I was searching around for examples of Office 2007 like “Smart Tag” type of popup implemented in WPF, but I could not find any with source code available. As you know that the tooltip control in WPF/XAML does not allow any controls you put inside a tooltip to receive focus or mouse click events, you have to use the primitive Popup control instead to achieve such functionality. So I decided to build one myself. It turns out the process is quite simple. The only trick that I find out and still not know how to solve elegantly is wiring up the delayed popup solely in XAML. Currently my implementation utilizes a custom service class that wires up the mouse events between the popup and the target control. The XAML part of the control is very simple:

Inside your Popup definition, you can define your Smart Tag popup as you would in any other XAML elements. The following is an example of a toolbar enclosed inside thepopup:

In order to support positioning the popup control in arbitrary location close to (but not border-to-border) its target control, you need to wire the MouseMove and MouseLeave events of both the Popup control and the target control. And you need a delayed hide/show service to ensure that the popup won’t flash if you quickly move your mouse around. This is achieved through a delayed DispatchTimer in the DelayedPopupService code.

This is a screen shot of the Smart Tag popup:

To see the Smart Tag in action, you can view the following screen clip:

Let me know what you think of this.

[Update: 2007.08.14]

The complete source code of the sample is uploaded.

[Updated: 1/16/2009]

New source code link is posted.


Customizing ListView in WPF (Part I)

July 27, 2007

It is fun experience trying to customize the look and behavior of the standard listview included in WPF.

Here is a list of interesting things I’ve found out regarding customizing the ListView in WPF:

  • Sorting: Since there is no build-in sorting support in ListView in WPF, you have to use some kind of attached property approach detailed here. This took an hour or so for me to figure out how to integrate it nicely with any listview column headers and any ObservableCollections data source. The header style for ascending and descending sort is based on this post by Avalon ATC team.
  • Column Header styling: Since in one of my applications, I need to style the column header with multi-line text support. This isn’t difficult since you can specify ColumnHeaderStyle easily.
  • Alternating background color for each row: This is easy, here details some approaches by the Avalon ATC team.
  • Mouse over highlighting effect. You can accomplish this through ItemContainerStyle by setting the triggers for ListViewItem. The final implementation is based on this post by Juan Pablo G.C. from Code Project.
  • Embed icons into cells. This is not hard since you are easily use the CellTemplate in your GridColumn definition to achieve this.
  • Embed HyperLink into cells. This can also be achieved through CellTemplate.

The most difficult part is figuring out the vertical grid lines in the ListView. This is achieved through the CellTemplate of each GridColumn and the ItemContainerStyle. First, you need to use the following ItemContainerStyle to make your listviewitem stretch in all directions:

Then in your CellTemplate, you need to define borders like:

The negative border margin is needed to make it align with the divider on the ColumnHeader.

Let me know what you think of this customization. I will post more regarding this topic later when I learn more about the power and flexibility of WPF.

You can view the grid in action here:


Another progress bar in WPF

July 22, 2007

WPF and XAML is very easy and flexible to manipulate and customize geometric shapes. It also has extensive and rich support for many types of brushes. Here I present you a very simple progress bar similar to those that you are now seeing more and more in many “modern-looking” applications. You can try the following XAML:


<Grid>

<!– The progress bar background –>

<Rectangle Stroke=#FF000000 RenderTransformOrigin=0.5,0.5 x:Name=ProgressBarBackground>

<Rectangle.Fill>

<LinearGradientBrush EndPoint=0.5,1StartPoint=0.5,0>

<GradientStop Color=WhiteOffset=0 />

<GradientStop Color=Gray Offset=1/>

</LinearGradientBrush>

</Rectangle.Fill>

</Rectangle>

<!–The progress bar foreground –>

<Rectangle Stroke=#FF000000 RenderTransformOrigin=0.5,0.5

x:Name=ProgressBarForeground HorizontalAlignment=Left>

<Rectangle.Fill>

<LinearGradientBrush EndPoint=0.5,1StartPoint=0.5,0>

<GradientStop Color=#FF023501Offset=1.0/>

<GradientStop Color=#FFB6F9B4Offset=0/>

</LinearGradientBrush>

</Rectangle.Fill>

</Rectangle>

<Viewbox>

<!– The progress bar text display –>

<TextBlock TextAlignment=CenterBackground=TransparentFontFamily=Times

Foreground=Black x:Name=ProgressTextMargin=2,2,2,2> 0%

</TextBlock>

</Viewbox>

</Grid>


This will give you something like the following:


You can customize the color tone by changing the color stops. I like green so I painted the progress bar in a greenish fashion. Feel free to change it. To update the progress status, you can add property triggers (You need to create DependentProperty for this control first!) or event triggers to update the progress bar through XAML or you can add some (little) C# code-behind to update this progress bar or re-use it in your XAML-based applications. Sometimes I find that C# code can comes in handy in these situations. Let me know what you think about this little progress bar.


Btw, if you happen to know how to easily embed syntax-highlighted C# code and XAML code in WordPress.com, I’d appreciate if you can share it with me 🙂 It appears that copy-and-paste the source code from Visual Studio 2005 to WordPress Blog Writer doesn’t work 😦


A WPF and XAML based chart

July 17, 2007

While having fun with WPF/XAML in my spare time, I came across this work by John Stevien at CodeProject. So I went out to try something fun with WPF and see if we can create something similar to the charts you see on Google finance. Since unlike Adobe Flex platform, WPF/XAML lacks any built-in support for data charts, I think this could be something helpful in real-life applications. Here is the results of this 4-hour adventure. I’ve created a WPF/XAML based 2D filled chart that supports dynamic zooming and panning, and track-ball of the current chart positions for time-series data. This chart could possibly be used in many situations where time-series data needs to be displayed.

This chart utilize the flexibility and power of the “adorner” class in WPF Visual elements. The following shows the chart in action:

[ Update: 7/20/2007]

The source code is uploaded to my Box.net share here. You can download and try the code.

[Update: 1/16/2009]

A new source code link is posted at:

new source code link