Community
Select to view content in your preferred language

FosterTabs easy change

1218
7
09-08-2010 08:06 PM
DavidAshton
by
Frequent Contributor
‎09-08-2010 08:06 PM
I'm just getting started with Silverlight and I'm using trying to modify the fostertab template. 

All I want to do is change the content for the 3 radio buttons.  I want to use different services.  The problem I'm running into is I want to use one services that is Tiled and two services that are ImageServices.  The template is set up grouping the three layers as and all the layers are tiled. So I was wondering if there was an easy way to set the last two radio buttons up for using non-tiled services (I want them to be set to image services).

 <esri:ArcGISTiledMapServiceLayer ID="BaseLayer" 
              Url="http://services.arcgisonline.com/ArcGIS/rest/services/World_Topo_Map/MapServer" Initialized="ArcGISTiledMapServiceLayer_Initialized" />
                        <esri:GraphicsLayer ID="MySelectionGraphicsLayer" />


<RadioButton Content="Street Base Topo" IsChecked="True" ToolTipService.ToolTip="World Topo Base Map" GroupName="BaseLayer" Margin="0" FontSize="11" >
                                                    <i:Interaction.Triggers>
                                                        <i:EventTrigger EventName="Checked">
                                                            <actions:SetLayerUrlAction TargetName="Map" LayerID="BaseLayer" Url="http://services.arcgisonline.com/ArcGIS/rest/services/World_Topo_Map/MapServer"/>
                                                        </i:EventTrigger>
                                                    </i:Interaction.Triggers>
                                                </RadioButton>
                                                <RadioButton Content="Imagery2" GroupName="BaseLayer" ToolTipService.ToolTip="ImageService2" Margin="5,0,0,0" FontSize="11" >
                                                    <i:Interaction.Triggers>
                                                        <i:EventTrigger EventName="Checked">
                                                            <actions:SetLayerUrlAction TargetName="Map" LayerID="BaseLayer" Url="ImageService2r" />
                                                        </i:EventTrigger>
                                                    </i:Interaction.Triggers>
                                                </RadioButton>
                                                <RadioButton Content="Imagery1" ToolTipService.ToolTip="Imagery Map1" GroupName="BaseLayer" Margin="5,0,0,0" FontSize="11" >
                                                    <i:Interaction.Triggers>
                                                        <i:EventTrigger EventName="Checked">
                                                            <actions:SetLayerUrlAction TargetName="Map" LayerID="BaseLayer" Url="ImageService"/>
                                                        </i:EventTrigger>
                                                    </i:Interaction.Triggers>
                                                </RadioButton>


Thanks inadvance
0 Kudos
7 Replies
dotMorten_esri
by Esri Notable Contributor
Esri Notable Contributor
‎09-09-2010 08:45 AM
You cannot use the SetLayerUrl action for this.
Instead add 3 layers, one for each baselayer. Use the toggle layer visibility action instead for turning on/off layers when the radio buttons are checked.
0 Kudos
DavidAshton
by
Frequent Contributor
‎09-09-2010 10:23 AM
You cannot use the SetLayerUrl action for this.
Instead add 3 layers, one for each baselayer. Use the toggle layer visibility action instead for turning on/off layers when the radio buttons are checked.


Morton...Thanks for the reply.  First let me say thanks, I feel blessed and humbled that you had the time to reply to my message....I've seen you in action and you are a programming machine.  With all that said and the praises stated I feel ashamed and embarrassed because I�??m so green I�??m not exactly sure how to take your advice. 

I tried looking up the ToggleLayerAction Class in the Silverlight API ref but I still had trouble. 

So here�??s what I think I need to do but if I do this I get a message stating that the property layer id was not found in the visiblelayeraction.  Should I use the targetobject property instead, if I use the targetobject property instead of the LayerID all the services draw but the radio buttons don't work?
Sorry I'm still kind of lost!


  <!-- Map -->
        <Grid x:Name="MapDisplayGrid" Margin="0" >
            <Border x:Name="MapBorder" Margin="0" BorderBrush="#FF666666" BorderThickness="1" >
                <Grid x:Name="MapGrid" RenderTransformOrigin="0.5,0.5">
                    <Grid.Projection>
                        <PlaneProjection x:Name="mapPlaneProjection" RotationX="0"  />
                    </Grid.Projection>
                    <esri:Map x:Name="Map" Background="White" Extent="-130,10,-70,60" Loaded="Map_Loaded" >
                        <i:Interaction.Triggers>
                            <i:EventTrigger EventName="MouseEnter">
                                <ei:ChangePropertyAction TargetName="myMenuItems" PropertyName="Visibility">
                                    <ei:ChangePropertyAction.Value>
                                        <Visibility>Collapsed</Visibility>
                                    </ei:ChangePropertyAction.Value>
                                </ei:ChangePropertyAction>
                            </i:EventTrigger>
                        </i:Interaction.Triggers>
                        <esri:ArcGISTiledMapServiceLayer ID="BaseLayer" 
              Url="http://server.arcgisonline.com/ArcGIS/rest/services/ESRI_StreetMap_World_2D/MapServer" Initialized="ArcGISTiledMapServiceLayer_Initialized" />
                        <esri:GraphicsLayer ID="MySelectionGraphicsLayer" />

                        <esri:ArcGISImageServiceLayer ID="ImageLayer" Url="http://imaps.dfg.ca.gov/ArcGIS/rest/services/Base_Remote_Sensing/NAIP_2009/ImageServer" />

                        <esri:ArcGISImageServiceLayer ID="ImageLayer2" Url="http://imaps.dfg.ca.gov/ArcGIS/rest/services/Base_Remote_Sensing/NAIP_2005/ImageServer" />

                    </esri:Map>
                    <Rectangle Width="2" Height="10" Fill="Black" Opacity="0.75" HorizontalAlignment="Center" VerticalAlignment="Center" IsHitTestVisible="False" />
                    <Rectangle Height="2" Width="10" Fill="Black" Opacity="0.75" HorizontalAlignment="Center" VerticalAlignment="Center" IsHitTestVisible="False" />

                </Grid>
            </Border>



Then do in the radio/veiw optoins tab:

<!-- Map Style -->
                                    <Button Style="{StaticResource RibbonButton}" Margin="5,0,5,0" Cursor="Hand" ToolTipService.ToolTip="Toggle Map Rotation" VerticalAlignment="Top"  HorizontalAlignment="Center"  Padding="5,10,5,10" >
                                        <Grid HorizontalAlignment="Center" Margin="0,-10,0,0">
                                            <StackPanel Orientation="Horizontal" Margin="5,14,5,0" HorizontalAlignment="Center" VerticalAlignment="Center" Effect="{StaticResource miniDropShadow}" >
                                                <RadioButton Content="Streets" IsChecked="True" ToolTipService.ToolTip="Worldwide Street Map" GroupName="BaseLayer" Margin="0" FontSize="11" >
                                                    <i:Interaction.Triggers>
                                                        <i:EventTrigger EventName="Checked">
                                                            <actions:SetLayerUrlAction TargetName="Map" LayerID="BaseLayer" Url="http://server.arcgisonline.com/ArcGIS/rest/services/ESRI_StreetMap_World_2D/MapServer"/>
                                                        </i:EventTrigger>
                                                    </i:Interaction.Triggers>
                                                </RadioButton>
                                                <RadioButton Content="Topo" GroupName="ImageLayer" ToolTipService.ToolTip="United States Topographic Map" Margin="5,0,0,0" FontSize="11" >
                                                    <i:Interaction.Triggers>
                                                        <i:EventTrigger EventName="Checked">
                                                            <actions:ToggleVisibilityAction TargetName="Map" LayerID="ImageLayer" />
                                                        </i:EventTrigger>
                                                    </i:Interaction.Triggers>
                                                </RadioButton>
                                                <RadioButton Content="Imagery" ToolTipService.ToolTip="Worldwide Satellite Imagery Map" GroupName="ImageLayer2" Margin="5,0,0,0" FontSize="11" >
                                                    
                                                    <i:Interaction.Triggers>
                                                        <i:EventTrigger EventName="Checked">
                                                            <actions:ToggleVisibilityAction TargetName="Map" LayerID="ImageLayer2" />
                                                        </i:EventTrigger>
                                                    </i:Interaction.Triggers>
                                                   
                                                </RadioButton>
                                            </StackPanel>
0 Kudos
DavidAshton
by
Frequent Contributor
‎09-13-2010 03:42 PM
Any more help out there?
0 Kudos
DominiqueBroux
by Esri Frequent Contributor
Esri Frequent Contributor
‎09-14-2010 01:03 AM
You can't use the toggle visibility action for this:

 <actions:ToggleVisibilityAction TargetName="Map" LayerID="ImageLayer2" />


This action allows to toggle the visibility (collapsed/visible) of an UI element. It's not designed to toggle a layer visible property (because: ToggleVisibilityAction has no layerID property, a layer is not an UI element, visible property of a layer is not (collapsed/visible) but (true/false)).

The action Morten was talking about was 'ToggleLayerAction' provided in the ESRI.ArcGIS.Client.Behaviors dll (need to add a reference in your project).

That being said if you want to be able to see multiple services at the same time (looks to be the case since your radiobuttons are not from the same group), you can simply use a checkbox and a simple binding:
<CheckBox Content="Imagery" ToolTipService.ToolTip="Worldwide Satellite Imagery Map" Margin="5,0,0,0" FontSize="11" IsChecked="{Binding Layers[ImageLayer2].Visible, ElementName=Map, Mode=TwoWay}" />


If you want to get only one visible, Radio buttons are the right choice (in the same group). But if there is more than 2 layers in your group, I think you can't get the result with the existing 'ToggleLayerAction'.

You need to write a SetLayerVisibilityAction:
 
namespace ESRI.ArcGIS.SilverlightMapApp.Actions
{
public class SetLayerVisibilityAction : TargetedTriggerAction<Map>
{
/// <summary>
/// Invokes the action.
/// </summary>
/// <param name="parameter">The parameter to the action. If the Action does not require a parameter, the parameter may be set to a null reference.</param>
protected override void Invoke(object parameter)
{
if (!string.IsNullOrEmpty(LayerID))
{
Layer l = Target.Layers[LayerID];
l.Visible = Visible;
}
}
/// <summary>
/// Gets or sets the ID of layer to work with.
/// </summary>
/// <value>The layer ID.</value>
public string LayerID
{
get { return (string)GetValue(LayerIDProperty); }
set { SetValue(LayerIDProperty, value); }
}
/// <summary>
/// Identifies the <see cref="LayerID"/> dependency property.
/// </summary>
public static readonly DependencyProperty LayerIDProperty =
DependencyProperty.Register("LayerID", typeof(string), typeof(SetLayerVisibilityAction), null);
/// <summary>
/// Gets or sets the visibility of the layer.
/// </summary>
/// <value>The layer ID.</value>
public bool Visible
{
get { return (bool)GetValue(VisibleProperty); }
set { SetValue(VisibleProperty, value); }
}
/// <summary>
/// Identifies the <see cref="Visible"/> dependency property.
/// </summary>
public static readonly DependencyProperty VisibleProperty =
DependencyProperty.Register("Visible", typeof(bool), typeof(SetLayerVisibilityAction), null);
}
}




Then in your XAML you can set/unset visibility of layers:
 
<i:Interaction.Triggers>
  <i:EventTrigger EventName="Checked">
    <actions:SetLayerVisibilityAction TargetName="Map" LayerID="BaseLayer" Visible="False"/>
    <actions:SetLayerVisibilityAction TargetName="Map" LayerID="ImageLayer1" Visible="False"/>
    <actions:SetLayerVisibilityAction TargetName="Map" LayerID="ImageLayer2" Visible="True"/>
  </i:EventTrigger>
</i:Interaction.Triggers>
0 Kudos
DavidAshton
by
Frequent Contributor
‎09-15-2010 08:43 AM
Dominique,

Thanks for the reply.
I must apologize, I feel completely ignorant after all yours and Morton�??s help I am still struggling.

Dominique, I took your code and I created a new C# file and placed it under the Actions folder.  (Named SetVisibleActionLayer)....seems good so far.

Where I think I went wrong is where I placed the Xaml code.  I took your three lines of xaml code and placed them in the radio button area.  I commented out the old SetLayerUrlAction lines.

 <RadioButton Content="Streets" IsChecked="True" ToolTipService.ToolTip="Worldwide Street Map" GroupName="BaseLayer" Margin="0" FontSize="11" >
                                                    <i:Interaction.Triggers>
                                                        <i:EventTrigger EventName="Checked">
                                                            <actions:SetLayerVisibilityAction TargetName="Map" LayerID="BaseLayer" Visible="False"/>
                                                            <!--actions:SetLayerUrlAction TargetName="Map" LayerID="BaseLayer" Url="http://server.arcgisonline.com/ArcGIS/rest/services/ESRI_StreetMap_World_2D/MapServer"/-->
                                                        </i:EventTrigger>
                                                    </i:Interaction.Triggers>
                                                </RadioButton>
                                                <RadioButton Content="Topo" GroupName="BaseLayer" ToolTipService.ToolTip="United States Topographic Map" Margin="5,0,0,0" FontSize="11" >
                                                    <i:Interaction.Triggers>
                                                        <i:EventTrigger EventName="Checked">
                                                            <actions:SetLayerVisibilityAction TargetName="Map" LayerID="ImageLayer1" Visible="False"/>
                                                            <!--actions:SetLayerUrlAction TargetName="Map" LayerID="BaseLayer" Url="http://services.arcgisonline.com/ArcGIS/rest/services/NGS_Topo_US_2D/MapServer"/-->
                                                        </i:EventTrigger>
                                                    </i:Interaction.Triggers>
                                                </RadioButton>
                                                <RadioButton Content="Imagery" ToolTipService.ToolTip="Worldwide Satellite Imagery Map" GroupName="BaseLayer" Margin="5,0,0,0" FontSize="11" >
                                                    <i:Interaction.Triggers>
                                                        <i:EventTrigger EventName="Checked">
                                                            <actions:SetLayerVisibilityAction TargetName="Map" LayerID="ImageLayer2" Visible="True"/>
                                                            <!--actions:SetLayerUrlAction TargetName="Map" LayerID="BaseLayer" Url="http://services.arcgisonline.com/ArcGIS/rest/services/ESRI_Imagery_World_2D/MapServer"/-->
                                                        </i:EventTrigger>
                                                    </i:Interaction.Triggers>
                                                </RadioButton>




Then I went into the xaml, where the map is defined and add these lines (I'm using the 3 services that the Frosted Template original referrenced and thought once I get it working I will switch two of the over to the image services that I'm interested in diplaying.

 <esri:Map x:Name="Map" Background="White" Extent="-130,10,-70,60" Loaded="Map_Loaded" >
                        <i:Interaction.Triggers>
                            <i:EventTrigger EventName="MouseEnter">
                                <ei:ChangePropertyAction TargetName="myMenuItems" PropertyName="Visibility">
                                    <ei:ChangePropertyAction.Value>
                                        <Visibility>Collapsed</Visibility>
                                    </ei:ChangePropertyAction.Value>
                                </ei:ChangePropertyAction>
                            </i:EventTrigger>
                        </i:Interaction.Triggers>
                        
                        <esri:ArcGISTiledMapServiceLayer ID="BaseLayer" 
              Url="http://server.arcgisonline.com/ArcGIS/rest/services/ESRI_StreetMap_World_2D/MapServer" Initialized="ArcGISTiledMapServiceLayer_Initialized" />
                        <esri:GraphicsLayer ID="MySelectionGraphicsLayer" />
                        <esri:ArcGISTiledMapServiceLayer ID="ImageLayer2"  Url="http://services.arcgisonline.com/ArcGIS/rest/services/ESRI_Imagery_World_2D/MapServer" />
                        <esri:ArcGISTiledMapServiceLayer ID="ImageLayer" Url="http://services.arcgisonline.com/ArcGIS/rest/services/NGS_Topo_US_2D/MapServer" />
                        

                    </esri:Map>


It is just drawing the layers in order, how they are listed in the map section.  It seems like my xaml code is wrong but I'm still confused.

So sorry!
0 Kudos
DominiqueBroux
by Esri Frequent Contributor
Esri Frequent Contributor
‎09-15-2010 09:59 AM
Hi DAshton,

If you want only one layer visible among 3, it means that each time the user clicks a radio button you have to set the visibility of one layer and unset the visibility of the 2 others. So my 3 lines of xaml code had be duplicated for each button with the visible values modified appropriately.

  <RadioButton Content="Streets" IsChecked="True" ToolTipService.ToolTip="Worldwide Street Map" GroupName="BaseLayer" Margin="0" FontSize="11" >
                                                    <i:Interaction.Triggers>
                                                        <i:EventTrigger EventName="Checked">
                                                            <actions:SetLayerVisibilityAction TargetName="Map" LayerID="BaseLayer" Visible="True"/>
                                                            <actions:SetLayerVisibilityAction TargetName="Map" LayerID="ImageLayer" Visible="False"/>
                                                            <actions:SetLayerVisibilityAction TargetName="Map" LayerID="ImageLayer2" Visible="False"/>
                                                        </i:EventTrigger>
                                                    </i:Interaction.Triggers>
                                                </RadioButton>
                                                <RadioButton Content="Topo" GroupName="BaseLayer" ToolTipService.ToolTip="United States Topographic Map" Margin="5,0,0,0" FontSize="11" >
                                                    <i:Interaction.Triggers>
                                                        <i:EventTrigger EventName="Checked">
                                                           <actions:SetLayerVisibilityAction TargetName="Map" LayerID="BaseLayer" Visible="False"/>
                                                            <actions:SetLayerVisibilityAction TargetName="Map" LayerID="ImageLayer" Visible="True"/>
                                                            <actions:SetLayerVisibilityAction TargetName="Map" LayerID="ImageLayer2" Visible="False"/>
                                                        </i:EventTrigger>
                                                    </i:Interaction.Triggers>
                                                </RadioButton>
                                                <RadioButton Content="Imagery" ToolTipService.ToolTip="Worldwide Satellite Imagery Map" GroupName="BaseLayer" Margin="5,0,0,0" FontSize="11" >
                                                    <i:Interaction.Triggers>
                                                        <i:EventTrigger EventName="Checked">
                                                            <actions:SetLayerVisibilityAction TargetName="Map" LayerID="BaseLayer" Visible="False"/>
                                                            <actions:SetLayerVisibilityAction TargetName="Map" LayerID="ImageLayer" Visible="False"/>
                                                            <actions:SetLayerVisibilityAction TargetName="Map" LayerID="ImageLayer2" Visible="True"/>
                                                        </i:EventTrigger>
                                                    </i:Interaction.Triggers>
                                                </RadioButton>


You might also initialize your map with only one layer visible by setting the visible property:

                       <esri:ArcGISTiledMapServiceLayer ID="BaseLayer" 
            Url="http://server.arcgisonline.com/ArcGIS/rest/services/ESRI_StreetMap_World_2D/MapServer" Initialized="ArcGISTiledMapServiceLayer_Initialized" />
                        <esri:GraphicsLayer ID="MySelectionGraphicsLayer" />
                        <esri:ArcGISTiledMapServiceLayer ID="ImageLayer2" Visible="False" Url="http://services.arcgisonline.com/ArcGIS/rest/services/ESRI_Imagery_World_2D/MapServer" />
                        <esri:ArcGISTiledMapServiceLayer ID="ImageLayer" Visible="False"  Url="http://services.arcgisonline.com/ArcGIS/rest/services/NGS_Topo_US_2D/MapServer" />


My first post was not enough clear. Sorry about that.
0 Kudos
DavidAshton
by
Frequent Contributor
‎09-15-2010 03:41 PM
Dominique and Morton,

Thanks you so much. Thank you for walking me through this I really appreciate it. I did want only one layer visible among 3 and I now have it working.  Thanks a bunch.  You guys rock! 

David
0 Kudos