Video fills Online

This sample demonstrates the ability to create a SimpleFillSymbol that contains a VideoBrush. One state, California, is loaded as a FeatureLayer and has its video fill applied in XAML via the FeatureSymbol property. A GraphicsLayer is initialized in the code-behind with Graphics for a number of other western states. For these graphics, a MouseEnter handler demonstrates applying a video fill dynamically in code.

XAML

<UserControl x:Class="ArcGISWPFSDK.VideoFills"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
    xmlns:esri="http://schemas.esri.com/arcgis/client/2009">

    <Grid x:Name="LayoutRoot" Background="White">

        <Grid.Resources>
            <!--<esri:DictionaryConverter x:Key="MyDictionaryConverter" />-->
            <esri:FillSymbol x:Key="videoFill">
                <esri:FillSymbol.ControlTemplate>
                    <ControlTemplate>
                        <Path x:Name="Element" Stroke="Gray" StrokeThickness="2" MouseLeave="Element_MouseLeave" MouseEnter="Element_MouseEnter" >
                            <Path.Fill>
                                <VisualBrush Stretch="UniformToFill">
                                    <VisualBrush.Visual>
                                        <MediaElement x:Name="stateVideo" LoadedBehavior="Manual"
                  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"              
                  Source="{Binding Attributes[Attributes]}"
                  IsMuted="True"            
                  MediaEnded="State_Media_MediaEnded" />
                                    </VisualBrush.Visual>
                                </VisualBrush>
                            </Path.Fill>
                            <VisualStateManager.VisualStateGroups>
                                <VisualStateGroup x:Name="CommonStates">
                                    <VisualState x:Name="Normal">
                                        <Storyboard>
                                            <DoubleAnimation To="0"
                    Storyboard.TargetName="stateVideo" 
                    Storyboard.TargetProperty="Opacity" 
                    Duration="0" />
                                        </Storyboard>
                                    </VisualState>
                                    <VisualState x:Name="MouseOver">
                                        <Storyboard>
                                            <DoubleAnimation To=".75"
                    Storyboard.TargetName="stateVideo" 
                    Storyboard.TargetProperty="Opacity" 
                    Duration="0" />
                                        </Storyboard>
                                    </VisualState>
                                </VisualStateGroup>
                            </VisualStateManager.VisualStateGroups>
                        </Path>
                    </ControlTemplate>
                </esri:FillSymbol.ControlTemplate>
            </esri:FillSymbol>

            <VisualBrush Opacity="0.5" Stretch="UniformToFill" x:Key="BearVideoBrush">
                <VisualBrush.Visual>
                    <MediaElement x:Name="BearVideo" 
          xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
          Source="http://serverapps.esri.com/media/bear.wmv" 
          IsMuted="True"            
          MediaEnded="State_Media_MediaEnded" />
                </VisualBrush.Visual>
            </VisualBrush>

            <esri:SimpleRenderer x:Key="BearVideoFillRenderer">
                <esri:SimpleRenderer.Symbol>
                    <esri:SimpleFillSymbol  Fill="{StaticResource BearVideoBrush}"  BorderBrush="Green" BorderThickness="1"/>
                </esri:SimpleRenderer.Symbol>
            </esri:SimpleRenderer>

            <esri:SimpleFillSymbol x:Name="StateVideoFillSymbol" x:Key="StateVideoFillSymbol" BorderBrush="Transparent" BorderThickness="0" >
            </esri:SimpleFillSymbol>

            <esri:SimpleFillSymbol x:Name="TransparentFillSymbol" x:Key="TransparentFillSymbol"
    BorderBrush="#22000000" BorderThickness="1" Fill="#01000000" />

        </Grid.Resources>

        <Grid x:Name="MediaGrid" Visibility="Hidden" />

        <esri:Map x:Name="MyMap" Extent="-15000000,2000000,-7000000,8000000" WrapAround="True">
            <esri:Map.Layers>
                <esri:ArcGISTiledMapServiceLayer ID="TopoLayer" 
                      Url="http://services.arcgisonline.com/ArcGIS/rest/services/World_Topo_Map/MapServer"/>

                <esri:GraphicsLayer ID="MyGraphicsLayer" IsHitTestVisible="True" />
                <esri:FeatureLayer ID="MyFeatureLayer"
        Url="http://sampleserver1.arcgisonline.com/ArcGIS/rest/services/Specialty/ESRI_StatesCitiesRivers_USA/MapServer/2" 
        Where="STATE_NAME = 'California'" Renderer="{StaticResource BearVideoFillRenderer}" >
                </esri:FeatureLayer>
            </esri:Map.Layers>
        </esri:Map>

        <TextBlock x:Name="lblError" Text=""  Foreground="Red" Height="12"/>

    </Grid>

</UserControl>

C#

using System;
using System.Collections.Generic;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Input;
using System.Windows.Media;
using ESRI.ArcGIS.Client;
using ESRI.ArcGIS.Client.Tasks;
using ESRI.ArcGIS.Client.Symbols;
using System.Windows.Shapes;

namespace ArcGISWPFSDK
{
    public partial class VideoFills : UserControl
    {
        List<Graphic> _lastActiveGraphics;

        public VideoFills()
        {
            InitializeComponent();
            _lastActiveGraphics = new List<Graphic>();

            MyMap.Layers.LayersInitialized += Layers_LayersInitialized;
        }

        void Layers_LayersInitialized(object sender, EventArgs args)
        {
            ESRI.ArcGIS.Client.Tasks.Query query = new ESRI.ArcGIS.Client.Tasks.Query()
            {
                OutSpatialReference = MyMap.SpatialReference,
                ReturnGeometry = true
            };
            query.OutFields.Add("STATE_NAME");
            query.Where = "STATE_NAME IN ('Alaska', 'Hawaii', 'Washington', 'Oregon', 'Arizona', 'Nevada', 'Idaho', 'Montana', 'Utah', 'Wyoming', 'Colorado', 'New Mexico')";

            QueryTask myQueryTask = new QueryTask("http://sampleserver1.arcgisonline.com/ArcGIS/rest/services/Demographics/ESRI_Census_USA/MapServer/5");
            myQueryTask.ExecuteCompleted += myQueryTask_ExecuteCompleted;
            myQueryTask.ExecuteAsync(query);
        }


        void myQueryTask_ExecuteCompleted(object sender, QueryEventArgs queryArgs)
        {
            if (queryArgs.FeatureSet == null)
                return;

            FeatureSet resultFeatureSet = queryArgs.FeatureSet;
            ESRI.ArcGIS.Client.GraphicsLayer graphicsLayer =
                    MyMap.Layers["MyGraphicsLayer"] as ESRI.ArcGIS.Client.GraphicsLayer;

            if (resultFeatureSet != null && resultFeatureSet.Features.Count > 0)
            {
                foreach (ESRI.ArcGIS.Client.Graphic graphicFeature in resultFeatureSet.Features)
                {
                    //graphicFeature.Symbol = LayoutRoot.Resources["TransparentFillSymbol"] as Symbol;
                    graphicFeature.Symbol = LayoutRoot.Resources["videoFill"] as Symbol;
                    string stateName = Convert.ToString(graphicFeature.Attributes["STATE_NAME"]);
                    graphicFeature.Attributes.Add("VideoSource", String.Format("http://serverapps.esri.com/media/{0}_small.wmv", stateName));
                    graphicsLayer.Graphics.Add(graphicFeature);
                }
            }
        }

        private void ClearVideoSymbol(Graphic graphic)
        {
            Grid videoGrid = FindName("MediaGrid") as Grid;
            if (videoGrid.Children != null && videoGrid.Children.Count > 0)
            {
                MediaElement m = videoGrid.Children[0] as MediaElement;
                if (m != null)
                {
                    m.MediaEnded -= State_Media_MediaEnded;
                    m.UnloadedBehavior = MediaState.Manual;
                    m.Stop();
                }
                videoGrid.Children.Clear();
            }

            graphic.Symbol = LayoutRoot.Resources["TransparentFillSymbol"] as Symbol;
            _lastActiveGraphics.Remove(graphic);
        }

        private void State_Media_MediaEnded(object sender, RoutedEventArgs e)
        {
            // Repeat play of the video
            MediaElement media = sender as MediaElement;
            media.Position = TimeSpan.FromSeconds(0);
            media.LoadedBehavior = MediaState.Manual;
            media.Play();
        }

        private void Element_MouseEnter(object sender, MouseEventArgs e)
        {
            Path path = sender as Path;
            ((path.Fill as VisualBrush).Visual as MediaElement).Play();

        }

        private void Element_MouseLeave(object sender, MouseEventArgs e)
        {
            Path path = sender as Path;
            ((path.Fill as VisualBrush).Visual as MediaElement).Pause();
        }
    }
}

VB.NET

Imports System.Collections.Generic
Imports System.Windows
Imports System.Windows.Controls
Imports System.Windows.Input
Imports System.Windows.Media
Imports ESRI.ArcGIS.Client
Imports ESRI.ArcGIS.Client.Tasks
Imports ESRI.ArcGIS.Client.Symbols
Imports System.Windows.Shapes

Namespace ArcGISWPFSDK
    Partial Public Class VideoFills
        Inherits UserControl
        Private _lastActiveGraphics As List(Of Graphic)

        Public Sub New()
            InitializeComponent()
            _lastActiveGraphics = New List(Of Graphic)()

            AddHandler MyMap.Layers.LayersInitialized, AddressOf Layers_LayersInitialized
        End Sub

        Private Sub Layers_LayersInitialized(sender As Object, args As EventArgs)
            Dim query As New ESRI.ArcGIS.Client.Tasks.Query() With { _
             .OutSpatialReference = MyMap.SpatialReference, _
             .ReturnGeometry = True _
            }
            query.OutFields.Add("STATE_NAME")
            query.Where = "STATE_NAME IN ('Alaska', 'Hawaii', 'Washington', 'Oregon', 'Arizona', 'Nevada', 'Idaho', 'Montana', 'Utah', 'Wyoming', 'Colorado', 'New Mexico')"

            Dim myQueryTask As New QueryTask("http://sampleserver1.arcgisonline.com/ArcGIS/rest/services/Demographics/ESRI_Census_USA/MapServer/5")
            AddHandler myQueryTask.ExecuteCompleted, AddressOf myQueryTask_ExecuteCompleted
            myQueryTask.ExecuteAsync(query)
        End Sub


        Private Sub myQueryTask_ExecuteCompleted(sender As Object, queryArgs As QueryEventArgs)
            If queryArgs.FeatureSet Is Nothing Then
                Return
            End If

            Dim resultFeatureSet As FeatureSet = queryArgs.FeatureSet
            Dim graphicsLayer As ESRI.ArcGIS.Client.GraphicsLayer = TryCast(MyMap.Layers("MyGraphicsLayer"), ESRI.ArcGIS.Client.GraphicsLayer)

            If resultFeatureSet IsNot Nothing AndAlso resultFeatureSet.Features.Count > 0 Then
                For Each graphicFeature As ESRI.ArcGIS.Client.Graphic In resultFeatureSet.Features
                    'graphicFeature.Symbol = LayoutRoot.Resources["TransparentFillSymbol"] as Symbol;
                    graphicFeature.Symbol = TryCast(LayoutRoot.Resources("videoFill"), Symbol)
                    Dim stateName As String = Convert.ToString(graphicFeature.Attributes("STATE_NAME"))
                    graphicFeature.Attributes.Add("VideoSource", [String].Format("http://serverapps.esri.com/media/{0}_small.wmv", stateName))
                    graphicsLayer.Graphics.Add(graphicFeature)
                Next
            End If
        End Sub

        Private Sub ClearVideoSymbol(graphic As Graphic)
            Dim videoGrid As Grid = TryCast(FindName("MediaGrid"), Grid)
            If videoGrid.Children IsNot Nothing AndAlso videoGrid.Children.Count > 0 Then
                Dim m As MediaElement = TryCast(videoGrid.Children(0), MediaElement)
                If m IsNot Nothing Then
                    RemoveHandler m.MediaEnded, AddressOf State_Media_MediaEnded
                    m.UnloadedBehavior = MediaState.Manual
                    m.[Stop]()
                End If
                videoGrid.Children.Clear()
            End If

            graphic.Symbol = TryCast(LayoutRoot.Resources("TransparentFillSymbol"), Symbol)
            _lastActiveGraphics.Remove(graphic)
        End Sub

        Private Sub State_Media_MediaEnded(sender As Object, e As RoutedEventArgs)
            ' Repeat play of the video
            Dim media As MediaElement = TryCast(sender, MediaElement)
            media.Position = TimeSpan.FromSeconds(0)
            media.LoadedBehavior = MediaState.Manual
            media.Play()
        End Sub

        Private Sub Element_MouseEnter(sender As Object, e As MouseEventArgs)
            Dim path As Path = TryCast(sender, Path)
            TryCast(TryCast(path.Fill, VisualBrush).Visual, MediaElement).Play()

        End Sub

        Private Sub Element_MouseLeave(sender As Object, e As MouseEventArgs)
            Dim path As Path = TryCast(sender, Path)
            TryCast(TryCast(path.Fill, VisualBrush).Visual, MediaElement).Pause()
        End Sub
    End Class
End Namespace