Popups in ArcGIS Runtime SDK for .NET

10659
20
02-09-2017 08:29 AM
MichaelStruk
New Contributor II

Hi

Are popups available in the ArcGIS Runtime SDK for .NET 100.0?

If popups are available, how we can use them?

Thank you

Tags (1)
0 Kudos
20 Replies
dotMorten_esri
Esri Notable Contributor

You can override the Callout style like this:

<esri:MapView>
    <esri:MapView.Resources>
        <Style TargetType="esri:Callout">
            <Setter Property="BorderBrush" Value="Red" />
            <Setter Property="BorderThickness" Value="5" />
        </Style>
    </esri:MapView.Resources>
</esri:MapView>

There's a lot of properties to override, but you might have to adapt your layout to the callout's style (ie make the background the same blue color, and remove your own border, reduce padding/margins etc.

For reference here's the full callout style defined:

    <Style TargetType="{x:Type local:Callout}">
        <Setter Property="MinWidth" Value="75" />
        <Setter Property="Padding" Value="10" />
        <Setter Property="Background" Value="#E6FFFFFF" />
        <Setter Property="Foreground" Value="Black" />
        <Setter Property="BorderBrush" Value="LightGray" />
        <Setter Property="BorderThickness" Value="1" />
        <Setter Property="HorizontalContentAlignment" Value="Center" />
        <Setter Property="VerticalContentAlignment" Value="Center" />
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type local:Callout}">
                    <Grid x:Name="RootElement">
                        <VisualStateManager.VisualStateGroups>
                            <VisualStateGroup x:Name="EntranceTransitions">
                                <VisualState x:Name="Show">
                                    <Storyboard>
                                        <DoubleAnimation Duration="0:0:0.1" From="0" To="1" Storyboard.TargetName="RootElement" Storyboard.TargetProperty="Opacity" >
                                            <DoubleAnimation.EasingFunction>
                                                <CubicEase />
                                            </DoubleAnimation.EasingFunction>
                                        </DoubleAnimation>
                                    </Storyboard>
                                </VisualState>
                                <VisualState x:Name="Hide">
                                    <Storyboard>
                                        <DoubleAnimation Duration="0:0:0" To="0" Storyboard.TargetName="RootElement" Storyboard.TargetProperty="Opacity" />
                                    </Storyboard>
                                </VisualState>
                            </VisualStateGroup>
                            <VisualStateGroup x:Name="Visibility">
                                <VisualState x:Name="Visible">
                                    <Storyboard>
                                        <DoubleAnimation Duration="0:0:0.25" To="1" Storyboard.TargetName="RootElement" Storyboard.TargetProperty="Opacity" />
                                    </Storyboard>
                                </VisualState>
                                <VisualState x:Name="HiddenByElevation">
                                    <Storyboard>
                                        <DoubleAnimation Duration="0:0:0.25" To=".3" Storyboard.TargetName="RootElement" Storyboard.TargetProperty="Opacity" />
                                    </Storyboard>
                                </VisualState>
                            </VisualStateGroup>
                        </VisualStateManager.VisualStateGroups>
                        <Path x:Name="PART_Border" Fill="{TemplateBinding Background}" Stretch="None" Stroke="{TemplateBinding BorderBrush}" 
                              DataContext="{TemplateBinding BorderThickness}" StrokeThickness="{Binding Left}" HorizontalAlignment="Center" VerticalAlignment="Center" />
                        <Grid x:Name="PART_ContentArea" HorizontalAlignment="Left" VerticalAlignment="Top">
                            <ContentPresenter Margin="{TemplateBinding Padding}" 
                                          HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
                                          VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
                                           />
                        </Grid>
                    </Grid>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
JoeHershman
MVP Regular Contributor

Thank you

Thanks,
-Joe
0 Kudos
RavindraSingh
Occasional Contributor

Hi,

Can you please share the whole code, to get similar kind of output, I also want to create a callout with Table like GUI and close button at the top of the callout.   

Thanks.

0 Kudos
dotMorten_esri
Esri Notable Contributor

On a side note I'd really recommend against this pattern of creating huge popups with lots and lots of contents, as they block the view of the map. A better design approach is to keep the popup small with just a title and an 'edit' or 'info' button. Clicking that brings out a side-panel with the full information. That way part of the map you're looking stays mostly unblocked, and the detailed data you get to work with next to, instead of over the map.

RavindraSingh
Occasional Contributor

thanks Nielsen,

this is actually what I thought of. I am here kind of confused and stucked. I am developing Cross platform app. which works on both Droid and iOS, with single code base. for that I am working on Xamarin.Form Components.

 in ArcGIS runtime SDK 100.1.0 for .NET There are two Namespaces e.g.

Esri.ArcGISRuntime.UI.Controls  -->Esri.ArcGISRuntime.UI.Controls.MapView.  

This above one has the property - as CalloutStyle.

Esri.ArcGISRuntime.Xamarin.Forms.    --> From here I am using, Esri.ArcGISRuntime.Xamarin.Forms.MapView

But this doesn't have it. 

Can you please suggest here, or share some sample code to set the Button inside the Callout on Esri.ArcGISRuntime.Xamarin.Forms.MapView's Tap Event.

Best Regards,

Ravindra

0 Kudos
RavindraSingh
Occasional Contributor

Hi,

I have found the solution of my Issue.

Sharing the code here, hope, it may help someone.

using System;
using System.Diagnostics;
using Esri.ArcGISRuntime.Geometry;
using Xamarin.Forms;
using Esri.ArcGISRuntime.Xamarin.Forms;
using Esri.ArcGISRuntime.Data;
using Esri.ArcGISRuntime.Mapping;
using Esri.ArcGISRuntime.Mapping.Popups;
using Esri.ArcGISRuntime.UI;


namespace GitTrial_Sample
{
    public partial class IndexMapPage : ContentPage
    {
        public IndexMapPage()
        {
            InitializeComponent();
            Title = "Show callout";
            Initialize();
        }

        private void Initialize()
        {
            // Create a new basemap using the streets base layer
            Basemap myBasemap = Basemap.CreateStreets();

            // Create a new map based on the streets basemap
            Map myMap = new Map(myBasemap);

            // Assign the map to the MapView
            MyMapView.Map = myMap;

            // Wire up the MapView GeoVewTapped event
            MyMapView.GeoViewTapped += MyMapView_GeoViewTapped;
        }

        private void MyMapView_GeoViewTapped(object sender, GeoViewInputEventArgs e)
        {
            // Get the user-tapped location
            MapPoint mapLocation = e.Location;

            // Project the user-tapped map point location to a geometry
            Geometry myGeometry = GeometryEngine.Project(mapLocation, SpatialReferences.Wgs84);

            // Convert to geometry to a traditional Lat/Long map point
            MapPoint projectedLocation = (MapPoint)myGeometry;

            // Format the display callout string based upon the projected map point (example: "Lat: 100.123, Long: 100.234")
            string mapLocationDescription = string.Format("Lat: {0:F3} Long:{1:F3}", projectedLocation.Y, projectedLocation.X);

            // Create a new callout definition using the formatted string
            CalloutDefinition myCalloutDefinition = new CalloutDefinition("Location:", mapLocationDescription);
            //myCalloutDefinition.DetailText = "This is Detailed text";
            myCalloutDefinition.Text = "Header Line Text";
            RuntimeImage rtImg = new RuntimeImage(new Uri("https://cdn0.iconfinder.com/data/icons/business-finance-vol-14-2/512/69-128.png"));

// Here URI can be any location of the image. I just referred randomly this img.
            rtImg.LoadAsync();
            //myCalloutDefinition.Icon = rtImg;
            myCalloutDefinition.ButtonImage = rtImg;

            Action<object> infoWindowButtonClick_Process = infoWindowBtn_Click_Event;
            myCalloutDefinition.OnButtonClick = infoWindowButtonClick_Process;

            // Display the callout
            MyMapView.ShowCalloutAt(mapLocation, myCalloutDefinition);
        }

        private async  void infoWindowBtn_Click_Event(object message)
        {
            Debug.Print("Info window Button Clicked......");
            //var selectedAction = await DisplayActionSheet("Came from Infor Window", "OK", null, "You Clicked on Info window Button");  // This also Working
            await DisplayAlert("Y=Infor window button clicked", "You came from Info Window on Map","OK");  // This also working
        }
    }
}

-------  XAML File------- 

<?xml version="1.0" encoding="UTF-8"?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" 
    xmlns:esri="clr-namespace:Esri.ArcGISRuntime.Xamarin.Forms;assembly=Esri.ArcGISRuntime.Xamarin.Forms"
    xmlns:mapping="clr-namespace:Esri.ArcGISRuntime.Mapping;assembly=Esri.ArcGISRuntime"
    xmlns:esriUI="clr-namespace:Esri.ArcGISRuntime.UI;assembly=Esri.ArcGISRuntime"
    xmlns:local="clr-namespace:GitTrial_Sample" x:Class="GitTrial_Sample.IndexMapPage"
    Title="Welcome to Index Map Page">
    <ContentPage.Padding>
        <OnPlatform x:TypeArguments="Thickness" iOS="0,40,0,0" />
    </ContentPage.Padding>

    <esri:MapView x:Name="MyMapView">
        
    </esri:MapView>
</ContentPage>

... I prefer to share full code, so that there is no confusion for newbies to free it.

find the is the scScreen After clicking on Button icon in Info window.

reenshot..

TheKenerson
Occasional Contributor

Novice Question: Can you provide any instruction on creating a side-panel and displaying attribute information?

0 Kudos
DonKang
New Contributor III

Hello Joe,

How did you ended up showing all the attribute information.

Coming from Javascript API world, I am finding out working with runtime sdk very challenging.
I would love to display more than just one line of attribute info. I would like to display attributes in tabular format like yours.

Can you please share your code?

thanks

Don

0 Kudos
JoeHershman
MVP Regular Contributor

We haven't gotten around to using the new parts of the API.  But we have the control that is shown above and display using the Overlays collection and call SetAnchorPoint to locate the pin.  Our users want a popup that displays more than just a couple attributes, and this seems to be working.  I do plan to try to integrate it into the Callout API stuff, but it is a low priority

Thanks,
-Joe
0 Kudos
shrigupta
New Contributor

I also want same grid view as map callout in xamrin.forms .How it is possibile to customize the web map callout as grid

0 Kudos