Select to view content in your preferred language

Trying to understand this sample code

909
6
08-05-2010 03:50 PM
MansourArshon
Emerging Contributor
I am trying to understand the following sample code. It works find but I have difficulty to understand how the Binding works:
In the first use of Binding, we set the path and then the rest we omitted the path. is it because the other objects are the children of the Listbox?

Can somebody write a XAML code for me to put only one checkbox (no parent and no child, only one checkbox) and link the checked value to the layer visibility. I want to see how you will use the Binding to set the path as well as visibility.

Sorry, I am newbie in XAML and the Binding thing is seriously confusing.


        <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>

Thanks
0 Kudos
6 Replies
ChristopherHill
Deactivated User
ItemSource requires a collection. Map contains a collection of layes, so the first binding is pointing at the Map(MyMap).Layers collection. the path is used to drill down into the maps properties, in this case the Map.Layers collection. the remaining bindings are on each Layer in the collection.

--This is not actual syntax, just showing the logic of the parts---
ItemsSource="{Binding ElementName=MyMap, Path=Layers} is equal to  "MyMap.Layers"
foreach(Layer in MyMap.Layers)
{
  {Binding Description} is equal to "Layer.Description"
}

Some good resources to look at are:

For silverlight and XAML in general
http://silverlight.net

For bulidng ESRI silverlight applications
http://help.arcgis.com/en/webapi/silverlight/samples/start.htm
0 Kudos
MansourArshon
Emerging Contributor
This tutorial helped me a lot: http://www.silverlight.net/learn/quickstarts/bindingtocontrols/

If anybody knows more tutorial on "data binding to controls", please leave a link here.

Thanks,
Mansour
0 Kudos
JenniferNery
Esri Regular Contributor
Tim Heuer at Microsoft posts a lot of good samples and tutorials.

This one is specific to databinding: http://timheuer.com/blog/articles/silverlight-get-started-part-4-binding-data.aspx

In your earlier question, I think you need to understand the syntax used in Binding. For example, when no Path property is defined, it must be implied so {Binding Visible, Mode=TwoWay} is the same as {Binding Path=Visible, Mode=TwoWay}. And when no ElementName property is defined, the DataContext is assumed to have already been set. So {Binding Visible, Mode=TwoWay}, means grab the Visible property of the Layer, since the ListBox is already bound to the Map's Layers.

This is WPF DataBinding Cheat sheet, most of them apply to Silverlight so you might want to learn the syntax and when they are useful:http://www.nbdtech.com/Blog/archive/2009/02/02/wpf-xaml-data-binding-cheat-sheet.aspx

Good luck!

Jennifer
0 Kudos
MansourArshon
Emerging Contributor
Thanks for the URLs, they are very helpful however I had no luck in binding the value of a slider to the  Opacity of a certain layer.
Let assume I have a slider and a map layer with MyLayer Id.

<esri:Map x:Name="MyMap">
            <esri:ArcGISTiledMapServiceLayer ID="MyLayer " Visible="True"                   Url="http://server.arcgisonline.com/ArcGIS/rest/services/ESRI_Imagery_World_2D/MapServer" />
        </esri:Map>

How can I connect the slider value to the Opacity of this layer:
  <Slider Minimum="0" Maximum="1"  Value="{Binding ....}"/>

I want to tell the slider where to get the value in one binding statement. unlike the sample above which binds the map layers to a list box first and then the visibility and opacity to checkbox and slider. How can I put all the information in one binding statement?

Thanks,
Mansour
0 Kudos
JenniferNery
Esri Regular Contributor
In that case you will need a two-way Element Binding and for path, pass in the layer's Opacity. (see code below for sample).

   <esri:Map x:Name="MyMap">
            <esri:ArcGISTiledMapServiceLayer Url="http://server.arcgisonline.com/ArcGIS/rest/services/World_Street_Map/MapServer" />
            <esri:FeatureLayer ID="HomelandSecurity"                         
                               Url="http://sampleserver3.arcgisonline.com/ArcGIS/rest/services/BloomfieldHillsMichigan/LandusePlanning/FeatureServer/0"/>
        </esri:Map>
        <Slider x:Name="MySlider"
                VerticalAlignment="Top" 
                Minimum="0"
                Maximum="1"
                Value="{Binding ElementName=MyMap, Path=Layers[HomelandSecurity].Opacity, Mode=TwoWay}" />


Jennifer
0 Kudos
MansourArshon
Emerging Contributor
Perfect, Thank you Jennifer,

I actually wrote a similar code but instead of square bracket, I used parentheses and it didn't like it.

Thanks again,
Mansour
0 Kudos