Tuesday, June 25, 2024
HomeC#Seamlessly Add Blazor Native UI Elements in Hybrid Apps

Seamlessly Add Blazor Native UI Elements in Hybrid Apps


Add the AreaChart element within the MAUI Grid structure on the MainPage.xaml web page, as proven beneath.

XAML

<BlazorWebView Grid.Row="0" Grid.Column="0" HostPage="wwwroot/index.html">
    <BlazorWebView.RootComponents>
        <RootComponent Selector="#app" ComponentType="{x:Kind pages: AreaChart}" />
    </BlazorWebView.RootComponents>
</BlazorWebView>

C#

@utilizing Syncfusion.Blazor.Charts
<SfChart Title="US Music Gross sales By Format" Width="@Width">
    <ChartArea><ChartAreaBorder Width="0"></ChartAreaBorder></ChartArea>
    <ChartPrimaryXAxis Minimal="new DateTime(1973, 01, 01)" Most="new DateTime(2018, 01, 01)" ValueType="Syncfusion.Blazor.Charts.ValueType.DateTime" LabelFormat="yyyy" IntervalType="IntervalType.Years" EdgeLabelPlacement="EdgeLabelPlacement.Shift">
        <ChartAxisMajorGridLines Width="0"></ChartAxisMajorGridLines>
        <ChartAxisMinorTickLines Width="1"></ChartAxisMinorTickLines>
    </ChartPrimaryXAxis>
    <ChartPrimaryYAxis Title="In Billions (USD)" Minimal="0" Most="25" Interval="5">
        <ChartAxisMajorTickLines Width="0"></ChartAxisMajorTickLines>
        <ChartAxisLineStyle Width="0"></ChartAxisLineStyle>
    </ChartPrimaryYAxis>
    <ChartSeriesCollection>
        <ChartSeries DataSource="@Compact" XName="Interval" YName="USD" Kind="ChartSeriesType.Space">
            <ChartSeriesBorder Width="1.5" Colour="white"></ChartSeriesBorder>
        </ChartSeries>
        <ChartSeries DataSource="@Obtain" XName="Interval" YName="USD" Kind="ChartSeriesType.Space">
            <ChartSeriesBorder Width="1.5" Colour="white"></ChartSeriesBorder>
        </ChartSeries>
        <ChartSeries DataSource="@Streaming" XName="Interval" YName="USD" Kind="ChartSeriesType.Space">
            <ChartSeriesBorder Width="1.5" Colour="white"></ChartSeriesBorder>
        </ChartSeries>
        <ChartSeries DataSource="@Casette" XName="Interval" YName="USD" Kind="ChartSeriesType.Space">
            <ChartSeriesBorder Width="1.5" Colour="white"></ChartSeriesBorder>
        </ChartSeries>
        <ChartSeries DataSource="@Vinyl" XName="Interval" YName="USD" Kind="ChartSeriesType.Space">
            <ChartSeriesBorder Width="1.5" Colour="white"></ChartSeriesBorder>
        </ChartSeries>
        <ChartSeries DataSource="@Observe" XName="Interval" YName="USD" Kind="ChartSeriesType.Space">
            <ChartSeriesBorder Width="1.5" Colour="white"></ChartSeriesBorder>
        </ChartSeries>
        <ChartSeries DataSource="@Different" XName="Interval" YName="USD" Kind="ChartSeriesType.Space">
            <ChartSeriesBorder Width="1.5" Colour="white"></ChartSeriesBorder>
        </ChartSeries>
    </ChartSeriesCollection>
    <ChartAnnotations>
        <ChartAnnotation CoordinateUnits="Items.Level" X="new DateTime(2006, 01, 01)" Y="0.7">
            <ContentTemplate>
                <div model="font-weight: daring; font-size: @Dimension; coloration: white;">OTHERS</div>
            </ContentTemplate>
        </ChartAnnotation>
        <ChartAnnotation CoordinateUnits="Items.Level" X="new DateTime(2015, 01, 01)" Y="1.2">
            <ContentTemplate>
                <div model="font-weight: daring; font-size: @Dimension; coloration: white;">STREAMING</div>
            </ContentTemplate>
        </ChartAnnotation>
        <ChartAnnotation CoordinateUnits="Items.Level" X="new DateTime(2011, 06, 01)" Y="1.9">
            <ContentTemplate>
                <div model="font-weight: daring; font-size: @Dimension; coloration: white;">DOWNLOAD</div>
            </ContentTemplate>
        </ChartAnnotation>
        <ChartAnnotation CoordinateUnits="Items.Level" X="new DateTime(2001, 01, 01)" Y="10">
            <ContentTemplate>
                <div model="font-weight: daring; font-size: @Dimension; coloration: white;">COMPACT DISC</div>
            </ContentTemplate>
        </ChartAnnotation>
        <ChartAnnotation CoordinateUnits="Items.Level" X="new DateTime(1990, 01, 01)" Y="3">
            <ContentTemplate>
                <div model="font-weight: daring; font-size: @Dimension; coloration: white;">CASSETTE</div>
            </ContentTemplate>
        </ChartAnnotation>
        <ChartAnnotation CoordinateUnits="Items.Level" X="new DateTime(1977, 01, 01)" Y="6">
            <ContentTemplate>
                <div model="font-weight: daring; font-size: @Dimension; coloration: white;">VINYL</div>
            </ContentTemplate>
        </ChartAnnotation>
        <ChartAnnotation CoordinateUnits="Items.Level" X="new DateTime(1976, 01, 01)" Y="1.5">
            <ContentTemplate>
                <div model="font-weight: daring; font-size: @Dimension; coloration: white;">8-TRACK</div>
            </ContentTemplate>
        </ChartAnnotation>
    </ChartAnnotations>
</SfChart>
@code {
    non-public Theme Theme { get; set; }
    public string Width { get; set; } = "90%";
    public string Dimension { get; set; } = "11px";
    public class AreaChartData
    {
        public DateTime Interval { get; set; }
        public double USD { get; set; }
    }
    public Listing<AreaChartData> Different { get; set; } = new Listing<AreaChartData>
    {
        new AreaChartData { Interval = new DateTime(1988, 01, 01), USD = -0.16 },
        new AreaChartData { Interval = new DateTime(1989, 01, 01), USD = -0.17 },
        new AreaChartData { Interval = new DateTime(1990, 01, 01), USD = -0.08 },
        new AreaChartData { Interval = new DateTime(1992, 01, 01), USD = 0.08 },
        new AreaChartData { Interval = new DateTime(1996, 01, 01), USD = 0.161 },
        new AreaChartData { Interval = new DateTime(1998, 01, 01), USD = 0.48 },
        new AreaChartData { Interval = new DateTime(1999, 01, 01), USD = 1.16 },
        new AreaChartData { Interval = new DateTime(2001, 01, 01), USD = 0.40 },
        new AreaChartData { Interval = new DateTime(2002, 01, 01), USD = 0.32 },
        new AreaChartData { Interval = new DateTime(2003, 01, 01), USD = 0.807 },
        new AreaChartData { Interval = new DateTime(2005, 01, 01), USD = 1.12 },
        new AreaChartData { Interval = new DateTime(2006, 01, 01), USD = 1.614 },
        new AreaChartData { Interval = new DateTime(2008, 01, 01), USD = 1.210 },
        new AreaChartData { Interval = new DateTime(2009, 01, 01), USD = 1.12 },
        new AreaChartData { Interval = new DateTime(2011, 01, 01), USD = 0.64 },
        new AreaChartData { Interval = new DateTime(2013, 01, 01), USD = 0.161 },
        new AreaChartData { Interval = new DateTime(2018, 01, 01), USD = 0.080 }
    };
    public Listing<AreaChartData> Observe { get; set; } = new Listing<AreaChartData>
    {
        new AreaChartData { Interval = new DateTime(1973, 01, 01), USD = 2.58 },
        new AreaChartData { Interval = new DateTime(1975, 01, 01), USD = 2.25 },
        new AreaChartData { Interval = new DateTime(1977, 01, 01), USD = 3.55 },
        new AreaChartData { Interval = new DateTime(1978, 01, 01), USD = 2.42 },
        new AreaChartData { Interval = new DateTime(1981, 01, 01), USD = -0.24 },
        new AreaChartData { Interval = new DateTime(1982, 01, 01), USD = -0 }
    };
    public Listing<AreaChartData> Streaming { get; set; } = new Listing<AreaChartData>
    {
        new AreaChartData { Interval = new DateTime(2011, 01, 01), USD = 0.48 },
        new AreaChartData { Interval = new DateTime(2013, 01, 01), USD = 1.61 },
        new AreaChartData { Interval = new DateTime(2015, 01, 01), USD = 2.17 },
        new AreaChartData { Interval = new DateTime(2017, 01, 01), USD = 7.18 }
    };
    public Listing<AreaChartData> Obtain { get; set; } = new Listing<AreaChartData>
    {
        new AreaChartData { Interval = new DateTime(2004, 01, 01), USD = 0.48 },
        new AreaChartData { Interval = new DateTime(2007, 01, 01), USD = 1.45 },
        new AreaChartData { Interval = new DateTime(2012, 01, 01), USD = 2.82 },
        new AreaChartData { Interval = new DateTime(2013, 01, 01), USD = 2.58 },
        new AreaChartData { Interval = new DateTime(2015, 01, 01), USD = 2.01 },
        new AreaChartData { Interval = new DateTime(2016, 01, 01), USD = 1.61 },
        new AreaChartData { Interval = new DateTime(2017, 01, 01), USD = 0.80 }
    };
    public Listing<AreaChartData> Compact { get; set; } = new Listing<AreaChartData>
    {
        new AreaChartData { Interval = new DateTime(1990, 01, 01), USD = 0.69 },
        new AreaChartData { Interval = new DateTime(1992, 01, 01), USD = 2.86 },
        new AreaChartData { Interval = new DateTime(1995, 01, 01), USD = 10.2 },
        new AreaChartData { Interval = new DateTime(1996, 01, 01), USD = 13.0 },
        new AreaChartData { Interval = new DateTime(1997, 01, 01), USD = 14.35 },
        new AreaChartData { Interval = new DateTime(1998, 01, 01), USD = 15.17 },
        new AreaChartData { Interval = new DateTime(1999, 01, 01), USD = 14.89 },
        new AreaChartData { Interval = new DateTime(2000, 01, 01), USD = 18.96 },
        new AreaChartData { Interval = new DateTime(2001, 01, 01), USD = 18.78 },
        new AreaChartData { Interval = new DateTime(2004, 01, 01), USD = 14.25 },
        new AreaChartData { Interval = new DateTime(2005, 01, 01), USD = 14.24 },
        new AreaChartData { Interval = new DateTime(2006, 01, 01), USD = 12.34 },
        new AreaChartData { Interval = new DateTime(2007, 01, 01), USD = 9.34 },
        new AreaChartData { Interval = new DateTime(2008, 01, 01), USD = 4.45 },
        new AreaChartData { Interval = new DateTime(2010, 01, 01), USD = 1.46 },
        new AreaChartData { Interval = new DateTime(2011, 01, 01), USD = 0.64 }
    };
    public Listing<AreaChartData> Casette { get; set; } = new Listing<AreaChartData>
    {
        new AreaChartData { Interval = new DateTime(1976, 01, 01), USD = 0.08 },
        new AreaChartData { Interval = new DateTime(1979, 01, 01), USD = 1.85 },
        new AreaChartData { Interval = new DateTime(1980, 01, 01), USD = 2.0 },
        new AreaChartData { Interval = new DateTime(1982, 01, 01), USD = 3.55 },
        new AreaChartData { Interval = new DateTime(1984, 01, 01), USD = 5.40 },
        new AreaChartData { Interval = new DateTime(1985, 01, 01), USD = 5.24 },
        new AreaChartData { Interval = new DateTime(1988, 01, 01), USD = 6.94 },
        new AreaChartData { Interval = new DateTime(1989, 01, 01), USD = 6.85 },
        new AreaChartData { Interval = new DateTime(1990, 01, 01), USD = 7.02 },
        new AreaChartData { Interval = new DateTime(1992, 01, 01), USD = 5.81 },
        new AreaChartData { Interval = new DateTime(1993, 01, 01), USD = 5.32 },
        new AreaChartData { Interval = new DateTime(1994, 01, 01), USD = 4.03 },
        new AreaChartData { Interval = new DateTime(1997, 01, 01), USD = 2.25 },
        new AreaChartData { Interval = new DateTime(1998, 01, 01), USD = 2.01 },
        new AreaChartData { Interval = new DateTime(1999, 01, 01), USD = 0.80 },
        new AreaChartData { Interval = new DateTime(2001, 01, 01), USD = 0.40 }
    };
    public Listing<AreaChartData> Vinyl { get; set; } = new Listing<AreaChartData>
    {
        new AreaChartData { Interval = new DateTime(1973, 01, 01), USD = 7.74 },
        new AreaChartData { Interval = new DateTime(1974, 01, 01), USD = 7.58 },
        new AreaChartData { Interval = new DateTime(1976, 01, 01), USD = 8.23 },
        new AreaChartData { Interval = new DateTime(1977, 01, 01), USD = 9.68 },
        new AreaChartData { Interval = new DateTime(1978, 01, 01), USD = 10.16 },
        new AreaChartData { Interval = new DateTime(1979, 01, 01), USD = 8.15 },
        new AreaChartData { Interval = new DateTime(1981, 01, 01), USD = 6.77 },
        new AreaChartData { Interval = new DateTime(1982, 01, 01), USD = 5.64 },
        new AreaChartData { Interval = new DateTime(1984, 01, 01), USD = 4.35 },
        new AreaChartData { Interval = new DateTime(1985, 01, 01), USD = 2.50 },
        new AreaChartData { Interval = new DateTime(1989, 01, 01), USD = 0.64 },
        new AreaChartData { Interval = new DateTime(1990, 01, 01), USD = 0 }
    };
}
RELATED ARTICLES

LEAVE A REPLY

Please enter your comment!
Please enter your name here

Most Popular

Recent Comments