New Component: MudQrCode

CodeBeam.MudBlazor.Extensions/CodeBeam.MudBlazor.Extensions.csproj

@@ -25,6 +25,8 @@
 		<PackageReference Include="BuildBundlerMinifier" Version="3.2.449" />
 		<PackageReference Include="CsvHelper" Version="30.0.1" />
 		<PackageReference Include="MudBlazor" Version="6.1.9" />
+		<PackageReference Include="ZXing.Net" Version="0.16.9" />
+		<PackageReference Include="ZXing.Net.Bindings.SkiaSharp" Version="0.16.13" />
 	</ItemGroup>
 
 	<ItemGroup Condition=" '$(TargetFramework)' == 'net6.0' ">

CodeBeam.MudBlazor.Extensions/Components/QrGenerator/MudQrCode.razor

@@ -0,0 +1,16 @@
+@namespace MudExtensions
+@inherits MudComponentBase
+
+<a href="@(Clickable ? Value : null)" target="@Target">
+    @{
+        var content = GetQrCode();
+    }
+    @if (content != null)
+    {
+        <MudImage Src="@(content == null ? null : String.Format("data:image/png;base64,{0}", Convert.ToBase64String(content)))" Height="Height" Width="Width" Class="@Class" Style="@Style" />
+    }
+    else
+    {
+        <MudImage Height="Height" Width="Width" Class="@Class" Style="@Style" />
+    }
+</a>

CodeBeam.MudBlazor.Extensions/Components/QrGenerator/MudQrCode.razor.cs

@@ -0,0 +1,82 @@
+using Microsoft.AspNetCore.Components;
+using MudBlazor;
+using SkiaSharp;
+using ZXing;
+using ZXing.QrCode;
+using ZXing.SkiaSharp;
+
+namespace MudExtensions
+{
+    public partial class MudQrCode : MudComponentBase
+    {
+        [Parameter]
+        public string Value { get; set; }
+
+        [Parameter]
+        public EventCallback<string> ValueChanged { get; set; }
+
+        [Parameter]
+        public BarcodeFormat BarcodeFormat { get; set; } = BarcodeFormat.QR_CODE;
+
+        [Parameter]
+        public int Width { get; set; } = 200;
+
+        [Parameter]
+        public int Height { get; set; } = 200;
+
+        /// <summary>
+        /// If true, it goes to specified href when click.
+        /// </summary>
+        [Parameter]
+        public bool Clickable { get; set; }
+
+        [Parameter]
+        public string Target { get; set; } = "_blank";
+
+        [Parameter]
+        public string ErrorText { get; set; }
+
+        /// <summary>
+        /// If true, no text show on barcode format.
+        /// </summary>
+        [Parameter]
+        public bool PureBarcode { get; set; }
+
+        protected byte[] GetQrCode()
+        {
+            if (string.IsNullOrEmpty(Value))
+            {
+                return null;
+            }
+
+            try
+            {
+                BarcodeWriter writer = new BarcodeWriter
+                {
+                    Format = BarcodeFormat,
+                    Options = new QrCodeEncodingOptions
+                    {
+                        Width = Width,
+                        Height = Height,
+                        PureBarcode = PureBarcode,
+                    }
+                };
+
+                var qrCodeImage = writer.Write(Value);
+
+                using (var stream = new MemoryStream())
+                {
+                    qrCodeImage.Encode(stream, SKEncodedImageFormat.Png, 100);
+                    ErrorText = null;
+                    return stream.ToArray();
+                }
+            }
+            catch (Exception ex)
+            {
+                ErrorText = ex.Message;
+                return null;
+            }
+        }
+
+    }
+}

ComponentViewer.Docs/Pages/Components/ApiPage.razor

@@ -341,6 +341,27 @@
         </MudTable>
     </ExampleCard>
 
+    <ExampleCard Title="Api - MudQrCode" HasExpansionPanel="true">
+        <MudTable Items="@(typeof(MudQrCode).GetProperties().Where(x => x.Name != "FieldId" && x.Name != "UserAttributes").OrderBy(x => x.Name).ToList())">
+            <HeaderContent>
+                <MudTh>Name</MudTh>
+                <MudTh>Type</MudTh>
+                <MudTh>Default</MudTh>
+            </HeaderContent>
+            <RowTemplate>
+                <MudTd>@context.Name</MudTd>
+                <MudTd>@context.PropertyType.Name</MudTd>
+                <MudTd>
+                    @if (true)
+                    {
+                        MudQrCode instance = new();
+                        <MudText Typo="Typo.body2">@(context.GetValue(instance)?.ToString() ?? "null")</MudText>
+                    }
+                </MudTd>
+            </RowTemplate>
+        </MudTable>
+    </ExampleCard>
+
     <ExampleCard Title="Api - MudScrollbar" HasExpansionPanel="true">
         <MudTable Items="@(typeof(MudScrollbar).GetProperties().Where(x => x.Name != "FieldId" && x.Name != "UserAttributes").OrderBy(x => x.Name).ToList())">
             <HeaderContent>

ComponentViewer.Docs/Pages/Components/QrCodePage.razor

@@ -0,0 +1,8 @@
+@page "/mudqrcode"
+@using ComponentViewer.Docs.Pages.Examples
+
+<ExamplePage Title="MudQrCode">
+    <ExampleCard ExampleName="QrCodeExample1" Title="Usage" Description="QrCode shows the QR with defined value.">
+        <QrCodeExample1 />
+    </ExampleCard>
+</ExamplePage>

ComponentViewer.Docs/Pages/Examples/QrCodeExample1.razor

@@ -0,0 +1,29 @@
+@using ZXing;
+
+<MudGrid>
+    <MudItem xs="12" sm="8" Class="d-flex justify-center">
+        <MudQrCode @ref="_qrCode" @bind-Value="_qrValue" Width="_width" Height="_height" BarcodeFormat="_barcodeFormat" Clickable="_clickable" PureBarcode="_pureBarcode" />
+    </MudItem>
+
+    <MudItem xs="12" sm="4">
+        <MudStack Spacing="4">
+            <MudTextField T="string" @bind-Value="_qrValue" Label="Value" Variant="Variant.Outlined" Immediate="true" Margin="Margin.Dense" />
+            <MudNumericField @bind-Value="_width" Label="Width" Variant="Variant.Outlined" Margin="Margin.Dense" />
+            <MudNumericField @bind-Value="_height" Label="Height" Variant="Variant.Outlined" Margin="Margin.Dense" />
+            <MudSelectExtended ItemCollection="@(Enum.GetValues<BarcodeFormat>())" @bind-Value="_barcodeFormat" Label="Barcode Format" Variant="Variant.Outlined" Margin="Margin.Dense" Dense="true" />
+            <MudText Color="Color.Error">@(_qrCode.ErrorText == null ? null : "Error: " + _qrCode.ErrorText)</MudText>
+            <MudSwitchM3 @bind-Checked="_clickable" Color="Color.Secondary" Label="Clickable" />
+            <MudSwitchM3 @bind-Checked="_pureBarcode" Color="Color.Secondary" Label="Pure Barcode" />
+        </MudStack>
+    </MudItem>
+</MudGrid>
+
+@code {
+    MudQrCode _qrCode;
+    string _qrValue;
+    int _width = 200;
+    int _height = 200;
+    BarcodeFormat _barcodeFormat = BarcodeFormat.QR_CODE;
+    bool _clickable = false;
+    bool _pureBarcode = false;
+}

ComponentViewer.Docs/Pages/Index.razor

@@ -7,7 +7,7 @@
 
 <MudScrollbar Width="8" Color="primary" HoverColor="secondary" />
 <MudScrollToTop>
-    <MudFab Color="Color.Secondary" Icon="@Icons.Material.Filled.ArrowUpward" />
+    <MudFab Color="Color.Secondary" StartIcon="@Icons.Material.Filled.ArrowUpward" />
 </MudScrollToTop>
 
 <MudAnimate @ref="_animate" Selector=".card-blur" AnimationType="AnimationType.Blur" Duration="0.3" Value="0" ValueSecondary="120" />
@@ -229,6 +229,7 @@
         new("MudPage", "A CSS grid layout component that builds columns and rows, supports ColSpan & RowSpan."),
         new("MudPasswordField", "A specialized textfield that designed for working easily with passwords."),
         new("MudPopup", "A mobile friendly popup content for several situations."),
+        new("MudQrCode", "A QR code viewer with defined value."),
         new("MudScrollbar", "Handle all or selected scrollbar styles with a Mud component."),
         new("MudSpeedDial", "An expandable fab component."),
         new("MudSplitter", "A resizeable content splitter."),

ComponentViewer.Docs/Shared/MainLayout.razor

@@ -51,6 +51,7 @@
             <MudNavLink Href="/mudpage">Page & Section</MudNavLink>
             <MudNavLink Href="/mudpasswordfield">PasswordField</MudNavLink>
             <MudNavLink Href="/mudpopup">Popup</MudNavLink>
+            <MudNavLink Href="/mudqrcode">QrCode</MudNavLink>
             <MudNavLink Href="/mudscrollbar">Scrollbar</MudNavLink>
             <MudNavLink Href="/mudselectextended">SelectExtended</MudNavLink>
             <MudNavLink Href="/mudspeeddial">SpeedDial</MudNavLink>