PhotoPlay v0.1 – WPF

Err… well it sure don’t do much yet but if you just can’t get enough of spinning a photo around then here is the ClickOnce install.

So far I’ve tackled some very simple DependencyPropertys, binding, control templating and event triggers. As I always find when learning something like this from scratch – simple things can take a long time. The only reference that I’ve used so far aside from the MSDN help is an excellent intro to writing WPF custom controls by Mark Miller in a recent episode of dnrTV.

WPF Book

I’ve just ordered Windows Presentation Foundation (WPF) Unleashed by Adam Nathan – my first technical reference purchase in around 15 years. Normally I find most technical books to be average to lousy and I’ve never read one cover to cover. The pace is often too slow, they never go deep enough unless they are a pure reference book in which case they never have enough realistic examples to make it all work. [Interesting to note that this book is only 40% of the cost of the other book – not taking into consideration the 15 years of inflation. Publishing must have gotten a whole lot cheaper!]

From what I’ve heard and read recently I think the true technical reference book is dead – online help and search are just so much more affordable, portable and accurate. I still think there is a need for the more technology overview type book (else why would I have bought this one ).

Windows Presentation Foundation Unleashed (WPF) (Unleashed)

So why did I choose this book over others by authors such as Charles Petzold, Chris Anderson etc.

  1. Has by far the best cover :-p
  2. Is printed in full colour. I know a lot of people will think that’s a lame reason but I’ll stand by the fact that the best technical books I’ve kept from my Uni days are those that are well published. That means good typography, layout, diagrams etc. Of course most of those use colour to because let’s face it – now that the cost appears negligible (this book didn’t cost me any more than the others would) why wouldn’t you? Unless of course you’re the kinda developer that switches all the syntax formatting in Visual Studio to black and white
  3. Ok – so I remember reading quite a few blog articles talking about the differences between the WPF books mentioned and I felt that I liked the sound of this one more than the others.

I probably won’t get my hands on this till around 7th September – I wonder how much I will have figured out by then. Oh well – I guess its tax deductible anyway…

PhotoPlay – WPF – It Lives!

Ok – so tonight I finally had the courage to install Visual Studio 2008 Beta 2 on my relatively new and until now pristinely clean development machine. The install process was the standard tried and true Visual Studio install engine and completed slowly but without any problems (only one reboot required).

So I immediately fire up Visual Studio 2008 – choose the C# preferences which gives me all the wrong keyboard shortcuts (I can never remember which is which). Create a new WPF application with solution folder. The add a new WPF user control library to the project. So far so good.

Renaming UserControl1 to PhotoPage and changing the namespaces turns out to be as bad as renaming in Visual Studio 2005. Have to rename the file, class, namespace and XAML all independently.

First impressions:

  • XAML editor hasn’t immediately crashed – way more stable than previous builds!
  • XAML editor is almost real-time and is only a little slow to load – way faster than previous builds!
  • WPF has changed everything – even finding equivalent of BackColor to create a coloured background takes time. At least Fill is spelt correctly :-p
  • XAML Intellisense is great for auto-complete – but where are the help tooltips?
  • Hmm… appears Shapes have a Fill and controls have a Background.
  • Don’t click on the helpful sounding message telling you the assembly has changed and XAML needs to be refreshed. Seems to crash Visual Studio every time

My first attempt at a XAML only approach:

PhotoClass : UserControl

<UserControl x:Class="Spencen.Windows.Controls.Photo"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Width="300">
    <StackPanel>
        <Border Name="OuterFrame" CornerRadius="5">
            <Border.Background>
                <LinearGradientBrush Opacity="0.8">
                    <GradientStop Color="Azure" Offset="0.0"/>
                    <GradientStop Color="CadetBlue" Offset="1.0"/>
                </LinearGradientBrush>
            </Border.Background>
            <Border Name="InnerFrame" Background ="White" BorderBrush="Black" 
Margin
="6,6,6,6"> <Image Name="image2" Margin="1, 1, 1, 1"> <Image.Source>
F:\Pictures\Camera Photos\2007\Mount Hotham\DSC06994.JPG
</Image.Source
> </Image> </Border> </Border> </StackPanel> </UserControl>

PhotoPlayWindow : Window

<Window x:Class="Spencen.Windows.PhotoPlayWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:p="clr-namespace:Spencen.Windows.Controls;assembly=Spencen.Windows.Controls.Photo"
    Title="PhotoPlayWPF" Height="428" Width="619">
    <StackPanel>
        <Slider Name="scaleSlider" Height="21" Width="100" 
Minimum="0.1" Maximum="5.0" Value="1.0"/> <Slider Name="angleSlider" Height ="21" Width="100"
Minimum
="-180.0" Maximum="180.0" Value="0.0"/> <p:Photo Height="230" Width="300" Name="testPhoto"> <p:Photo.LayoutTransform> <TransformGroup> <ScaleTransform ScaleX="{Binding ElementName=scaleSlider, Path=Value}"
ScaleY
="{Binding ElementName=scaleSlider, Path=Value}"/> <RotateTransform Angle="{Binding ElementName=angleSlider, Path=Value}"
CenterX
="150" CenterY="150"/> </TransformGroup> </p:Photo.LayoutTransform> </p:Photo> </StackPanel> </Window>

image

PhotoPlay Online Help

Menus

PhotoPlay File Menu

New Page Removes all images from the page and resets the page name to “New Page”.
Open Page… Opens a page that has been previously saved.
Save Page Saves the current page using the file name last used to open or save the page. If the page is new (shown as “New Page” in the title bar) then the file name will be prompted as per Save Page As.
Save Page As… Prompts for a file name and if given saves the current page layout.
Load Photos… Prompts for a folder from which to load images. If a folder is selected all existing images on the page will be removed and replaced by the images from the folder.
Note: currently all files will be loaded – non-image files will be displayed using just their filename. The reason for this is that the actual image data is loaded in the background after the files are enumerated and displayed as square placeholders.
Exit Closes the application.

Features

To Select a Photo Left click on a photo. The photo is highlighted by colouring the photo frame and showing the sizing/rotation grips at each corner.
To Resize a Photo Grab one of the four grips by left clicking the mouse on one and then whilst holding down the left mouse button drag. Dragging towards the centre of the photo will shrink it – whilst dragging away from the centre will enlarge it. There is a maximum and minimum scale (0.5 to 5.0).
Photos can also be resized by simply selecting the photo and then using the mouse wheel.
image
The “-” and “+” keys can also be used to resize photos.
To Rotate a Photo Grab one of the four grips by left clicking the mouse on one and then whilst holding down the left mouse button drag in the direction to rotate. Photos can be rotated a full 360 degrees.
image
A photo can also be rotated to 0, 90, 180 or 270 degrees by right clicking on the photo to bring up the context menu and then selecting the appropriate angle from the Rotate sub-menu.
To Zoom a Photo The selected photo can be zoomed within its frame. That is the photo is zoomed but the actual frame stays the same size – thus the entire image is no longer visible. Together with Panning this allows images to be re-composed. For example to remove unwanted sections and to focus in on the subject – or simply to create a more appealing framing.
Select the photo to be zoomed then hold down the ctrl key whilst using the mouse scroll wheel to zoom in and out.
image
Ctrl-“-” and Ctrl-“+” keys can also be used to zoom photos.
To Move a Photo Left click on any area of a photo except the corner grips and whilst holding down the left mouse button drag. The photo will move in the direction the mouse is dragged.
To Pan a Photo This can only be done if the image has been previously Zoomed.
Left click on any area of a photo except the corner grips and hold down the ctrl key whilst holding down the left mouse button. The photo will be panned in the direction the mouse is dragged.
 image
To Remove a Photo Select a photo by clicking on it and then press the Delete key. The photo will be removed from the page. Alternately right click on the photo and click Remove from the context menu.
image

 

Folder Monitoring If the Load Photos… option is used then the folder will be monitored for changes. If new images are added they will be automatically added to the page. If an image is modified the modification will be displayed immediately the image is saved.

Sample App

I’m going to try and use this blog to post details regarding a sample app that I’m writing for myself. The application itself is really more of an applet – I don’t really have a fixed feature set for it – it actually forms part of something much bigger that I’ve been tinkering with for some time.

The real purpose of this applet and indeed posting it online is so that I can use it as an exercise in learning WPF. I plan to convert all the existing features from the current WinForms version into a new WPF application. This should be a great learning experience for me – although I imagine there will also be a good deal of pain as I struggle to re-learn windowing fundamentals in the new framework.

Here’s a quick feature list that I’m aiming to include before I begin the WPF version:

  • Split frame code out of Photo class into a separate Renderer. Do the same for the PhotoPage class background.
  • Create a new Photo frame Renderer using simple triangular semi-transparent picture holders. Give the ability to swap between the existing Renderer and this new one.
  • Make photo frame borders optional.
  • Create a popup/tool window to display the EXIF data that I’m currently reading.
  • Add the ability to update/create captions and store in EXIF.
  • Create a simple “how to use” web page – host online and hook to F1 key.
  • Create an options window to specify album and application level defaults.
  • Do a quick optimisation run – particularly in the “load from folder” code path.

Next post should include some screenshots of the current version and the ClickOnce install path.