Skip to main content
BuyLog In
XAF: Cross-Platform .NET App UI & Web API
Search in…
Docs > Getting Started > In-Depth .NET 6+ WinForms & Blazor UI Tutorial (Employee Manager) > Customize Data Display and View Layout > Enable Split Layout in a List View
All docs
V23.2
.NET 6.0+
XAF: Cross-Platform .NET App UI & Web API
Getting Started
Basic .NET 6+ WinForms & Blazor Tutorial (Project Manager)
In-Depth .NET 6+ WinForms & Blazor UI Tutorial (Employee Manager)
Define the Data Model and Set the Initial Data
Add Actions (Menu Commands)
Customize Navigation Between Views
Customize Data Display and View Layout
Display a Nested Property Editor in a Detail View
Change List View Filters
Group List View Data
Enable Split Layout in a List View
Make a List View Editable
Access the Settings of a Property Editor in a Detail View
Format a Property Value
Localize UI Elements
Assign a Standard Image
Enable Additional Modules
.NET 6+ REST Backend / Web API Service
Video Tutorials & Overview
Installation, Upgrade, Version History
Backend Web API Service
UI Shell and Base Infrastructure
Storage, ORM, and Business Model Design
Data Manipulation and Business Logic
User Interface and Behavior Customization
Data Filtering
Application Security and Data Safety
Multi-Tenancy (Data per Tenant)
Validation (Prevent Data Errors)
Conditional Appearance (Manage State of UI Elements)
Reporting (Shape, Export & Print Data)
Analytics (Extract Data Insights)
Document Management
Business Process Management
Event Planning
Localization
Accessibility Support
Debugging, Testing and Error Handling
Deployment
Support, QA & Troubleshooting
API Reference
Download CHM

Enable Split Layout in a List View

This lesson explains how to enable a Split Layout in a List View.

The Detail View opens when you select an object from the List View. In ASP.NET Core Blazor applications, this Detail View replaces the List View. In Windows Forms applications, XAF renders a new window.

The instructions below explain how to show the Detail View of the selected Department object alongside the Department List View.

Step-by-Step Instructions

  1. In the MySolution.Module project, open the Model.DesignedDiffs.xafml file in the Model Editor. Navigate to the Views | MySolution.Module.BusinessObjects | Department | Department_ListView node. Set the MasterDetailMode property of this node to ListViewAndDetailView.

    Split View activation in Model Editor

  2. Run the application. Open the Department List View and select an object to see the object’s Detail View in the same window:

    ASP.NET Core Blazor
    Split View in ASP.NET Core Blazor
    Windows Forms:
    Split View in Windows Forms

    The Detail View is context-sensitive and its content depends on the selected Department object.

Tip

To specify the Detail View that appears alongside the List View, use the MasterDetailView property. To customize the Detail View location, use the Direction and ViewsOrder properties of the <Class>_ListView | SplitLayout node.

Next Lesson

Make a List View Editable