Actualización de paneles Blazor en Dock Manager

El componente Infragistics Blazor Dock Manager le proporciona el diseño para crear contenido interactivo en su aplicación utilizando paneles que pueden actualizarse en función de las acciones de los usuarios finales.

Blazor Updating Panes in Dock Manager Example

EXAMPLE

MODULES

DATA GENERATOR

DATA SOURCE

RAZOR

CSS

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(IgbDockManagerModule),
                typeof(IgbDataChartInteractivityModule),
                typeof(IgbGeographicMapModule),
                typeof(IgbCategoryChartModule)
);
            await builder.Build().RunAsync();
        }
    }
}csコピー

using System;
using System.Collections.Generic;
using System.Linq;

namespace Infragistics.Samples
{
    public static class DataGenerator
    {
        readonly static string[] websites = { ".com", ".gov", ".edu", ".org" };
        readonly static string[] emails = { "gmail.com", "yahoo.com", "twitter.com" };
        readonly static string[] genders = { "male", "female" };
        readonly static string[] maleNames = { "Kyle", "Oscar", "Ralph", "Mike", "Bill", "Frank", "Howard", "Jack", "Larry", "Pete", "Steve", "Vince", "Mark", "Alex", "Max", "Brian", "Chris", "Andrew", "Martin", "Mike", "Steve", "Glenn", "Bruce" };
        readonly static string[] femaleNames = { "Gina", "Irene", "Katie", "Brenda", "Casey", "Fiona", "Holly", "Kate", "Liz", "Pamela", "Nelly", "Marisa", "Monica", "Anna", "Jessica", "Sofia", "Isabella", "Margo", "Jane", "Audrey", "Sally", "Melanie", "Greta", "Aurora", "Sally" };
        readonly static string[] lastNames = { "Adams", "Crowley", "Ellis", "Martinez", "Irvine", "Maxwell", "Clark", "Owens", "Rooney", "Lincoln", "Thomas", "Spacey", "MOrgan", "King", "Newton", "Fitzgerald", "Holmes", "Jefferson", "Landry", "Berry", "Perez", "Spencer", "Starr", "Carter", "Edwards", "Stark", "Johnson", "Fitz", "Chief", "Blanc", "Perry", "Stone", "Williams", "Lane", "Jobs", "Adams", "Power", "Tesla" };
        readonly static string[] countries = { "USA", "UK", "France", "Canada", "Poland" };
        readonly static string[] citiesUS = { "New York", "Los Angeles", "Miami", "San Francisco", "San Diego", "Las Vegas" };
        readonly static string[] citiesUK = { "London", "Liverpool", "Manchester" };
        readonly static string[] citiesFR = { "Paris", "Marseille", "Lyon" };
        readonly static string[] citiesCA = { "Toronto", "Vancouver", "Montreal" };
        readonly static string[] citiesPL = { "Krakow", "Warsaw", "Wroclaw", "Gdansk" };
        readonly static string[] citiesJP = { "Tokyo", "Osaka", "Kyoto", "Yokohama" };
        readonly static string[] citiesGR = { "Berlin", "Bonn", "Cologne", "Munich", "Hamburg" };
        readonly static string[] roadSuffixes = { "Road", "Street", "Way" };
        readonly static string[] roadNames = { "Main", "Garden", "Broad", "Oak", "Cedar", "Park", "Pine", "Elm", "Market", "Hill" };

        public static Random Rand = new Random();

        public static string GetWebsite()
        {
            return GetItem(websites);
        }

        public static string GetEmail()
        {
            return GetItem(emails);
        }

        public static double GetNumber(double min, double max)
        {
            return Math.Round(min + (Rand.NextDouble() * (max - min)));
        }

        public static int GetInteger(double min, double max)
        {
            return (int)GetNumber(min, max);
        }

        public static string GetPhone()
        {
            var phoneCode = GetNumber(100, 900);
            var phoneNum1 = GetNumber(100, 900);
            var phoneNum2 = GetNumber(1000, 9000);
            var phone = phoneCode + "-" + phoneNum1 + "-" + phoneNum2;
            return phone;
        }

        public static string GetGender()
        {
            return GetItem(genders);
        }

        public static string GetNameFirst(string gender)
        {
            if (gender == "male")
                return GetItem(maleNames);
            else
                return GetItem(femaleNames);
        }

        public static string GetNameLast()
        {
            return GetItem(lastNames);
        }

        public static string GetItem(string[] array)
        {
            var index = (int)Math.Round(GetNumber(0, array.Length - 1));
            return array[index];
        }

        public static string GetCountry()
        {
            return GetItem(countries);
        }

        public static string GetCity(string country)
        {
            if (country == "Canada")
            {
                return GetItem(citiesCA);
            }
            else if (country == "France")
            {
                return GetItem(citiesFR);
            }
            else if (country == "Poland")
            {
                return GetItem(citiesPL);
            }
            else if (country == "USA")
            {
                return GetItem(citiesUS);
            }
            else if (country == "Japan")
            {
                return GetItem(citiesJP);
            }
            else if (country == "Germany")
            {
                return GetItem(citiesGR);
            }
            else
            { // if (country === "United Kingdom") {
                return GetItem(citiesUK);
            }
        }

        public static string GetStreet()
        {
            var num = Math.Round(GetNumber(100, 300)).ToString();
            var road = GetItem(roadNames);
            var suffix = GetItem(roadSuffixes);
            return num + " " + road + " " + suffix;
        }

        public static DateTime GetBirthday()
        {
            var year = DateTime.Now.Year - GetInteger(30, 50);
            var month = GetNumber(10, 12);
            var day = GetNumber(20, 27);
            return new DateTime(year, (int)month, (int)day);
        }

        public static DateTime GetDate()
        {
            var year = DateTime.Now.Year;
            var month = GetNumber(10, 12);
            var day = GetNumber(20, 27);
            return new DateTime(year, (int)month, (int)day);
        }

        public static string Pad(int num, int size)
        {
            var s = num + "";
            while (s.Length < size)
            {
                s = "0" + s;
            }
            return s;
        }

        public static string GetPhotoMale(int id)
        {
            return "https://static.infragistics.com/xplatform/images/people/GUY" + Pad(id, 2) + ".png";
        }

        public static string GetPhotoFemale(int id)
        {
            return "https://static.infragistics.com/xplatform/images/people/GIRL" + Pad(id, 2) + ".png";
        }

        private static int maleCount = 0;
        private static int femaleCount = 0;
        public static string GetPhoto(string gender)
        {
            if (gender == "male")
            {
                maleCount++;
                if (maleCount > 24) maleCount = 1;
                return GetPhotoMale(maleCount);
            }
            else
            {
                femaleCount++;
                if (femaleCount > 24) femaleCount = 1;
                return GetPhotoFemale(femaleCount);
            }
        }

        public static string GetGenderPhoto(string gender)
        {
            return "https://static.infragistics.com/xplatform/images/genders/" + gender + ".png";
        }

        public static string GetCountryFlag(string country)
        {
            return "https://static.infragistics.com/xplatform/images/flags/" + country + ".png";
        }

        public static string GetIncomeRange(double salary)
        {
            if (salary < 50000)
            {
                return "Low";
            }
            else if (salary < 100000)
            {
                return "Average";
            }
            else
            {
                return "High";
            }
        }

    }

}csコピー

using System;
using System.Collections.Generic;
using System.ComponentModel;

namespace Infragistics.Samples
{
    public class PersonLocation
    {
        public string City { get; set; }
        public double Latitude  { get; set; }
        public double Longitude { get; set; }

        private string _Country;
        public string Country
        {
            get { return _Country; }
            set { if (_Country != value) { OnCountryChanged(value); } }
        }

        public string CountryFlag { get; set; }

        protected void OnCountryChanged(string countryName)
        {
            // syncronizing country name and country flag
            _Country = countryName;
            CountryFlag = DataGenerator.GetCountryFlag(countryName);
            OnPropertyChanged("Country");
        }

        public event PropertyChangedEventHandler PropertyChanged;
        protected virtual void OnPropertyChanged(string propertyName)
        {
            PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
        }

    }

    public class PersonInfo : PersonLocation, INotifyPropertyChanged
    {
        public string ID { get; set; }
        public string Address { get; set; }
        public double Age { get; set; }
        public string Gender { get; set; }
        public string FirstName { get; set; }
        public string LastName { get; set; }
        public string Name { get; set; }
        public string Street { get; set; }
        public string Email { get; set; }
        public string Phone { get; set; }
        public string Photo { get; set; }
        public double Salary { get; set; }
        public double Sales { get; set; }
        public string Income { get; set; }
        public int Index { get; set; }
        public string Background { get; set; }

        public DateTime Birthday { get; set; }
        public List<PersonProductivity> Productivity { get; set; }

    }

    public class PersonProductivity
    {
        public double Value { get; set; }
        public string Month { get; set; }
    }

    public static class PersonDataSource
    {
        public static List<PersonInfo> Create(int? count)
        {
            if (count == null) count = 100;

            var locations = GetLocations();

            var managers = new List<PersonInfo>();
            for (int i = 0; i < count; i++)
            {
                var age = Math.Round(DataGenerator.GetNumber(20, 40));
                var gender = DataGenerator.GetGender();
                var firstName = DataGenerator.GetNameFirst(gender);
                var lastName = DataGenerator.GetNameLast();
                var street = DataGenerator.GetStreet();
                var email = firstName.ToLower() + "@" + DataGenerator.GetEmail();
                var photoPath = DataGenerator.GetPhoto(gender);

                var manager = new PersonInfo
                {
                    Index = i,
                    Age = age,
                    Birthday = DataGenerator.GetBirthday(),
                    Email = email,
                    Gender = gender,
                    ID = DataGenerator.Pad(1001 + i, 4),
                    Name = firstName + " " + lastName,
                    Photo = photoPath,
                    Phone = DataGenerator.GetPhone(),
                    Salary = DataGenerator.GetNumber(40, 200) * 1000,
                    Sales = DataGenerator.GetNumber(200, 980) * 1000,
                    Background = "Transparent",

                };

                var location = GetRandom(locations);
                manager.Address = street + ", " + location.City;
                manager.City = location.City;
                manager.Country = location.Country;
                manager.Latitude = location.Latitude;
                manager.Longitude = location.Longitude;
                manager.Income = DataGenerator.GetIncomeRange(manager.Salary);
                manager.Productivity = GetProductivity();

                managers.Add(manager);
            }

            return managers;
        }

        public static List<PersonProductivity> GetProductivity()
        {
            var productivity = new List<PersonProductivity>();
            var months = new List<string> {
                "JAN", "FEB", "MAR", "APR", "MAY", "JUN",
                "JUL", "AUG", "SEP", "OCT", "NOV", "DEC" };

            var value = 50.0;
            for (var i = 0; i < months.Count; i++)
            {
                value += DataGenerator.GetNumber(-5, 10);
                var prod = new PersonProductivity
                {
                    Value = value,
                    Month = months[i]
                };
                productivity.Add(prod);
            };

            return productivity;
        }

        public static PersonLocation GetRandom(List<PersonLocation> array)
        {
            var index = (int)Math.Round(DataGenerator.GetNumber(0, array.Count - 1));
            return array[index];
        }

        public static List<PersonLocation> GetLocations()
        {
            var locations = new List<PersonLocation> {
                new PersonLocation { Latitude = 54.689, Longitude = 25.276, Country = "Lithuania", City = "Vilnius" },
                new PersonLocation { Latitude = 53.900, Longitude = 27.576, Country = "Belarus", City = "Minsk" },
                new PersonLocation { Latitude = 53.342, Longitude = -6.257, Country = "Ireland", City = "Dublin" },
                new PersonLocation { Latitude = 52.516, Longitude = 13.328, Country = "Germany", City = "Berlin" },
                new PersonLocation { Latitude = 52.373, Longitude = 4.895, Country = "Netherlands", City = "Amsterdam" },
                new PersonLocation { Latitude = 52.245, Longitude = 21.012, Country = "Poland", City = "Warsaw" },
                new PersonLocation { Latitude = 51.488, Longitude = -0.178, Country = "UK", City = "London" },
                new PersonLocation { Latitude = 50.448, Longitude = 30.502, Country = "Ukraine", City = "Kiev" },
                new PersonLocation { Latitude = 50.106, Longitude = 14.457, Country = "Czech-Republic", City = "Prague" },
                new PersonLocation { Latitude = 48.882, Longitude = 2.433, Country = "France", City = "Paris" },
                new PersonLocation { Latitude = 48.202, Longitude = 16.321, Country = "Austria", City = "Vienna" },
                new PersonLocation { Latitude = 47.515, Longitude = 19.094, Country = "Hungary", City = "Budapest" },
                new PersonLocation { Latitude = 46.948, Longitude = 7.446, Country = "Switzerland", City = "Bern" },
                new PersonLocation { Latitude = 45.374, Longitude = -75.651, Country = "Canada", City = "Ottawa" },
                new PersonLocation { Latitude = 43.255, Longitude = 76.913, Country = "Kazakhstan", City = "Almaty" },
                new PersonLocation { Latitude = 42.707, Longitude = 23.332, Country = "Bulgaria", City = "Sofia" },
                new PersonLocation { Latitude = 41.722, Longitude = 44.783, Country = "Georgia", City = "Tbilisi" },
                new PersonLocation { Latitude = 40.442, Longitude = -3.691, Country = "Spain", City = "Madrid" },
                new PersonLocation { Latitude = 39.929, Longitude = 32.853, Country = "Turkey", City = "Ankara" },
                new PersonLocation { Latitude = 39.906, Longitude = 116.388, Country = "China", City = "Beijing" },
                new PersonLocation { Latitude = 39.029, Longitude = 125.758, Country = "Korea-North", City = "Pyongyang" },
                new PersonLocation { Latitude = 38.891, Longitude = -76.954, Country = "USA", City = "Washington" },
                new PersonLocation { Latitude = 37.950, Longitude = 58.390, Country = "Turkmenistan", City = "Ashkhabad" },
                new PersonLocation { Latitude = 37.542, Longitude = 126.935, Country = "Korea-South", City = "Seoul" },
                new PersonLocation { Latitude = 36.819, Longitude = 10.166, Country = "Tunisia", City = "Tunis" },
                new PersonLocation { Latitude = 35.774, Longitude = 51.448, Country = "Iran", City = "Tehran" },
                new PersonLocation { Latitude = 35.683, Longitude = 139.809, Country = "Japan", City = "Tokyo" },
                new PersonLocation { Latitude = 34.531, Longitude = 69.137, Country = "Afghanistan", City = "Kabul" },
                new PersonLocation { Latitude = 33.718, Longitude = 73.061, Country = "Pakistan", City = "Islamabad" },
                new PersonLocation { Latitude = 33.519, Longitude = 36.313, Country = "Syria", City = "Damascus" },
                new PersonLocation { Latitude = 33.334, Longitude = 44.398, Country = "Iraq", City = "Baghdad" },
                new PersonLocation { Latitude = 31.949, Longitude = 35.933, Country = "Jordan", City = "Amman" },
                new PersonLocation { Latitude = 30.078, Longitude = 31.251, Country = "Egypt", City = "Cairo" },
                new PersonLocation { Latitude = 28.569, Longitude = 77.217, Country = "India", City = "New Delhi" },
                new PersonLocation { Latitude = 27.712, Longitude = 85.313, Country = "Nepal", City = "Kathmandu" },
                new PersonLocation { Latitude = 25.204, Longitude = 51.497, Country = "Qatar", City = "Doha" },
                new PersonLocation { Latitude = 25.035, Longitude = 121.507, Country = "Taiwan", City = "Taipei" },
                new PersonLocation { Latitude = 23.710, Longitude = 90.407, Country = "Bangladesh", City = "Dhaka" },
                new PersonLocation { Latitude = 21.032, Longitude = 105.820, Country = "Vietnam", City = "Hanoi" },
                new PersonLocation { Latitude = 19.427, Longitude = -99.128, Country = "Mexico", City = "Mexico City" },
                new PersonLocation { Latitude = 18.527, Longitude = -72.343, Country = "Haiti", City = "Port-au-Prince" },
                new PersonLocation { Latitude = 18.016, Longitude = -76.797, Country = "Jamaica", City = "Kingston" },
                new PersonLocation { Latitude = 16.872, Longitude = 96.125, Country = "Myanmar", City = "Rangoon" },
                new PersonLocation { Latitude = 15.361, Longitude = 44.210, Country = "Yemen", City = "Sanaa" },
                new PersonLocation { Latitude = 14.618, Longitude = -90.525, Country = "Guatemala", City = "Guatemala" },
                new PersonLocation { Latitude = 14.099, Longitude = -87.203, Country = "Honduras", City = "Tegucigalpa" },
                new PersonLocation { Latitude = 13.746, Longitude = 100.553, Country = "Thailand", City = "Bangkok" },
                new PersonLocation { Latitude = 13.605, Longitude = 2.083, Country = "Niger", City = "Niamey" },
                new PersonLocation { Latitude = 12.653, Longitude = -7.986, Country = "Mali", City = "Bamako" },
                new PersonLocation { Latitude = 12.151, Longitude = -86.273, Country = "Nicaragua", City = "Managua" },
                new PersonLocation { Latitude = 10.496, Longitude = -66.898, Country = "Venezuela", City = "Caracas" },
                new PersonLocation { Latitude = 9.930, Longitude = -84.079, Country = "Costa-Rica", City = "San Jose" },
                new PersonLocation { Latitude = 5.559, Longitude = -0.201, Country = "Ghana", City = "Accra" },
                new PersonLocation { Latitude = 5.325, Longitude = -4.022, Country = "Ivory-Coast", City = "Abidjan" },
                new PersonLocation { Latitude = 4.630, Longitude = -74.081, Country = "Colombia", City = "Bogota" },
                new PersonLocation { Latitude = 3.865, Longitude = 11.514, Country = "Cameroon", City = "Yaounde" },
            };
            return locations;
        }

    }
}csコピー

@using IgniteUI.Blazor.Controls

<div class="container vertical">
    <div class="container vertical" style="overflow: hidden;">

        @*NOTE: code in npmJS\src\DockManagerUpdatingPanes.js file sets layout of these DIV elements:*@
        <IgbDockManager @ref="dockManager" Layout="Layout" height="100%" width="100%">
            <div slot="content1">
                @if (this.EmployeeList != null)
                {
                     @foreach (var employee in this.EmployeeList)
                     {
                         <div style="background: @employee.Background; display: flex; flex-direction: row; align-items: center; cursor: pointer; padding: 0.5rem"
                              @onclick="@(e => onClick(employee))">
                             <img style="height: 3rem; width: 3rem" src="@employee.Photo"/>
                             <div style="padding-left: 1rem">@employee.Name</div>
                         </div>
                     }
                }
            </div>

            <div slot="content2" style="height: 100%; width: 100%; overflow: hidden;">
                <IgbCategoryChart @ref="ProductivityChart" Height="100%" Width="100%"
                               ChartTitle="@EmployeeSelectedInfo"
                               TitleTopMargin="10"
                               ChartType="CategoryChartType.Column"
                               ToolTipType="ToolTipType.Item"
                               CrosshairsDisplayMode="CrosshairsDisplayMode.Both"
                               CrosshairsAnnotationEnabled="true"
                               IsSeriesHighlightingEnabled="true"
                               IsTransitionInEnabled="true"
                               YAxisMaximumValue="100"
                               YAxisMinimumValue="40"/>
            </div>

            <div slot="content3" style="height: 100%; width: 100%; overflow: hidden;">
                <IgbGeographicMap @ref="GeoMap" Height="100%" Width="100%" Zoomable="true"
                               BackgroundContent="@GeoImagery">
                      <IgbGeographicSymbolSeries
                               DataSource="EmployeeList"
                               MarkerType="MarkerType.Circle"
                               LatitudeMemberPath="Latitude"
                               LongitudeMemberPath="Longitude"
                               MarkerBrush="White"
                               MarkerOutline="Red" />

                      <IgbGeographicSymbolSeries @ref="GeoSeries"
                               DataSource="EmployeeSelected"
                               MarkerType="MarkerType.Circle"
                               LatitudeMemberPath="Latitude"
                               LongitudeMemberPath="Longitude"
                               MarkerBrush="White"
                               MarkerOutline="DarkViolet" />
                </IgbGeographicMap>
            </div>

        </IgbDockManager>
    </div>
</div>

@code {

    public IgbDockManager dockManager { get; set; }
    public IgbDockManagerLayout Layout { get; set; }
    protected List<PersonInfo> EmployeeList;
    protected List<PersonInfo> EmployeeSelected;
    protected IgbArcGISOnlineMapImagery GeoImagery;
    protected IgbGeographicSymbolSeries GeoSeries;
    protected IgbGeographicMap GeoMap;
    protected Rect GeoBounds;
    protected IgbCategoryChart ProductivityChart;
    protected string EmployeeSelectedInfo;

    protected override void OnInitialized()
    {

        Layout = new IgbDockManagerLayout();
        Layout.RootPane = new IgbSplitPane();
        Layout.RootPane.Size = 200;
        Layout.RootPane.PaneType = DockManagerPaneType.SplitPane;
        Layout.RootPane.Orientation = SplitPaneOrientation.Horizontal;

        var rootPane = new IgbDockManagerPaneCollection(null, null);
        var splitpane1 = new IgbSplitPane { PaneType = DockManagerPaneType.SplitPane, Orientation = SplitPaneOrientation.Vertical };
        var splitpane2 = new IgbSplitPane { PaneType = DockManagerPaneType.SplitPane, Orientation = SplitPaneOrientation.Vertical, Size=200 };
        var contentpane1 = new IgbContentPane { PaneType = DockManagerPaneType.ContentPane, Header = "Managers List", ContentId = "content1" };
        var contentpane2 = new IgbContentPane { PaneType = DockManagerPaneType.ContentPane, Header = "Manager's Productivity", ContentId = "content2" };
        var contentpane3 = new IgbContentPane { PaneType = DockManagerPaneType.ContentPane, Header = "Managers Location", ContentId = "content3" };

        splitpane1.Panes.Add(contentpane1);
        splitpane2.Panes.Add(contentpane2);
        splitpane2.Panes.Add(contentpane3);
        Layout.RootPane.Panes.Add(splitpane1);
        Layout.RootPane.Panes.Add(splitpane2);
    }

    protected override async Task OnInitializedAsync()
    {
        this.GeoBounds = new Rect() { Left = - 150, Top = - 60, Width = 315, Height = 140 };

        this.GeoImagery = new IgbArcGISOnlineMapImagery();
        this.GeoImagery.MapServerUri = "https://services.arcgisonline.com/ArcGIS/rest/services/World_Street_Map/MapServer";

        this.EmployeeList = PersonDataSource.Create(200);
        this.EmployeeList[0].Background = "#a8d3fd";
        this.EmployeeSelected =  new List<PersonInfo> { this.EmployeeList[0] };
        this.EmployeeSelectedInfo = this.EmployeeList[0].Name + " (" + this.EmployeeList[0].City + ", " + this.EmployeeList[0].Country + ")";
    }

    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        if (firstRender)
        {
            if (this.ProductivityChart != null)
            {
                this.ProductivityChart.DataSource = this.EmployeeList[0].Productivity;
            }
        }
    }

    private void onClick(PersonInfo selectedManager)
    {
        this.EmployeeSelected = new List<PersonInfo> { selectedManager };
        this.EmployeeSelectedInfo = selectedManager.Name + " (" + selectedManager.City + ", " + selectedManager.Country + ")";
        this.ProductivityChart.DataSource = selectedManager.Productivity;

        this.ZoomMapToLocationOf(selectedManager);

        foreach(var employee in this.EmployeeList)
        {
            if (employee.ID != selectedManager.ID) {
                employee.Background = "transparent";
            } else {
                employee.Background = "#a8d3fd";
            }
        }
    }

    private void ZoomMapToLocationOf(PersonInfo selectedManager)
    {
        var geoZoom = new Rect();
        geoZoom.Width = 30;
        geoZoom.Height = 20;
        geoZoom.Left = selectedManager.Longitude - (geoZoom.Width  / 2);
        geoZoom.Top  = selectedManager.Latitude  - (geoZoom.Height / 2);
        this.GeoMap.ZoomToGeographic(geoZoom);
    }
}razorコピー

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

Like this sample? Get access to our complete Ignite UI for Blazor toolkit and start building your own apps in minutes. Download it for free.

最速のデータ グリッド、高性能なチャート、すぐに使用できる機能のフルセットなどを含む 60 以上の再利用可能なコンポーネント を使用して、最新の Web エクスペリエンスを構築します。

無料で試してみる

API References

• IgbDockManager