Re: Silverlight to WPF Porting - WPF Discussion Boards

27-Apr-09 12:51

Hi, I am trying to port a sample application that I found online here:
http://www.shinedraw.com/3d-illusion/flash-vs-silverlight-3d-image-space/#comment-2085

from Silverlight 2.0 to WPF. I am rather new to both Silverlight and WPF, and I am doubtlessly missing something rather obvious in this type of porting procedure. Here is a link to the project file as I modified it:

http://www.mediafire.com/?mzwmy3nmmyd

Mark Salsbery27-Apr-09 14:07

27-Apr-09 14:07

WTH.

I thought I wanted to help on this so I was stupid enough to go to the mediafire link.

What a spam filled crap link.

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

bdb3886528-Apr-09 6:42

28-Apr-09 6:42

It wasn't my intention for someone to go to a spam website to download the file. Here is the link to the file on another spam free site
www.avtinconline.com/Silverlight/ImageSpace3Dwpf.zip

Mark Salsbery28-Apr-09 8:01

28-Apr-09 8:01

In solution explorer, right click on the images folder in the project and choose Add...

Navigate to the images folder on your hard drive and add the 20 images to the project.

Expand the images folder in solution explorer.

~~For each image, right click the image, choose properties, and set its build action to "Content"~~
Click the top image and shift-click the bottom image (select all the images), right click the
selected images, choose properties, and set the build action to "Content"

Run it.

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

bdb3886528-Apr-09 11:10

28-Apr-09 11:10

Thanks! Worked like a charm!!!

Mark Salsbery28-Apr-09 12:44

28-Apr-09 12:44

Cool

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

bdb3886529-Apr-09 6:52

29-Apr-09 6:52

I believe I have found an interesting quirk. I could not get the images in the
WPF application to render in the random position order as shown in the silverlight
example version. A value that in the silverlight version returns valid floating
point values, returns "NaN" in the WPF version. The calculations seem to be the
same, so how can "NaN" be returned for one but not the other? I have modified the
project so that the values of the "NaN" numbers that should be floating point values
are recorded in a file called "Errors.txt".
Go here to see the newly modified file
www.avtinconline.com/Silverlight/ImageSpace3Dwpf.zip

Mark Salsbery29-Apr-09 7:21

29-Apr-09 7:21

bdb38865 wrote:
Go here to see the newly modified file

Can you just post the relevant calculation code here (the original Silverlight
and the ported WPF code)?

Mark

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

bdb3886529-Apr-09 7:44

29-Apr-09 7:44

Here is the calculation method. It is the same in silverlight and WPF.
private void posImage()
{
//System.Windows.Forms.MessageBox.Show("HEllo");
for (int i = 0; i < _images.Count; i++)
{
Image image = _images[i];
Point3D point3D = _imagePoint3Ds[image];

double zActual = SPACE_LENGTH + (point3D.z - _camera.z);
double scale = SPACE_LENGTH / zActual - EFFECT_FACTOR;

// update the image position and scale
if (scale > 0)
{
image.SetValue(Canvas.LeftProperty, (point3D.x - _camera.x) * scale);
image.SetValue(Canvas.TopProperty, (point3D.y - _camera.y) * scale);
Log.WriteToLog(image.ToString() +": "+ Convert.ToString((point3D.x - _camera.x) * scale));

ScaleTransform scaleTransform = new ScaleTransform();
scaleTransform.ScaleX = scale * NEW_SCALE;
scaleTransform.ScaleY = scale * NEW_SCALE;
image.RenderTransform = scaleTransform;

image.Opacity = 1 - 0.99 * zActual / SPACE_LENGTH * 0.5;
//image.Opacity = 1;

// sort the children according to the scale
image.SetValue(Canvas.ZIndexProperty, (int)(SPACE_LENGTH - point3D.z));

}
else
{
// if text move over the screen, place it at the back
point3D.z += SPACE_LENGTH * 2;
}

}

Mark Salsbery29-Apr-09 8:10

29-Apr-09 8:10

The problem isn't in there.

The ImageSpace3D.addImages() method is where the random calculations are made.

The calculations are based on the Width and Height properties of the control, which
are always NaN unless set somewhere, which they are not.

ActualWidth and ActualHeight are the properties that should be used, and should have been
used in the Silverlight version as well.

ActualWidth and ActualHeight are not set until the control is loaded so you need to call the
initialization code from a "Loaded" event handler (or later) instead of from the constructor.

Here's what you should have to make it work...

<!-- ImageSpace3D.xaml -->

<UserControl
	xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
	xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
	xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
	xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
	mc:Ignorable="d"
	x:Class="ImageSpace3Dwpf.ImageSpace3D"
	x:Name="UserControl"
	d:DesignWidth="640" d:DesignHeight="480" 
	<code>Loaded="UserControl_Loaded"</code> >

	<Grid x:Name="LayoutRoot"/>
</UserControl>

// ImageSpace3D.xaml.cs


        public ImageSpace3D()
        {
            InitializeComponent();

            <code>// note I removed all the initialization code from here
            //    and placed it in the UserControl_Loaded() method below</code>
        }

		
        private void UserControl_Loaded(object sender, RoutedEventArgs e)
        {
            // add the holder to the canvas
            _holder.SetValue(Canvas.LeftProperty, <code>ActualWidth</code> / 2);
            _holder.SetValue(Canvas.TopProperty, <code>ActualHeight</code> / 2);
            LayoutRoot.Children.Add(_holder);

            // add all the texts to the stage
            addImages();

            // not enough? create more
            addImages();

            // start the enter frame event
            _timer = new DispatcherTimer();
            _timer.Interval = new TimeSpan(0, 0, 0, 0, 1000 / FPS);
            _timer.Tick += new EventHandler(_timer_Tick);
            _timer.Start();
        }

		
        <code>// Here note I changed Width and Height to ActualWidth and ActualHeight</code>
	private void addImages()
        {
            int seed = (int)DateTime.Now.Ticks;

            for (int i = 0; i < IMAGES.Length; i++)
            {
                // create a random object
                seed += (int)DateTime.Now.Ticks;
                Random r = new Random(seed);

                // load the image
                String url = IMAGE_PATH + IMAGES[i];
                Image image = new Image();
                image.Source = new BitmapImage(new Uri(url, UriKind.Relative));

                // randomly assign the position
                Point3D point3D = new Point3D();
                point3D.x = r.NextDouble() * <code>ActualWidth - ActualWidth</code> / 2;
                point3D.y = r.NextDouble() * <code>ActualHeight - ActualHeight</code> / 2;
                point3D.z = r.NextDouble() * SPACE_LENGTH * 2 - SPACE_LENGTH;


                // update the image property
                image.SetValue(Canvas.LeftProperty, point3D.x);
                image.SetValue(Canvas.TopProperty, point3D.y);
                image.MouseLeftButtonDown += new MouseButtonEventHandler(image_MouseLeftButtonDown);
                image.Cursor = Cursors.Hand;


                _imagePoint3Ds.Add(image, point3D);
                _holder.Children.Add(image);
                _images.Add(image);
            }
        }

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

bdb3886529-Apr-09 9:10

29-Apr-09 9:10

Thanks for you help; however, now I get the following error when I attempt to implement your changes to the XAML for ImageSpace3Dwpf:

Error 1 ''d' is an undeclared namespace. Line 9, position 2.' XML is not valid. C:\Documents and Settings\rDev\My Documents\Expression\Expression Blend Projects\ImageSpace3Dwpf\ImageSpace3Dwpf\ImageSpace3D.xaml 9 2 ImageSpace3Dwpf

Mark Salsbery29-Apr-09 9:13

29-Apr-09 9:13

The point is - just add the Loaded event handler.

That's all I changed in the XAML.

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

bdb3886529-Apr-09 9:46

29-Apr-09 9:46

Never mind, I got it. Thanks for all your help

Mark Salsbery29-Apr-09 10:39

Assign a Command to a Template Item

29-Apr-09 10:39

bdb38865 wrote:
Thanks for all your help

No problem!

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

#realJSOP27-Apr-09 9:38

#realJSOP

27-Apr-09 9:38

I have a button on a ControlTemplate. I want to handle its click events in the control that uses the template. How would I make that happen?

<ControlTemplate x:Key="UDPTemplateTabControlEx" TargetType="{x:Type TabControl}">
    <Grid x:Name="Grid" KeyboardNavigation.TabNavigation="Local">
        <ScrollViewer x:Name="HeaderPanelEx" Grid.Row="0" Grid.Column="0"...>
            <ScrollViewer.Style>
                <Style TargetType="{x:Type ScrollViewer}">
                    <Setter Property="Template">
                        <Setter.Value>
                            <ControlTemplate>
                                <Grid Margin="0,0,0,0" Grid.Row="0" x:Name="HeaderPanelEx">

                                    <Button Grid.Column="0" Width="25" Content="..." />

                                </Grid>
                            </ControlTemplate>
                        </Setter.Value>
                    </Setter>
                </Style>
            </ScrollViewer.Style>
        </ScrollViewer>
    </Grid>
</ControlTemplate>

I tried putting a name property on it, but I still can't see it in intellisense in the code...

"Why don't you tie a kerosene-soaked rag around your ankles so the ants won't climb up and eat your candy ass..." - Dale Earnhardt, 1997
-----
"...the staggering layers of obscenity in your statement make it a work of art on so many levels." - Jason Jystad, 10/26/2001

Wes Aday27-Apr-09 10:47

Wes Aday

27-Apr-09 10:47

John Simmons / outlaw programmer wrote:

I did something similar but I used the Command property of the button not the Click event.

<button grid.column="0" width="25" content="..." command="MyCommand" />

Why is common sense not common?
Never argue with an idiot. They will drag you down to their level where they are an expert.
Sometimes it takes a lot of work to be lazy
Individuality is fine, as long as we do it together - F. Burns

Help humanity, join the CodeProject grid computing team here

Mark Salsbery27-Apr-09 11:08

27-Apr-09 11:08

John Simmons / outlaw programmer wrote:
I want to handle its click events in the control that uses the template. How would I make that happen?

It can also depend on where the template is defined.

If it's in a place backed by code-behind (ie a class) then you can add
an event handler like you would anywhere else.

If the template is in a resource dictionary or some other place without a class
then maybe implementing a command as Wes mentioned would be the way to go.

You can also wire event handlers at runtime, perhaps by overriding OnApplyTemplate()[^] and
using FindName()[^] to find the button instantiated by the template.

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

#realJSOP29-Apr-09 23:58

#realJSOP

29-Apr-09 23:58

I'm not sure about the event stuff in WPF yet. I mean, sure, I'm handling click events from buttons and stuff, but I'm not sure about the routed event thing. I haven't found a decent explanation that also includes a decent example of it either. I'm sure that I should look at the routed event stuff, because I'm making controls public in user controls that I have to handle in the form or user control that hosts them, and it just feels wrong to do that.

Mark Salsbery30-Apr-09 7:07

30-Apr-09 7:07

John Simmons / outlaw programmer wrote:
I'm sure that I should look at the routed event stuff

Yes. Routed Events Overview[^]

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

Philipp Sumi29-Apr-09 22:20

Philipp Sumi

29-Apr-09 22:20

For me, custom commands are the way to go, also in terms of clean separation of presentation and logic. You can use the CommandParameter property to submit some contextual information.

Edit: I guess you might derive your command from RoutedCommand if you want it to bubble up the tree, which would simplify handling the event in the control that makes use of the template.

NetDrives - Open Source Network Share Management

Problem with Silverlight-Tools installation

User 2710091-May-09 5:13

User 271009

1-May-09 5:13

You can also simply data bind the Button.Command to an ICommand on located on the DataContext.

This is excactly how MVVM applications work.

You can also assign the delegate for the ClickEvent or the Commmand at run-time. I've see this also.

Another way is to set up an AttachedEvent at a parent object where this button and possibly others grouped. Then just handle the Button.ClickEvent.

All are very acceptable techniques.

Cheers, Karl

» CodeProject 2008 MVP, CodeProject 2009 MVP

My Blog | Mole's Home Page |
XAML Power Toys Home Page

Just a grain of sand on the worlds beaches.

modified 27-Feb-21 21:01pm.

Frank Köppel27-Apr-09 6:41

Frank Köppel

27-Apr-09 6:41

Hello, I can't install the Toolbox from Silverlight because it stops the installation and show me that it has a problem with my InternetExplorer Version 7. Is there a trick, another download or something special that I missed!?!?! Or require the new Silverlight Toolbox InternetExplorer Version 8?!?!?!?.
Thank's for any help

Frank

Re: Problem with Silverlight-Tools installation

Mark Salsbery27-Apr-09 6:59