• North American Sales: 1-800-231-8588
  • Global Contacts
  • My Account
Infragistics Infragistics
Menu
  • North American Sales: 1-800-321-8588
  • My Account
    • Sign In/Register
  • Design & DevelopmentDesign & Develop
    • Best Value
      Infragistics Ultimate The complete toolkit for building high performing web, mobile and desktop apps.
      Indigo.Design Use a unified platform for visual design, UX prototyping, code generation and application development.
    • Web
      Ignite UI for Angular Ignite UI for JavaScript Ignite UI for React Ultimate UI for ASP.NET Indigo.Design
    • Desktop
      Ultimate UI for Windows Forms Ultimate UI for WPF
      Prototyping
      Indigo.Design
    • Mobile
      Ultimate UI for Xamarin Ultimate UI for iOS Ultimate UI for Android
    • Automated Testing Tools
      Test Automation for Micro Focus UFT: Windows Forms Test Automation for Micro Focus UFT: WPF Test Automation for IBM RFT: Windows Forms
  • UX
    • Indigo.Design Desktop Collaborative prototyping and remote usability testing for UX & usability professionals
    • Indigo.Design A Unified Platform for Visual Design, UX Prototyping, Code Generation, and App Development
  • Business Intelligence
    • Reveal Embedded Accelerate your time to market with powerful, beautiful dashboards into your apps
    • Reveal App Empower everyone in your organization to use data to make smarter business decisions
  • Team Productivity
  • Learn & Support Support
    • Help & Support Documents
    • Blogs
    • Forums
    • Product Ideas
    • Reference Applications
    • Customer Stories
    • Webinars
    • eBook & Whitepapers
    • Events
  • Free Trials
  • Pricing
    • Product Pricing / Buy Online
    • Renew Existing License
    • Contact Us
Silverlight
  • Product Platforms
  • More
Silverlight
Silverlight Styling the xamWebGrid Group By Area
  • Blog
  • Files
  • Wiki
  • Mentions
  • Tags
  • More
  • Cancel
  • New
Silverlight requires membership for participation - click to join
  • Silverlight
  • Auto-Detail Zoom with MapLayers
  • Building the oMovies Browser: Netflix oData using Infragistics NetAdvantage Silverlight Controls
  • Conditional Formatting With The XamWebGrid
  • Custom Commands with Infragistics Silverlight Commanding Framework
  • +Data Display using xamWebMap
  • Displaying AutoCAD drawings using xamWebMap
  • Extension Methods for Navigating the xamDataChart
  • faceOut - A Silverlight Reference Implementation
  • Red vs. Blue: Conditional Formatting in xamWebMap
  • Styling the xamWebGrid Group By Area
  • Using the VirtualCollection for Server-Side xamWebGrid Paging

Styling the xamWebGrid Group By Area

Styling the xamWebGrid group by area is easy as long as you know the right class to target in your style. The following image depicts the xamWebGrid with a customized group by background.

The key to applying the style is to set the right TargetType value, which in this case is the GroupByAreaControl. The first step is to add a namespace into the XAML to point to the Infragistics Control Primitives.

...
xmlns:igPrim="clr-namespace:Infragistics.Silverlight.Controls.Primitives;assembly=Infragistics.Silverlight.XamWebGrid.v10.1"
...

Next, create a style that targets the GroupByAreaControl:

<UserControl.Resources>
    <Style x:Key="GroupByStyle" TargetType="igPrim:GroupByAreaCellControl">
        <Setter Property="Background" Value="Maroon" />
        <Setter Property="Width" Value="510" />
    </Style>
</UserControl.Resources>

Finally, point the GroupByAreaStyle to the style you just created:

<igGrid:XamWebGrid x:Name="grid" ItemsSource="{Binding Items}">
    <igGrid:XamWebGrid.GroupBySettings>
        <igGrid:GroupBySettings GroupByAreaStyle="{StaticResource GroupByStyle}" AllowGroupByArea="Top" />
    </igGrid:XamWebGrid.GroupBySettings>
    
    <igGrid:XamWebGrid.Columns>
        <igGrid:TextColumn Key="Title" />
        <igGrid:TextColumn Key="UnitPrice" />
        <igGrid:TextColumn Key="UnitsInStock" />
        <igGrid:TextColumn Key="UnitsOnOrder" />
        <igGrid:TextColumn Key="Category" />
    </igGrid:XamWebGrid.Columns>
</igGrid:XamWebGrid>

Now you have the hooks necessary to style the group by area in the xamWebGrid any way you see fit.

Thanks to Stephen Zaharuk for the inspiration for this post :)

  • XamWebGrid
  • Share
  • History
  • More
  • Cancel
Related
Recommended