Barcode Add ForceHeight (#406)

Author: mckaragoz

CodeBeam.MudBlazor.Extensions.Docs/Pages/Components/Barcode/Examples/BarcodeExample1.razor

@@ -3,14 +3,15 @@
 
 <MudGrid>
     <MudItem xs="12" sm="8" Class="d-flex justify-center">
-        <MudBarcode @ref="_barcode" @bind-Value="_qrValue" Width="_width" Height="_height" BarcodeFormat="_barcodeFormat" Clickable="_clickable" Color="@_color" BackgroundColor="@_backgroundColor" StrokeWidth="_strokeWidth" />
+        <MudBarcode @ref="_barcode" @bind-Value="_qrValue" Width="_width" Height="_height" ForceHeight="_forceHeight" BarcodeFormat="_barcodeFormat" Clickable="_clickable" Color="@_color" BackgroundColor="@_backgroundColor" StrokeWidth="_strokeWidth" />
     </MudItem>
 
     <MudItem xs="12" sm="4">
-        <MudStack Spacing="4">
+        <MudStack Spacing="3">
             <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" />
+            <MudNumericField @bind-Value="_forceHeight" Label="ForceHeight" 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">@(_barcode?.ErrorText == null ? null : "Error: " + _barcode.ErrorText)</MudText>
             <MudSwitchM3 @bind-Value="_clickable" Color="Color.Secondary" Label="Clickable" />
@@ -26,6 +27,7 @@
     string? _qrValue;
     int _width = 200;
     int _height = 200;
+    int _forceHeight = 1;
     BarcodeFormat _barcodeFormat = BarcodeFormat.QR_CODE;
     bool _clickable = false;
     string _color = "black";

CodeBeam.MudBlazor.Extensions.Docs/Pages/Components/Barcode/Examples/BarcodeExampleIntro.razor

@@ -2,6 +2,6 @@
 
 <MudGrid>
     <MudAlert Class="mud-width-full" Severity="Severity.Success"><b>If you feel barcode readers response slowly, increase the <CodeBlock>StrokeWidth</CodeBlock> value for a better read performance.</b></MudAlert>
-    <MudAlert Class="mud-width-full" Severity="Severity.Success"><b>You can independently set height and width, but for some barcode formats like QR, the component have to has same width and height (square sized).</b></MudAlert>
+    <MudAlert Class="mud-width-full" Severity="Severity.Success"><b>You can independently set height and width, but for some barcode formats like QR, the component have to has same width and height (square sized). Use <CodeBlock>ForceHeight</CodeBlock> to set height for some barcode types like UPC_A and UPC_E.</b></MudAlert>
     <MudAlert Class="mud-width-full" Severity="Severity.Success"><b>Remember that although you can freely specify colors, can get the best results with the highest contrast.</b></MudAlert>
 </MudGrid>

CodeBeam.MudBlazor.Extensions/Components/Barcode/MudBarcode.razor.cs

@@ -41,6 +41,12 @@ public partial class MudBarcode : MudComponentBase
         [Parameter]
         public int Height { get; set; } = 200;
 
+        /// <summary>
+        /// Use this value on not square sized barcode formats like UPC_A and UPC_E.
+        /// </summary>
+        [Parameter]
+        public int ForceHeight { get; set; } = 1;
+
         /// <summary>
         /// Increase the stroke width if readers can not read the barcode easily.
         /// </summary>
@@ -92,7 +98,7 @@ public partial class MudBarcode : MudComponentBase
             {
                 var matrix = Encoder.encode(Value, BarcodeFormat, 0, 0);
 
-                var result = new BarcodeResult(matrix, 1, 1);
+                var result = new BarcodeResult(matrix, 1, ForceHeight);
                 ErrorText = null;
                 return result;
             }