WPF Data Templates Part 6 – Visualizing Data Differently – a Simple WPF Bar Graph

Please follow and share!

One of the main strengths of WPF is the ability to visualize ordinary data in a different way. In this post, I’ll go over how we can represent the 5 star rating of our images defined in this post as a simple WPF bar graph. Also demonstrated is the use of the Tooltip item in WPF that will be used to display detailed information of the image when the user hovers over a bar in our graph. The final result will look similar to this:

This bar chart is generated using our ListBox control, and a series of canvases, each one representing an image in our collection. In order to override the default vertical orientation of a ListBox you must assign a different content control to the ItemsPanel property. In this case, we override the default vertical orientation Stack Panel of the ListBox with another StackPanel with an orientation of horizontal. This will render the ListBox items from left to right.

<ListBox.ItemsPanel> 
    <ItemsPanelTemplate> 
        <StackPanel Orientation="Horizontal" /> 
    </ItemsPanelTemplate> 
</ListBox.ItemsPanel>

The next item to tackle is the bar chart. This rendering is made possible through the use of a Data Template. A canvas with a red background color is represented for each item being bound to the list. A scaling transformation (on the Y-axis) is issued on each canvas using a value converter that multiplies the star rating by 20 to obtain a height. Keep in mind this height is a ratio, and not a pixel height.

Value Converter:

using System; 
using System.Collections.Generic; 
using System.Linq; 
using System.Text; 
using System.Windows.Data; 
   
namespace ItemsPanel 
{ 
    public class RatingHeightConverter : IValueConverter 
    { 
        #region IValueConverter Members 
   
        public object Convert(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture) 
        { 
            if (value == null) 
                return 0; 
            int obj = (int)value; 
            return obj * 20; 
   
        } 
   
        public object ConvertBack(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture) 
        { 
            throw new NotImplementedException(); 
        } 
   
        #endregion 
    } 
}

Data Template Definition:

<ListBox x:Name="lbResults" ItemsSource="{StaticResource FavoriteImages}"> 
    <ListBox.ItemsPanel> 
        <ItemsPanelTemplate> 
            <StackPanel Orientation="Horizontal" /> 
        </ItemsPanelTemplate> 
    </ListBox.ItemsPanel> 
    <ListBox.ItemTemplate> 
        <DataTemplate> 
            <Canvas Width="20" Height="1" Background="Red" Margin="10,0,0,0"> 
                <Canvas.RenderTransform> 
                    <ScaleTransform CenterX="1" CenterY="1"  
                        ScaleY="{Binding Path=ImageRating, Converter={StaticResource RatingHeightConverter}}" /> 
                </Canvas.RenderTransform> 
            </Canvas> 
        </DataTemplate> 
    </ListBox.ItemTemplate> 
</ListBox>

This will render the following bar chart:

While this does allow the user to visualize the image data in a different fashion. It lacks usability in the sense that the user does not know which specific items are represented for each bar displayed. A way to provide this functionality is by adding a tooltip to the canvas defined in the Data Template. Every visual control in WPF has a tooltip property. A tooltip is a content control and therefore can contain any number of visual elements. In this case, a Stack Panel is defined that will display the detailed information of the image including the image itself, image name and it’s 5 star rating (rating user control is defined in this post, and is assigned to the ToolTip property of the canvas.

<Canvas.ToolTip> 
    <ToolTip> 
       <StackPanel Height="300"> 
           <Image Margin="10" Width="250" Height="200" Stretch="Fill" Source="{Binding Path=ImageHref}" /> 
           <Label Content="{Binding Path=ImageName}" /> 
           <Label Content="{Binding Path=ImageRating,Converter={StaticResource RatingConverter}}" /> 
       </StackPanel> 
      </ToolTip> 
</Canvas.ToolTip>

The final definition of our list box is as follows:

<ListBox x:Name="lbResults" ItemsSource="{StaticResource FavoriteImages}"> 
    <ListBox.ItemsPanel> 
        <ItemsPanelTemplate> 
            <StackPanel Orientation="Horizontal" /> 
        </ItemsPanelTemplate> 
    </ListBox.ItemsPanel> 
    <ListBox.ItemTemplate> 
        <DataTemplate> 
            <Canvas Width="20" Height="1" Background="Red" Margin="10,0,0,0"> 
                <Canvas.RenderTransform> 
                    <ScaleTransform CenterX="1" CenterY="1"  
                        ScaleY="{Binding Path=ImageRating, Converter={StaticResource RatingHeightConverter}}" /> 
                </Canvas.RenderTransform> 
                <Canvas.ToolTip> 
                    <ToolTip> 
                        <StackPanel Height="300"> 
                            <Image Margin="10" Width="250" Height="200" Stretch="Fill" Source="{Binding Path=ImageHref}" /> 
                            <Label Content="{Binding Path=ImageName}" /> 
                            <Label Content="{Binding Path=ImageRating,Converter={StaticResource RatingConverter}}" /> 
                        </StackPanel> 
                    </ToolTip> 
                </Canvas.ToolTip> 
            </Canvas> 
        </DataTemplate> 
    </ListBox.ItemTemplate> 
</ListBox>

Full Source Code for this example is available here.

Please follow and share!

Related Posts