Unbound InfoWindow?

891
6
02-06-2012 11:52 AM
ScottSteigerwald
New Contributor III
I'm developing a tool that would allow a user to click any location on the map, popup a new window, fill in some simple information, then save this information to the database.  The end table where this information will be written is not a spatial table, it will just be a table of XY coordinates, user id and comments entered by the user.

Easy enough, but then the next requirement is to display the data entry form in an InfoWindow so it appears as a callout next to the clicked location.  I tried to do this with an InfoWindow DataTemplate, but it appears that InfoWindows (or DataTemplates) will only display correctly if they are bound to data?  Specifically, the InfoWindow won't resize to fit all of my controls, just 2 TextBlocks, 2 TextBoxes and a button.

I'd rather not use the editing framework since this is not a spatial table, just a simple non-spatial table.

Any suggestions?

        
  <DataTemplate x:Key="CommentInfoWindowTemplate">
                <Grid>
                    <Grid.RowDefinitions>
                        <RowDefinition Height="30" />
                        <RowDefinition Height="100" />
                        <RowDefinition Height="30" />
                    </Grid.RowDefinitions>
                    
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="150" />
                        <ColumnDefinition Width="300" />
                    </Grid.ColumnDefinitions>
                    
                    <TextBlock Grid.Row="0" Grid.Column="0" Text="Comment for user: " Foreground="Black" FontSize="12" />
                    <TextBox x:Name="UserID" Grid.Row="0" Grid.Column="1" />
                    
                    <TextBlock Grid.Row="1" Grid.Column="0" Text="More Text" Foreground="Black" FontSize="12" />
                    <TextBox x:Name="CommentText" Grid.Row="1" Grid.Column="1" />
                    
                    <Button Grid.RowSpan="2" Grid.Row="2" Content="Save" />
                </Grid>
            </DataTemplate>


[ATTACH=CONFIG]11736[/ATTACH]
0 Kudos
6 Replies
ChrisBradberry
Occasional Contributor
Stiggy,

Have you looked into creating a query layer from the data?  If you save the xy data into a database you can bring it back into a map service using a query layer.  Then it should be much more straight forward to implement the infowindow.

Chris
0 Kudos
JenniferNery
Esri Regular Contributor
Have you looked at this sample? http://help.arcgis.com/en/webapi/silverlight/samples/start.htm#InfoWindowSimple. Do you set InfoWindow.Content? You can still use GraphicsLayer with Graphics.Attributes containing the fields you want displayed in the InfoWindow.

            foreach (Graphic g in selected)
            {

                MyInfoWindow.Anchor = e.MapPoint;
                MyInfoWindow.IsOpen = true;
                //Since a ContentTemplate is defined, Content will define the DataContext for the ContentTemplate
                MyInfoWindow.Content = g.Attributes;
                return;
            }


Below these lines, when no graphic is found selected, it may display just the Geometry X,Y. notice that a different ContentTemplate is used.

            InfoWindow window = new InfoWindow()
            {
                Anchor = e.MapPoint,
                Map = MyMap,
                IsOpen = true,
                ContentTemplate = LayoutRoot.Resources["LocationInfoWindowTemplate"] as System.Windows.DataTemplate,
                //Since a ContentTemplate is defined, Content will define the DataContext for the ContentTemplate
                Content = e.MapPoint 
            };
0 Kudos
ScottSteigerwald
New Contributor III
Actually, everything was fine.  I had to add Grid.RowSpan="2" for all of the InfoWindow content to show up since I am using a grid.
0 Kudos
ScottSteigerwald
New Contributor III
OK, I'm back to square one.  What I'm finding is, if you use the static method (MyFeatureLayerInfoWindowTemplate) vs. the dynamic method (LocationInfoWindowTemplate) for creating InfoWindows, you have new problems either way.  In the dynamic method, binding works great, but you then lose the ability to apply rowspan="2" so you can see the entire content of the InfoWindow.  In the static method, you seem to lose the binding capabilities.

What I am specifically trying to do is allow the user to create new locations with comments at that location which they can eventually save.  On the InfoWindow, we want to display the currently logged in user's name.  I can't get that part to work, and I fear what will happen when I attempt to capture the comment within the InfoWindow...can it be done?

Here's some code, first XAML:
         
<DataTemplate x:Key="NewCommentInfoWindowTemplate">
                <Grid x:Name="LayoutRoot" Background="White">
                    <Grid.RowDefinitions>
                        <RowDefinition Height="20" />
                        <RowDefinition Height="30" />
                        <RowDefinition Height="200" />
                        <RowDefinition Height="30" />
                    </Grid.RowDefinitions>

                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="134" />
                        <ColumnDefinition Width="316" />
                    </Grid.ColumnDefinitions>

                    <StackPanel Orientation="Horizontal" HorizontalAlignment="Right" Grid.Row="0" Grid.ColumnSpan="2">
                        <Image x:Name="Dismiss" Style="{StaticResource dismissButton}" Height="20" ToolTipService.ToolTip="Exit"
                                Cursor="Hand" MouseLeftButtonDown="Dismiss_MouseLeftButtonDown" />
                    </StackPanel>

                    <TextBlock Text="Comment for user: " Grid.Row="1" Foreground="Black" FontSize="12" FontWeight="Bold" VerticalAlignment="Top" Margin="2" />
                    <TextBlock x:Name="UserID" Text="{Binding ID}"  Grid.Column="1" Grid.Row="1" VerticalAlignment="Top" Margin="2" HorizontalAlignment="Left"
                               Foreground="Black" FontSize="12" FontWeight="Bold" />

                    <TextBlock Grid.Row="2" Text="Comment:" Foreground="Black" FontSize="12" FontWeight="Bold" Margin="2" VerticalAlignment="Top" />
                    <TextBox x:Name="CommentText" Grid.Row="2" Grid.Column="1" Margin="2" VerticalAlignment="Stretch" />

                    <StackPanel Orientation="Horizontal" HorizontalAlignment="Right" Grid.Row="3" Grid.ColumnSpan="2">
                        <Button x:Name="SaveComment" Content="Save" Margin="2" MouseLeftButtonDown="SaveComment_MouseLeftButtonDown"
                                Cursor="Hand"/>
                    </StackPanel>
                </Grid>
            </DataTemplate>


       
<esri:InfoWindow x:Name="NewCommentInfoWindow" Grid.RowSpan="2"
                         Padding="2" CornerRadius="20" Background="White"
                         Map="{Binding ElementName=Map}" 
                         ContentTemplate="{StaticResource NewCommentInfoWindowTemplate}" />" />


Code-behind to assign the UserID:

      
private void CaptureComment_MouseClick(object sender, ESRI.ArcGIS.Client.Map.MouseEventArgs e)
        {
            //The actual coordinates
            ESRI.ArcGIS.Client.Geometry.MapPoint clickPoint = e.MapPoint;

            //Open the comment entry form and pass the coordinates
            ESRI.ArcGIS.Client.Geometry.Geometry g = clickPoint;
            Map.PanTo(g);

            NewCommentInfoWindow.Anchor = clickPoint;
            NewCommentInfoWindow.IsOpen = true;
            //Since a ContentTemplate is defined, Content will define the DataContext for the ContentTemplate
            FSRMapApplication.UserID ui = new FSRMapApplication.UserID(UserID);
            CommentInfoWindow.Content = ui;
        }


Note that FSRMapApplication.UserID is a class that holds the UserID assigned as "ID".  This value is being passed from the web.config through initParams, etc/
0 Kudos
AnastasiaAourik
New Contributor II
Jennifer: A few threads up you talked about infowindow and showed
how you set th InfoWindow.ContentTemplate in the code behind.

This is shown in the sample:
http://help.arcgis.com/en/webapi/silverlight/samples/start.htm#InfoWindowSimple

My situation is that I will have about 25 unique templates depending on the layer that
the infowindow is invoked on.
I do not want 25 datatemplates in my main usercontrol.
I would like to put it in a separate xaml;
I have a mapresources.xaml already that is added via app.xaml in resource dictionary.
see this:
    <Application.Resources>
        <ResourceDictionary>
            <ResourceDictionary.MergedDictionaries>
                <ResourceDictionary Source="Styles/LightStyle.xaml" />
                <ResourceDictionary Source="Styles/MapResources.xaml" />
            </ResourceDictionary.MergedDictionaries>
        </ResourceDictionary>
    </Application.Resources>

right now I am testing with 1 template:

    <DataTemplate x:Key="GenWellPopupTemplate">
        <Border CornerRadius="10" BorderBrush="#FF222957" Background="LightYellow"  BorderThickness="3" Margin="0,0,2,2"  MaxWidth="600">
            <Border.Effect>
                <DropShadowEffect ShadowDepth="10" BlurRadius="14" Direction="300" />
            </Border.Effect>
            <StackPanel Orientation="Vertical" Margin="6">

                <sdk:Label FontWeight="bold" Content="{Binding DRSFEATURE}" Margin="2,4,0,4"/>
                <sdk:TabControl Height="200" Margin="2,0,2,0" >

                    <sdk:TabItem Header="Attribute Details"  ScrollViewer.VerticalScrollBarVisibility="Auto">
                        <data:DataGrid AutoGenerateColumns="False" HeadersVisibility="None" ItemsSource="{Binding Path=Attributes}">
                            <data:DataGrid.Columns>
                                <data:DataGridTextColumn Binding="{Binding Key}" FontWeight="Bold"/>
                                <data:DataGridTextColumn Binding="{Binding Value}"/>
                            </data:DataGrid.Columns>
                        </data:DataGrid>

                    </sdk:TabItem>


                    <sdk:TabItem Header="Reports &amp; Deliverables" ScrollViewer.VerticalScrollBarVisibility="Auto">

                        <StackPanel Orientation="Vertical" Margin="6" ToolTipService.ToolTip="For Demo Purposes Only. Not Operational.">
                            <Grid Height="4"/>
                            <ListBox ScrollViewer.VerticalScrollBarVisibility="Auto">
                                <ListBoxItem HorizontalAlignment="Stretch" HorizontalContentAlignment="Stretch">

                                    <ListBoxItem.Content>

                                        <Grid HorizontalAlignment="Stretch">
                                            <Grid.ColumnDefinitions>
                                                <ColumnDefinition Width="*"></ColumnDefinition>
                                                <ColumnDefinition Width="40"></ColumnDefinition>
                                            </Grid.ColumnDefinitions>
                                            <StackPanel Orientation="Horizontal" Grid.Column="0">
                                                <sdk:Label Content="{Binding DRSFEATURE}"/>
                                                <sdk:Label Content=" Standard Summary Report"></sdk:Label>
                                            </StackPanel>
                                            <Grid Grid.Column="1">
                                                <Image Source="toolbox_images/pdf.png" Cursor="Hand" Width="20" />
                                            </Grid>
                                        </Grid>

                                    </ListBoxItem.Content>
                                </ListBoxItem>

                                <ListBoxItem HorizontalAlignment="Stretch" HorizontalContentAlignment="Stretch">
                                    <ListBoxItem.Content>
                                        <Grid HorizontalAlignment="Stretch">
                                            <Grid.ColumnDefinitions>
                                                <ColumnDefinition Width="*"></ColumnDefinition>
                                                <ColumnDefinition Width="40"></ColumnDefinition>
                                            </Grid.ColumnDefinitions>
                                            <StackPanel Orientation="Horizontal" Grid.Column="0">
                                                <sdk:Label Content="{Binding DRSFEATURE}"/>
                                                <sdk:Label Content=" A sample uploaded log file"></sdk:Label>
                                            </StackPanel>
                                            <Grid Grid.Column="1">
                                                <Image Source="toolbox_images/document.png" Cursor="Hand" Width="20" />
                                            </Grid>
                                        </Grid>

                                    </ListBoxItem.Content>
                                </ListBoxItem>
                            </ListBox>
                        </StackPanel>

                    </sdk:TabItem>

                    <sdk:TabItem Header="Advanced Options" ScrollViewer.VerticalScrollBarVisibility="Auto">

                        <StackPanel Orientation="Vertical" Margin="6" ToolTipService.ToolTip="For Demo Purposes Only. Not Operational.">
                            <Grid Height="4"/>
                            <Grid HorizontalAlignment="Stretch">
                                <Border BorderBrush="LightGray"  BorderThickness="1" HorizontalAlignment="Stretch">

                                    <StackPanel Orientation="Vertical">

                                        <sdk:Label Content="Attach Document:" FontWeight="Bold"/>
                                        <sdk:Label Content="Attach a Log, documents, or other files to this Well Asset:" />
                                        <StackPanel Orientation="Horizontal">
                                            <TextBox  Width="240" Margin="4"/>
                                            <Button Content=" Browse " Margin="4"/>
                                        </StackPanel>
                                    </StackPanel>
                                </Border>
                            </Grid>

                            <Grid Height="8"/>
                            <Grid HorizontalAlignment="Stretch">
                                <Border BorderBrush="LightGray" BorderThickness="1" HorizontalAlignment="Stretch">

                                    <StackPanel Orientation="Vertical" Margin="4">
                                        <sdk:Label Content="Export To Petrel" FontWeight="Bold"/>
                                        <sdk:Label Content="Generates a Witsml compliant export file."/>
                                        <StackPanel Orientation="Horizontal" HorizontalAlignment="Center" Margin="4">
                                            <Button Content=" Begin Export to Petrel "/>
                                        </StackPanel>
                                    </StackPanel>
                                </Border>
                            </Grid>


                        </StackPanel>

                    </sdk:TabItem>

                </sdk:TabControl>

                <TextBlock x:Name="nhssClose" HorizontalAlignment="Center" Text=" Close "
                                       Cursor="hand" FontWeight="SemiBold" Foreground="RoyalBlue"
                                       MouseLeftButtonDown="nhssClose_MouseLeftButtonDown"/>
            </StackPanel>
        </Border>
    </DataTemplate>

And in my CODE BEHIND of Map_MouseClick event I have:
...
                         DRSCoreData pkgdata = new DRSCoreData();
                            pkgdata.Attributes = g.Attributes;
                            pkgdata.DRSFEATURE = fl.ID;
                            gotanyflg = true;
                            MyInfoWindow.Anchor = e.MapPoint;
                            MyInfoWindow.Content = pkgdata;
                            //MyInfoWindow.ContentTemplate = this.WellAssetPopupTemplate;
                            MyInfoWindow.ContentTemplate = Application.Current.Resources["GenWellPopupTemplate"] as DataTemplate;
                            MyInfoWindow.IsOpen = true;
                            MyInfoWindow.Height = 260;
                            MyInfoWindow.Width = 400;
...

WHY do i get Exception when I run it like this?
I I reference the same DataTemplate that I stuck in the Grid.Resources, It works.
Note: Reference the data template from the Grid.Resources where the x:Name="WellAssetPopupTemplate"  but I could have done it your way with x:Key='xxx' and using LayoutRoot.Resources["xxx"]

My Exception is:  Unhandled Error in Silverlight Application
Code: 2531   
Category: ParserError      
Message: Failed to assign to property 'System.Windows.UIElement.MouseLeftButtonDown'.    
File:     
Line: 149    
Position: 60 
of Default.aspx

Can you see what I am doing wrong???
0 Kudos
DominiqueBroux
Esri Frequent Contributor
When your datatemplate is in a resource file, there is no reasonable location to put the event handler. The xamlreader doesn't have the context to understand where to wire those things up and that eventually crashes.

A couple of options to overcome that:

  • put your resources in your control (instead of in the application)

  • bind to a command and add this command in your view model

  • subclass the InfoWindow class and add your command in that class

0 Kudos