WynApse Home Page
Home    Blog    About    Contact       
Latest Article:


My Tags:
My Sponsors:






Lifetime Member:

Final Silverlight QuickStart Example Page




This is the last page from my working through the WPF/E QuickStart -- yes, WPF/E -- this is back from still running the December CTP although I've had to make some alterations for running Silverlight, as detailed below. There were a few bumps in the road that I'll explain in another article, but once I got past those, things came together pretty easily.

The final section of the QuickStart begins with hyperlinks which I already used on the other three starter pages. It then moves into buttons without much explanation, and then a slider example. I've combined the button and slider onto one overall canvas and added some extra features as shown in the page.

Top Button

The top-most button on the page is essentially the same as the QuickStart example. I modified the colors, partly in response to the scRGB notation used in the QuickStart and partly because I like blue :) Since I am using multiple sub-canvases, I also added x:Name values to each. The TransformGroup that is used to move the button as it is pressed got it's own name, as well as the TextBlock. The javascript is tweaked to allow the same javascript to be used for both the upper and lower buttons.

Bottom Button

The bottom button on the canvas is a cut-and-paste from the original, including the mouse handlers.

My first goal on the page was to use the same handlers for the two buttons, so I had to modify the original javascript code to avoid both buttons highlighting or moving with any mouse action. I did that by teaching the javascript how to figure out which button was being manipulated. I had a couple false starts in this area but eventually figured out that I could use the x:Name defined in the xaml in comparison to sender.Name as shown here:

if (mouseOver) {
if (sender.Name=="Rectbutton"){
slider_SetValue(sender, 0);
}
}


That gave me the capability of differentiating between the two canvases and using essentially the same mouse-handling javascript.

Slider

The slider is the last control in the original QuickStart, and there were some errors in that code as I mentioned above. My point in this article is to demonstrate these 3 controls, so I'll leave that for another article.

As with the buttons, the slider is almost identical to the one in the QuickStart. One of the things I added to it was to start it at the center by using the slider_Loaded javascript from the QuickStart to set the value at 100 instead of 0. The other was to make the button-press commands from the two buttons set the slider control to either 0 or 200.

Silverlight Changes

Since I was revisiting the code, I put the "Hand" cursor on the xaml where appropriate, which was not available when this was first done. Bowing to Silverlight Beta 1, I also removed "javasript:" lead-ins to all javascript identifiers in the xaml. I also took the opportunity to pull the code from an external html file into this page, which is a change from how I originally wrote it.

With the advent of Beta 1 of Silverlight, a few things changed that meant breaking changes to my pages. This code contains the first set of problems, although small. As detailed by Bryant Likes, the old manner of finding mouse position has been modified.

Rather than confuse anyone with old vs. new, I'll just show the new method. In the snippet here, taken from the JS for this page, I'm picking up the x-coordinate based on a mouse left-button down action:

function slider_MouseLeftButtonDown(sender, args) {
var coordinate = args.getPosition(null).x;


JavaScript for producing this page:

<script>
var mouseOver = false;
var pressed = false;

function button_MouseLeftButtonDown(sender,args) {
sender.captureMouse();
mouseOver = true;
pressed = true;
updateVisuals(sender);
}

function button_MouseLeftButtonUp(sender,args) {
sender.releaseMouseCapture();
pressed = false;

updateVisuals(sender);

if (mouseOver) {
if (sender.Name=="Rectbutton"){
//alert("You pressed the button!");
slider_SetValue(sender, 0);
}
else
{
//alert("You pressed the 2nd button!");
slider_SetValue(sender, 200);
}
}
}

function button_MouseEnter(sender,args) {
mouseOver = true;
updateVisuals(sender);
}

function button_MouseLeave(sender,args) {
mouseOver = false;
updateVisuals(sender);
}

function updateVisuals(sender) {
//background
if(sender.Name=="Rectbutton"){
if (pressed && mouseOver) {
sender.findName("button_rectangle").fill = "LightBlue";
var transform = sender.findName("button_transform");
transform.x = 2;
transform.y = 2;
} else {
sender.findName("button_rectangle").fill = "LightBlue";
var transform = sender.findName("button_transform");
transform.x = 0;
transform.y = 0;
}

// highlight
if (mouseOver || pressed) {
sender.findName("button_highlight").opacity = 1;
} else {
sender.findName("button_highlight").opacity = 0;
}
}
else
{
if (pressed && mouseOver) {
sender.findName("button_rectangle2").fill = "LightBlue";
var transform = sender.findName("button_transform2");
transform.x = 2;
transform.y = 2;
} else {
sender.findName("button_rectangle2").fill = "LightBlue";
var transform = sender.findName("button_transform2");
transform.x = 0;
transform.y = 0;
}

// highlight
if (mouseOver || pressed) {
sender.findName("button_highlight2").opacity = 1;
} else {
sender.findName("button_highlight2").opacity = 0;
}
}
}

var mouseDownPosition = 0;
var mouseDownValue = -1;

function slider_Loaded(sender, args) {
slider_SetValue(sender, 100);
}

function slider_MouseLeftButtonDown(sender, args) {
var coordinate = args.getPosition(null).x;
coordinate -= sender["Canvas.Left"];
slider_SetValue(sender, coordinate);
}

function slider_thumb_MouseLeftButtonDown(sender, args) {
var slider = sender.findName("slider");
sender.captureMouse();
mouseDownValue = slider_GetValue(slider);
mouseDownPosition = args.getPosition(null).x;
}

function slider_thumb_MouseLeftButtonUp(sender, args) {
var slider = sender.findName("slider");
sender.releaseMouseCapture();
mouseDownValue = -1;
}

function slider_thumb_MouseMove(sender, args) {
var slider = sender.findName("slider");
if (mouseDownValue != -1) {
var newValue = mouseDownValue
+ (args.getPosition(null).x - mouseDownPosition);

slider_SetValue(slider, newValue);
}
}

function slider_GetValue(sender) {
var thumb = sender.findName("slider_thumb");
return thumb["Canvas.Left"] + .5 * thumb.width;
}

function slider_SetValue(sender, newValue) {
var slider= sender.findName("slider");
if (newValue > slider.width) {
newValue = slider.width;
}
if (newValue < 0) {
newValue = 0;
}
var thumb = sender.findName("slider_thumb");
thumb["Canvas.Left"] = newValue - .5 * thumb.width;

var Pos = thumb["Canvas.Left"];

sender.findName("SliderPos").Text=Pos.toString();

}


</script>


XAML for producing this page:

<Canvas xmlns="http://schemas.microsoft.com/client/2007"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Loaded="slider_Loaded" >
<!-- Original Button -->
<Canvas
x:Name="Rectbutton"
Canvas.Top="10" Canvas.Left="20"
MouseLeftButtonDown="button_MouseLeftButtonDown"
MouseLeftButtonUp="button_MouseLeftButtonUp"
MouseEnter="button_MouseEnter"
MouseLeave="button_MouseLeave"
Cursor="Hand"
>
<Canvas.RenderTransform>
<TransformGroup>
<TranslateTransform x:Name="button_transform" X="0" Y="0"/>
</TransformGroup>
</Canvas.RenderTransform>
<Rectangle Stroke="#FF000000" Fill="LightBlue"
Width="128.8" Height="56" x:Name="button_rectangle"/>
<Rectangle Stroke="DarkBlue" StrokeThickness="5"
Width="126.8" Height="54" Canvas.Left="1" Canvas.Top="1"
Opacity="0"
x:Name="button_highlight"/>
<TextBlock x:Name="UpperText" Text="Press me!"
FontSize="20" Canvas.Left="22" Canvas.Top="12"/>

</Canvas>

<!-- Lower Button -->
<Canvas
x:Name="Rectbutton2"
Canvas.Top="100" Canvas.Left="20"
MouseLeftButtonDown="button_MouseLeftButtonDown"
MouseLeftButtonUp="button_MouseLeftButtonUp"
MouseEnter="button_MouseEnter"
MouseLeave="button_MouseLeave"
Cursor="Hand"
>
<Canvas.RenderTransform>
<TransformGroup>
<TranslateTransform x:Name="button_transform2" X="0" Y="0"/>
</TransformGroup>
</Canvas.RenderTransform>
<Rectangle Stroke="#FF000000" Fill="LightBlue"
Width="165.8" Height="56" x:Name="button_rectangle2"/>
<Rectangle Stroke="DarkBlue" StrokeThickness="5"
Width="163.8" Height="54" Canvas.Left="1" Canvas.Top="1"
Opacity="0"
x:Name="button_highlight2"/>
<TextBlock x:Name="LowerText" Text="Press me too!"
FontSize="20" Canvas.Left="20" Canvas.Top="12"/>
</Canvas>

<!-- Slider -->
<Canvas x:Name="slider" Canvas.Top="200" Canvas.Left="20"
Width="200" Height="45"
Background="transparent"
MouseLeftButtonDown="slider_MouseLeftButtonDown">
<Line x:Name="slider_line" Stroke="black"
StrokeThickness="1" X1="0" Y1="25" X2="200" Y2="25"/>
<Path x:Name="slider_thumb" Stroke="#FF000000"
Fill="sc#1, 0.548430264, 0.5354195, 0.5354195"
Data="M0,0 L11.5,0 11.5,30 5.75,40 0,30z"
MouseLeftButtonUp="slider_thumb_MouseLeftButtonUp"
MouseMove="slider_thumb_MouseMove"
MouseLeftButtonDown="slider_thumb_MouseLeftButtonDown"
Cursor="Hand" />
<TextBlock x:Name="SliderPos" FontSize="20"
Canvas.Left="95" Canvas.Top="50" />
</Canvas>

</Canvas>
Copyright © 2006-2017, WynApse