Community

Navigation Control Style does not Allow Rotation

539
7
11-13-2013 09:57 AM
AndyWright
by
Occasional Contributor
‎11-13-2013 09:57 AM
I am using VS2010, Expression Blend 4, and Runtime 10.1.1.  I want to tap into the control template for the Navigation control so that I can play with what happens when the full extent button is clicked.  I used Expression Blend to get at the control template and I've got the full extent stuff working great.  What is weird is that the navigation control will no longer allow me to rotate the map.  I get this error in the XAML code at design time.

'System.Windows.Media.Animation.DoubleAnimation' animation object cannot be used to animate property 'RenderTransform' because it is of incompatible type 'System.Windows.Media.Transform'.

The offending code from within the control template is shown below.  I'm not sure how the control can work fine if I don't specify its own style, but when I specify this style it won't rotate.  Has anyone else run into this?  If so, how did you work around it?

<VisualStateManager.VisualStateGroups>
                                <VisualStateGroup x:Name="CommonStates">
                                    <VisualState x:Name="Normal">
                                        <Storyboard>
                                            <DoubleAnimation Duration="0:0:0.1" To="0.75" Storyboard.TargetProperty="(UIElement.RenderTransform).(ScaleTransform.ScaleX)" Storyboard.TargetName="LayoutRoot"/>
                                            <DoubleAnimation Duration="0:0:0.1" To="0.75" Storyboard.TargetProperty="(UIElement.RenderTransform).(ScaleTransform.ScaleY)" Storyboard.TargetName="LayoutRoot"/>
                                            <DoubleAnimation BeginTime="0" Duration="0:0:0.1" To="0.25" Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="LayoutRoot"/>
                                        </Storyboard>
                                    </VisualState>
                                    <VisualState x:Name="MouseOver">
                                        <Storyboard>
                                            <DoubleAnimation BeginTime="0" Duration="0:0:0.1" To="1" Storyboard.TargetProperty="(UIElement.RenderTransform).(ScaleTransform.ScaleX)" Storyboard.TargetName="LayoutRoot"/>
                                            <DoubleAnimation BeginTime="0" Duration="0:0:0.1" To="1" Storyboard.TargetProperty="(UIElement.RenderTransform).(ScaleTransform.ScaleY)" Storyboard.TargetName="LayoutRoot"/>
                                            <DoubleAnimation BeginTime="0" Duration="0:0:0.1" To="0.75" Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="LayoutRoot"/>
                                        </Storyboard>
                                    </VisualState>
                                </VisualStateGroup>
                            </VisualStateManager.VisualStateGroups>
0 Kudos
7 Replies
ThadTilton
by Esri Contributor
Esri Contributor
‎11-13-2013 02:40 PM
Hi Andy,
It sounds like an animation in the VisualStateManager of the template may be broken. Make sure they are referring to the correct target properties, etc.
I saw a similar issue here: http://forums.arcgis.com/threads/14438-Customized-Navigation, but it looks like this was only a design time problem (?).
-Thad
0 Kudos
AndyWright
by
Occasional Contributor
‎11-15-2013 10:46 AM
Thad,

Thanks for the quick response and the link.  I did what Dominique suggested in that other post and the design time error went away, but I am still unable to rotate at runtime.  I am positive that the VisualState stuff is referencing an existing named grid as well.  Can someone create a simple map app with a navigation control with this style and see if they have the same problem?  I need to split the code into two responses.  Here's the first part.

<Style x:Key="NavigationStyle" TargetType="esri:Navigation">
            <Setter Property="Background" Value="#FF949494"/>
            <Setter Property="Foreground" Value="#FF333333"/>
            <Setter Property="BorderBrush" Value="White"/>
            <Setter Property="HorizontalAlignment" Value="Left"/>
            <Setter Property="VerticalAlignment" Value="Top"/>
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="esri:Navigation">
                        <Grid>
                            <VisualStateManager.VisualStateGroups>
                                <VisualStateGroup x:Name="CommonStates">
                                    <VisualState x:Name="Normal">
                                        <Storyboard>
                                            <DoubleAnimation Duration="0:0:0.1" To="0.75" Storyboard.TargetProperty="(RenderTransform).(ScaleTransform.ScaleX)" Storyboard.TargetName="LayoutRoot"/>
                                            <DoubleAnimation Duration="0:0:0.1" To="0.75" Storyboard.TargetProperty="(RenderTransform).(ScaleTransform.ScaleY)" Storyboard.TargetName="LayoutRoot"/>
                                            <DoubleAnimation BeginTime="0" Duration="0:0:0.1" To="0.25" Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="LayoutRoot"/>
                                        </Storyboard>
                                    </VisualState>
                                    <VisualState x:Name="MouseOver">
                                        <Storyboard>
                                            <DoubleAnimation BeginTime="0" Duration="0:0:0.1" To="1" Storyboard.TargetProperty="(RenderTransform).(ScaleTransform.ScaleX)" Storyboard.TargetName="LayoutRoot"/>
                                            <DoubleAnimation BeginTime="0" Duration="0:0:0.1" To="1" Storyboard.TargetProperty="(RenderTransform).(ScaleTransform.ScaleY)" Storyboard.TargetName="LayoutRoot"/>
                                            <DoubleAnimation BeginTime="0" Duration="0:0:0.1" To="0.75" Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="LayoutRoot"/>
                                        </Storyboard>
                                    </VisualState>
                                </VisualStateGroup>
                            </VisualStateManager.VisualStateGroups>
                            <Grid x:Name="LayoutRoot" Background="Transparent" HorizontalAlignment="Left" MinWidth="148" MinHeight="125" RenderTransformOrigin="{TemplateBinding RenderTransformOrigin}" VerticalAlignment="Top">
                                <Grid.ColumnDefinitions>
                                    <ColumnDefinition Width="20"/>
                                    <ColumnDefinition Width="*"/>
                                </Grid.ColumnDefinitions>
                                <Grid.RenderTransform>
                                    <ScaleTransform CenterY="0" CenterX="0"/>
                                </Grid.RenderTransform>

                                <Grid x:Name="ZoomContainer" Margin="0" VerticalAlignment="Center">
                                    <Grid.RowDefinitions>
                                        <RowDefinition Height="Auto"/>
                                        <RowDefinition Height="Auto"/>
                                        <RowDefinition Height="Auto"/>
                                    </Grid.RowDefinitions>
                                    <Rectangle Grid.ColumnSpan="4" Fill="{TemplateBinding Background}" Margin="0" RadiusY="3" RadiusX="3" Grid.RowSpan="4" Stroke="{TemplateBinding BorderBrush}" StrokeThickness="1"/>
                                    <Button x:Name="ZoomInButton" Content="+" Foreground="{TemplateBinding Foreground}" FontSize="8" Height="16" Margin="2,2,2,0" Grid.Row="0" ToolTip="Zoom In" Width="14"/>
                                    <Rectangle Fill="White" HorizontalAlignment="Center" Height="3" Grid.Row="1" VerticalAlignment="Center" Width="2"/>
                                    <Slider x:Name="ZoomSlider" Cursor="Hand" Height="89" LargeChange="1" Maximum="15" Minimum="0" Orientation="Vertical" Grid.Row="1" SmallChange="1" ToolTip="Drag to zoom in or out" Value="0" VerticalAlignment="Top"/>
                                    <Button x:Name="ZoomOutButton" Content="-" Foreground="{TemplateBinding Foreground}" FontSize="8" Height="16" Margin="2,0,2,2" Grid.Row="2" ToolTip="Zoom Out" Width="14"/>
                                </Grid>
                               
0 Kudos
AndyWright
by
Occasional Contributor
‎11-15-2013 10:47 AM
Here's the second part ...

<Grid x:Name="Navigator" Grid.Column="1" Height="125" Margin="3,0,0,0" RenderTransformOrigin="0.5,0.5" Width="125">
                                    <Grid.RenderTransform>
                                        <RotateTransform Angle="0"/>
                                    </Grid.RenderTransform>
                                    <Path x:Name="RotateRing" Cursor="Hand" Data="M97.050499,68.386246L106.5,68.386246 106.1507,69.74157C101.85528,83.519669 92.276138,94.975006 79.777817,101.74873 76.653244,103.44215 73.34623,104.84298 69.893723,105.91433L69.5,106.01534 69.5,96.482994 71.447334,95.771919C74.205498,94.608025 76.826485,93.184006 79.279457,91.530655 84.185387,88.223969 88.419128,84.000031 91.733521,79.105515 93.390709,76.658241 94.818054,74.043327 95.98465,71.29158z M0.5,68.386246L9.9494915,68.386246 11.015333,71.29158C12.181933,74.043343 13.609276,76.658241 15.266468,79.105515 18.580849,84.000053 22.814623,88.223969 27.720554,91.530655 30.173519,93.18399 32.794529,94.608032 35.552677,95.771912L38.5,96.848145 38.5,106.27186 37.106312,105.91433C23.296202,101.62891 11.814036,92.07193 5.0245867,79.602684 3.3272135,76.485374 1.923135,73.186035 0.8492955,69.741547z M69.5,0.75652671L69.893661,0.85751152C83.703682,5.14291 95.185875,14.699864 101.97538,27.169144 103.67275,30.286457 105.07684,33.585789 106.15069,37.030285L106.5,38.38562 97.050507,38.38562 95.984657,35.480282C94.818062,32.728535 93.390701,30.113619 91.733528,27.666359 88.419121,22.771801 84.185356,18.547873 79.279427,15.241194 76.826447,13.58785 74.205452,12.163824 71.447311,10.999947L69.5,10.288876z M38.5,0.5L38.5,9.9237194 35.552654,10.999952C32.794514,12.163842 30.173498,13.587873 27.720541,15.241213 22.81461,18.547897 18.580839,22.771828 15.266464,27.666361 13.609274,30.113626 12.181928,32.728542 11.015331,35.480286L9.9494915,38.38562 0.5,38.38562 0.84929955,37.030308C5.1446834,23.252361 14.723901,11.796858 27.222183,5.02314 30.346762,3.3297043 33.653778,1.928881 37.106293,0.85752773z" Fill="{TemplateBinding Background}" Margin="8" Stretch="Fill" Stroke="{TemplateBinding BorderBrush}" ToolTip="Drag to rotate"/>
                                    <Grid x:Name="PanLeft" Cursor="Hand" HorizontalAlignment="Left" Margin="0" ToolTip="Click to move west" VerticalAlignment="Center" Width="25">
                                        <Ellipse Fill="{TemplateBinding Background}" Height="24.5" Stroke="{TemplateBinding BorderBrush}" Width="25"/>
                                        <Path Data="M48,71L40,76 48,81z" Fill="White" Height="13" Canvas.Left="7" Margin="7.836,6,9.164,6" Stretch="Fill" Stroke="White" Canvas.Top="5.75" Width="8"/>
                                    </Grid>
                                    <Grid x:Name="PanRight" Cursor="Hand" HorizontalAlignment="Right" Margin="0" RenderTransformOrigin="0.5,0.5" ToolTip="Click to move east" VerticalAlignment="Center" Width="25">
                                        <Grid.RenderTransform>
                                            <RotateTransform Angle="180"/>
                                        </Grid.RenderTransform>
                                        <Ellipse Fill="{TemplateBinding Background}" Height="24.5" Stroke="{TemplateBinding BorderBrush}" Width="25"/>
                                        <Path Data="M48,71L40,76 48,81z" Fill="White" Height="13" Canvas.Left="7" Margin="7.836,6,9.164,6" Stretch="Fill" Stroke="White" Canvas.Top="5.75" Width="8"/>
                                    </Grid>
                                    <Grid x:Name="PanUp" Cursor="Hand" HorizontalAlignment="Center" Height="25" Margin="0" RenderTransformOrigin="0.5,0.5" ToolTip="Click to move north" VerticalAlignment="Top">
                                        <Grid.RenderTransform>
                                            <RotateTransform Angle="90"/>
                                        </Grid.RenderTransform>
                                        <Ellipse Fill="{TemplateBinding Background}" Height="24.5" Stroke="{TemplateBinding BorderBrush}" Width="25"/>
                                        <Path Data="M49.643433,70.53167L37.857143,76 49.572575,81.46917z" Fill="White" Height="14.125" Canvas.Left="4.906" Margin="5.672,5.5,8.015,5.375" Stretch="Fill" Stroke="White" Canvas.Top="4.906" Width="11.313"/>
                                        <Path Data="M92,29.833334L92.000114,24.166691 93.247681,24.184656 96.134811,27.716934 96.076241,24.166662 97.444435,24.166662 97.444435,29.833332 96.218758,29.810295 93.332748,26.418152 93.361107,29.808037z" Fill="{TemplateBinding Foreground}" Height="5.322" Canvas.Left="10.746" RenderTransformOrigin="0.506,0.5" Stretch="Fill" Canvas.Top="9.367" Width="4.416">
                                            <Path.RenderTransform>
                                                <RotateTransform Angle="90"/>
                                            </Path.RenderTransform>
                                        </Path>
                                        <Path Data="M91.666664,39" Fill="Black" Height="1" Canvas.Left="10.375" RenderTransformOrigin="0.5,0.5" Stretch="Fill" Stroke="Black" Canvas.Top="9.417" Width="1">
                                            <Path.RenderTransform>
                                                <TransformGroup>
                                                    <RotateTransform Angle="90"/>
                                                    <TranslateTransform X="3.5064478404741046" Y="0.50863583808085222"/>
                                                </TransformGroup>
                                            </Path.RenderTransform>
                                        </Path>
                                    </Grid>
                                    <Grid x:Name="PanDown" Cursor="Hand" HorizontalAlignment="Center" Height="25" Margin="0" RenderTransformOrigin="0.5,0.5" ToolTip="Click to move south" VerticalAlignment="Bottom">
                                        <Grid.RenderTransform>
                                            <RotateTransform Angle="270"/>
                                        </Grid.RenderTransform>
                                        <Ellipse Fill="{TemplateBinding Background}" Height="24.5" Stroke="{TemplateBinding BorderBrush}" Width="25"/>
                                        <Path Data="M48,71L40,76 48,81z" Fill="White" Height="13" Canvas.Left="7" Margin="7.172,6,9.828,6" Stretch="Fill" Stroke="White" Canvas.Top="5.75" Width="8"/>
                                    </Grid>
                                </Grid>
                                <Button x:Name="ZoomFullExtent" BorderBrush="{TemplateBinding BorderBrush}" Cursor="Hand" Grid.Column="1" HorizontalAlignment="Right" Height="20" ToolTip="Full Extent" VerticalAlignment="Bottom" Width="20" Command="{Binding ZoomFullExtentCommand}">
                                    <Grid Height="14" Width="14">
                                        <Ellipse Height="Auto" Stroke="{TemplateBinding Foreground}" Width="Auto"/>
                                        <Ellipse Height="6" Stroke="{TemplateBinding Foreground}" Width="Auto"/>
                                        <Ellipse Height="Auto" Stroke="{TemplateBinding Foreground}" Width="6"/>
                                    </Grid>
                                </Button>
                                <Button x:Name="ResetRotation" BorderBrush="{TemplateBinding BorderBrush}" Cursor="Hand" Grid.Column="1" HorizontalAlignment="Left" Height="20" Margin="3,0,0,0" ToolTip="Reset North" VerticalAlignment="Bottom" Width="20">
                                    <Grid HorizontalAlignment="Left" Height="Auto" RenderTransformOrigin="0.5,0.5" Width="Auto">
                                        <Grid.RenderTransform>
                                            <RotateTransform Angle="0"/>
                                        </Grid.RenderTransform>
                                        <Path Data="M49.643433,70.53167L37.857143,76 49.572575,81.46917z" Fill="{TemplateBinding Background}" Height="12" RenderTransformOrigin="0.5,0.5" Stretch="Fill" Width="10">
                                            <Path.RenderTransform>
                                                <RotateTransform Angle="90"/>
                                            </Path.RenderTransform>
                                        </Path>
                                        <Path Data="M92,29.833334L92.000114,24.166691 93.247681,24.184656 96.134811,27.716934 96.076241,24.166662 97.444435,24.166662 97.444435,29.833332 96.218758,29.810295 93.332748,26.418152 93.361107,29.808037z" Fill="{TemplateBinding Foreground}" Height="4" Margin="0,3,0,0" Stretch="Fill" Width="4"/>
                                    </Grid>
                                </Button>
                            </Grid>
                        </Grid>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
0 Kudos
ThadTilton
by Esri Contributor
Esri Contributor
‎11-25-2013 09:43 AM
Hey Andy,
Sorry for the delayed response.
I tested a simple app with your style applied to a navigation control. I get the same behavior (everything works except map rotation).

I'm not sure what the issue might be ... just wanted to confirm with you that I see it too (I tested with both 10.1.1 and 10.2). I'll let you know if I find anything.
-T
0 Kudos
AndyWright
by
Occasional Contributor
‎11-25-2013 10:29 AM
Thanks for the response Thad.  Are you with ESRI or just a concerned citizen?  If you're not with ESRI I may call in a support ticket on this one.
0 Kudos
Cristian_Galindo
by
Occasional Contributor III
‎05-26-2014 09:02 AM
Dear people from ESRI, also Concern Citizens

have you got any results regarding this issue? I'm using the version 10.2.2, and it is still present, when I apply the style, rotation feature goes disable.

I'm going to go deep to the code in GitHub, but I hope there is a simpla way to solve it.
0 Kudos
Cristian_Galindo
by
Occasional Contributor III
‎05-27-2014 02:19 PM
Hi there!!!!

I think I found it


Digging inside the code of the toolkit, I found that in the process to apply the template, the object looks for an object called "TransformRotate" this object must be a RotateTransform instance.

I tried to add a new object of this type to the template, but it was rejected, because it was not a UIElement.

Looking carefully in the template I found that the Navigator already has an object of that kind:

<Grid x:Name="Navigator" Grid.Column="1" Height="125" Margin="3,0,0,0" RenderTransformOrigin="0.5,0.5" Width="125">
           <Grid.RenderTransform>
                                    <RotateTransform Angle="0"/>           
           </Grid.RenderTransform>
                              
             


Soooooooo.....I decided to try to put the name of the object that is looked for:

<Grid x:Name="Navigator" Grid.Column="1" Height="125" Margin="3,0,0,0" RenderTransformOrigin="0.5,0.5" Width="125">
                                <Grid.RenderTransform>
                                    <RotateTransform x:Name="TransformRotate" Angle="0"/>
                                </Grid.RenderTransform>
    



Voila!!!!!! the rotation.. WORKS
0 Kudos