Re: how to animate the button in sequencial mode ? - WPF Discussion Boards

31-May-09 1:53

hello this is my first animation practice in WPF
so I considered it a very big achievment !!

but I want to animate the item like carasoul panel (control of Infaragistics) :

- how can I animate the buttons that contain advertisement image and when the user
hover on button the all buttons stop not only the button

- how can I make the same animation for all buttons but not in the same time

this is my Powerfull user control code :

<UserControl x:Class="AdvertisementsPanel.UserControl1"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Loaded="UserControl_Loaded">
    <UserControl.Resources>
        <Style x:Key="AdvertisementItem" TargetType="{x:Type Button}">
            <Setter Property="MaxHeight" Value="75" />
            <Setter Property="MinHeight" Value="75" />
            <Setter Property="MaxWidth" Value="110" />
            <Setter Property="MinWidth" Value="110" />
            <Setter Property="Opacity" Value=".5" />
            <Style.Triggers>
                <EventTrigger RoutedEvent="Mouse.MouseEnter">
                    <EventTrigger.Actions>
                        <BeginStoryboard>
                            <Storyboard>
                                <DoubleAnimation 
									Duration="0:0:0.2" 
									Storyboard.TargetProperty="MaxHeight" 
									To="90" />
                                <DoubleAnimation 
									Duration="0:0:0.2" 
									Storyboard.TargetProperty="MaxWidth" 
									To="140" />
                                <DoubleAnimation 
									Duration="0:0:0.2" 
									Storyboard.TargetProperty="Opacity"
									To="1.0" />
                            </Storyboard>
                        </BeginStoryboard>
                    </EventTrigger.Actions>
                </EventTrigger>

                <EventTrigger RoutedEvent="Mouse.MouseLeave">
                    <EventTrigger.Actions>
                        <BeginStoryboard>
                            <Storyboard>
                                <DoubleAnimation 
									Duration="0:0:1" 
									Storyboard.TargetProperty="MaxHeight" />
                                <DoubleAnimation 
									Duration="0:0:1" 
									Storyboard.TargetProperty="MaxWidth" />
                                <DoubleAnimation 
									Duration="0:0:0.2" 
									Storyboard.TargetProperty="Opacity" />
                            </Storyboard>
                        </BeginStoryboard>
                    </EventTrigger.Actions>
                </EventTrigger>

                <EventTrigger RoutedEvent="Loaded" >
                    <BeginStoryboard Name="MyBeginStoryBoard" >
                        <Storyboard>
                            <DoubleAnimation 
                                Storyboard.TargetProperty="(Canvas.Top)"
                                To="250" Duration="0:0:7" RepeatBehavior="Forever"
                                />
                        </Storyboard>
                    </BeginStoryboard>
                </EventTrigger>

                <EventTrigger RoutedEvent="MouseMove">
                    <PauseStoryboard BeginStoryboardName="MyBeginStoryBoard" />
                </EventTrigger>

                <EventTrigger RoutedEvent="MouseLeave">
                    <ResumeStoryboard BeginStoryboardName="MyBeginStoryBoard" />
                </EventTrigger>
            </Style.Triggers>
        </Style>
    </UserControl.Resources>
    <Grid>
        <Canvas ClipToBounds="True" Name="maincanvas" >
            <Button Canvas.Left="10" Canvas.Top="10" Style="{StaticResource AdvertisementItem}" Height="110" Width="130" Name="button1" >Advertisement</Button>

        </Canvas>
    </Grid>
</UserControl>

thanks a lot

You have To Search About The Truth Of Your Life
Why Are you Here In Life ?

ABitSmart31-May-09 2:37

ABitSmart

31-May-09 2:37

Feras Mazen Taleb wrote:
how can I make the same animation for all buttons but not in the same time

I don't understand this statement.

Take a look at this list of crazy WPF layout panels.[^].

Feras Mazen Taleb31-May-09 7:29

31-May-09 7:29

ABitSmart wrote:
Take a look at this list of crazy WPF layout panels.

thanks for that

I will try to clear my idea
I need to make a vertical list of photos that animate from up to down this is my simple idea
in the previous xaml code you will notice that I put one button that animate from up to down repeatedly

I want to put many photos but each photo has its own start and end point
and when the photo reach the down I want to push it in the first (ie return it to the top)

I hope that i cleared my idea Smile | :)

You have To Search About The Truth Of Your Life
Why Are you Here In Life ?

Feras Mazen Taleb1-Jun-09 23:59

1-Jun-09 23:59

I'm waiting my friend I just need the starting point
to know how to build this control

You have To Search About The Truth Of Your Life
Why Are you Here In Life ?

Feras Mazen Taleb2-Jun-09 2:03

2-Jun-09 2:03

this is the last thing I Achieved :
I added the animation to the buttons programmatically

this is the code behind file :

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Data;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Imaging;
using System.Windows.Navigation;
using System.Windows.Shapes;
using System.Windows.Media.Animation;

namespace practiceOnAnimationClasses
{
    /// <summary>
    /// Interaction logic for Window1.xaml
    /// </summary>
    public partial class Window1 : Window
    {
        public Window1()
        {
            InitializeComponent();
        }

        DoubleAnimationUsingPath Animation1 = new DoubleAnimationUsingPath();

        private void Window_Loaded(object sender, RoutedEventArgs e)
        {
            List<Button> buttons = new List<Button>(5);
            buttons.Add(new Button() { Width = 120d, Height = 75d, Content = "Advertisement 1" });
            buttons.Add(new Button() { Width = 120d, Height = 75d, Content = "Advertisement 2" });
            buttons.Add(new Button() { Width = 120d, Height = 75d, Content = "Advertisement 3" });
            buttons.Add(new Button() { Width = 120d, Height = 75d, Content = "Advertisement 4" });
            buttons.Add(new Button() { Width = 120d, Height = 75d, Content = "Advertisement 5" });

            // Storyboard AnimationRectanglePath = (Storyboard)this.Resources["StoryboardPath"];

            int count = 0;
            foreach (var item in buttons)
            {
                MainCanvas.Children.Add(item);
                DoubleAnimation myDoubleAnimation = new DoubleAnimation();
                myDoubleAnimation.From = 75 + (count * item.Width);
                myDoubleAnimation.To = 800;
                myDoubleAnimation.Duration = new Duration(TimeSpan.FromSeconds(15));
                myDoubleAnimation.AutoReverse = false;
                myDoubleAnimation.RepeatBehavior = RepeatBehavior.Forever;

                // Apply the animation to the button's Width property.
                item.BeginAnimation(Canvas.LeftProperty, myDoubleAnimation);
                count++;
            }
        }
    }
}

Xaml File it only contains the mainCanvas that I will Add
Buttons to It

the movement is very creasy and wrong How Can I make the movement
like photo gallery

<Window x:Class="practiceOnAnimationClasses.Window1"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Title="Window1" Height="300" Width="563" Loaded="Window_Loaded">
    <Window.Resources>
        <!--<Storyboard x:Key="StoryboardPath">
            <DoubleAnimationUsingPath BeginTime="00:00:00" Duration="00:00:02" Storyboard.TargetName="button" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.X)" Source="X">
                <DoubleAnimationUsingPath.PathGeometry>
                    <PathGeometry Figures="M-3,2 L363,2 L363,83 L-3,83 z"/>
                </DoubleAnimationUsingPath.PathGeometry>
            </DoubleAnimationUsingPath>
            <DoubleAnimationUsingPath BeginTime="00:00:00" Duration="00:00:02" Storyboard.TargetName="button" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.Y)" Source="Y">
                <DoubleAnimationUsingPath.PathGeometry>
                    <PathGeometry Figures="M-3,2 L363,2 L363,83 L-3,83 z"/>
                </DoubleAnimationUsingPath.PathGeometry>
            </DoubleAnimationUsingPath>
        </Storyboard>-->
    </Window.Resources>
    
    <Canvas Name="MainCanvas"></Canvas>
</Window>

You have To Search About The Truth Of Your Life
Why Are you Here In Life ?

Pete O'Hanlon2-Jun-09 2:11

Pete O'Hanlon

2-Jun-09 2:11

I would create a bool property called IsSelected, and use a datatrigger to fire the animation when IsSelected is true - then all you need do is loop round in your code setting this value when you need it.

"WPF has many lovers. It's a veritable porn star!" - Josh Smith

As Braveheart once said, "You can take our freedom but you'll never take our Hobnobs!" - Martin Hughes.

My blog | My articles | MoXAML PowerToys | Onyx

Feras Mazen Taleb2-Jun-09 2:28

2-Jun-09 2:28

could you explain more !

I will try to explain what I understood

I will make A dependency property IsSelected in My UserControl

THis Property will e true when Any of the buttons are hovered on mouse

All animations will paused when the property is True

is this right ? ??? ?? ?

second could you see my third replay that I inserted my code
that i try to make the movement programmatically

thanks a lot MR.O'Hanlon Wink | ;)

You have To Search About The Truth Of Your Life
Why Are you Here In Life ?

Feras Mazen Taleb2-Jun-09 21:04

2-Jun-09 21:04

hello this what achieved until now

1- I decided to make the animation programmatically
because I thing even if I used blend to design the animation
I need to control it programmatically because I will set the same
animation to many controls but with deffirent start and end point

2- I will use [DoubleAnimationUsingPath] class to design the animation path

3- Now I'm trying to look for answers for these two questions
- How can I make the animation continuos
of course (Forever) But What I mean Exactly is :
when the control reaches the end point it will return to the start
- How can I pause the the animation Programmatically

thanks a lot for every one sharing me with his/her ideas

You have To Search About The Truth Of Your Life
Why Are you Here In Life ?

Feras Mazen Taleb7-Jun-09 3:54

7-Jun-09 3:54

thanks a lot I got it
Now ,

I have gallery control that can display images or videos
the animation starts from the left to the right Forever
Paused when mouseover any item and resume when mouseLeave the Item

I hope to have enough time to make my first article in CodeProject
about my control

Smile | :)

You have To Search About The Truth Of Your Life
Why Are you Here In Life ?

Image on Button

Member 232448330-May-09 9:11

Member 2324483

30-May-09 9:11

Hello All,

I have windows application (VS 2008) and i added wpf user control to which i added a button and trying to set image from images folder of my project something like below:

<code> <Button Height="23" Margin="117,74,108,0" Name="button1" VerticalAlignment="Top">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Image Grid.Column="0" Source="\images\add.png" />
<TextBlock Grid.Column="1" Text="testing"/>
</Grid>
</Button>

But the compiler always throws error saying "The file images\add.png is not part of the project or its 'Build Action' property is not set to 'Resource'". I changed the
build action to "Resource" still doesn't work. The same works in WPF application.

Any help greatly appreciated

Thanks.

Re: Image on Button

ABitSmart30-May-09 16:51

ABitSmart

30-May-09 16:51

Try Source="images/add.png"

Re: Image on Button

Mark Salsbery31-May-09 8:14

Problem executing BitmapDecoder.Save() in worker thread [modified]

31-May-09 8:14

Yeah : NO BACKSLASHES IN WPF/Silverlight URIs!

Mark Salsbery
Microsoft MVP - Visual C++
Java | [Coffee]

fjparisIII30-May-09 8:50

Re: Problem executing BitmapDecoder.Save() in worker thread (solved through egregious kludge)

30-May-09 8:50

I have developed code based on the following post that has been previously reference in this forum: http://blog.andreweichacker.com/2009/02/reading-and-writing-tags-for-photos-in-wpf/comment-page-1/#comment-1492[^]

The code that I have developed based on the above thread works 100% of the time if it is executed inside of the WPF main application thread. But it fails 100% of the time if it is executed inside of a worker thread. The code fails on BitmapEncoder.Save(), throwing a "Cannot write to the stream" exception. But I have to execute this code inside of a worker thread because I have to display a progress bar: I'm updating the Copyright metadata in a batch operation for thousands of images!

On a wild guess I thought that BitmapEncoder.Save() might be failing because it is derived from DispatcherObject. But when I call BitmapEncoder.CheckAccess() it returns true, which actually isn't surprising since the BitmapEncoder object is constructed inside the worker thread. So I don't see any reason why I can't execute BitmapEncoder.Save() in the worker thread, but when I try, the BitmapEncoder.Save() throws the exception.

This has been tormenting me for weeks and only today did I realize that what was different about the cases where my class worked and where it didn't is whether BitmapEncoder is instantiated inside a worker thread, and this restriction seems completely irrational to me. So my question is, what am I missing and how can I correct the problem? This problem is holding up a ton of work that I have to do.

modified on Saturday, May 30, 2009 3:03 PM

fjparisIII30-May-09 12:38

Re: Problem executing BitmapDecoder.Save() in worker thread [modified]

30-May-09 12:38

I still have no idea why BitmapEncoder.Save() fails in a worker thread. I needed to move on, so I've just given up on that problem and took an "end around." I would still appreciate it if someone could explain how to attack the problem head on.

What I did was create a result code in the worker thread that indicates that BitmapEncoder.Save() needs to be called and that is bound to fail in a worker thread and so the worker thread doesn't even try. Instead it tells the UI thread, "I can't do it, you do it," which instructs the UI thread to call that function from itself. It also sets a flag that the worker thread can test to see if the UI thread is busy doing this nonsense and loops on a Thread.Sleep(0) until the flag is reset. Otherwise, the worker thread can get ahead of the UI thread and cause an access violation. The Sleep causes the progress bar to be a slightly jerky, so it would still be nice to eliminate the root cause of this problem and let me call BitmapEncoder.Save() where it should be called, in the worker thread.

This is such a kludge that it is difficult to document it and I wish I didn't have to do it. But I've been hung up on this problem for about three weeks and I'm just sick of it. In fact, I'm ecstatic that I've found any solution at all that lets me run a worker thread so I can have a reactive progress bar that can be interrupted instantly with the click of a Cancel button.

It's amazing that thousand page books can be written on WPF that barely scratch the surface.

Mark Salsbery31-May-09 8:30

Re: Problem executing BitmapDecoder.Save() in worker thread

31-May-09 8:30

Maybe try a thread with its apartment state set to STA, as shown in this
forum thread: Generating small version of jpeg files keeping original metadata[^]

And your kludge sounds horrific - I would dump that Smile | :)

*edit* Here's another link: Copying metadata with JpegBitmapEncoder in Web application[^]

Mark Salsbery
Microsoft MVP - Visual C++
Java | [Coffee]

modified on Sunday, May 31, 2009 3:54 PM

fjparisIII31-May-09 11:42

Re: Problem executing BitmapDecoder.Save() in worker thread

31-May-09 11:42

Hi, Mark. Thanks for your reply.

I'm using the the BackgroundWorker class to run my worker thread. In looking through MSDN, I don't see any way of getting the thread object of the background worker before it starts, and I'd need to do that before I could call Thread.SetApartmentState(ApartmentState.STA). I would actually be shocked with disbelief if the BackgroundWorker thread doesn't automatically run with ApartmentState.STA. The only other option is ApartmentState.MTA, and I don't believe that's even supported under WPF.

Also, you think my current kludge is bad! It turns out it doesn't work for my image scaling class. I still get "The image data generated an overflow during processing." So I'm thinking of capturing all of the common metadata items from the original image and adding them one at a time into the resized images after supplying the necessary padding. I'm that desperate. I don't even know if this will work. All I know is that simply copying the entire BitmapMetadata object from the original image with BitmapFrame.Create() does not.

Mark Salsbery31-May-09 12:26

Re: Problem executing BitmapDecoder.Save() in worker thread

31-May-09 12:26

fjparisIII wrote:
I'm using the the BackgroundWorker class to run my worker thread. In looking through MSDN, I don't see any way of getting the thread object of the background worker before it starts

Right - you'd need to use a regular Thread object.

fjparisIII wrote:
I would actually be shocked with disbelief if the BackgroundWorker thread doesn't automatically run with ApartmentState.STA

I'm not sure about that....I'll look it up after lunch...

I am sure curious if there is a threading problem with the encoder classes -
possibly COM related if those links are to be believed...

Mark Salsbery
Microsoft MVP - Visual C++
Java | [Coffee]

fjparisIII31-May-09 13:50

Re: Problem executing BitmapDecoder.Save() in worker thread

31-May-09 13:50

Mark Salsbery wrote:
I am sure curious if there is a threading problem with the encoder classes -
possibly COM related if those links are to be believed...

I'm fairly sure the problem is COM-related. All these WPF imaging functions use the WIC API underneath, and those are wickedly ugly COM functions, anathema to C# developers. When programmers signed up to do .NET programming, COM is precisely the sort of garbage they were trying to get away from. I hope and pray Microsoft hasn't abandoned its original promise to rid the world forever of that hopeless ugliness. I'm also amazed at how much P/Invoke programming I have to do to accomplish common tasks. How unconscionable is it that WPF doesn't even offer a folder browser?

The fundamental design of WPF is amazingly elegant. But the version numbers of .NET are hopeless pretentious. I ROFLMAO every time I see them. The released version numbers should have been 0.1, 0.2, 0.3, and 0.35 instead of ten times those values. Well, when you have 100,000,000 lines of code to get out, something has to give, and it would be political suicide to be more honest about what the version numbers imply. At least the basic design is uncompromising, just incomplete. WPF is fun programming, except every time I turn around I'm running into a brick wall and I have to roll up my sleeves and crack open my Win32 background for some P/Invoke programming. And I sure don't want to dive into raw WIC programming. I'll wait for .NET 4.0 and hope for the best.

fjparisIII31-May-09 18:46

Re: Problem executing BitmapDecoder.Save() in worker thread

31-May-09 18:46

Mark Salsbery wrote:
fjparisIII wrote:
I would actually be shocked with disbelief if the BackgroundWorker thread doesn't automatically run with ApartmentState.STA

I'm not sure about that....I'll look it up after lunch...

I didn't know where to look it up so I just tested for what it was. It is MTA. Do you know why this would prevent things like BitmapEncoder.Save() from executing correctly in an MTA thread?

Mark Salsbery31-May-09 20:18