Telerik blogs

After a long journey through building up various aspects of the CRM demo here in the LOB Chronicles, we’re finally at the point that we can start talking about the different controls that we are using to better display and organize data within the application. If you recall the last episode in which the topic of UI consistency was discussed, these are going to be working within that uniform model for displaying content, providing a uniform (and downright good looking) experience for users.

This time around we’re going to start taking a closer look at what controls from the RadControls for Silverlight suite help make this application tick. As we move through a few posts looking at the utilizations of RadControls to help make this application shine we will focus on different modules to better highlight what we’re using and where, making it easier to understand control decisions and to focus on how we implement them. Without further delay, the first stop on this whirlwind tour will be the Dashboard module.

RadDomainDataSource

Before getting into the components that you can see, first we can look at one you don’t notice (unless the data isn’t showing up) – RadDomainDataSource. Utilizing the RDDS, which replaces a standard DomainDataSource and adds extra support for binding directly to RadControls, we can make data available to different controls that we’re going to be displaying. One step better, we can bake in triggers for when the data changes as well as specify query parameters directly in the control definition, allowing for finer grained control of the data coming through to our view. Here’s an example of how we’re populating recent contacts:

<telerik:RadDomainDataSource x:Name="contactsDataSource" QueryName="GetRecentContacts" AutoLoad="True" DomainContext="{Binding Context}">
            <i:Interaction.Triggers>
                <i:EventTrigger EventName="LoadedData">
                    <ei:ChangePropertyAction TargetObject="{Binding .}"
                                                             PropertyName="RecentContacts"
                                                             Value="{Binding DataView.SourceCollection, ElementName=contactsDataSource}" />
                </i:EventTrigger>
            </i:Interaction.Triggers>
            <telerik:RadDomainDataSource.QueryParameters>
                <telerik:QueryParameter ParameterName="count" Value="6"/>
            </telerik:RadDomainDataSource.QueryParameters>
        </telerik:RadDomainDataSource>

End result, zero code needed to populate the six most recent contacts, making the data available anywhere within the view. And there are several other RDDS’s living on the page as well, all representing different queries and helping us aggregate data for this composite view.

RadSparklines + RadBulletGraph

What better way to show small snapshots of data than with a lightweight and easy to customize charting solution meant to quickly visualize data? I certainly can’t think of one, meaning that RadSparklines and RadBulletGraph would be perfect for displaying quick bites of information in our dashboard header. The benefits of these controls are pretty clear – lightweight, quick rendering, very little UI clutter besides the visualization of the data, and designed to be used in tight spaces. Using our dashboard example, this is the tight space we need to fit four separate charts into:

Dashboard Header

You’ll notice this is from Blend as well, and there is a reason for that – some of the styling that our designers have done so far suffers from everyone’s old friend “Invalid Xaml” in Visual Studio. This exists when Blend creates Xaml that Blend and the parser like but VS hiccups on, resulting in errors in VS and everything running smoothly everywhere else. Hopefully that’s fixed in VS vNext with the new Blend’ish Xaml designer. :)

Back on track, stepping through the code a bit we can see four individual uses of these controls:

  • RadLinearSparkline showcasing closed opportunities
  • RadColumnSparkline highlighting leads
  • RadVerticalBulletGraph(s) to highlight both wins and losses

But since we’re talking a Dashboard view, right next to each of these is also a numeric representation to better display the actual numbers. Paired we have a great snapshot view of our data as well as a concrete number to frame the data being displayed, all without bogging down our UI one bit. And for those developers a bit shy around the RadSparklines/RadBulletGraph components, here’s a look at what it takes to get a RadColumnSparkline working, complete with a few bindings to styles that are helping to maintain the uniformity of our application:

<telerik:RadColumnSparkline Height="60" Margin="20,0,0,0"
                        HorizontalAlignment="Stretch" VerticalAlignment="Center"
                        ItemsSource="{Binding Stats.Leads}"
                        AutoRange="True" MinYValue="0"
                        ItemFill="{StaticResource BasicBrush}"
                        ShowNegativePointIndicators="True" NegativePointBrush="{StaticResource ValidationBrush}"
                        ShowHighPointIndicators="True" HighPointBrush="{StaticResource AccentBrush}"
                        ShowLowPointIndicators="False"/>

RadUniformGrid

While it does not receive much fanfare, RadUniformGrid is actually a pretty important layout control that you may not even realize you’re missing. For whatever reason the UniformGrid layout panel from WPF never made it into Silverlight, but in seeing the utility behind such a component (and not understanding why it was left out of SL) we created our own implementation. Good thing, too, because in a scenario like this:

Uniform Grid

It is important that the type of uniformity we need, specifically defining the number of rows and columns that we need and ensuring all child content displays uniformly, is exactly the purpose of this control. No bells and whistles, no fancy visualizations, just a core component that you’ll find sprinkled throughout this application that makes the lives of our designers and developers a bit easier.

RadCoverFlow

While the full UI for this is still a work-in-progress, we’re utilizing RadCoverFlow for displaying those recent contacts that we mentioned previously when talking about RadDomainDataSource. As we know, the RDDS will be handling running the parameterized query and loading the data, so all CoverFlow needs to do is display it. Another bonus behind RadCoverFlow is that it is touch-friendly, allowing you the opportunity to easily display items in a format that can be navigated without the need for mouse and keyboard (while working perfectly fine with them as well). We’ll circle back on RadCoverFlow at a later date… when it has some visuals to show. I just wanted to highlight why we’re going to be using it within the Dashboard view.

Wrapping Up

We’re coming down to the wire on this one – rumor has it that we’re only about a month away from the Q3 release. As we are now in episode 11, however, you can take a stroll back through memory lane to see all the things we’ve covered in the LOB Chronicles already, making it easy to now start adding in controls, throwing a few resource dictionaries around, and otherwise utilizing the infrastructure, data, and navigation structure that we spent so much time putting together to make composing and polishing the final application much easier than if we had stepped into this without a plan.

Stay tuned as we continue putting the pieces of this application together and moving towards a finished CRM demo as well as the Q3 release!


About the Author

Evan Hutnick

works as a Developer Evangelist for Telerik specializing in Silverlight and WPF in addition to being a Microsoft MVP for Silverlight. After years as a development enthusiast in .Net technologies, he has been able to excel in XAML development helping to provide samples and expertise in these cutting edge technologies. You can find him on Twitter @EvanHutnick.

Related Posts

Comments

Comments are disabled in preview mode.