Still celebrating National IT Professionals Day with 3 months of free Premium Membership. Use Code ITDAY17

x
?
Solved

How to place an image in a control template?

Posted on 2014-09-03
3
Medium Priority
?
82 Views
Last Modified: 2016-06-21
First, thank you for your time.

I need to place numerous Image controls on an InkCanvas. All of them need to animate when certain code conditions are met. After numerous attempts my ControlTemplate is still not right.

<ControlTemplate x:Key="AnimatedImage" TargetType="{x:Type Image}">
    <Grid>
        <Image Name="image" 
               Source="{TemplateBinding Filename}"
               Width="{TemplateBinding Width}"
               Height="{TemplateBinding Height}"
               HorizontalAlignment="Center"
               VerticalAlignment="Center">

            <VisualStateManager.VisualStateGroups>
                <VisualStateGroup Name="AnimationLocations">

                    <!-- When the image is first loaded move it to the center of the InkCanvas -->
                    <VisualState Name="AnimateToCenterScreen">
                        <Storyboard>
                            <DoubleAnimation Storyboard.TargetName="image"
                                             Storyboard.TargetProperty="(Image.RenderTransform).(TranslateTransform.X)"
                                             From="{TemplateBinding From}"
                                             To="{TemplateBinding To}"
                                             Duration="{TemplateBinding Duration}" />
                        </Storyboard>
                    </VisualState>

                    <!-- Animate the image to an off screen position to effectively hide it.  -->
                    <VisualState Name="AnimateToOffScreen">
                        <!-- To be filled in later.  -->
                    </VisualState>

                    <!-- Animate the image back to the original on screen position.  -->
                    <VisualState Name="AnimateToOnScreen">
                        <!-- To be filled in later.  -->
                    </VisualState>
                </VisualStateGroup>
            </VisualStateManager.VisualStateGroups>
        </Image>
    </Grid>

Open in new window


And my main grid looks like this:
<Grid>
    <InkCanvas Name="inkCanvas" 
                         EditingMode="{Binding EditingMode}" 
                         MoveEnabled="True" 
                         HorizontalAlignment="Stretch" 
                         VerticalAlignment="Stretch" 
                         ResizeEnabled="True" >

            <Image Name="image1" 
                          Template="{StaticResource AnimatedImage}"
                          Source="{Binding Path=Image1}" 
                          HorizontalAlignment="Center" 
                          VerticalAlignment="Center" >
            </Image>
    </InkCanvas>
</Grid>

Open in new window


What is wrong?
Thank you for your time.
0
Comment
Question by:MichaelDavidCarr
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 2
3 Comments
 
LVL 2

Expert Comment

by:Sytech Solutions
ID: 40316565
Hi Michael

Please find attached working sample WPF application.  Let me know if you have any questions.

Thanks
0
 
LVL 2

Accepted Solution

by:
Sytech Solutions earned 2000 total points
ID: 40316571
This time with the file!
AnimationExample.zip
0

Featured Post

NEW Veeam Agent for Microsoft Windows

Backup and recover physical and cloud-based servers and workstations, as well as endpoint devices that belong to remote users. Avoid downtime and data loss quickly and easily for Windows-based physical or public cloud-based workloads!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Wouldn’t it be nice if you could test whether an element is contained in an array by using a Contains method just like the one available on List objects? Wouldn’t it be good if you could write code like this? (CODE) In .NET 3.5, this is possible…
Whether you've completed a degree in computer sciences or you're a self-taught programmer, writing your first lines of code in the real world is always a challenge. Here are some of the most common pitfalls for new programmers.
This is Part 3 in a 3-part series on Experts Exchange to discuss error handling in VBA code written for Excel. Part 1 of this series discussed basic error handling code using VBA. http://www.experts-exchange.com/videos/1478/Excel-Error-Handlin…
This tutorial will teach you the special effect of super speed similar to the fictional character Wally West aka "The Flash" After Shake : http://www.videocopilot.net/presets/after_shake/ All lightning effects with instructions : http://www.mediaf…

660 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question