Solved

How to place an image in a control template?

Posted on 2014-09-03
3
33 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

DevOps Toolchain Recommendations

Read this Gartner Research Note and discover how your IT organization can automate and optimize DevOps processes using a toolchain architecture.

Question has a verified solution.

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

Suggested Solutions

Today I had a very interesting conundrum that had to get solved quickly. Needless to say, it wasn't resolved quickly because when we needed it we were very rushed, but as soon as the conference call was over and I took a step back I saw the correct …
This article shows how to deploy dynamic backgrounds to computers depending on the aspect ratio of display
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…

815 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

11 Experts available now in Live!

Get 1:1 Help Now