3D Scene Overlay as Label

Download Samples Repository

Description

Demonstrates how to use a scene overlay as a label

"Desktop" Available for Desktop

Sample Code

<UserControl x:Class="ArcGISRuntime.Samples.Desktop.SceneOverlay"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
             xmlns:esri="http://schemas.esri.com/arcgis/runtime/2013" 
			 mc:Ignorable="d">
	
	<Grid>
		<esri:SceneView x:Name="MySceneView" LayerLoaded="MySceneView_LayerLoaded">
			<esri:Scene>
				<esri:Scene.Surface>
					<esri:ServiceElevationSource ServiceUri="http://elevation3d.arcgis.com/arcgis/rest/services/WorldElevation3D/Terrain3D/ImageServer" 
												 IsEnabled="True" />
				</esri:Scene.Surface>
				<esri:ArcGISTiledMapServiceLayer ID="AGOLayer"
                ServiceUri="http://services.arcgisonline.com/arcgis/rest/services/World_Imagery/MapServer" />
			</esri:Scene>
			<esri:SceneView.Overlays>
				<esri:OverlayItemsControl>
					<Grid x:Name="triompheOverlay" HorizontalAlignment="Right" VerticalAlignment="Top" 
						  MaxWidth="200" Visibility="Collapsed">
						<Grid.RowDefinitions>
							<RowDefinition Height="*" />
							<RowDefinition Height="20" />
						</Grid.RowDefinitions>
						<Grid.ColumnDefinitions>
							<ColumnDefinition Width="20" />
							<ColumnDefinition Width="*" />
						</Grid.ColumnDefinitions>

						<Border Background="#CC000000" BorderThickness="1,1,1,0" Margin="0,0,0,-1" BorderBrush="White" Grid.ColumnSpan="2">
							<StackPanel Margin="10">
								<TextBlock Text="Arc de Triomphe" FontWeight="Bold" Foreground="White" />
								<Image Width="200">
									<Image.Source>
										<BitmapImage DecodePixelWidth="200"
													 UriSource="https://upload.wikimedia.org/wikipedia/commons/thumb/d/d8/Paris_Arc_de_Triomphe_011.jpg/512px-Paris_Arc_de_Triomphe_011.jpg" />
									</Image.Source>
								</Image>
								<TextBlock TextWrapping="Wrap" Foreground="White" 
										   Text="http://arc-de-triomphe.monuments-nationaux.fr/"/>
							</StackPanel>
						</Border>

						<Path StrokeThickness="1" Fill="#CC000000" Stroke="White" Stretch="Fill" 
							  HorizontalAlignment="Left" Data="M0,0 L0,1 1,0" Grid.Row="1" />
						<Path StrokeThickness="1" Fill="#CC000000" Stroke="White" Stretch="Fill" 
							  VerticalAlignment="Top" Data="M0,0 L1,0" Grid.Row="1" Grid.Column="1" />
					</Grid>
				</esri:OverlayItemsControl>
			</esri:SceneView.Overlays>
		</esri:SceneView>
	</Grid>
</UserControl>
using Esri.ArcGISRuntime.Controls;
using Esri.ArcGISRuntime.Geometry;
using System.Windows;
using System.Windows.Controls;

namespace ArcGISRuntime.Samples.Desktop
{
	/// <summary>
	/// Demonstrates how to use a scene overlay as a label
	/// </summary>
	/// <title>3D Scene Overlay as Label</title>
	/// <category>Scene</category>
	/// <subcategory>Graphics</subcategory>
	public partial class SceneOverlay : UserControl
	{
		public SceneOverlay()
		{
			InitializeComponent();
		}

		private async void MySceneView_LayerLoaded(object sender, Esri.ArcGISRuntime.Controls.LayerLoadedEventArgs e)
		{
			if (e.LoadError == null && e.Layer.ID == "AGOLayer")
			{
				var camera = new Esri.ArcGISRuntime.Controls.Camera(new MapPoint(2.2950, 48.8738, 3000000), 0, 0);
				MySceneView.SetViewAsync(camera);
				
				// Find the overlay element from the MapView using its name
				var triompheTip = this.MySceneView.FindName("triompheOverlay") as FrameworkElement;

				// If the overlay element is found, set its position and make it visible
				if (triompheTip != null)
				{
					var overlayLocation = new MapPoint(2.2950, 48.8738, SpatialReferences.Wgs84);
					MapView.SetViewOverlayAnchor(triompheTip, overlayLocation);
					triompheTip.Visibility = Visibility.Visible;
				}
			}
		}
	}
}
Feedback on this topic?