I wanted to have a completely non-standard window; no border and not rectangular. I looked on the Net for how-to’s on a few WPF issues I was having problems with:

Windows without traditional borders. One reference (http://learnwpf.com/Posts/Post.aspx?postId=e9cb689c-e6af-407a-b28c-d38f2f2f555c) had a good description of this, but one point was omitted that caused me problems until I found it elsewhere. Moving windows that have no borders was something I had to figure out myself.

To remove the traditional Windows border from a window, you must set the WindowStyle to None and the ResizeMode to NoResize within the Window tag.

However if you have an irregularly shaped window (for example if you have rounded corners), you also have to set AllowsTransparency to True and set the Background to Transparent (I had to do this because the background for my dialog is a PhotoShopped image – a rectangle with rounder corners).

So the whole Window tag looks like:

<Window
xmlns=http://schemas.microsoft.com/winfx/2006/xaml/presentation

xmlns:x=http://schemas.microsoft.com/winfx/2006/xaml

WindowStyle=None ResizeMode=NoResize
AllowsTransparency=“True Background=“Transparent>

I have a Settings window, and wanted to do that all in XAML I found that the AllowsTranspency setting has to be set to true in the code-behind, not in the XAML. This may be because I don’t have a background image, just XAML. So my Window tag looks like:

<Window
xmlns=http://schemas.microsoft.com/winfx/2006/xaml/presentation
xmlns:x=http://schemas.microsoft.com/winfx/2006/xaml
Background=Transparent
WindowStyle=None ResizeMode=NoResize
Height=232 Width=240>

And in the C# code-behind, I have: 

 Settings settings = new Settings();
settings.Owner =
this;
settings.AllowsTransparency =
true;
settings.Show();

In both these samples, I have removed things like the class name and, because I created the XAML using Expression Blend, the extra name spaces that involves.How to make such a window movable? I wanted to be able to drag this window to a new place. With no border, Windows does not help you, you have to do that all yourself. I captured two events to achieve this and again in the Window tag I had the line

In both these samples, I have removed things like the class name and, because I created the XAML using Expression Blend, the extra name spaces that involves.

How to make such a window movable? I wanted to be able to drag this window to a new place. With no border, Windows does not help you, you have to do that all youself. I captured two events to achieve this and again in the Window tag I had the line: MouseMove=onMouseMove MouseDown=onMouseDownThen in the code-behind I would move the window in the MouseMove handler. In the MouseDown handler, I would capture the place the mouse had been pressed. I found that this would disrupt behaviour of the text boxes and list boxes in the window - basically you can’t actually select text in a text box since that moves the window! so I use the DirectlyOver property of the mouse event to only move the window if I click over background (imageBackground is the image object for my background).private Point m_LastPoint;

private void onMouseDown(object sender, EventArgs e)
{
MouseEventArgs args = (MouseEventArgs)e;
if (args.LeftButton == MouseButtonState.Pressed &&
args.MouseDevice.DirectlyOver == imageBackground)
{
m_lastPoint = args.GetPosition(
this);
}
}

private void onMouseMove(object sender, EventArgs e)
{
MouseEventArgs args = (MouseEventArgs)e;
if (args.LeftButton == MouseButtonState.Pressed &&
args.MouseDevice.DirectlyOver == imageBackground)
{
if (m_lastPoint.X >= 0 && m_lastPoint.Y >= 0)
{
this.Top += args.GetPosition(this).Y – m_lastPoint.Y;
this.Left += args.GetPosition(this).X – m_lastPoint.X;
}
}
}

This works fairly well, but even now I have problems if I move the move too quickly. I think it’s because I’ve moved the mouse outside the bounds of the window whis being redrawn slightly lower than I can drag it. For neatness I should tidy that up. Probably it’s got something to do with capturing the mouse, which I remember from my old Win32 days.

I found a Photoshop tutorial to make metallic pill-shaped buttons (http://www.biorust.com/tutorials/detail/31/en/) and can now have a phone simulator dialog, which has buttons that look like phone buttons, but actually using them was a mission.

I found a tutorial by Josh Smith for a XAML based button class (http://www.infusionblogs.com/blogs/jsmith/archive/2006/09/27/871.aspx). it basically used three button images and then had triggers on the mouse up, down and move events to change the button’s image. All good, but heavy on the graphical design – it means doing three images for each button and I just couldn’t face drawing 30 very similar button images.

I spoke to a friend at work and he suggested making the button seem to recede when you press it and come back when you release. XAML allows that and using Expression Blend it was fairly easy to set up a timeline and resize the button (just two pixels smaller in X and Y in 0.05 seconds). Doing that once for each button would have been boring so I cut and pasted the XAML tags. This meant for each button I had a storyboard that looked like:

<Storyboard x:Key=Key1Press>
<
DoubleAnimationUsingKeyFrames BeginTime=00:00:00 Storyboard.TargetName=buttonKey1 Storyboard.TargetProperty=(FrameworkElement.Width)>
<
SplineDoubleKeyFrame KeyTime=00:00:00 Value=80/>
<
SplineDoubleKeyFrame KeyTime=00:00:00.05 Value=76/>
</
DoubleAnimationUsingKeyFrames>
<
DoubleAnimationUsingKeyFrames BeginTime=00:00:00 Storyboard.TargetName=buttonKey1 Storyboard.TargetProperty=(FrameworkElement.Height)>
<
SplineDoubleKeyFrame KeyTime=00:00:00 Value=40/>
<
SplineDoubleKeyFrame KeyTime=00:00:00.05 Value=36/>
</
DoubleAnimationUsingKeyFrames>
</
Storyboard>
<
Storyboard x:Key=Key1Release>
<
DoubleAnimationUsingKeyFrames BeginTime=00:00:00 Storyboard.TargetName=buttonKey1 Storyboard.TargetProperty=(FrameworkElement.Width)>
<
SplineDoubleKeyFrame KeyTime=00:00:00 Value=76/>
<
SplineDoubleKeyFrame KeyTime=00:00:00.05 Value=80/>
</
DoubleAnimationUsingKeyFrames>
<
DoubleAnimationUsingKeyFrames BeginTime=00:00:00 Storyboard.TargetName=buttonKey1 Storyboard.TargetProperty=(FrameworkElement.Height)>
<
SplineDoubleKeyFrame KeyTime=00:00:00 Value=36/>
<
SplineDoubleKeyFrame KeyTime=00:00:00.05 Value=40/>
</
DoubleAnimationUsingKeyFrames>
</
Storyboard>
So when the button is pressed the image shrinks, and when it’s released the image grows back again.I tried adding these storyboards to Button objects, but that doesn’t work – i don’t know why, but I guess it’s because Buttons are special interface elements and their behaviour is hard-wired. Since I don’t need any special Button functionality, I changed my objects types to Labels like:<Label
Margin=30,95,30,5 HorizontalAlignment=Left Width =80 Height = 40
Name=buttonKey1 MouseUp=onKey1Clicked
Content={StaticResource Key1URIs}
Style={StaticResource simpleImageButtonStyle}
/>

and I linked the buttons to the storyboards using event triggers like:

<EventTrigger RoutedEvent=Mouse.MouseDown SourceName=buttonKey1>
<
BeginStoryboard x:Name=Key1Press_BeginStoryboard Storyboard={StaticResource Key1Press}/>
</
EventTrigger>
<
EventTrigger RoutedEvent=Mouse.MouseUp SourceName=buttonKey1>
<
BeginStoryboard x:Name=Key1Release_BeginStoryboard Storyboard={StaticResource Key1Release}/>
</
EventTrigger> 
I used my own variant of Josh’s ImageButton class to provide a way to add an image to my buttons; it may be overkill, but it does work. My class, simpleImageButtonStyle, exposes an ImageURI property which I set to the image’s locator in my XAML, so I have a lot of tags like:<WPFControls:SimpleImageButtonUris
x:Key=Key1URIs
ImageUri=/Images/1 Pill Button.png
/>
 The end result is a button that has no Windows like border, but reacts realistically when pressed.

I’ve spent some free time at work learning WPF. Even after 15 years of windows programming, it’s a bit of a learning curve. I wrote a simple app to simulate a mobile phone – it will integrate with some other code here at work. A few things I’ve learned:

  •  Making buttons that change their appearance when you move the mouse over them or click them
  • Laying out controls in a grid
  • Working with Visual Studio when the IDE doesn’t render your XAML

I wanted to have glass effect buttons and I thought that would mean using Photoshop, which I’d never used before so I installed it from our work distribution and cranked it up. Then I found a tutorial for making glass effect buttons (http://www.associatedcontent.com/article/98189/photoshop_icons_how_to_create_a_green.html). I followed that and them played around with the settings for a day or so and figured out what effect changing each setting would have. I went home and told liz how I’d used Photoshop and was now an expert in it. She laughed – you don’t know hardly anything, you could spend the rest of your life and still not know anything. I think she’s right. it’s a huge program and I’ve just scratched the surface. Anyway, I then felt the number keys should have a metallic look so found a tutorial for that (http://biorust.com/tutorials/detail/31/en/). That link may not always work, but Google “metallic pill button”. Those two sites are great on Photoshop tutorials and I’ll lean more effects from them.

I wanted a button that changed appearance when you clicked on it and found a “How To” from Josh Smith (http://www.infusionblogs.com/blogs/jsmith/archive/2006/09/27/871.aspx). Josh has now moved his blog to WordPress (http://joshsmithonwpf.wordpress.com), but I can’t find this entry there. I followed his sample and got buttons that had different graphics when you hover or click on them. My UI is now a bit messy, but this is just a tutorial so I’m too worried about that.

I wanted to have buttons that would move when you press them – probably a pixel down and right then pop back when you release the mouse. that seems a straightforward thing, but so far I’m still looking at how you’d do that.

However I have found that when you include user controls in your WPF project Visual Studio designer does not work, it failed to display your window. That’s a bit of a worry, and apparently is fixed in the new Orcas release (Mar 2007). I started to download that and after I’d got 4 of the 7 files and spent half a day getting even that far, I wimped out. That upgrade will have to wait for now.

So I’m laying out my window “blind”, which means I’m learning about grids and about borders and so on. That’s useful since I think it’s better to know whow something really works than to just blindly follow someone else’s instructions without knowing what you’re doing.

One of the WPF “rules” is that you shouldn’t be doing things this way anyway. you should create your UI in pure XAML, no images and so forth. If I have free time in the next few weeks, that will be something else to play with.

The bottom line is that I now have an application using WPF that works just like my old Windows app. It looks nicer – apart from my messy attempts at graphics design, but really I’m not sure it adds anything.

© 2010 Derek Knight's Blog Suffusion WordPress theme by Sayontan Sinha