Solved

How to place an image in a control template?

Posted on 2014-09-03
3
26 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
  • 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 500 total points
ID: 40316571
This time with the file!
AnimationExample.zip
0

Featured Post

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

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

Entering time in Microsoft Access can be difficult. An input mask often bothers users more than helping them and won't catch all typing errors. This article shows how to create a textbox for 24-hour time input with full validation politely catching …
Exception Handling is in the core of any application that is able to dignify its name. In this article, I'll guide you through the process of writing a DRY (Don't Repeat Yourself) Exception Handling mechanism, using Aspect Oriented Programming.
This Micro Tutorial demonstrates using Microsoft Excel pivot tables, how to reverse engineer competitors' marketing strategies through backlinks.
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…

910 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

Need Help in Real-Time?

Connect with top rated Experts

16 Experts available now in Live!

Get 1:1 Help Now