Layout Customization

[StacieMcGahey]

Is there a way to add an image to a custom layout in addition to the logo?  I'm assuming it just cannot find the path when the xaml is moved to the appropriate application folder, but I can't seem to figure out the right location and path.

Also can any customization be made to the legend?  Specifically, I want to add an opacity slider beside each layer.

Thanks,
Stacie

[KatherineDalton]

Hi Stacie,

For images, if the image is included with an add-in, you can do it this way: <Image Source="/TransparencySlider.AddIns;component/Images/EsriLogo.png" Width="100"/>, where the EsriLogo is in the Images folder of my TransparencySlider.AddIns project. If it's an image that is being pulled from Builder\Apps\Editing\Images\MarkerSymbols (for example) you can use  <Image Source="Images/MarkerSymbols/PeoplePlaces/Information.png" Width="100"/> in the xaml.


For adjusting the opacity/transparency of a layer, it might be easier to simply add a single slider control to your layout, and then you can bind that to the opacity of the selected layer. That way the slider works on whatever layer is selected at the time.


Here is the general code if you want a dialog that displays a transparency slider. If you want to add the slider control to the layout, grab just the <slider.../> line and place that in the layout similarly to how we demonstrate in our Controls" rel="nofollow" target="_blank">http://help.arcgis.com/en/webapps/silverlightviewer/samples... samples. The nice thing about the code below is that it uses MapApplicationBindingSource, which is the same that is used in all of the layouts. This way, you can create and work with controls and binding in a dialog for testing, and then take that control and place it directly in the layout and the {StaticResource MapApplication} is already set correctly.

<UserControl x:Class="TransparencySlider.AddIns.MyConfigDialog"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
             xmlns:esri="http://schemas.esri.com/arcgis/client/extensibility/2010"
    mc:Ignorable="d"
    d:DesignHeight="300" d:DesignWidth="400">

    <UserControl.Resources>
        <esri:MapApplicationBindingSource x:Name="MapApplication"/>
    </UserControl.Resources>

    <Grid x:Name="LayoutRoot" Background="Transparent">
        <StackPanel Margin="10" Background="Transparent">
            <StackPanel Margin="30">
                <Slider  Height="23" Width="250" Name="slider1" Minimum="0" Maximum="1" Value="{Binding Path=SelectedLayer.Opacity, Mode=TwoWay, Source={StaticResource MapApplication}}" IsDirectionReversed="True" />
            </StackPanel>
        </StackPanel>
    </Grid>
</UserControl>

Here is an example of including that slider in the layout. Obviously you can change the location/placement as needed. And see our sample on Control with Toggle Tool if you want to be able to toggle it on and off.

<StackPanel HorizontalAlignment="Left" VerticalAlignment="Bottom" Margin="50">
                    <Border x:Name="TransparencySliderContainer" Style="{StaticResource GlassyBorder_Bottom}" Margin="5,0,0,5" 
                            VerticalAlignment="Bottom" d:LayoutOverrides="HorizontalAlignment, VerticalAlignment" HorizontalAlignment="Left" Width="291">
                        <Grid>
                            <Border Style="{StaticResource GlassyBorder_Top}" Margin="0" />
                            <StackPanel Background="{StaticResource BackgroundGradientBrush}" Margin="5">
                                <Slider  Height="23" Width="250" Name="slider1" Minimum="0" Maximum="1" Value="{Binding Path=SelectedLayer.Opacity, Mode=TwoWay, Source={StaticResource MapApplication}}" IsDirectionReversed="True" />
                             </StackPanel>
                        </Grid>
                    </Border>
                </StackPanel>

[GalAvraham]

Hello Katy
I find this "how-to" very useful, as this is the exact type of functionality I'm looking to implement in a demo for one of our costumer. Unfortunately, I'm not a developer and I'm getting hard time figuring out how to use this sample within an application I've deployed earlier. I hope this is not to much to ask, but can you supply a specific directions to none programmers on how to implement this sample?
What I wish to have in hand is the opacity slider control for each of the layers (except for the basemap) added to the application. Is it possible?
Correct me if wrong, but I guess that it will be much easier to add this functionality to one/any of the xaml layouts installed with the builder (located under ...Builder\Templates\Default\Config\Layouts). Thus, any application that will be deployed will have this functionality available.
Or maybe it will be more realistic to add it to a specific application/specific layer in that application?

In either of these cases my questions are:
1. Where exactly within the code I need to put the sample you supplied?
2. After adding it to the code, how do one deploys it? Is there a need for "compiling" the source code (we do have MS Visual Studio 2010 installed on the testing server)
3. How to "Tie" this functionality to the desired layer specified in the table of content (except for the basemap)?

I hope I'm not missing anything.
Many thanks in advance,

Cheers,
Gal Avraham

[KatherineDalton]

Hi Gal,

In the above response to Stacie, I basically gave information on two different approaches: 1) Add the opacity slider to the layout (no coding required) or 2) Create a dialog to host the slider (coding required). For option 1 (which it sounds like is your preference), it is actually quite easy to add a basic opacity slider to the layout. There is one line of xaml that needs to be added to the layout you are using: <Slider  Height="23" Width="250" Name="slider1" Minimum="0" Maximum="1" Value="{Binding Path=SelectedLayer.Opacity, Mode=TwoWay, Source={StaticResource MapApplication}}" IsDirectionReversed="True" />. With that line, the opacity slider automatically "connects" to the selected layer in the Map Contents panel. You do not need to do any compiling for this to work. You had a question as to where to place that particular line? It depends on your preference, and sometimes it can take a bit of fiddling, but you can see our Control" rel="nofollow" target="_blank">http://help.arcgis.com/en/webapps/silverlightviewer/samples/... in Layout sample (under the Controls section) for more information. The Slider is a control in the same way that the Chart is a control in that sample. If you look for the "<esri:MapProgressBar..." tag in the GlassPlusControl.xaml file that is included as part of the sample, you'll see exactly how/where we placed the chart control in the layout.

>>Correct me if wrong, but I guess that it will be much easier to add this functionality to one/any of the xaml layouts installed with the builder (located under ...Builder\Templates\Default\Config\Layouts). Thus, any application that will be deployed will have this functionality available.

If you knew that each application you built would need this functionality, you could certainly add it to the layouts that are installed with the builder instead of modifying a single layout for an application. This would be your preference. Or you could create the layout you want and keep it in a "safe" location for use. Either way I'd advise making a back-up of your Layouts folder. 🙂

I hope this helps!

Katy

[GalAvraham]

Hi katy
Many thanks for the prompt reply. I've been able to add this functionality to the viewer, and it's working properly. Now I need to find out where the TOC section in the code is. As you said a bit of fiddling is needed, so happy fiddling to me :).
Many thanks , again

Cheers,
Gal

[MonikaHonkova1]

Hello Katy,

I'm new to Silverlight. I managed to add a slider but it's floating in my map. I'd like to add the slider to layers in the ToC or just somewhere inside of the ToC. Is there any easy way of doing that? I'm using Basic Silverlight template.

Thanks, Monika