Getting Started with Blazor Media Query in Blazor WASM App
19 Jul 202612 minutes to read
This section briefly explains how to include the Blazor Media Query component in a Blazor WebAssembly App using Visual Studio, Visual Studio Code, and the .NET CLI.
Create a new Blazor WebAssembly App
Create a Blazor WebAssembly App using Visual Studio via Microsoft Templates or the Blazor Extension. For detailed instructions, refer to the Blazor WebAssembly App Getting Started documentation.
Run the following command to create a new Blazor WebAssembly App.
dotnet new blazorwasm -o BlazorApp
cd BlazorAppAlternatively, create a Blazor WebAssembly App using Visual Studio Code via Microsoft Templates, the Blazor Extension, or the C# Dev Kit extension.
Run the following command to create a new Blazor WebAssembly App.
dotnet new blazorwasm -o BlazorApp
cd BlazorAppInstall the required Blazor packages
Install Syncfusion.Blazor.Core and Syncfusion.Blazor.Themes NuGet packages. All Syncfusion Blazor packages are available on nuget.org. See the NuGet packages topic for details.
- Go to Tools → NuGet Package Manager → Manage NuGet Packages for Solution.
- Search the required NuGet packages (
Syncfusion.Blazor.CoreandSyncfusion.Blazor.Themes) and install them.
Alternatively, you can install the same packages using the Package Manager Console with the following commands.
Install-Package Syncfusion.Blazor.Core -Version 34.1.29
Install-Package Syncfusion.Blazor.Themes -Version 34.1.29Open the terminal and run the following commands.
dotnet add package Syncfusion.Blazor.Core -v 34.1.29
dotnet add package Syncfusion.Blazor.Themes -v 34.1.29Open the command prompt and run the following commands.
dotnet add package Syncfusion.Blazor.Core -v 34.1.29
dotnet add package Syncfusion.Blazor.Themes -v 34.1.29Add import namespaces
After the packages are installed, open the ~/_Imports.razor file and import the Syncfusion.Blazor.Core namespace.
@using Syncfusion.Blazor.CoreRegister the Blazor service
Open the Program.cs file in Blazor WebAssembly App and register the Blazor service.
....
using Syncfusion.Blazor;
....
builder.Services.AddSyncfusionBlazor();
....Add stylesheet and script resources
The theme stylesheet and script can be accessed from NuGet through Static Web Assets. Include the stylesheet and script references in the ~wwwroot/index.html file.
...
<link href="_content/Syncfusion.Blazor.Themes/fluent2.css" rel="stylesheet" />
...
<script src="_content/Syncfusion.Blazor.Core/scripts/syncfusion-blazor.min.js" type="text/javascript"></script>Add Blazor Media Query component
Open a Razor file located in the ~/Pages/*.razor (for example, Home.razor) and add the Blazor Media Query component inside the razor file.
The Media Query component monitors the viewport width and updates the ActiveBreakPoint value as the screen size changes between defined breakpoints such as Small, Medium, and Large. This value can be used to conditionally apply styles or modify the layout. In the following example, the ActiveBreakPoint parameter is used to determine the currently active breakpoint and dynamically update the layout based on the screen size.
@using Syncfusion.Blazor.Core
<SfMediaQuery @bind-ActiveBreakPoint="activeBreakpoint"></SfMediaQuery>
<br />
@if (activeBreakpoint == "Small")
{
deviceSize = "small-device";
}
else if (activeBreakpoint == "Medium")
{
deviceSize = "medium-device";
}
else
{
deviceSize = "";
}
<div class="mediaquery-demo @deviceSize">
<div class="header e-skeleton e-skeleton-text">
<div class="search-box e-skeleton e-skeleton-text"></div>
</div>
<div class="banner e-skeleton e-skeleton-text e-shimmer-pulse"></div>
<div class="main-container">
<ul>
<li>
<div class="content e-skeleton e-skeleton-text e-shimmer-pulse"></div>
<div class="title e-skeleton e-skeleton-text e-shimmer-pulse"></div>
<p class="e-skeleton e-skeleton-text e-shimmer-pulse"></p>
</li>
<li>
<div class="content e-skeleton e-skeleton-text e-shimmer-pulse"></div>
<div class="title e-skeleton e-skeleton-text e-shimmer-pulse"></div>
<p class="e-skeleton e-skeleton-text e-shimmer-pulse"></p>
</li>
</ul>
</div>
<div class="footer e-skeleton e-skeleton-text"></div>
</div>
@code {
private string deviceSize { get; set; }
private string activeBreakpoint { get; set; }
}
<style>
.mediaquery-demo {
height: 715px;
margin: 0 10%;
border: 2px solid #f3f2f1;
border-top-width: 0px;
border-radius: 4px;
overflow: hidden;
}
.mediaquery-demo .e-skeleton {
display: block;
}
.mediaquery-demo .header {
height: 6vh;
text-align: center;
overflow: visible;
}
.mediaquery-demo .header .search-box {
width: 25%;
height: 55%;
margin-top: 1.5vh;
display: inline-block;
border-radius: 7px;
float: right;
margin-right: 3%;
background-color: white;
}
.mediaquery-demo .banner {
height: 35%;
margin: 1% 8%;
}
.mediaquery-demo .main-container {
margin: 0 8%;
height: 35%;
}
.mediaquery-demo .main-container ul {
list-style: none;
display: flex;
height: 100%;
padding: 0;
justify-content: space-between;
padding-top: 20px;
}
.mediaquery-demo .main-container ul li {
width: 49%;
}
.mediaquery-demo .main-container li .content {
height: 60%;
}
.mediaquery-demo .main-container li .title,
.mediaquery-demo .main-container li p {
width: 50%;
height: 7%;
margin-top: 3%;
}
.mediaquery-demo .main-container li p {
width: 80%;
}
.mediaquery-demo .footer {
height: 20%;
margin: 0% 8%;
}
.mediaquery-demo.medium-device .header .search-box {
width: 50%;
float: none;
margin-right: 0px;
}
.mediaquery-demo.medium-device .banner,
.mediaquery-demo.medium-device .main-container,
.mediaquery-demo.medium-device .footer {
margin: 0px;
}
.mediaquery-demo.medium-device .banner {
margin-top: 1%;
}
.mediaquery-demo.medium-device .main-container {
height: 42%;
}
.mediaquery-demo.medium-device .main-container ul {
flex-direction: column;
}
.mediaquery-demo.medium-device .main-container ul li {
height: 50%;
display: flex;
margin-bottom: 2%;
margin-left: 5%;
width: 100%;
}
.mediaquery-demo.medium-device .main-container li .content {
height: auto;
width: 30%;
}
.mediaquery-demo.medium-device .main-container li .title,
.mediaquery-demo.medium-device .main-container li p {
height: 24%;
}
.mediaquery-demo.medium-device .main-container li .title {
margin-left: 5%;
width: 25%;
margin-top: 0;
}
.mediaquery-demo.medium-device .main-container li p {
margin-top: 8%;
margin-left: -25%;
width: 55%;
}
.mediaquery-demo.small-device .header .search-box {
text-align: center;
float: none;
width: 60%;
height: 65%;
margin-top: 8vh;
background-color: inherit;
}
.mediaquery-demo.small-device .banner,
.mediaquery-demo.small-device .main-container,
.mediaquery-demo.small-device .footer {
margin: 0px;
height: 20%;
}
.mediaquery-demo.small-device .banner {
margin: 8vh 0 0;
}
.mediaquery-demo.small-device .main-container {
height: 48%;
}
.mediaquery-demo.small-device .main-container ul {
display: block;
}
.mediaquery-demo.small-device .main-container ul li {
height: 50%;
display: block;
width: 90%;
margin: 0 auto;
}
.mediaquery-demo.small-device .main-container li .content {
height: 40%;
width: auto;
}
.mediaquery-demo.small-device .main-container li .title {
width: 40%;
height: 10%;
}
.mediaquery-demo.small-device .main-container li p {
width: auto;
height: 10%;
}
</style>Run the application
Press Ctrl+F5 (Windows) or ⌘+F5 (macOS) to launch the application. The Blazor Media Query component will render in your default web browser.
Open the terminal and run the following command.
dotnet runOpen the command prompt and run the following command.
dotnet run
NOTE
You can refer to the Blazor Media Query feature tour to explore its key features and capabilities. You can also browse the Blazor Media Query examples to learn how to render and configure the component.