Customized Navigation

xariaD · ‎10-05-2010

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.

DanielWalton · ‎10-06-2010

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>

xariaD · ‎10-27-2010

 <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

DanielWalton · ‎10-28-2010

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

DominiqueBroux · ‎10-28-2010

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>
......

xariaD · ‎11-15-2010

        <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>

DominiqueBroux · ‎11-16-2010

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: