Skip to main content
BuyLog In
XAF: Cross-Platform .NET App UI & Web API
Search in…
Docs > Getting Started > In-Depth XAF WinForms & ASP.NET Tutorial (Main Demo) > UI Customization > Change Style of Navigation Items
A newer version of this page is available. .
All docs
V20.2
.NET Framework 4.5.2+
eXpressApp Framework
Fundamentals
.NET Core 3.0+ Support in XAF WinForms Applications
.NET Standard 2.0 Support for Platform-Agnostic Modules
ASP.NET Core Blazor UI - Official Release
Getting Started
Basic WinForms & ASP.NET Tutorial (Simple Project Manager Demo)
In-Depth XAF WinForms & ASP.NET Tutorial (Main Demo)
Business Model Design
Extend Functionality
UI Customization
Place an Action in a Different Location
Specify Action Settings
Format a Business Object Caption
Assign a Standard Image
Assign a Custom Image
Make a Property Calculable
Filter Lookup Editor Data Source
Format a Property Value
Use a Multiline Editor for String Properties
Localize UI Elements
Add an Item to the New Action
Add an Item to the Navigation Control
Implement Property Value Validation in the Application Model
Customize the View Items Layout
Add an Editor to a Detail View
Change Field Layout and Visibility in a List View
Display a Detail View with a List View
Make a List View Editable
Add a Preview to a List View
Filter List Views
Apply Grouping to List View Data
Choose the WinForms UI Type
Toggle the WinForms Ribbon Interface
Change Style of Navigation Items
Extra Modules
Security System
Basic Blazor Tutorial (Simple Project Manager Demo)
In-Depth XAF Blazor UI Tutorial (Main Demo)
Concepts
Design-Time Features
Deployment
Task-Based Help
Frequently Asked Questions (FAQ)
API Reference
Download CHM

Change Style of Navigation Items

In this lesson, you will learn how to change the style of navigation items in a WinForms XAF application. By default, a 32x32 icon with a label below is displayed for each item. This style is inconvenient when you have many navigation items. To save screen space and avoid scrolling, a 16x16 icon with a label to the right can be displayed for each item instead.

  • Invoke the Model Editor by double-clicking the Model.DesignedDiffs.xafml file located in the MySolution.Module project. Navigate to the NavigationItems | Items | Default node. This node specifies settings for the Default navigation group that encloses navigation items created in the previous lessons (Contact, Task, Department, etc.). In the grid to the right, set the ChildItemsDisplayStyle property to List (the default is LargeIcons).

    Tutorial_UIC_Navigation_01

    For details, see the IModelChoiceActionItemChildItemsDisplayStyle.ChildItemsDisplayStyle property and ItemsDisplayStyle enumeration description.

  • Run the WinForms application. You will see that small icons are now used for navigation items in the Default navigation group. The image below illustrates the changes.

    Tutorial_UIC_Navigation_02

Note

You can also change the style of the entire navigation control. Run the Model Editor and modify the IModelRootNavigationItems.NavigationStyle property of the NavigationItems node for this purpose.

 

Next Lesson: Attach Files to Objects

See Also