DevExpress-Examples · elenapeskova · Sep 1, 2025 · Aug 12, 2025 · Aug 12, 2025 · Aug 12, 2025
@@ -1,25 +1,25 @@
 
 Microsoft Visual Studio Solution File, Format Version 12.00
-# Visual Studio Version 16
-VisualStudioVersion = 16.0.30204.135
+# Visual Studio Version 17
+VisualStudioVersion = 17.14.36127.28
 MinimumVisualStudioVersion = 10.0.40219.1
-Project("{FAE04EC0-301F-11D3-BF4B-00C04F79EFBC}") = "DiagramBlazorApp", "DiagramBlazorApp.csproj", "{91C16391-994F-4FF6-BC7A-BD1BDB0DED5B}"
+Project("{FAE04EC0-301F-11D3-BF4B-00C04F79EFBC}") = "DiagramBlazorApp", "DiagramBlazorApp\DiagramBlazorApp.csproj", "{FD0445D1-0DE5-419E-A1CD-9FFE19B4E46B}"
 EndProject
 Global
 	GlobalSection(SolutionConfigurationPlatforms) = preSolution
 		Debug|Any CPU = Debug|Any CPU
 		Release|Any CPU = Release|Any CPU
 	EndGlobalSection
 	GlobalSection(ProjectConfigurationPlatforms) = postSolution
-		{91C16391-994F-4FF6-BC7A-BD1BDB0DED5B}.Debug|Any CPU.ActiveCfg = Debug|Any CPU
-		{91C16391-994F-4FF6-BC7A-BD1BDB0DED5B}.Debug|Any CPU.Build.0 = Debug|Any CPU
-		{91C16391-994F-4FF6-BC7A-BD1BDB0DED5B}.Release|Any CPU.ActiveCfg = Release|Any CPU
-		{91C16391-994F-4FF6-BC7A-BD1BDB0DED5B}.Release|Any CPU.Build.0 = Release|Any CPU
+		{FD0445D1-0DE5-419E-A1CD-9FFE19B4E46B}.Debug|Any CPU.ActiveCfg = Debug|Any CPU
+		{FD0445D1-0DE5-419E-A1CD-9FFE19B4E46B}.Debug|Any CPU.Build.0 = Debug|Any CPU
+		{FD0445D1-0DE5-419E-A1CD-9FFE19B4E46B}.Release|Any CPU.ActiveCfg = Release|Any CPU
+		{FD0445D1-0DE5-419E-A1CD-9FFE19B4E46B}.Release|Any CPU.Build.0 = Release|Any CPU
 	EndGlobalSection
 	GlobalSection(SolutionProperties) = preSolution
 		HideSolutionNode = FALSE
 	EndGlobalSection
 	GlobalSection(ExtensibilityGlobals) = postSolution
-		SolutionGuid = {1207D22D-64B5-4CF6-8A2B-576224212C9C}
+		SolutionGuid = {3AEEAE2E-FCED-4EEE-800C-90A866B2932D}
 	EndGlobalSection
 EndGlobal
@@ -0,0 +1,35 @@
+@using Microsoft.AspNetCore.Mvc.ViewFeatures
+@using DiagramBlazorApp.Services
+@inject IFileVersionProvider FileVersionProvider
+@inject DxThemesService ThemesService
+
+<!DOCTYPE html>
+<html lang="en" data-bs-theme="@(ThemesService.IsBootstrapDarkActive ? "dark" : null)" data-fluent-darkmode="@(ThemesService.IsFluentDarkModeActive ? "" : null)">
+<head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <base href="/" />
+    <script type="text/javascript" src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
+    <script src="https://cdn3.devexpress.com/jslib/25.1.3/js/dx-diagram.min.js"></script>
+    <script type="text/javascript" src="https://cdn3.devexpress.com/jslib/25.1.3/js/dx.all.js"></script>
+    @DxResourceManager.RegisterTheme(ThemesService.ActiveTheme)
+    @DxResourceManager.RegisterScripts((config) => {
+        config.Unregister(CommonResources.JQueryJS);
+        config.Unregister(CommonResources.DevExtremeJS);
+    })
+    <link rel="stylesheet" href="https://cdn3.devexpress.com/jslib/25.1.3/css/dx-diagram.min.css">
+    <link href=@AppendVersion("https://cdn3.devexpress.com/jslib/25.1.3/css/dx.fluent.blue.light.css") rel="stylesheet" />
+    <link href=@AppendVersion("css/site.css") rel="stylesheet" />
+    <link href=@AppendVersion("DiagramBlazorApp.styles.css") rel="stylesheet" />
+    <HeadOutlet />
+</head>
+<body>
+    <Routes />
+    <script src="_framework/blazor.web.js"></script>
+</body>
+
+</html>
+
+@code{
+    private string AppendVersion(string path) => FileVersionProvider.AddFileVersionToPath("/", path);
+}
@@ -0,0 +1,33 @@
+@inherits LayoutComponentBase
+@inject NavigationManager NavigationManager
+
+<div>
+    <DxDrawer PanelWidth="@Width" CssClass="@(CssClass + " mobile")" Mode="@DrawerMode.Overlap" IsOpen="@ToggledSidebar" HeaderTemplate="@DrawerHeader" FooterTemplate="@DrawerFooter" ApplyBackgroundShading="false" ClosedCssClass="panel-closed">
+        <BodyTemplate>
+            @DrawerBody
+        </BodyTemplate>
+        <TargetContent>
+            <DxDrawer PanelWidth="@Width" CssClass="@CssClass" Mode="@DrawerMode.Shrink" IsOpen="@(!ToggledSidebar)" HeaderTemplate="@DrawerHeader" FooterTemplate="@DrawerFooter" OpenCssClass="panel-open" >
+                <BodyTemplate>
+                    @DrawerBody
+                </BodyTemplate>
+                <TargetContent>
+                    <div class="shading-copy" />
+                    @DrawerTarget
+                </TargetContent>
+            </DxDrawer>
+        </TargetContent>
+    </DxDrawer>
+</div>
+
+@code {
+    string Width => "240px";
+    string CssClass => "navigation-drawer";
+
+    [SupplyParameterFromQuery(Name = UrlGenerator.ToggleSidebarName)]
+    public bool ToggledSidebar { get; set; }
+    [Parameter] public RenderFragment? DrawerTarget { get; set; }
+    [Parameter] public RenderFragment? DrawerBody { get; set; }
+    [Parameter] public RenderFragment? DrawerHeader { get; set; }
+    [Parameter] public RenderFragment? DrawerFooter { get; set; }
+}
@@ -0,0 +1,96 @@
+::deep .navigation-drawer {
+    --dxbl-drawer-panel-footer-justify-content: center;
+    height: 100vh;
+    max-height: 100%;
+}
+
+::deep .navigation-drawer > .dxbl-drawer-panel {
+    background-image: linear-gradient(180deg, var(--bs-primary, var(--DS-primary-90)) 0%, var(--bs-black, #000) 150%);
+}
+
+::deep .navigation-drawer > .dxbl-drawer-content {
+    height: 100vh;
+    overflow: auto;
+}
+
+::deep .navigation-drawer > .dxbl-drawer-panel > .dxbl-drawer-header {
+    border-bottom: none;
+    padding: 2rem 1rem;
+    background: none;
+}
+
+::deep .navigation-drawer > .dxbl-drawer-panel > .dxbl-drawer-header > .navigation-drawer-header {
+    width: 100%;
+    display: flex;
+    justify-content: space-between;
+}
+
+::deep .navigation-drawer > .dxbl-drawer-panel > .dxbl-drawer-body {
+    --dxbl-drawer-panel-body-padding-x: 0;
+    --dxbl-drawer-panel-body-padding-y: 1rem;
+}
+
+::deep .navigation-drawer > .dxbl-drawer-panel > .dxbl-drawer-footer {
+    --dxbl-drawer-panel-footer-justify-content: center;
+    border-top: none;
+    padding-bottom: 1.5rem;
+    background: none;
+}
+
+::deep .navigation-drawer > .dxbl-drawer-panel {
+    display: flex;
+}
+
+::deep .navigation-drawer.mobile > .dxbl-drawer-panel {
+    display: none;
+}
+
+::deep .navigation-drawer.mobile > .dxbl-drawer-shading {
+    display: none;
+}
+
+@media (max-width: 768px) {
+    ::deep .navigation-drawer > .dxbl-drawer-panel {
+        display: none;
+    }
+
+    ::deep .navigation-drawer.mobile > .dxbl-drawer-panel {
+        display: flex;
+    }
+
+    ::deep .navigation-drawer.mobile > .dxbl-drawer-shading {
+        display: block;
+    }
+}
+
+::deep .panel-open:not(.mobile) .menu-button {
+    display: none;
+}
+
+@media (max-width: 768px) {
+    ::deep .panel-open:not(.mobile) .menu-button {
+        display: inline-flex;
+    }
+
+    .mobile-drawer-closed .shading-copy {
+        display: none;
+        visibility: hidden;
+    }
+
+    ::deep .shading-copy {
+        background-color: var(--dxbl-drawer-content-shading-bg);
+        height: 100%;
+        position: absolute;
+        transition: opacity ease var(--dxbl-drawer-animation-duration);
+        visibility: visible;
+        width: 100%;
+        z-index: 99;
+        opacity: var(--dxbl-drawer-content-shading-opacity);
+    }
+
+    ::deep .panel-open .shading-copy {
+        opacity: 0;
+        visibility: unset;
+        height: unset;
+    }
+}
@@ -0,0 +1,52 @@
+@inherits LayoutComponentBase
+@using DiagramBlazorApp.Services
+@inject NavigationManager NavigationManager
+@inject DxThemesService ThemesService
+
+<div class="page">
+    <Drawer DrawerHeader="drawerHeader" DrawerFooter="drawerFooter">
+        <DrawerBody>
+            <div class="w-100">
+                <NavMenu></NavMenu>
+            </div>
+        </DrawerBody>
+        <DrawerTarget>
+            <div class="nav-buttons-container">
+                <NavLink href="@UrlGenerator.GetUrl(new Uri(NavigationManager.Uri).LocalPath, !ToggledSidebar)">
+                    <DxButton RenderStyle="@(ThemesService.IsActiveThemeDark ? ButtonRenderStyle.Light : ButtonRenderStyle.Dark)" RenderStyleMode="@ButtonRenderStyleMode.Text" CssClass="menu-button" IconCssClass="icon icon-menu"></DxButton>
+                </NavLink>
+                @if (new Uri(NavigationManager.Uri).LocalPath != "/") {
+                    <NavLink href="@UrlGenerator.GetUrl("/", ToggledSidebar)" class="button-link hidden">
+                        <DxButton RenderStyle="@(ThemesService.IsActiveThemeDark ? ButtonRenderStyle.Light : ButtonRenderStyle.Dark)" Text="Back to Home" RenderStyleMode="@ButtonRenderStyleMode.Text" CssClass="menu-button-nav" IconCssClass="icon icon-back"></DxButton>
+                    </NavLink>
+                }
+            </div>
+            <div class="p-4">
+                @Body
+            </div>
+        </DrawerTarget>
+    </Drawer>
+</div>
+
+@code {
+    [SupplyParameterFromQuery(Name = UrlGenerator.ToggleSidebarName)]
+    public bool ToggledSidebar { get; set; }
+
+    private RenderFragment drawerHeader => @<div class="navigation-drawer-header">
+        <img class="logo" src="images/logo.svg" alt="DevExpress logo" />
+        <NavLink href="@UrlGenerator.GetUrl(new Uri(NavigationManager.Uri).LocalPath, !ToggledSidebar)">
+            <DxButton RenderStyle="@(ThemesService.IsBootstrapDarkActive ? ButtonRenderStyle.Dark : ButtonRenderStyle.Light)" RenderStyleMode="@ButtonRenderStyleMode.Text" CssClass="menu-button-nav" IconCssClass="@(ToggledSidebar ? "icon icon-close" : "icon icon-menu")"></DxButton>
+        </NavLink>
+    </div>;
+
+    private RenderFragment drawerFooter => @<div>
+        <NavLink href="https://docs.devexpress.com/Blazor/400725/blazor-components" class="button-link">
+            <DxButton Text="Docs" RenderStyleMode="@ButtonRenderStyleMode.Text" CssClass="footer-button" RenderStyle="ButtonRenderStyle.Light" IconCssClass="icon docs-icon"></DxButton>
+        </NavLink>
+        <NavLink href="https://demos.devexpress.com/blazor/" class="button-link">
+            <DxButton Text="Demos" RenderStyleMode="@ButtonRenderStyleMode.Text" CssClass="footer-button" RenderStyle="ButtonRenderStyle.Light" IconCssClass="icon demos-icon"></DxButton>
+        </NavLink>
+    </div>;
+
+
+}
@@ -0,0 +1,83 @@
+.page {
+    height: 100%;
+    font-family: var(--bs-font-sans-serif, var(--DS-font-family-sans-serif));
+}
+
+::deep .content {
+    overflow: auto;
+    display: flex;
+    flex-direction: column;
+}
+
+::deep .icon-back {
+    --icon-mask-image: var(--icon-back-mask-image);
+}
+
+::deep .icon-close {
+    --icon-mask-image: var(--icon-close-mask-image);
+}
+
+::deep .icon-menu {
+    --icon-mask-image: var(--icon-menu-mask-image);
+}
+
+::deep .icon-log-in {
+    --icon-mask-image: var(--icon-log-in-mask-image);
+}
+
+::deep .icon-log-out {
+    --icon-mask-image: var(--icon-log-out-mask-image);
+}
+
+::deep .icon-user {
+    --icon-mask-image: var(--icon-user-mask-image);
+}
+
+::deep .docs-icon {
+    --icon-mask-image: var(--icon-docs-mask-image);
+}
+
+::deep .demos-icon {
+    --icon-mask-image: var(--icon-demos-mask-image);
+}
+
+::deep .footer-button:hover .demos-icon {
+    background-color: var(--dxbl-btn-hover-color);
+}
+
+::deep .footer-button:hover .docs-icon {
+    background-color: var(--dxbl-btn-hover-color);
+}
+
+::deep .menu-button:hover .icon {
+    background-color: var(--dxbl-btn-hover-color);
+}
+
+::deep .menu-button-nav:hover .icon {
+    background-color: var(--dxbl-btn-hover-color);
+}
+
+.panel-open .menu-button {
+    display: inline-flex;
+}
+
+.menu-button-nav {
+    background-image: url("images/close.svg");
+    width: 1.875rem;
+    height: 1.875rem;
+}
+
+.nav-buttons-container {
+    display: flex;
+    gap: 10px;
+    padding: 2rem 1rem;
+}
+
+    .nav-buttons-container ::deep .menubutton-float-end {
+        margin-left: auto;
+    }
+
+    .nav-buttons-container ::deep .dxbl-btn-icon-only {
+        --dxbl-btn-padding-x: 0.75rem;
+        --dxbl-btn-padding-y: 0.25rem;
+    }
@@ -0,0 +1,7 @@
+<div id="sidebar">
+    <DxMenu Orientation="@Orientation.Vertical" CssClass="menu">
+        <Items>
+            <DxMenuItem NavigateUrl="/diagram" Text="Diagram" CssClass="menu-item" IconCssClass="icon home-icon"></DxMenuItem>
+        </Items>
+    </DxMenu>
+</div>