topic Re: Customized Navigation in ArcGIS API for Silverlight Questions

Customized Navigation

xariaD — Wed, 06 Oct 2010 06:56:52 GMT

I followed the blog on customizing navigation control and I get the following warning.
'System.Windows.Media.Animation.DoubleAnimation' animation object cannot be used to animate property 'RenderTransform' because it is of incompatible type 'System.Windows.Media.Transform'.
I a using .net Framework 3.5 with SDk2.0 for a WPF application.

Re: Customized Navigation

DanielWalton — Sun, 12 Dec 2021 03:01:43 GMT

It looks like you've incorrectly set up an animation somewhere in your control template's VisualStateManager. A double animation must point to a target property that is a number. So to animate a RenderTransform, you must separate it into pieces that can be represented by numbers. For example, to animate the scale (X and Y), use the following pattern:

<VisualStateManager.VisualStateGroups>
  <VisualStateGroup x:Name="CommonStates">
    <VisualState x:Name="Normal"/>
    <VisualState x:Name="MouseOver">
      <Storyboard>
        <DoubleAnimation 
          Duration="0" To="1.2" 
          Storyboard.TargetProperty="(UIElement.RenderTransform).(ScaleTransform.ScaleX)"
          Storyboard.TargetName="MainElement"/>
        <DoubleAnimation 
          Duration="0" To="1.2" 
          Storyboard.TargetProperty="(UIElement.RenderTransform).(ScaleTransform.ScaleY)" 
          Storyboard.TargetName="MainElement"/>
      </Storyboard>
    </VisualState>
  </VisualStateGroup>
</VisualStateManager.VisualStateGroups>
.
.
.
<Grid x:Name="MainElement">
  <Grid.RenderTransform>
    <ScaleTransform />
  </Grid.RenderTransform>
</Grid>

Re: Customized Navigation

xariaD — Sun, 12 Dec 2021 03:01:45 GMT

 <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="00:00:00" Duration="0:0:0.1" To="0.25" Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="LayoutRoot"/>
                                        </Storyboard>
                                    </VisualState>
                                    <VisualState x:Name="MouseOver">
                                        <Storyboard>
                                            <DoubleAnimation BeginTime="00:00:00" Duration="0:0:0.1" To="1" Storyboard.TargetProperty="(UIElement.RenderTransform).(ScaleTransform.ScaleX)" Storyboard.TargetName="LayoutRoot"/>
                                            <DoubleAnimation BeginTime="00:00:00" Duration="0:0:0.1" To="1" Storyboard.TargetProperty="(UIElement.RenderTransform).(ScaleTransform.ScaleY)" Storyboard.TargetName="LayoutRoot"/>
                                            <DoubleAnimation BeginTime="00:00:00" Duration="0:0:0.1" To="0.75" Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="LayoutRoot"/>
                                        </Storyboard>
                                    </VisualState>
                                </VisualStateGroup>
                            </VisualStateManager.VisualStateGroups>

Well this is what I have, similar to what you have posted yet I get the error

Re: Customized Navigation

DanielWalton — Thu, 28 Oct 2010 12:08:17 GMT

Does your layout root grid have this:
<Grid x:Name="MainElement">
<Grid.RenderTransform>
<ScaleTransform />
</Grid.RenderTransform>
</Grid>

Re: Customized Navigation

DominiqueBroux — Sun, 12 Dec 2021 03:01:48 GMT

I agree with Dan, at first glance it could mean that the element referenced by your targetname is not existing.

Take care that your TargetName is called 'LayoutRoot' so you should have something like:

 
<Grid x:Name="LayoutRoot">
  <Grid.RenderTransform>
    <ScaleTransform />
  </Grid.RenderTransform>
......

Re: Customized Navigation

xariaD — Sun, 12 Dec 2021 03:01:51 GMT

        <Style x:Key="NavigationStyle1" TargetType="{x:Type esriToolkit:Navigation}">         
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type esriToolkit:Navigation}">
                        <Grid x:Name="LayoutRoot" Background="#00FFFFFF" HorizontalAlignment="Left" MinWidth="125" MinHeight="125" RenderTransformOrigin="0,1" VerticalAlignment="Top" Width="125" Height="125">
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition Width="20"/>
                                <ColumnDefinition Width="*"/>
                            </Grid.ColumnDefinitions>
                            <Grid.RenderTransform>
                                <ScaleTransform CenterY="0" CenterX="0"/>
                            </Grid.RenderTransform>
                            <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="00:00:00" Duration="0:0:0.1" To="0.25" Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="LayoutRoot"/>
                                        </Storyboard>
                                    </VisualState>
                                    <VisualState x:Name="MouseOver">
                                        <Storyboard>
                                            <DoubleAnimation BeginTime="00:00:00" Duration="0:0:0.1" To="1" Storyboard.TargetProperty="(UIElement.RenderTransform).(ScaleTransform.ScaleX)" Storyboard.TargetName="LayoutRoot"/>
                                            <DoubleAnimation BeginTime="00:00:00" Duration="0:0:0.1" To="1" Storyboard.TargetProperty="(UIElement.RenderTransform).(ScaleTransform.ScaleY)" Storyboard.TargetName="LayoutRoot"/>
                                            <DoubleAnimation BeginTime="00:00:00" Duration="0:0:0.1" To="0.75" Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="LayoutRoot"/>
                                        </Storyboard>
                                    </VisualState>
                                </VisualStateGroup>
                            </VisualStateManager.VisualStateGroups>
                            <Grid x:Name="ZoomContainer" Margin="0" Height="125">
                                <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>
                            <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>
                                <Grid x:Name="PanLeft" Cursor="Hand" HorizontalAlignment="Left" Margin="0,0,0,32" ToolTipService.ToolTip="Click to move west" VerticalAlignment="Bottom" Width="25">
                                    <Ellipse Fill="{TemplateBinding Background}" Height="24.5" Stroke="{TemplateBinding BorderBrush}" Width="25" d:LayoutOverrides="VerticalMargin"/>
                                    <Path Data="M48,71 L40,76 L48,81 z" Fill="#FFFFFFFF" Height="13" Margin="7.836,6,9.164,6" Stretch="Fill" Stroke="#FFFFFFFF" Width="8"/>
                                </Grid>
                                <Grid x:Name="PanRight" Cursor="Hand" Margin="61,0,39,32" RenderTransformOrigin="0.5,0.5" ToolTipService.ToolTip="Click to move east" VerticalAlignment="Bottom">
                                    <Grid.RenderTransform>
                                        <RotateTransform Angle="180"/>
                                    </Grid.RenderTransform>
                                    <Ellipse Fill="{TemplateBinding Background}" Height="24.5" Stroke="{TemplateBinding BorderBrush}" Width="25" d:LayoutOverrides="VerticalMargin"/>
                                    <Path Data="M48,71 L40,76 L48,81 z" Fill="#FFFFFFFF" Height="13" Margin="7.836,6,9.164,6" Stretch="Fill" Stroke="#FFFFFFFF" Width="8"/>
                                </Grid>
                                <Grid x:Name="PanUp" Cursor="Hand" Height="25" Margin="30,35,0,0" RenderTransformOrigin="0.5,0.5" ToolTipService.ToolTip="Click to move north" VerticalAlignment="Top" d:LayoutRounding="Auto" HorizontalAlignment="Left">
                                    <Grid.RenderTransform>
                                        <RotateTransform Angle="90"/>
                                    </Grid.RenderTransform>
                                    <Ellipse Fill="{TemplateBinding Background}" Height="24.5" Stroke="{TemplateBinding BorderBrush}" Width="25" Margin="0,0.25"/>
                                    <Path Data="M49.643433,70.53167 L37.857143,76 L49.572575,81.46917 z" Fill="#FFFFFFFF" Height="14.125" Margin="5.672,5.5,8.015,5.375" Stretch="Fill" Stroke="#FFFFFFFF" Width="11.313"/>
                                    <Path Data="M92,29.833334 L92.000114,24.166691 L93.247681,24.184656  L96.218758,29.810295 L93.332748,26.418152 L93.361107,29.808037 z" Fill="{TemplateBinding Foreground}" Height="5.322" RenderTransformOrigin="0.506,0.5" Stretch="Fill" Width="4.416" Margin="10.292,9.839">
                                        <Path.RenderTransform>
                                            <RotateTransform Angle="90"/>
                                        </Path.RenderTransform>
                                    </Path>
                                    <Path Data="M91.666664,39" Fill="#FF000000" Height="1" RenderTransformOrigin="0.5,0.5" Stretch="Fill" Stroke="#FF000000" Width="1" Margin="12">
                                        <Path.RenderTransform>
                                            <TransformGroup>
                                                <RotateTransform Angle="90"/>
                                                <TranslateTransform X="3.5064478404741046" Y="0.50863583808085222"/>
                                            </TransformGroup>
                                        </Path.RenderTransform>
                                    </Path>
                                </Grid>
                                <Grid x:Name="PanDown" Cursor="Hand" Height="25" Margin="30,0,0,0" RenderTransformOrigin="0.5,0.5" ToolTipService.ToolTip="Click to move south" VerticalAlignment="Bottom" d:LayoutRounding="Auto" HorizontalAlignment="Left">
                                    <Grid.RenderTransform>
                                        <RotateTransform Angle="270"/>
                                    </Grid.RenderTransform>
                                    <Ellipse Fill="{TemplateBinding Background}" Height="24.5" Stroke="{TemplateBinding BorderBrush}" Width="25" Margin="0,0.25"/>
                                    <Path Data="M48,71 L40,76 L48,81 z" Fill="#FFFFFFFF" Height="13" Margin="7.172,6,9.828,6" Stretch="Fill" Stroke="#FFFFFFFF" Width="8"/>
                                </Grid>
                            </Grid>
                            <Button x:Name="ZoomFullExtent" BorderBrush="{TemplateBinding BorderBrush}" Cursor="Hand" Height="20" ToolTipService.ToolTip="Full Extent" VerticalAlignment="Bottom" Margin="36,0,0,72" HorizontalAlignment="Left" Grid.Column="1" Width="20" d:LayoutOverrides="Width">
                                <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>
                        </Grid>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>

Re: Customized Navigation

DominiqueBroux — Tue, 16 Nov 2010 11:59:54 GMT

From my tests it's only a design issue. All is working well in run time.

Seems that replacing '(UIElement.RenderTransform)' by 'RenderTransform' fixes the design issue (and still working in run time :)). But don't ask me why :confused: