ContextQMD
Back to Devexpress

Size Modes

blazor-401784-styling-and-themes-size-modes.md

latest12.3 KB
Original Source

Size Modes

  • Feb 09, 2026
  • 4 minutes to read

You can apply different size modes to DevExpress Blazor components and their elements.

Show Components That Support Size Modes

ControlAPIWhat It Affects
AccordionSizeModeThe entire control.
AIChatSizeModeThe control and its content.
ButtonSizeModeThe entire control.
ButtonGroupSizeModeThe entire control.
CarouselSizeModeNavigation buttons.
Context MenuSizeModeThe entire control.
Data EditorsSizeModeThe entire control.
Dialog ProviderSizeModeMessage boxes and their content.
DrawerSizeModeThe control and its content.
DropDownSizeModeThe control and its content.
DropDownBoxSizeModeThe control and its content.
DropDownButtonSizeModeThe entire control.
Filter BuilderSizeModeThe control and its content.
FlyoutSizeModeThe control and its content.
Form LayoutSizeModeThe control and its inner components.
GridSizeModeThe control and its inner components.
HTML EditorGlobalOptions.SizeModeToolbar and dialogs.
Loading PanelSizeModeThe entire control without covered content.
MenuSizeModeThe entire control.
Message BoxSizeModeThe control and its content.
PagerSizeModeThe entire control.
PDF ViewerSizeModeToolbar.
Pivot TableSizeModeThe control and its content.
PopupSizeModeThe control and its content.
Progress BarSizeModeThe entire control.
RibbonSizeModeThe entire control.
Rich EditGlobalOptions.SizeModeToolbar, ribbon, dialogs, and context menu.
SchedulerInnerComponentSizeModeToolbar, view selector, appointment form, and data editors.
SplitButtonSizeModeThe entire control.
SplitterSizeModeThe control and its content.
TabsSizeModeThe entire control.
ToastSizeModeThe control and its content.
Toast ProviderSizeModeToast notifications and their content.
ToolbarSizeModeThe entire control.
TreeListSizeModeThe control and its inner components.
TreeViewSizeModeThe entire control.
Wait IndicatorSizeModeThe entire control.
WindowSizeModeThe control and its content.

The following code snippet applies different size modes to ComboBox components.

razor
<DxComboBox Data="@Cities" NullText="Select City ..." @bind-Value="@Value" SizeMode="SizeMode.Small" />
<DxComboBox Data="@Cities" NullText="Select City ..." @bind-Value="@Value" SizeMode="SizeMode.Medium" />
<DxComboBox Data="@Cities" NullText="Select City ..." @bind-Value="@Value" SizeMode="SizeMode.Large" />

@code {
    IEnumerable<string> Cities = new List<string>() {
        "London",
        "Berlin",
        "Paris",
    };
    string Value { get; set; }
}

Global Size Mode Property

Use the SizeMode application-wide option to specify the size mode for DevExpress Blazor components that support size modes. Individual component settings override this option.

You can specify a size mode in the DevExpress Template Kit:

The kit adds the SizeMode global option to the Program.cs file.

csharp
builder.Services.AddDevExpressBlazor(options => {
    options.SizeMode = DevExpress.Blazor.SizeMode.Small;
});

Switch Size Modes at Runtime

The following example implements a size mode combobox designed to switch between small, medium, and large size modes at runtime. Key steps include:

  1. Implement a service that manages application size mode (SizeManager.cs).
  2. Implement a service that manages cookies (CookiesService.cs).
  3. Create a function that assigns selected size mode to the --global-size CSS variable (size-manager.js).
  4. Add a razor file that contains a size mode menu and injects the SizeManager service (SizeChanger.razor).
  5. Reference the size manager script in the <head> section of the App.razor file.
  6. Use the --global-size CSS variable to define font size application-wide.

razor
@rendermode InteractiveServer
@inject SizeManager SizeManager

<DxDropDownButton RenderStyle="ButtonRenderStyle.Secondary"
                  RenderStyleMode="ButtonRenderStyleMode.Text"
                  Text="@FormatSizeText(SizeManager.ActiveSizeMode)"
                  ItemClick="OnSizeChange">
    <Items>
        @foreach (var sizeMode in sizeModes) {
            <DxDropDownButtonItem Text="@FormatSizeText(sizeMode)" Id="@sizeMode.ToString()" />
        }                
    </Items>
</DxDropDownButton>

@code {
    List<SizeMode> sizeModes = Enum.GetValues<SizeMode>().ToList();
    string FormatSizeText(SizeMode size) => size + " size";

    protected async Task OnSizeChange(DropDownButtonItemClickEventArgs args) {
        await SizeManager.SetSizeMode(Enum.Parse<SizeMode>(args.ItemInfo.Id));
    }

    protected override async void OnAfterRender(bool firstRender) {
        if (firstRender)
            await SizeManager.SetSizeInJS();
    }
}
csharp
using DevExpress.Blazor;
using Microsoft.AspNetCore.DataProtection.KeyManagement;
using Microsoft.JSInterop;

namespace switcher.Services {
    public class SizeManager {
        protected CookiesService _cookiesService;
        protected IJSRuntime _jsRuntime { get; set; }
        const string SizeModeCookieKey = "DXSizeMode";

        public SizeMode ActiveSizeMode;

        public SizeManager(CookiesService cs, IHttpContextAccessor httpContextAccessor, IJSRuntime js) {
            _cookiesService = cs;
            _jsRuntime = js;
            var sizeMode = _cookiesService.GetCookie(httpContextAccessor, SizeModeCookieKey);
            if (string.IsNullOrEmpty(sizeMode))
                ActiveSizeMode = SizeMode.Medium;
            else
                ActiveSizeMode = Enum.Parse<SizeMode>(sizeMode);
        }

        public async Task SetSizeMode(SizeMode sizeMode) {
            ActiveSizeMode = sizeMode;
            await _cookiesService.SetCookie(SizeModeCookieKey, sizeMode.ToString());
            await SetSizeInJS();
        }
        public async Task SetSizeInJS() {
            await _jsRuntime.InvokeVoidAsync("setSize", GetFontSizeString());
        }

        public string GetFontSizeString() {
            return ActiveSizeMode switch {
                SizeMode.Small => "14px",
                SizeMode.Medium => "16px",
                SizeMode.Large => "18px",
                _ => "16px"
            };
        }
    }
}
csharp
using Microsoft.JSInterop;

namespace switcher.Services {
    public class CookiesService {
        protected IJSRuntime JSRuntime { get; set; }
        public CookiesService(IJSRuntime js) {
            JSRuntime = js;
        }
        public string GetCookie(IHttpContextAccessor httpContextAccessor, string key) {
            return httpContextAccessor.HttpContext?.Request.Cookies[key];
        }
        public async Task SetCookie(string key, string value) { 
            await JSRuntime.InvokeVoidAsync("setCookie", key, value);
        }
    }
}
csharp
builder.Services.AddDevExpressBlazor();
builder.Services.AddMvc();
builder.Services.AddHttpContextAccessor();
builder.Services.AddScoped<ThemesService>();
// ...
builder.Services.AddTransient<CookiesService>();
js
window.setSize = function (value) {
    document.documentElement.style.setProperty('--global-size', value);
};
razor
<head>
@* ... *@
    <script src=@AppendVersion("switcher-resources/js/size-manager.js")></script>
    @* ... *@
    <HeadOutlet @rendermode="InteractiveServer" />
</head>
css
:root {
    --global-size: 16px;
}
razor
<div class="switcher-panel">
    <SizeChanger />
    @* ... *@
</div>

View Example: Switch Themes and Size Modes within Blazor Apps at Runtime