Blazor Toolbar コンポーネント

Blazor ツールバーコンポーネントは、主にチャートコンポーネントで使用される UI 操作のコンパニオンコンテナーです。ツールバーは、IgbDataChart または IgbCategoryChart コンポーネントにリンクされると、プロパティとツール項目のプリセットで動的に更新されます。プロジェクト用のカスタムツールを作成して、エンドユーザーが変更を提供できるようになり、無限のカスタマイズが可能になります。

Blazor ツールバーの例

using System;
using System.Collections.Generic;
public class CountryRenewableElectricityItem
{
    public string Year { get; set; }
    public double Europe { get; set; }
    public double China { get; set; }
    public double America { get; set; }
}

public class CountryRenewableElectricity
    : List<CountryRenewableElectricityItem>
{
    public CountryRenewableElectricity()
    {
        this.Add(new CountryRenewableElectricityItem()
        {
            Year = @"2009",
            Europe = 34,
            China = 21,
            America = 19
        });
        this.Add(new CountryRenewableElectricityItem()
        {
            Year = @"2010",
            Europe = 43,
            China = 26,
            America = 24
        });
        this.Add(new CountryRenewableElectricityItem()
        {
            Year = @"2011",
            Europe = 66,
            China = 29,
            America = 28
        });
        this.Add(new CountryRenewableElectricityItem()
        {
            Year = @"2012",
            Europe = 69,
            China = 32,
            America = 26
        });
        this.Add(new CountryRenewableElectricityItem()
        {
            Year = @"2013",
            Europe = 58,
            China = 47,
            America = 38
        });
        this.Add(new CountryRenewableElectricityItem()
        {
            Year = @"2014",
            Europe = 40,
            China = 46,
            America = 31
        });
        this.Add(new CountryRenewableElectricityItem()
        {
            Year = @"2015",
            Europe = 78,
            China = 50,
            America = 19
        });
        this.Add(new CountryRenewableElectricityItem()
        {
            Year = @"2016",
            Europe = 13,
            China = 90,
            America = 52
        });
        this.Add(new CountryRenewableElectricityItem()
        {
            Year = @"2017",
            Europe = 78,
            China = 132,
            America = 50
        });
        this.Add(new CountryRenewableElectricityItem()
        {
            Year = @"2018",
            Europe = 40,
            China = 134,
            America = 34
        });
        this.Add(new CountryRenewableElectricityItem()
        {
            Year = @"2018",
            Europe = 40,
            China = 134,
            America = 34
        });
        this.Add(new CountryRenewableElectricityItem()
        {
            Year = @"2019",
            Europe = 80,
            China = 96,
            America = 38
        });
    }
}cs

using System;
using System.Net.Http;
using System.Collections.Generic;
using System.Threading.Tasks;
using System.Text;
using Microsoft.AspNetCore.Components.WebAssembly.Hosting;
using Microsoft.Extensions.Configuration;
using Microsoft.Extensions.DependencyInjection;
using Microsoft.Extensions.Logging;
using IgniteUI.Blazor.Controls; // for registering Ignite UI modules

namespace Infragistics.Samples
{
    public class Program
    {
        public static async Task Main(string[] args)
        {
            var builder = WebAssemblyHostBuilder.CreateDefault(args);
            builder.RootComponents.Add<App>("app");
            builder.Services.AddScoped(sp => new HttpClient { BaseAddress = new Uri(builder.HostEnvironment.BaseAddress) });
            // registering Ignite UI modules
            builder.Services.AddIgniteUIBlazor(
                typeof(IgbLegendModule),
                typeof(IgbToolbarModule),
                typeof(IgbCategoryChartModule),
                typeof(IgbCategoryChartToolbarModule),
                typeof(IgbCheckboxListModule)
            );
            await builder.Build().RunAsync();
        }
    }
}cs


@using IgniteUI.Blazor.Controls

<style>
/*
CSS styles are loaded from the shared CSS file located at:
https://static.infragistics.com/xplatform/css/samples/
*/
#aboveContentSplit {
    display: flex;
    flex-direction: row;
}
#aboveContentLeftContainer {
    margin-left: 1.25rem;
    display: flex;
    flex-grow: 1;
    justify-content: start;
    align-items: end;
}
#aboveContentRightContainer {
    margin-right: 1.25rem;
    display: flex;
    flex-grow: 1;
    justify-content: end;
    align-items: end;
}
</style>
<div class="container vertical">
    <div class="legend-title">
        Renewable Electricity Generated
    </div>
    <div id="aboveContentSplit">
        <div id="aboveContentLeftContainer">
            <IgbToolbar
            Name="toolbar"
            @ref="toolbar"
            Orientation="ToolbarOrientation.Horizontal">
            </IgbToolbar>

        </div>
        <div id="aboveContentRightContainer">
            <IgbLegend
            Name="legend"
            @ref="legend"
            Orientation="LegendOrientation.Horizontal">
            </IgbLegend>

        </div>
    </div>
    <div class="container vertical fill">
        <IgbCategoryChart
        Name="chart"
        @ref="chart"
        ChartType="CategoryChartType.Line"
        IsHorizontalZoomEnabled="true"
        IsVerticalZoomEnabled="true"
        DataSource="CountryRenewableElectricity"
        IncludedProperties="@(new string[] { "Year", "Europe", "China", "America" })"
        YAxisTitle="TWh"
        YAxisTitleLeftMargin="10"
        YAxisTitleRightMargin="5"
        YAxisLabelLeftMargin="0"
        YAxisLabelLocation="YAxisLabelLocation.OutsideRight"
        IsTransitionInEnabled="true">
        </IgbCategoryChart>

    </div>
</div>

@code {
    

    private Action BindElements { get; set; }

    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        var legend = this.legend;
        var toolbar = this.toolbar;
        var chart = this.chart;

        this.BindElements = () => {
            toolbar.Target = this.chart;
            chart.Legend = this.legend;
        };
        this.BindElements();

    }

    private IgbLegend legend;
    private IgbToolbar toolbar;
    private IgbCategoryChart chart;

    private CountryRenewableElectricity _countryRenewableElectricity = null;
    public CountryRenewableElectricity CountryRenewableElectricity
    {
        get
        {
            if (_countryRenewableElectricity == null)
            {
                _countryRenewableElectricity = new CountryRenewableElectricity();
            }
            return _countryRenewableElectricity;
        }
    }

}razor

/*
CSS styles are loaded from the shared CSS file located at:
https://static.infragistics.com/xplatform/css/samples/
*/
#aboveContentSplit {
    display: flex;
    flex-direction: row;
}
#aboveContentLeftContainer {
    margin-left: 1.25rem;
    display: flex;
    flex-grow: 1;
    justify-content: start;
    align-items: end;
}
#aboveContentRightContainer {
    margin-right: 1.25rem;
    display: flex;
    flex-grow: 1;
    justify-content: end;
    align-items: end;
}
css

このサンプルが気に入りましたか? 完全な Ignite UI for Blazorツールキットにアクセスして、すばやく独自のアプリの作成を開始します。無料でダウンロードできます。

依存関係

IgniteUI.Blazor.Controls 名前空間を _Imports.razor ファイルに追加します。

@using IgniteUI.Blazor.Controls
razor

IgbDataChart コンポーネントとその機能とともに IgbToolbar を使用する場合、次のモジュールが必要です。

// in Program.cs file

builder.Services.AddIgniteUIBlazor(
    typeof(IgbToolbarModule),
    typeof(IgbDataChartToolbarModule),
    typeof(IgbDataChartCoreModule),
    typeof(IgbDataChartCategoryModule),
    typeof(IgbDataChartAnnotationModule),
    typeof(IgbDataChartInteractivityModule),
    typeof(IgbDataChartCategoryTrendLineModule)
);
razor

スタイルを IgbToolbar コンポーネントに適用するには、追加の CSS ファイルをリンクする必要もあります。以下は、Blazor Web Assembly プロジェクトの wwwroot/index.html ファイルまたは Blazor Server プロジェクトの Pages/_Host.cshtml ファイルに配置する必要があります。

<link href="_content/IgniteUI.Blazor/themes/light/bootstrap.css" rel="stylesheet" />
razor

使用方法

ツール操作

以下は、ツールバーに追加できるさまざまな IgbToolAction 項目のリストです。

これらのツールはそれぞれ、マウスのクリックによってトリガーされる OnCommand イベントを公開します。注: IgbToolActionIconMenu は、IgbToolActionIconMenu 内にラップすることもできる他のツールのラッパーです。

IgbToolAction オブジェクトの OverlayId、BeforeId、および AfterId プロパティを使用して、新規および既存のツールの位置を変更したり、非表示にマークしたりすることができます。ToolActions は Visibility プロパティも公開します。

次の例は、いくつかの機能を示しています。まず、ZoomReset や AnalyzeMenu メニューツール操作などの組み込みツールを非表示にするなど、IgbToolActionSubPanel でツールをグループ化できます。この例では、AfterId プロパティを使用して ZoomOut に割り当てることで、ZoomReset ツール操作の新しいインスタンスが追加され、ZoomMenu 内に配置されます。また、ツールの IsHighlighted プロパティによってもハイライト表示されます。これにより、新しいリセットツールが ZoomMenu の下部にすぐに表示されます。

using System;
using System.Collections.Generic;
public class CountryRenewableElectricityItem
{
    public string Year { get; set; }
    public double Europe { get; set; }
    public double China { get; set; }
    public double America { get; set; }
}

public class CountryRenewableElectricity
    : List<CountryRenewableElectricityItem>
{
    public CountryRenewableElectricity()
    {
        this.Add(new CountryRenewableElectricityItem()
        {
            Year = @"2009",
            Europe = 34,
            China = 21,
            America = 19
        });
        this.Add(new CountryRenewableElectricityItem()
        {
            Year = @"2010",
            Europe = 43,
            China = 26,
            America = 24
        });
        this.Add(new CountryRenewableElectricityItem()
        {
            Year = @"2011",
            Europe = 66,
            China = 29,
            America = 28
        });
        this.Add(new CountryRenewableElectricityItem()
        {
            Year = @"2012",
            Europe = 69,
            China = 32,
            America = 26
        });
        this.Add(new CountryRenewableElectricityItem()
        {
            Year = @"2013",
            Europe = 58,
            China = 47,
            America = 38
        });
        this.Add(new CountryRenewableElectricityItem()
        {
            Year = @"2014",
            Europe = 40,
            China = 46,
            America = 31
        });
        this.Add(new CountryRenewableElectricityItem()
        {
            Year = @"2015",
            Europe = 78,
            China = 50,
            America = 19
        });
        this.Add(new CountryRenewableElectricityItem()
        {
            Year = @"2016",
            Europe = 13,
            China = 90,
            America = 52
        });
        this.Add(new CountryRenewableElectricityItem()
        {
            Year = @"2017",
            Europe = 78,
            China = 132,
            America = 50
        });
        this.Add(new CountryRenewableElectricityItem()
        {
            Year = @"2018",
            Europe = 40,
            China = 134,
            America = 34
        });
        this.Add(new CountryRenewableElectricityItem()
        {
            Year = @"2018",
            Europe = 40,
            China = 134,
            America = 34
        });
        this.Add(new CountryRenewableElectricityItem()
        {
            Year = @"2019",
            Europe = 80,
            China = 96,
            America = 38
        });
    }
}cs

using System;
using System.Net.Http;
using System.Collections.Generic;
using System.Threading.Tasks;
using System.Text;
using Microsoft.AspNetCore.Components.WebAssembly.Hosting;
using Microsoft.Extensions.Configuration;
using Microsoft.Extensions.DependencyInjection;
using Microsoft.Extensions.Logging;
using IgniteUI.Blazor.Controls; // for registering Ignite UI modules

namespace Infragistics.Samples
{
    public class Program
    {
        public static async Task Main(string[] args)
        {
            var builder = WebAssemblyHostBuilder.CreateDefault(args);
            builder.RootComponents.Add<App>("app");
            builder.Services.AddScoped(sp => new HttpClient { BaseAddress = new Uri(builder.HostEnvironment.BaseAddress) });
            // registering Ignite UI modules
            builder.Services.AddIgniteUIBlazor(
                typeof(IgbToolbarModule),
                typeof(IgbDataChartToolbarModule),
                typeof(IgbDataChartCoreModule),
                typeof(IgbDataChartCategoryModule),
                typeof(IgbDataChartAnnotationModule),
                typeof(IgbDataChartInteractivityModule),
                typeof(IgbDataChartCategoryTrendLineModule)
            );
            await builder.Build().RunAsync();
        }
    }
}cs


@using IgniteUI.Blazor.Controls
@using IgniteUI.Blazor.Controls
@using System

<style>
/*
CSS styles are loaded from the shared CSS file located at:
https://static.infragistics.com/xplatform/css/samples/
*/
#aboveContentSplit {
    display: flex;
    flex-direction: row;
}
#aboveContentLeftContainer {
    margin-left: 1.25rem;
    display: flex;
    flex-grow: 1;
    justify-content: start;
    align-items: end;
}
#aboveContentRightContainer {
    margin-right: 1.25rem;
    display: flex;
    flex-grow: 1;
    justify-content: end;
    align-items: end;
}
</style>
<div class="container vertical">
    <div id="aboveContentSplit">
        <div id="aboveContentLeftContainer">
            <IgbToolbar
            Name="toolbar"
            @ref="toolbar"
            Orientation="ToolbarOrientation.Horizontal"
            OnCommand="ToolbarToggleAnnotations">
                <IgbToolActionIconMenu
                Name="MenuForSubPanelTool"
                @ref="menuForSubPanelTool"
                IconCollectionName="ChartToolbarIcons"
                IconName="analyze">
                    <IgbToolActionGroupHeader
                    Name="SubPanelGroup"
                    @ref="subPanelGroup"
                    CloseOnExecute="true"
                    Title="Visualizations"
                    Subtitle="Layers">
                    </IgbToolActionGroupHeader>

                    <IgbToolActionSubPanel
                    Name="CustomSubPanelTools"
                    @ref="customSubPanelTools">
                        <IgbToolActionCheckbox
                        Name="EnableTooltipsLabel"
                        @ref="enableTooltipsLabel"
                        Title="Enable Tooltips"
                        CommandId="EnableTooltips">
                        </IgbToolActionCheckbox>

                        <IgbToolActionCheckbox
                        Name="EnableCrosshairsLabel"
                        @ref="enableCrosshairsLabel"
                        Title="Enable Crosshairs"
                        CommandId="EnableCrosshairs">
                        </IgbToolActionCheckbox>

                        <IgbToolActionCheckbox
                        Name="EnableFinalValuesLabel"
                        @ref="enableFinalValuesLabel"
                        Title="Enable Final Values"
                        CommandId="EnableFinalValues">
                        </IgbToolActionCheckbox>

                    </IgbToolActionSubPanel>

                </IgbToolActionIconMenu>

                <IgbToolActionLabel
                Name="zoomResetLabel"
                @ref="zoomResetLabel"
                Title="Reset"
                AfterId="ZoomOut"
                IconName="reset"
                IconCollectionName="ChartToolbarIcons"
                CommandId="ZoomReset"
                IsHighlighted="true">
                </IgbToolActionLabel>

                <IgbToolActionLabel
                Name="zoomResetHidden"
                @ref="zoomResetHidden"
                OverlayId="ZoomReset"
                Visibility="Visibility.Collapsed">
                </IgbToolActionLabel>

                <IgbToolActionIconMenu
                Name="AnalyzeMenu"
                @ref="analyzeMenu"
                OverlayId="AnalyzeMenu"
                Visibility="Visibility.Collapsed">
                </IgbToolActionIconMenu>

                <IgbToolActionLabel
                Name="CopyMenu"
                @ref="copyMenu"
                OverlayId="CopyMenu"
                Visibility="Visibility.Collapsed">
                </IgbToolActionLabel>

            </IgbToolbar>

        </div>
        <div id="aboveContentRightContainer">
            <!-- insert aboveContentRight -->
            <!-- end aboveContentRight -->
        </div>
    </div>
    <div class="container vertical fill">
        <IgbDataChart
        ComputedPlotAreaMarginMode="ComputedPlotAreaMarginMode.Series"
        IsHorizontalZoomEnabled="true"
        IsVerticalZoomEnabled="true"
        Name="chart"
        @ref="chart">
            <IgbCategoryXAxis
            Name="xAxis"
            @ref="xAxis"
            DataSource="CountryRenewableElectricity"
            Label="Year">
            </IgbCategoryXAxis>

            <IgbNumericYAxis
            Name="yAxis"
            @ref="yAxis"
            Title="TWh"
            LabelLocation="AxisLabelsLocation.OutsideRight">
            </IgbNumericYAxis>

            <IgbLineSeries
            Name="lineSeries1"
            @ref="lineSeries1"
            Title="Electricity"
            XAxisName="xAxis"
            YAxisName="yAxis"
            DataSource="CountryRenewableElectricity"
            ValueMemberPath="America">
            </IgbLineSeries>

            <IgbLineSeries
            Name="LineSeries2"
            @ref="lineSeries2"
            Title="Electricity"
            XAxisName="xAxis"
            YAxisName="yAxis"
            DataSource="CountryRenewableElectricity"
            ValueMemberPath="Europe">
            </IgbLineSeries>

            <IgbLineSeries
            Name="LineSeries3"
            @ref="lineSeries3"
            Title="Electricity"
            XAxisName="xAxis"
            YAxisName="yAxis"
            DataSource="CountryRenewableElectricity"
            ValueMemberPath="China">
            </IgbLineSeries>

        </IgbDataChart>

    </div>
</div>

@code {
    

    private Action BindElements { get; set; }

    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        var toolbar = this.toolbar;
        var menuForSubPanelTool = this.menuForSubPanelTool;
        var subPanelGroup = this.subPanelGroup;
        var customSubPanelTools = this.customSubPanelTools;
        var enableTooltipsLabel = this.enableTooltipsLabel;
        var enableCrosshairsLabel = this.enableCrosshairsLabel;
        var enableFinalValuesLabel = this.enableFinalValuesLabel;
        var zoomResetLabel = this.zoomResetLabel;
        var zoomResetHidden = this.zoomResetHidden;
        var analyzeMenu = this.analyzeMenu;
        var copyMenu = this.copyMenu;
        var chart = this.chart;
        var xAxis = this.xAxis;
        var yAxis = this.yAxis;
        var lineSeries1 = this.lineSeries1;
        var lineSeries2 = this.lineSeries2;
        var lineSeries3 = this.lineSeries3;

        this.BindElements = () => {
            toolbar.Target = this.chart;
        };
        this.BindElements();

    }

    private IgbToolbar toolbar;
    private IgbToolActionIconMenu menuForSubPanelTool;
    private IgbToolActionGroupHeader subPanelGroup;
    private IgbToolActionSubPanel customSubPanelTools;
    private IgbToolActionCheckbox enableTooltipsLabel;
    private IgbToolActionCheckbox enableCrosshairsLabel;
    private IgbToolActionCheckbox enableFinalValuesLabel;
    private IgbToolActionLabel zoomResetLabel;
    private IgbToolActionLabel zoomResetHidden;
    private IgbToolActionIconMenu analyzeMenu;
    private IgbToolActionLabel copyMenu;
    private IgbDataChart chart;
    private IgbCategoryXAxis xAxis;
    private IgbNumericYAxis yAxis;
    private IgbLineSeries lineSeries1;
    private IgbLineSeries lineSeries2;
    private IgbLineSeries lineSeries3;

    public void ToolbarToggleAnnotations(IgbToolCommandEventArgs args)
    {
        var target = this.chart;
        switch (args.Command.CommandId)
        {
            case "EnableTooltips":
                IgbSeries annotationSeries = null;
                foreach (var s in target.Series)
                {
                    if (s is IgbDataToolTipLayer)
                    {
                        annotationSeries = s;
                    }
                }

                if (annotationSeries == null) {
                    target.Series.Add(new IgbDataToolTipLayer());
                } else {
                    target.Series.Remove(annotationSeries);
                }
                break;
            case "EnableCrosshairs":
                IgbSeries crosshairSeries = null;

                foreach (var s in target.Series)
                {
                    if (s is IgbCrosshairLayer)
                    {
                        crosshairSeries = s;
                    }
                }

                if (crosshairSeries == null)
                {
                    target.Series.Add(new IgbCrosshairLayer());
                }
                else
                {
                    target.Series.Remove(crosshairSeries);
                }
                break;
            case "EnableFinalValues":
                IgbSeries finalValuesSeries = null;

                foreach (var s in target.Series)
                {
                    if (s is IgbFinalValueLayer)
                    {
                        finalValuesSeries = s;
                    }
                }

                if (finalValuesSeries == null)
                {
                    target.Series.Add(new IgbFinalValueLayer());
                }
                else
                {
                    target.Series.Remove(finalValuesSeries);
                }
                break;
    	}
    }

    private CountryRenewableElectricity _countryRenewableElectricity = null;
    public CountryRenewableElectricity CountryRenewableElectricity
    {
        get
        {
            if (_countryRenewableElectricity == null)
            {
                _countryRenewableElectricity = new CountryRenewableElectricity();
            }
            return _countryRenewableElectricity;
        }
    }

}razor

/*
CSS styles are loaded from the shared CSS file located at:
https://static.infragistics.com/xplatform/css/samples/
*/
#aboveContentSplit {
    display: flex;
    flex-direction: row;
}
#aboveContentLeftContainer {
    margin-left: 1.25rem;
    display: flex;
    flex-grow: 1;
    justify-content: start;
    align-items: end;
}
#aboveContentRightContainer {
    margin-right: 1.25rem;
    display: flex;
    flex-grow: 1;
    justify-content: end;
    align-items: end;
}
css

Blazor データチャートの統合

Blazor ツールバーには、Target プロパティが含まれています。これは、以下のコードに示すように、IgbDataChart などのコンポーネントをリンクするために使用されます。

  <IgbToolbar
    Name="Toolbar"
    @ref="toolbar"
    Target="@chart">
  <IgbToolbar>

  <IgbDataChart
    Name="chart"
    @ref="chart">
  </IgbDataChart>
razor

IgbDataChart が Toolbar にリンクされると、いくつかの既存の IgbToolAction 項目とメニューが使用可能になります。以下は、組み込みの Blazor IgbDataChart ツール操作とそれに関連付けられた OverlayId のリストです。

ズーム操作

ZoomReset: チャート上で ResetZoom メソッドを呼び出し、ズームレベルをデフォルトの位置にリセットする IgbToolActionLabel。
ZoomMenu: チャートのズームレベルを増減するためにチャート上で ZoomIn および ZoomOut メソッドを呼び出す 2 つの IgbToolActionLabel 項目を公開する IgbToolActionIconMenu。

トレンド操作

AnalyzeMenu: チャートのさまざまなオプションを構成するためのいくつかのオプションを含む IgbToolActionIconMenu。
AnalyzeHeader: サブセクションのヘッダー。
LinesMenu: チャート上で水平破線を表示するためのさまざまなツールが含まれるサブメニュー。
- LinesHeader: 次の 3 つのツールのサブメニューセクションヘッダー:
  - MaxValue: シリーズの最大値で yAxis に沿って水平破線を表示する IgbToolActionCheckbox。
  - MinValue: シリーズの最小値で yAxis に沿って水平破線を表示する IgbToolActionCheckbox。
  - Average: シリーズの平均値で yAxis に沿って水平破線を表示する IgbToolActionCheckbox。
TrendsMenu: さまざまな近似曲線を IgbDataChart プロット領域に適用するためのツールを含むサブメニュー。
- TrendsHeader: 次の 3 つのツールのサブメニューセクションヘッダー:
  - Exponential: チャート内の各シリーズの TrendLineType を ExponentialFit に設定する IgbToolActionRadio。
  - Linear: チャート内の各シリーズの TrendLineType を LinearFit に設定する IgbToolActionRadio。
  - Logarithmic: チャート内の各シリーズの TrendLineType を LogarithmicFit に設定する IgbToolActionRadio。
HelpersHeader: サブセクションのヘッダー。
SeriesAvg: Average タイプの ValueLayerValueMode を使用して、チャートのシリーズコレクションに IgbValueLayer を追加または削除する IgbToolActionCheckbox。
ValueLabelsMenu: IgbDataChart のプロット領域に注釈を表示するためのさまざまなツールを含むサブメニュー。
- ValueLabelsHeader: 次のツールのサブメニューセクションヘッダー:
  - ShowValueLabels: IgbCalloutLayer を使用してデータポイント値を切り替える IgbToolActionCheckbox。
  - ShowLastValueLabel: IgbFinalValueLayer を使用して最終値軸の注釈を切り替える IgbToolActionCheckbox。
ShowCrosshairs: チャートの CrosshairsDisplayMode プロパティを介してマウスオーバー十字線の注釈を切り替える IgbToolActionCheckbox。
ShowGridlines: X-Axis に MajorStroke を適用することで追加のグリッド線を切り替える IgbToolActionCheckbox。

画像に保存アクション

CopyAsImage: チャートをクリップボードにコピーするオプションを公開する IgbToolActionLabel。
CopyHeader: サブセクションのヘッダー。

SVG アイコン

ツールを手動で追加する場合、RenderIconFromText メソッドを使用してアイコンを割り当てることができます。このメソッドには 3 つのパラメーターを渡す必要があります。1 つ目は、ツールで定義されたアイコンコレクション名です (例: IconCollectionName)。2 つ目は、ツールで定義されたアイコンの名前 (例: IconName) で、その後に SVG 文字列を追加します。

データ URL アイコン

svg を追加するのと同様に、RegisterIconFromDataURL を介して URL からアイコン画像を追加することもできます。メソッドの 3 番目のパラメーターは、文字列 URL を入力するために使用されます。

次のスニペットは、アイコンを追加する両方の方法を示しています。

<IgbToolActionLabel
    Title="Custom Icon"
    IconName="CustomIcon"
    IconCollectionName="CustomCollection">
</IgbToolActionLabel>

@code {

    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        var toolbar = this.toolbar;

        if (firstRender) {
            this.ToolbarCustomIconOnViewInit();
        }
    }

    private IgbToolbar toolbar;

    public void ToolbarCustomIconOnViewInit()
    {
    	this.toolbar.EnsureReady().ContinueWith(new Action<Task>((e) =>
    	{
    		string icon =
    		@"
    			<svg width=""28px"" height=""28px"" stroke=""none"" viewBox=""0 0 3.5 3.5"" xmlns=""http://www.w3.org/2000/svg"" xmlns:xlink=""http://www.w3.org/1999/xlink"" aria-hidden=""true"" role=""img"" class=""iconify iconify--gis"" preserveAspectRatio=""xMidYMid meet""><path d=""M0.436 0.178a0.073 0.073 0 0 0 -0.062 0.036L0.01 0.846a0.073 0.073 0 0 0 0.063 0.109h0.729a0.073 0.073 0 0 0 0.063 -0.109L0.501 0.214a0.073 0.073 0 0 0 -0.064 -0.036zm0.001 0.219 0.238 0.413H0.199zM1.4 0.507v0.245h0.525v-0.245zm0.77 0v0.245h1.33v-0.245zM0.073 1.388A0.073 0.073 0 0 0 0 1.461v0.583a0.073 0.073 0 0 0 0.073 0.073h0.729A0.073 0.073 0 0 0 0.875 2.045V1.461a0.073 0.073 0 0 0 -0.073 -0.073zm0.073 0.146h0.583v0.438H0.146zM1.4 1.674v0.245h0.945v-0.245zm1.19 0v0.245h0.91v-0.245zM0.438 2.447c-0.241 0 -0.438 0.197 -0.438 0.438 0 0.241 0.197 0.438 0.438 0.438s0.438 -0.197 0.438 -0.438c0 -0.241 -0.197 -0.438 -0.438 -0.438zm0 0.146a0.291 0.291 0 0 1 0.292 0.292 0.291 0.291 0 0 1 -0.292 0.292 0.291 0.291 0 0 1 -0.292 -0.292A0.291 0.291 0 0 1 0.438 2.593zM1.4 2.842v0.245h0.525v-0.245zm0.77 0v0.245h1.33v-0.245z"" fill=""#000000"" fill-rule=""evenodd""/></svg>
    		";
    		this.toolbar.RegisterIconFromTextAsync("CustomCollection", "CustomIcon", icon);
    	}));
    }

}
razor

@code {

protected override async Task OnAfterRenderAsync(bool firstRender)
{
    var toolbar = this.toolbar;

    if (firstRender) {
        this.ToolbarCustomIconOnViewInit();
    }
}

private IgbToolbar toolbar;

public void ToolbarCustomIconOnViewInit()
{
	this.toolbar.EnsureReady().ContinueWith(new Action<Task>((e) =>
	{
        this.toolbar.RegisterIconFromDataURLAsync("CustomCollection", "CustomIcon", "https://www.svgrepo.com/show/678/calculator.svg");
	}));
}
typescript

}


```tsx
<IgrToolbar orientation="Vertical" />
autohotkey

垂直方向

デフォルトでは、Blazor ツールバーは水平に表示されますが、Orientation プロパティを設定することで垂直に表示することもできます。

<IgbToolbar Orientation="ToolbarOrientation.Vertical" />
razor

次の例は、Blazor ツールバーの垂直方向を示しています。

using System;
using System.Collections.Generic;
public class CountryRenewableElectricityItem
{
    public string Year { get; set; }
    public double Europe { get; set; }
    public double China { get; set; }
    public double America { get; set; }
}

public class CountryRenewableElectricity
    : List<CountryRenewableElectricityItem>
{
    public CountryRenewableElectricity()
    {
        this.Add(new CountryRenewableElectricityItem()
        {
            Year = @"2009",
            Europe = 34,
            China = 21,
            America = 19
        });
        this.Add(new CountryRenewableElectricityItem()
        {
            Year = @"2010",
            Europe = 43,
            China = 26,
            America = 24
        });
        this.Add(new CountryRenewableElectricityItem()
        {
            Year = @"2011",
            Europe = 66,
            China = 29,
            America = 28
        });
        this.Add(new CountryRenewableElectricityItem()
        {
            Year = @"2012",
            Europe = 69,
            China = 32,
            America = 26
        });
        this.Add(new CountryRenewableElectricityItem()
        {
            Year = @"2013",
            Europe = 58,
            China = 47,
            America = 38
        });
        this.Add(new CountryRenewableElectricityItem()
        {
            Year = @"2014",
            Europe = 40,
            China = 46,
            America = 31
        });
        this.Add(new CountryRenewableElectricityItem()
        {
            Year = @"2015",
            Europe = 78,
            China = 50,
            America = 19
        });
        this.Add(new CountryRenewableElectricityItem()
        {
            Year = @"2016",
            Europe = 13,
            China = 90,
            America = 52
        });
        this.Add(new CountryRenewableElectricityItem()
        {
            Year = @"2017",
            Europe = 78,
            China = 132,
            America = 50
        });
        this.Add(new CountryRenewableElectricityItem()
        {
            Year = @"2018",
            Europe = 40,
            China = 134,
            America = 34
        });
        this.Add(new CountryRenewableElectricityItem()
        {
            Year = @"2018",
            Europe = 40,
            China = 134,
            America = 34
        });
        this.Add(new CountryRenewableElectricityItem()
        {
            Year = @"2019",
            Europe = 80,
            China = 96,
            America = 38
        });
    }
}cs

using System;
using System.Net.Http;
using System.Collections.Generic;
using System.Threading.Tasks;
using System.Text;
using Microsoft.AspNetCore.Components.WebAssembly.Hosting;
using Microsoft.Extensions.Configuration;
using Microsoft.Extensions.DependencyInjection;
using Microsoft.Extensions.Logging;
using IgniteUI.Blazor.Controls; // for registering Ignite UI modules

namespace Infragistics.Samples
{
    public class Program
    {
        public static async Task Main(string[] args)
        {
            var builder = WebAssemblyHostBuilder.CreateDefault(args);
            builder.RootComponents.Add<App>("app");
            builder.Services.AddScoped(sp => new HttpClient { BaseAddress = new Uri(builder.HostEnvironment.BaseAddress) });
            // registering Ignite UI modules
            builder.Services.AddIgniteUIBlazor(
                typeof(IgbToolbarModule),
                typeof(IgbDataChartToolbarModule),
                typeof(IgbDataChartCoreModule),
                typeof(IgbDataChartCategoryModule),
                typeof(IgbDataChartAnnotationModule),
                typeof(IgbDataChartInteractivityModule),
                typeof(IgbAnnotationLayerProxyModule),
                typeof(IgbDataChartCategoryTrendLineModule)
            );
            await builder.Build().RunAsync();
        }
    }
}cs


@using IgniteUI.Blazor.Controls

<div class="container vertical">
    <div class="aboveContent">
        <IgbToolbar
        Name="toolbar"
        @ref="toolbar"
        Orientation="ToolbarOrientation.Vertical">
        </IgbToolbar>

    </div>
    <div class="container vertical fill">
        <IgbDataChart
        IsHorizontalZoomEnabled="true"
        Name="chart"
        @ref="chart">
            <IgbCategoryXAxis
            Name="xAxis"
            @ref="xAxis"
            DataSource="CountryRenewableElectricity"
            Label="Year">
            </IgbCategoryXAxis>

            <IgbNumericYAxis
            Name="yAxis"
            @ref="yAxis"
            Title="TWh"
            LabelLocation="AxisLabelsLocation.OutsideRight">
            </IgbNumericYAxis>

            <IgbLineSeries
            Name="lineSeries1"
            @ref="lineSeries1"
            Title="Electricity"
            XAxisName="xAxis"
            YAxisName="yAxis"
            DataSource="CountryRenewableElectricity"
            ValueMemberPath="America">
            </IgbLineSeries>

        </IgbDataChart>

    </div>
</div>

@code {
    

    private Action BindElements { get; set; }

    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        var toolbar = this.toolbar;
        var chart = this.chart;
        var xAxis = this.xAxis;
        var yAxis = this.yAxis;
        var lineSeries1 = this.lineSeries1;

        this.BindElements = () => {
            toolbar.Target = this.chart;
        };
        this.BindElements();

    }

    private IgbToolbar toolbar;
    private IgbDataChart chart;
    private IgbCategoryXAxis xAxis;
    private IgbNumericYAxis yAxis;
    private IgbLineSeries lineSeries1;

    private CountryRenewableElectricity _countryRenewableElectricity = null;
    public CountryRenewableElectricity CountryRenewableElectricity
    {
        get
        {
            if (_countryRenewableElectricity == null)
            {
                _countryRenewableElectricity = new CountryRenewableElectricity();
            }
            return _countryRenewableElectricity;
        }
    }

}razor

/*
CSS styles are loaded from the shared CSS file located at:
https://static.infragistics.com/xplatform/css/samples/
*/
css

Color Editor (カラーエディター)

Blazor Toolbar にカスタムカラーエディターツールを追加できます。このツールは、コマンドイベントと連携して、アプリケーションにカスタムスタイルを適用することもできます。

<IgbToolbar
Name="toolbar"
@ref="toolbar">
    <IgbToolActionColorEditor
    Title="Series Brush">
    </IgbToolActionColorEditor>
</IgbToolbar>
razor

次の例は、カラーエディターツールを使用して Blazor Data Chart シリーズブラシのスタイルを設定する方法を示しています。

using System;
using System.Collections.Generic;
public class CountryRenewableElectricityItem
{
    public string Year { get; set; }
    public double Europe { get; set; }
    public double China { get; set; }
    public double America { get; set; }
}

public class CountryRenewableElectricity
    : List<CountryRenewableElectricityItem>
{
    public CountryRenewableElectricity()
    {
        this.Add(new CountryRenewableElectricityItem()
        {
            Year = @"2009",
            Europe = 34,
            China = 21,
            America = 19
        });
        this.Add(new CountryRenewableElectricityItem()
        {
            Year = @"2010",
            Europe = 43,
            China = 26,
            America = 24
        });
        this.Add(new CountryRenewableElectricityItem()
        {
            Year = @"2011",
            Europe = 66,
            China = 29,
            America = 28
        });
        this.Add(new CountryRenewableElectricityItem()
        {
            Year = @"2012",
            Europe = 69,
            China = 32,
            America = 26
        });
        this.Add(new CountryRenewableElectricityItem()
        {
            Year = @"2013",
            Europe = 58,
            China = 47,
            America = 38
        });
        this.Add(new CountryRenewableElectricityItem()
        {
            Year = @"2014",
            Europe = 40,
            China = 46,
            America = 31
        });
        this.Add(new CountryRenewableElectricityItem()
        {
            Year = @"2015",
            Europe = 78,
            China = 50,
            America = 19
        });
        this.Add(new CountryRenewableElectricityItem()
        {
            Year = @"2016",
            Europe = 13,
            China = 90,
            America = 52
        });
        this.Add(new CountryRenewableElectricityItem()
        {
            Year = @"2017",
            Europe = 78,
            China = 132,
            America = 50
        });
        this.Add(new CountryRenewableElectricityItem()
        {
            Year = @"2018",
            Europe = 40,
            China = 134,
            America = 34
        });
        this.Add(new CountryRenewableElectricityItem()
        {
            Year = @"2018",
            Europe = 40,
            China = 134,
            America = 34
        });
        this.Add(new CountryRenewableElectricityItem()
        {
            Year = @"2019",
            Europe = 80,
            China = 96,
            America = 38
        });
    }
}cs

using System;
using System.Net.Http;
using System.Collections.Generic;
using System.Threading.Tasks;
using System.Text;
using Microsoft.AspNetCore.Components.WebAssembly.Hosting;
using Microsoft.Extensions.Configuration;
using Microsoft.Extensions.DependencyInjection;
using Microsoft.Extensions.Logging;
using IgniteUI.Blazor.Controls; // for registering Ignite UI modules

namespace Infragistics.Samples
{
    public class Program
    {
        public static async Task Main(string[] args)
        {
            var builder = WebAssemblyHostBuilder.CreateDefault(args);
            builder.RootComponents.Add<App>("app");
            builder.Services.AddScoped(sp => new HttpClient { BaseAddress = new Uri(builder.HostEnvironment.BaseAddress) });
            // registering Ignite UI modules
            builder.Services.AddIgniteUIBlazor(
                typeof(IgbToolbarModule),
                typeof(IgbToolActionComboModule),
                typeof(IgbToolActionColorEditorModule),
                typeof(IgbDataChartToolbarModule),
                typeof(IgbDataLegendModule),
                typeof(IgbNumberAbbreviatorModule),
                typeof(IgbDataChartCategoryModule),
                typeof(IgbDataChartCoreModule),
                typeof(IgbDataChartCategoryModule),
                typeof(IgbDataChartAnnotationModule),
                typeof(IgbDataChartInteractivityModule),
                typeof(IgbDataChartAnnotationModule)
            );
            await builder.Build().RunAsync();
        }
    }
}cs


@using IgniteUI.Blazor.Controls
@using IgniteUI.Blazor.Controls
@using System

<style>
/*
CSS styles are loaded from the shared CSS file located at:
https://static.infragistics.com/xplatform/css/samples/
*/
#aboveContentSplit {
    display: flex;
    flex-direction: row;
}
#aboveContentLeftContainer {
    margin-left: 1.25rem;
    display: flex;
    flex-grow: 1;
    justify-content: start;
    align-items: end;
}
#aboveContentRightContainer {
    margin-right: 1.25rem;
    display: flex;
    flex-grow: 1;
    justify-content: end;
    align-items: end;
}
</style>
<div class="container vertical">
    <div id="aboveContentSplit">
        <div id="aboveContentLeftContainer">
            <IgbToolbar
            Name="toolbar"
            @ref="toolbar"
            OnCommand="ColorEditorToggleSeriesBrush">
                <IgbToolActionColorEditor
                Title="Series Brush"
                Name="colorEditorTool"
                @ref="colorEditorTool"
                CommandId="ToggleSeriesBrush">
                </IgbToolActionColorEditor>

            </IgbToolbar>

        </div>
        <div id="aboveContentRightContainer">
            <!-- insert aboveContentRight -->
            <!-- end aboveContentRight -->
        </div>
    </div>
    <div class="container vertical fill">
        <IgbDataChart
        IsHorizontalZoomEnabled="true"
        Name="chart"
        @ref="chart">
            <IgbCategoryXAxis
            Name="xAxis"
            @ref="xAxis"
            DataSource="CountryRenewableElectricity"
            Label="Year">
            </IgbCategoryXAxis>

            <IgbNumericYAxis
            Name="yAxis"
            @ref="yAxis"
            Title="TWh"
            LabelLocation="AxisLabelsLocation.OutsideRight">
            </IgbNumericYAxis>

            <IgbLineSeries
            Name="lineSeries1"
            @ref="lineSeries1"
            Title="Electricity"
            XAxisName="xAxis"
            YAxisName="yAxis"
            DataSource="CountryRenewableElectricity"
            ValueMemberPath="America"
            MarkerType="MarkerType.None">
            </IgbLineSeries>

        </IgbDataChart>

    </div>
</div>

@code {
    

    private Action BindElements { get; set; }

    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        var toolbar = this.toolbar;
        var colorEditorTool = this.colorEditorTool;
        var chart = this.chart;
        var xAxis = this.xAxis;
        var yAxis = this.yAxis;
        var lineSeries1 = this.lineSeries1;

        this.BindElements = () => {
            toolbar.Target = this.chart;
        };
        this.BindElements();

    }

    private IgbToolbar toolbar;
    private IgbToolActionColorEditor colorEditorTool;
    private IgbDataChart chart;
    private IgbCategoryXAxis xAxis;
    private IgbNumericYAxis yAxis;
    private IgbLineSeries lineSeries1;

    public void ColorEditorToggleSeriesBrush(IgbToolCommandEventArgs args)
    {
    	var target = this.chart;
        var color = args.Command.ArgumentsList[0].Value;
        switch (args.Command.CommandId)
        {
            case "ToggleSeriesBrush":
                IgbSeries series = target.ContentSeries[0];
                series.Brush = color.ToString();
            break;
        }

    }

    private CountryRenewableElectricity _countryRenewableElectricity = null;
    public CountryRenewableElectricity CountryRenewableElectricity
    {
        get
        {
            if (_countryRenewableElectricity == null)
            {
                _countryRenewableElectricity = new CountryRenewableElectricity();
            }
            return _countryRenewableElectricity;
        }
    }

}razor

/*
CSS styles are loaded from the shared CSS file located at:
https://static.infragistics.com/xplatform/css/samples/
*/
#aboveContentSplit {
    display: flex;
    flex-direction: row;
}
#aboveContentLeftContainer {
    margin-left: 1.25rem;
    display: flex;
    flex-grow: 1;
    justify-content: start;
    align-items: end;
}
#aboveContentRightContainer {
    margin-right: 1.25rem;
    display: flex;
    flex-grow: 1;
    justify-content: end;
    align-items: end;
}
css

Blazor ツールバーの例

依存関係

使用方法

ツール操作

Blazor データチャートの統合

SVG アイコン

データ URL アイコン

垂直方向

Color Editor (カラーエディター)

API リファレンス

その他のリソース

Blazor Toolbar (ツールバー) の概要

Blazor ツールバーの例

依存関係

使用方法

ツール操作

Blazor データ チャートの統合

SVG アイコン

データ URL アイコン

垂直方向

Color Editor (カラー エディター)

API リファレンス

その他のリソース

Blazor データチャートの統合

Color Editor (カラーエディター)