ThinkGeo.com    |     Documentation    |     Premium Support

Style the WpfMap control

#1

 We have a requirement in our application, to change the style of the WpfMap. Specifically we've created a control derived from WpfMap and want to add a few bells and whistles to it.


To do this normally, you would create a WPF CustomControl in Visual Studio and change the derived class from Control to the control you want to extend. In this case ThinkGeo.MapSuite.WpfDesktopEdition.WpfMap.


If you want to 'borrow' the Style and ControlTemplate (which we should), you can create a Copy of the default style by using Expression Blend. This is the default template for WpfMap as ascertained by Blend:-


Style TargetType="{x:Type myControls:MyWpfMap}">
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type myControls:MyWpfMap}">
                <Canvas x:Name="WpfMapCanvas">
                                                Background="Transparent">
                        <Canvas x:Name="OverlayCanvas">
                            <Canvas.Resources>
                                <Storyboard x:Key="ZoomStoryboard"
                                            Duration="0:0:0.45">
                                    <DoubleAnimation Duration="0:0:0.35"
                                                        Storyboard.TargetProperty="ScaleX"
                                                        Storyboard.TargetName="ZoomTransform" />
                                    <DoubleAnimation Duration="0:0:0.35"
                                                        Storyboard.TargetProperty="ScaleY"
                                                        Storyboard.TargetName="ZoomTransform" />
                                </Storyboard>
                            
                            <Canvas.RenderTransform>
                                <ScaleTransform />
                            
                        </Canvas>
                    </Canvas>
                    <Grid x:Name="ToolsGrid" />
                </Canvas>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
Style>

Here's where the problem is... If you make sure this style is applied implicity and run the application, you'll see that the new control is rendered properly. However, when you try to zoom in and out, you're hit with an exception



Cannot set a property on object 'System.Windows.Media.ScaleTransform' because it is in a read-only state.



Can anyone shed any light on this problem?



#2

David, 
  
 Can you provide a simple sample to us? Just the xmal code we really cannot find out the problem, as you mentioned, I need to run the application and zoom in/zoom out, the exception would be occurred, so please arrange a simple sample that can be ran properly and send it to us so that we can track where is the problem. 
  
 Thanks, 
  
 Scott,

#3

Hi Scott,


Please find a sample project attached. Here is how I went about creating the sample:-



        
  1. Created a new WPF Application project in Visual Studio 2010

    2.     
  2. Added references to MapSuiteCore and WpfDesktopEdition (I've tested this with versions v4.5 and v4.5.129)

    3.     
  3. Added a WpfMap to the MainWindow.xaml

    4.     
  4. Referenced the map control from code-behind and added a ShapeFileFeatureLayer

    5.     
  5. Ran the project and tested panning and zooming. Both worked okay.


Here is how I found my bug:-



        
  1. Opened the above project in Expression blend.

    2.     
  2. Right-clicked on the WpfMap and chose Edit Template -> Edit a Copy...

        Blend then creates a template copying the default template for the WpfMap control (see previous post for the template). Blend also assigns this new template to the WpfMap control.

    3.     
  3. Ran the project and tested panning and zooming. Zooming causes the exception described in my previous post.


David



MapControlTest.zip (111 KB)

#4

Dave,


I have reproduced your problem properly, please add the following property to the ScaleTransform element:


x:Name="ZoomTransform"


So the ScaleTransform element should be: <ScaleTransform x:Name="ZoomTransform"/>


Then your problem can be resolved correctly, I have tested it, 


If you encounter any more questions please let me know,


Thanks,


Scott,



#5

I can confirm that it's all working fine now. Thanks.



#6

Dave, 
  
 That’s great!  
  
 Any more questions please let me know again, 
  
 Thanks, 
  
 Scott,