How to use examples from site?

[DmitryBubnenkov]

I am learning programming in C#/Silverlight.

I made clean project in VS. The MainPage.xaml include next code http://pastebin.com/wBVXTrPx and it's successfully compiles and work.
I need to in which place I need to put code from examples ( for example this http://help.arcgis.com/en/webapi/silverlight/samples/start.htm#Magnify ) to get them work. In which place I need to put xaml and C# code.

Do I right understand that code maybe included as:
1. widget code
2. just putted in common code of the project?

I tried to follow documentation, but did not understand how to use examples. http://help.arcgis.com/en/webapi/silverlight/help/index.html#/Managing_graphic_features/01660000001p... "The code that follows assumes that you have already gotten a reference to a list of graphics and stored them in a variable called graphicsList".

And "The following code assumes that a symbol called MySymbol has already been declared"

But how I should create it?

Could anybody explain me in step by step mode, what I should to do do get examples work?

[AnttiKajanus1]

First make sure that you have reference to needed assemblies:

Click References open in the solution explorer and check that you have ESRI.ArcGIS.Client and ESRI.ArgGIS.ClientToolkit in the list. If not, add them. If on compile time Visual Studio is saying something about serialization add System.Runtime.Serialization to your project.

Then copy code:

1. Copy XAML part from 2nd row (from the example) until the end and copy that to your main page from 2nd row so your main page should look like this:

<UserControl x:Class="SilverlightApplication3.MainPage"
 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">


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


        <Grid HorizontalAlignment="Right" VerticalAlignment="Top" Margin="0,10,10,0" >
            <Rectangle Fill="#77919191" Stroke="Gray"  RadiusX="10" RadiusY="10" Margin="0,0,0,5" >
                <Rectangle.Effect>
                    <DropShadowEffect/>
                </Rectangle.Effect>
            </Rectangle>
            <Rectangle Fill="#66FFFFFF" Stroke="DarkGray" RadiusX="5" RadiusY="5" Margin="10,10,10,15" />
            <Image x:Name="MyMagnifyImage" Source="/Assets/images/magglass.png"  Canvas.ZIndex="10" Margin="25, 20, 20, 25"
                   Stretch="UniformToFill" Width="32" Height="50"   
                   MouseLeftButtonDown="MyMagnifyImage_MouseLeftButtonDown" />
        </Grid>


        <Canvas>
            <esri:Magnifier x:Name="MyMagnifier" ZoomFactor="3" Canvas.ZIndex="10" Map="{Binding ElementName=MyMap}" >
                <esri:Magnifier.Layers>
                    <esri:ArcGISTiledMapServiceLayer ID="MagnifyImageLayer"
                        Url="http://services.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer" />
                </esri:Magnifier.Layers>
            </esri:Magnifier>
        </Canvas>
    </Grid>
</UserControl>

2. Copy

  private void MyMagnifyImage_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)        {
            MyMagnifier.Enabled = !MyMagnifier.Enabled;
        }

from the example CS tab to your MainPage.xaml.CS file after constructor

  public MainPage()
        {
            InitializeComponent();
        }

private void MyMagnifyImage_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)        {
            MyMagnifier.Enabled = !MyMagnifier.Enabled;
        }



Compile and have fun.

If you have more questions about this, let me know and mark to answered if you got things to work.

[ZacharyHart]

I'm still having trouble with this. Are there any videos out there for this? I'm even having difficulty in the full xaml code copying correctly.  😕

[DmitryBubnenkov]

Thanks! It's work, but how I can group it's to classes? It's not very good to put all code to Main


upd: How can I compile both example together? I mean how I can use this and previous code in one project?

Previous code have next Main:

  public MainPage()
        {
            InitializeComponent();
        }

private void MyMagnifyImage_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)        {
            MyMagnifier.Enabled = !MyMagnifier.Enabled;
        }

this code have:

 public partial class LayerList : UserControl
    {
        public LayerList()
        {
              InitializeComponent();
        }
    }

I tried to copy XML and C# code in fresh project, but when I am try to compile I getting error:
"Could not find type or namespace "MainPage" (missed directive using or link)"


When I click to error message, I jumped to App.xaml.cs to string

        private void Application_Startup(object sender, StartupEventArgs e)
        {
            this.RootVisual = new MainPage();
        }

[AnttiKajanus1 · Accepted solution]

If you want to add Layers to the list you need to copy needed code to your project. In this case you could copy following code from the example

<Border Background="#77919191" BorderThickness="1" CornerRadius="5"            HorizontalAlignment="Right"  VerticalAlignment="Top"             Margin="20" Padding="5" BorderBrush="Black" >             <ListBox x:Name="MyList" ItemsSource="{Binding ElementName=MyMap, Path=Layers}">                 <ListBox.ItemTemplate>                     <DataTemplate>                         <StackPanel Orientation="Horizontal">                             <!--Layer visibility checkbox-->                             <CheckBox IsChecked="{Binding Visible, Mode=TwoWay}" />                             <!--Opacity slider-->                             <Slider Margin="-5,0,0,0" Minimum="0" Maximum="1" Width="30"                                  Value="{Binding Opacity, Mode=TwoWay}" Height="18" />                             <!--Layer name-->                             <TextBlock Text="{Binding ID, Mode=OneWay}" Margin="5,0,0,0" >                              <!-- Tooltip on hover-->                                 <ToolTipService.ToolTip>                                     <StackPanel MaxWidth="400">                                         <TextBlock FontWeight="Bold" Text="{Binding CopyrightText}" TextWrapping="Wrap" />                                         <TextBlock Text="{Binding Description}" TextWrapping="Wrap" />                                     </StackPanel>                                 </ToolTipService.ToolTip>                             </TextBlock>                         </StackPanel>                     </DataTemplate>                 </ListBox.ItemTemplate>             </ListBox>         </Border>

and paste it to right after your Map-control in the XAML. In this case, all needed code is done in XAML and no code is located in the code behind file.

So, when your code is like it was on my previous post, copy needed code after

    </esri:Map>