Select to view content in your preferred language

Customizing FlareClusterer

1087
4
Jump to solution
01-12-2012 11:55 AM
OrlandoCarvajal
Deactivated User
Hi there,

I'd like to customize the symbols and/or behavior used with the FlareClusterer. For example, so far I've been able to highlight the cluster/flare symbols when one or more clustered points are selected. However, I'd like to adjust the size of the FlareSymbol, or perhaps its shape. I'm guessing that if I have access to the the Control Template used for FlareSymbols and ClusterSymbol I could manage to do such things. Could someone from ESRI provide it or someone else tell me how to extract it?

BTW, it'd be nice if when showing the flares, the circles representing the original points showed as the original symbols normally used without the cluster.

It's a very nice feature, but the client keeps asking for more tweaking 😉

Thanks,
Orlando
0 Kudos
1 Solution

Accepted Solutions
DaveTimmins
Deactivated User
Are you after this?

<ControlTemplate  xmlns="http://schemas.microsoft.com/client/2007"  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"  xmlns:vsm="clr-namespace:System.Windows;assembly=System.Windows"  xmlns:converter="clr-namespace:ESRI.ArcGIS.Client.ValueConverters;assembly=ESRI.ArcGIS.Client"  xmlns:sys="clr-namespace:System;assembly=mscorlib"  xmlns:esri="clr-namespace:ESRI.ArcGIS.Client;assembly=ESRI.ArcGIS.Client">  <Canvas x:Name="Root" Cursor="Hand" esri:Clusterer.ClusterChildElements="{FlareIDs}">   <Canvas.Resources>    <!--define converter for dictionaries so we can bind to to the attributes on the graphic-->    <converter:DictionaryConverter x:Name="DictConvert" />    <sys:Double x:Name="expandSize">35</sys:Double>    <sys:Double x:Name="strokeThickness">2</sys:Double>    <SolidColorBrush Color="#3B64AA" x:Name="FillColor" />    <SolidColorBrush Color="White" x:Name="StrokeColor" />   </Canvas.Resources>    <vsm:VisualStateManager.VisualStateGroups>    <vsm:VisualStateGroup x:Name="CommonStates">     <!--When mouse hovers on graphic, expand the graphic to show the image and title-->     <vsm:VisualState x:Name="MouseOver">      <Storyboard>       <DoubleAnimation BeginTime="0:0:0" Storyboard.TargetName="rotation" Storyboard.TargetProperty="Angle" To="360" Duration="0:0:0.5" />       <DoubleAnimation BeginTime="0:0:0" Storyboard.TargetName="Flares" Storyboard.TargetProperty="Opacity" To="1" Duration="0:0:0.5" />       <DoubleAnimation BeginTime="0:0:0" Storyboard.TargetName="Flares" Storyboard.TargetProperty="Width" To="{StaticResource expandSize}" Duration="0:0:0.5" />       <DoubleAnimation BeginTime="0:0:0" Storyboard.TargetName="mainSymbol" Storyboard.TargetProperty="StrokeThickness"             To="3" Duration="0:0:0.5" RepeatBehavior="Forever"  AutoReverse="True"  />      </Storyboard>     </vsm:VisualState>     <!--When mouse leaves graphic, restore the marker size and hide the text-->     <vsm:VisualState x:Name="Normal">      <Storyboard>       <Storyboard>        <DoubleAnimation BeginTime="0:0:0.5" Storyboard.TargetName="rotation" Storyboard.TargetProperty="Angle" To="0" Duration="0:0:0.5" />        <DoubleAnimation BeginTime="0:0:0.5" Storyboard.TargetName="Flares" Storyboard.TargetProperty="Opacity" To="0" Duration="0:0:0.5" />        <DoubleAnimation BeginTime="0:0:0.5" Storyboard.TargetName="Flares" Storyboard.TargetProperty="Width" To="0" Duration="0:0:0.5" />       </Storyboard>      </Storyboard>     </vsm:VisualState>    </vsm:VisualStateGroup>   </vsm:VisualStateManager.VisualStateGroups>     <Canvas Canvas.Left="0" Canvas.Top="-8" >     <Grid Width="0" x:Name="Flares"  RenderTransformOrigin="0,0.5">     <Grid.RenderTransform>      <RotateTransform x:Name="rotation" Angle="0" />     </Grid.RenderTransform>          {Binding FlareOuts}         </Grid>    <Grid Width="20" Height="20" Canvas.Left="-10" Canvas.Top="-2">     <Ellipse Fill="{Binding Symbol.FillColor}" x:Name="mainSymbol"        StrokeThickness="{StaticResource strokeThickness}" Stroke="{Binding Symbol.ForeColor}" />     <TextBlock HorizontalAlignment="Center" VerticalAlignment="Center"      Text="{Binding Path=Attributes, Converter={StaticResource DictConvert}, ConverterParameter=Count, Mode=OneWay}"      FontSize="9" Margin="0" FontWeight="Bold"      Foreground="{Binding Symbol.ForeColor}" />    </Grid>   </Canvas>    </Canvas> </ControlTemplate>


You can use a tool like JustDecompile to get this information.

Cheers

View solution in original post

0 Kudos
4 Replies
JenniferNery
Esri Regular Contributor
The FlareClusterer as seen in this SDK sample has few properties you can set: http://help.arcgis.com/en/webapi/silverlight/samples/start.htm#SimpleClusterer. You can provide a custom clusterer with your own template like in this sample: http://help.arcgis.com/en/webapi/silverlight/samples/start.htm#CustomClusterer.
0 Kudos
OrlandoCarvajal
Deactivated User
Well, I'm doing something like that already, but I'm inheriting from FlareClusterer. In that SDK example, I can actually see what the control template for ESRI.ArcGIS.Client.Clustering.ClusterSymbol would be. How about you giving me an example where I can see the control template used for ESRI.ArcGIS.Client.Clustering.FlareSymbol? 😄 Please 😄 Just so I don't have to re-invent the "flare"...
0 Kudos
DaveTimmins
Deactivated User
Are you after this?

<ControlTemplate  xmlns="http://schemas.microsoft.com/client/2007"  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"  xmlns:vsm="clr-namespace:System.Windows;assembly=System.Windows"  xmlns:converter="clr-namespace:ESRI.ArcGIS.Client.ValueConverters;assembly=ESRI.ArcGIS.Client"  xmlns:sys="clr-namespace:System;assembly=mscorlib"  xmlns:esri="clr-namespace:ESRI.ArcGIS.Client;assembly=ESRI.ArcGIS.Client">  <Canvas x:Name="Root" Cursor="Hand" esri:Clusterer.ClusterChildElements="{FlareIDs}">   <Canvas.Resources>    <!--define converter for dictionaries so we can bind to to the attributes on the graphic-->    <converter:DictionaryConverter x:Name="DictConvert" />    <sys:Double x:Name="expandSize">35</sys:Double>    <sys:Double x:Name="strokeThickness">2</sys:Double>    <SolidColorBrush Color="#3B64AA" x:Name="FillColor" />    <SolidColorBrush Color="White" x:Name="StrokeColor" />   </Canvas.Resources>    <vsm:VisualStateManager.VisualStateGroups>    <vsm:VisualStateGroup x:Name="CommonStates">     <!--When mouse hovers on graphic, expand the graphic to show the image and title-->     <vsm:VisualState x:Name="MouseOver">      <Storyboard>       <DoubleAnimation BeginTime="0:0:0" Storyboard.TargetName="rotation" Storyboard.TargetProperty="Angle" To="360" Duration="0:0:0.5" />       <DoubleAnimation BeginTime="0:0:0" Storyboard.TargetName="Flares" Storyboard.TargetProperty="Opacity" To="1" Duration="0:0:0.5" />       <DoubleAnimation BeginTime="0:0:0" Storyboard.TargetName="Flares" Storyboard.TargetProperty="Width" To="{StaticResource expandSize}" Duration="0:0:0.5" />       <DoubleAnimation BeginTime="0:0:0" Storyboard.TargetName="mainSymbol" Storyboard.TargetProperty="StrokeThickness"             To="3" Duration="0:0:0.5" RepeatBehavior="Forever"  AutoReverse="True"  />      </Storyboard>     </vsm:VisualState>     <!--When mouse leaves graphic, restore the marker size and hide the text-->     <vsm:VisualState x:Name="Normal">      <Storyboard>       <Storyboard>        <DoubleAnimation BeginTime="0:0:0.5" Storyboard.TargetName="rotation" Storyboard.TargetProperty="Angle" To="0" Duration="0:0:0.5" />        <DoubleAnimation BeginTime="0:0:0.5" Storyboard.TargetName="Flares" Storyboard.TargetProperty="Opacity" To="0" Duration="0:0:0.5" />        <DoubleAnimation BeginTime="0:0:0.5" Storyboard.TargetName="Flares" Storyboard.TargetProperty="Width" To="0" Duration="0:0:0.5" />       </Storyboard>      </Storyboard>     </vsm:VisualState>    </vsm:VisualStateGroup>   </vsm:VisualStateManager.VisualStateGroups>     <Canvas Canvas.Left="0" Canvas.Top="-8" >     <Grid Width="0" x:Name="Flares"  RenderTransformOrigin="0,0.5">     <Grid.RenderTransform>      <RotateTransform x:Name="rotation" Angle="0" />     </Grid.RenderTransform>          {Binding FlareOuts}         </Grid>    <Grid Width="20" Height="20" Canvas.Left="-10" Canvas.Top="-2">     <Ellipse Fill="{Binding Symbol.FillColor}" x:Name="mainSymbol"        StrokeThickness="{StaticResource strokeThickness}" Stroke="{Binding Symbol.ForeColor}" />     <TextBlock HorizontalAlignment="Center" VerticalAlignment="Center"      Text="{Binding Path=Attributes, Converter={StaticResource DictConvert}, ConverterParameter=Count, Mode=OneWay}"      FontSize="9" Margin="0" FontWeight="Bold"      Foreground="{Binding Symbol.ForeColor}" />    </Grid>   </Canvas>    </Canvas> </ControlTemplate>


You can use a tool like JustDecompile to get this information.

Cheers
0 Kudos
OrlandoCarvajal
Deactivated User
Yes Dave, thanks a lot. I'll give it a try and I was after that tool. 😄
0 Kudos