First Look at Fluent WPF Calendar and Accordion

June 16 2021

As we migrate our WPF controls to .NET 5 and beyond, we have taken the time to modernize the default style of the controls. We decided because the original WPF controls were based on their Silverlight counterparts, and we decided that it's not what anybody wants (or should want) in their modern WPF applications. We hope you enjoy the new themes, and we appreciate all your feedback!

In this blog, I will show off some of the new style features in our .NET 5 Calendar and Accordion components, and I'll show them off in a new sample that you can download, build and run instantly. All of the ComponentOne .NET 5 components are publicly available on NuGet.

Download Now!

New WPF Calendar for .NET 5

One of the first things you'll notice about the .NET 5 Calendar is the new look! We have based the controls on a fluent-inspired minimalist design. It's the default style on which themes and other settings can be applied. The WPF Calendar is designed for desktop and improved for touch navigation - users can swipe up, down, left, and right to navigate the calendar in any direction they choose. Users will enjoy the smooth animation.

The first thing you'll want to specify is which direction you want the months to navigate. There is no standard direction, so we wanted to provide both options to choose whatever behavior you're trying to emulate - whether it be the Google Calendar, iOS Calendar, or even the Outlook Calendar. You can set this by the Orientation property.

Depending on the orientation (horizontal or vertical), the next and previous arrow icons will update accordingly. But you can further customize the icons using the NextIconStyle and NextItemTemplate properties (similar properties exist for the previous icon too).

The WPF Calendar also supports custom UI templates for the day slots, so you can use the calendar for more than just date selection. Customize the following templates: DaySlotTemplate, AdjacentDaySlotTemplate, DayOfWeekDaySlotTemplate.

You can find code examples for these features in the WPF Calendar Samples on GitHub.

New WPF Accordion for .NET 5

Our WPF accordion control also has a new fluent style for .NET 5. It has the same level of configuration as the calendar. For instance, configure the expand direction and the icon placement.

You can set the WPF Accordion to expand left-right, right-left, up-down, or down-up. Just set the ExpandDirection property.

You can display the expanded icons to the left or right side of the header by setting the ExpandIconAlignment property. Similar to the C1Calendar component, you can also customize the icon style.

But the WPF Accordion is more than a traditional accordion because you can configure all panels to be expanded at one time. Just set the ExpandMode property to set its behavior in this regard. Also note, that you can set the Fill property to have the expanded panel fill the entire space like you'd expect an accordion component should do. The C1Accordion component is an ItemsControl, so not only can it be data-bound, but you can use the individual C1Expander items to create simple expandable panels as well.

You can find code examples for these features in the WPF Accordion Samples on GitHub.

WPF Accordion and Calendar Sample

Use the WPF calendar, accordion, and expander components to create a slick date navigator on the left side of your application. The expander and accordion layout allow you to put other navigation or selection UI in a compact space. For this sample, I only populated the Calendar panel-I'll leave the others open for you to expand upon.

Download the .NET 5 WPF sample, which shows a few interesting features I didn't cover earlier:

Collapsible Navigation Panel

You can use the C1Expander component with ExpandDirection and ExpandIconAlignment set to "Left" to create a collapsible panel on the left. Part of the trick here is making sure the Grid column container's Width is set to "Auto" as well.

<c1:C1Expander ExpandDirection="Left" ExpandIconAlignment="Left" Header="View">

</c1:C1Expander>

Display Month Gridlines

You can display gridlines on the calendar by creating a DayStyle and setting its BorderBrush and BorderThickness properties.

<Style x:Key="CalendarDaySlotBaseStyle" TargetType="Control">
    <Setter Property="BorderBrush" Value="LightGray"></Setter>
    <Setter Property="BorderThickness" Value="0.5"></Setter>
</Style>

<c1:C1Calendar DayStyle="{StaticResource CalendarDaySlotBaseStyle}" />

Custom Calendar Header

You can completely remove and replace the header on the C1Calendar component by setting the ShowHeader property to "False" and then adding any custom XAML above the calendar. In the sample, a TextBlock is used to display the month and year. Simply set the text to the calendar's DisplayDate within the DisplayDateChanged event. Navigation buttons are unnecessary since the user can navigate by swiping or dragging left-right, but you could easily add some custom buttons.

private void c1Calendar_DisplayDateChanged(object sender, EventArgs e)
{
    headerText.Text = c1Calendar.DisplayDate.ToString("MMMM yyyy");
}

Download the full sample here to see all of the code and test these features in action yourself. You can get started quickly with C1Calendar, C1Accordion, and C1Expander in your .NET 5 apps by managing the packages from NuGet.

Download Now!

Greg Lutz