Select to view content in your preferred language

Versatile symbol selector for drawing

2306
8
03-04-2011 09:35 PM
samulineuvonen
Deactivated User
Hello,
We wish to create a service where the user can select from a multitude of symbols, select symbol colors and draw on the map using these selected symbols. I have been trying to look for examples of this but haven't found any. All sample cases contain only a few symbols, defined manually in the page xaml. We would like to use a separate resource xaml, similar to the resource xamls in the ESRI symbol gallery (http://help.arcgis.com/en/webapi/silverlight/samples/SymbolGalleryWeb/start.htm). Actually, the code of this symbol gallery implementation would help us a lot. I guess it is not available?

What we need:
1. To read symbol definitions from a resource file in code behind
2. Loop through these symbols and present them to the user (e.g. with SymbolDisplay)
3. Use the symbol and color(s) selected by the user for the graphic drawn

Any help (links, sample code etc) would be much appreciated!
0 Kudos
8 Replies
JenniferNery
Esri Regular Contributor
You can define your symbols under Resources, use Editor.Add and SymbolDisplay. You can update this sample with the following code: http://help.arcgis.com/en/webapi/silverlight/samples/start.htm#CustomSymbols

    xmlns:esriPrimitives="clr-namespace:ESRI.ArcGIS.Client.Toolkit.Primitives;assembly=ESRI.ArcGIS.Client.Toolkit"

<StackPanel VerticalAlignment="Top" HorizontalAlignment="Center" Orientation="Horizontal" DataContext="{StaticResource MyEditor}">
 <Button Command="{Binding Add}" CommandParameter="{StaticResource StrobeMarkerSymbol}">
  <Button.Content>
   <esriPrimitives:SymbolDisplay Height="25" Width="30" Symbol="{StaticResource StrobeMarkerSymbol}"/>
  </Button.Content>
 </Button>
 <Button Command="{Binding Add}" CommandParameter="{StaticResource SelectRectangleMarkerSymbol}">
 <Button.Content>
  <esriPrimitives:SymbolDisplay Height="25" Width="30" Symbol="{StaticResource SelectRectangleMarkerSymbol}"/>
  </Button.Content>
 </Button>
</StackPanel>
0 Kudos
samulineuvonen
Deactivated User
Thanks for you reply Jennifer,

However, this is not quite what I had in mind. True, you are using symbols from resources in your example but you are still selecting the symbols to be used within the xaml. I wish to generate the list of symbols in the code behind, so that whenever we change the resource file, the list changes automatically. Or maybe this could/should be done by binding as well, I'm not sure.

I would like to do something like in the following (consider this pseudo-code):

IEnumerable<MarkerSymbol> symbols = ResourceDictionary.OfType<MarkerSymbol>();
foreach (MarkerSymbol symbol in symbols)
   ComboBox.Items.Add(???);


Does this make any sense?
0 Kudos
JenniferNery
Esri Regular Contributor
Sure, you can translate the XAML-code in code-behind. ComboBox.DataContext will be an Editor that works on a single GraphicsLayer, Items will be Buttons with Command bound to Add and CommandParameter bound to the symbol. You can probably set the ItemTemplate to show both the symbol and the resource key.
0 Kudos
samulineuvonen
Deactivated User
Thanks again Jennifer!

But I still think we are not talking about the same thing. Or maybe I just don't properly understand the Editor class. But I don't think my main problem is with selecting the symbols as such but in dynamically creating a list of symbols from a resource file. If I could find a way to retrieve certain types of symbols from resources and set them up as a list, I think I would figure my way ahead from there.

But if you have any samples of the type of solution you are thinking about, I would be happy to check that out as well.

Thanks,
Samuli
0 Kudos
samulineuvonen
Deactivated User
And once more: I would really be interested to see the XAML and the code behind in that ESRIs symbol gallery application. It seemed to have procedures with promising names like "LoadResourceDictionary"...
0 Kudos
samulineuvonen
Deactivated User
Small update:

I just now noticed the code provided in the Help of the Symbol Gallery, describing some of the functionality (including the before mentioned LoadResourceDictionary). However, some of the most interesting codes are missing (ResetSymbolDisplay). Search continues...
0 Kudos
JenniferNery
Esri Regular Contributor
To explain post#2 you can look at the Editing samples in the SDKhttp://help.arcgis.com/en/webapi/silverlight/samples/start.htm#EditToolsExplicitSave. Particulary, Add button.

But if you only want the symbols from your resources displayed I think you can take the following approach. http://forums.silverlight.net/forums/p/172984/389383.aspx

xmlns:esri="http://schemas.esri.com/arcgis/client/2009" 
    xmlns:esriPrimitives="clr-namespace:ESRI.ArcGIS.Client.Toolkit.Primitives;assembly=ESRI.ArcGIS.Client.Toolkit" 
    xmlns:local="clr-namespace:SymbolSelector">
 <Grid x:Name="LayoutRoot" Background="White">
  <Grid.Resources>
   <local:ObjectCollection x:Key="SymbolCollection">
    <esri:SimpleMarkerSymbol Color="Red" Style="Circle" Size="15" />
    <esri:SimpleMarkerSymbol Color="Green" Style="Circle" Size="15" />
    <esri:SimpleMarkerSymbol Color="Yellow" Style="Circle" Size="15" />
   </local:ObjectCollection>
  </Grid.Resources>
  <ComboBox ItemsSource="{StaticResource SymbolCollection}" VerticalAlignment="Top" HorizontalAlignment="Center">
   <ComboBox.ItemTemplate>
    <DataTemplate>
     <Button>
      <Button.Content>
       <esriPrimitives:SymbolDisplay Height="25" Width="30" Symbol="{Binding}" />
      </Button.Content>
     </Button>
    </DataTemplate>
   </ComboBox.ItemTemplate>
  </ComboBox>
 </Grid>
</UserControl>

0 Kudos
AlirezaAhmadi
Emerging Contributor
It seems esriToolkitPrimitives does not show a custom Marker Symbol collection . When I use a custom Marker Symbol ( inherited form MakerSymbol with size and color dependency properties ) , the symbols do not show up in the combo box. I do not have any problem if i switch to MarkerSymbol collection intead of custom ones.


<StackPanel Orientation="Horizontal">
            <ComboBox x:Name="ComboMarkerSymbol"  ItemsSource="{StaticResource EsriCustomMarkerSymbolCollection}"  HorizontalAlignment="Left" VerticalAlignment="Top" >
                <ComboBox.ItemsPanel>
                    <ItemsPanelTemplate>
                        <toolkit:WrapPanel Orientation="Horizontal" Background="LightBlue"   Width="210" VerticalAlignment="Top"/>
                    </ItemsPanelTemplate>
                </ComboBox.ItemsPanel>
                <ComboBox.ItemTemplate>
                    <DataTemplate>
                        <Button Click="MarkerSymbolButton_Click"  >
                            <esriToolkitPrimitives:SymbolDisplay Height="25" Width="30" Symbol="{Binding}" />
                        </Button>
                    </DataTemplate>
                </ComboBox.ItemTemplate>
            </ComboBox>
        </StackPanel>


here is the custom Market Symbol:
---------------------------------------------------------------------------------------------

public class CustomMarkerSymbol : MarkerSymbol
    {
        public static readonly DependencyProperty ColorProperty = DependencyProperty.Register("Color", typeof(Brush), typeof(CustomMarkerSymbol), null);
        public static readonly DependencyProperty SelectionColorProperty = DependencyProperty.Register("SelectionColor", typeof(Brush), typeof(CustomMarkerSymbol), null);
        public static readonly DependencyProperty SizeProperty = DependencyProperty.Register("Size", typeof(double), typeof(CustomMarkerSymbol), null);
    
        public CustomMarkerSymbol()
        {
            this.Color = new SolidColorBrush(Colors.Red);
            this.SelectionColor = new SolidColorBrush(Colors.Cyan);

        }

        public Brush Color
        {
            get
            {
                return (Brush)GetValue(ColorProperty);
            }
            set
            {
                SetValue(ColorProperty, value);
            }
        }
...............
and here is my dictionary :
<local:ObjectCollection x:Name="EsriCustomMarkerSymbolCollection">
        <classData:CustomMarkerSymbol x:Name="CustomMarker_33" OffsetX="6.5" OffsetY="6.5">
            <classData:CustomMarkerSymbol.ControlTemplate>
                <ControlTemplate>
                    <Grid RenderTransformOrigin="0.5,0.5">
                        <Grid.RenderTransform>
                            <TransformGroup>
                                <ScaleTransform ScaleX="{Binding Symbol.Size}" ScaleY="{Binding Symbol.Size}" />
                            </TransformGroup>
                        </Grid.RenderTransform>
                        <Ellipse Width="13" Height="13" Fill="{Binding Symbol.Color}" HorizontalAlignment="Center" VerticalAlignment="Center" />
                    </Grid>
                </ControlTemplate>
            </classData:CustomMarkerSymbol.ControlTemplate>
        </classData:CustomMarkerSymbol>

    </local:ObjectCollection>

</ResourceDictionary>
0 Kudos