My first thoughts were to use a ScrollViewer containing a Stackpanel (oriented vertically) containing a bunch of text blocks and just use the ScrollViewer.ScrollToVerticalOffset to control the movement of the slot. That all worked and was very simple to
do. Now I'm trying to figure out how to actually simulate the "spin" of the slot. Any suggestions are greatly appreciated!
If your control rotates the items round the wheel, then I guess the simulation is very simple by manipulating the scroll speed. In your example, they have also made the text a little vague, to make the rotation a little more convincing.
I think you're having trouble because the HorizontalOffset and VerticalOffset of ScrollViewer are read-only in Silverlight. However, there are workarounds:
That will probably work well with what you have already created. An alternative would be to place your StackPanel inside a Canvas and animate a TranslateTransform instead.
For the blur look, you could either overlay a blurred-text image over your text blocks, or use a pixel shader if you want something more advanced.
Thanks so much for your reply Ben. I will look over the link you suggested too. I guess my challenge is that the items in each of my slots are less than 10 items long so I'm not sure how to make them "wrap" around like a wheel. So when the user "spins"
the slot the whole items list is repeated again. I think if I used a StackPanel inside a canvas I would have the same issue. Does that make any sense?
I just took a look at the application. This can be down with Silverlight. We can simply add tree ListBox to show the Three Columns. Each column has two buttons, one for up and another for down operation. When we click to Spin, we can a WCF to get the
target restaurant, and during this, we can show an animation or change the ListBox's ItemsSource with a fake data.
Best regards,
Jonathan
Please mark the replies as answers if they help or unmark if not.
If you have any feedback about my replies, please contact msdnmg@microsoft.com.
Microsoft One Code Framework
There has been a lot of interest lately on how I created the Silverlight slot machine in this thread so here are some details on what I did. I hope this helps.
Layout
The basic layout for the slot machine is a Grid with columns for each slot and rows for all the buttons (lock, slot up/down, etc.). Each slot is made up of a Canvas containing a StackPanel. Each element in the StackPanel is a Border containing a TextBlock
(collectively referred to as a panel).
I used a DoubleAnimation to animate the (Canvas.Top) property of the filled StackPanel inside the Canvas. As I added elements to the StackPanel, I calculated the from/to properties of the DoubleAnimation. I set the animation’s RepeatBehavior to RepeatBehavior.Forever.
This creates the revolving illusion of the slot when really it only moves up and down very quickly. I used a DispatcherTimer to manage how long each slot spins.
Logic
My implementation has the following classes: SlotMachine, Slot, Panel, and Result. I fed the SlotMachine the Xml file so it could initialize all the slots, fill all the slot’s panels, and load the results. When a user spins the slot machine I first filter
all the possible results based on the users selections (if they “locked” any slots, etc.) and then I select a random result from those possibilities before the slot animations ever begin. This way I know what panels to display when each slot stops spinning.
Sounds are embedded as .wma resources and played using a MediaElement.
Data
I created an Xml file that contained all the information for the slot machine. It contained slot definitions, panel definitions, as well as all the results. Here is a subset my Xml file:
<?xml version="1.0" encoding="utf-8" ?>
<SlotMachine>
<Slots>
<Slot>
<Id>0</Id>
<Header>Theme</Header>
<Panels>
<Panel>
<Id>0</Id>
<Text>Active</Text>
</Panel>
<Panel>
<Id>1</Id>
<Text>Culinary</Text>
</Panel>
</Panels>
</Slot>
<Slot>
<Id>1</Id>
<Header>Venue</Header>
<Panels>
<Panel>
<Id>6</Id>
<Text>Home</Text>
</Panel>
<Panel>
<Id>7</Id>
<Text>Indoor</Text>
</Panel>
</Panels>
</Slot>
<Slot>
<Id>2</Id>
<Header>Budget</Header>
<Panels>
<Panel>
<Id>9</Id>
<Text>$</Text>
</Panel>
<Panel>
<Id>10</Id>
<Text>$$</Text>
</Panel>
</Panels>
</Slot>
<Slot>
<Id>3</Id>
<Header>Hours</Header>
<Panels>
<Panel>
<Id>13</Id>
<Text>0-2 hrs</Text>
</Panel>
<Panel>
<Id>15</Id>
<Text>Half Day</Text>
</Panel>
</Panels>
</Slot>
</Slots>
<Results>
<Result>
<Id>0</Id>
<Title>Conflict Resolution</Title>
<Details>We may be a younger nation, but we've had our share of conflict! Visit a battlefield or War Memorial. Take a coffee break. </Details>
<Panels>2,8,9,13</Panels>
</Result>
<Result>
<Id>1</Id>
<Title>Fore!</Title>
<Details>Head to the driving range and see who can hit that golf ball the farthest!</Details>
<Panels>0,8,9,13</Panels>
</Result>
<Result>
<Id>2</Id>
<Title>In Full Swing</Title>
<Details>Head to the driving range and see who can hit the golf ball the farthest! Have lunch before you go to fuel up for those long drives!</Details>
<Panels>0,1,8,10,13</Panels>
</Result>
</Results>
</SlotMachine>
halhunt
0 Points
5 Posts
Slot Machine Implementation Guidance
Sep 29, 2009 06:55 PM | LINK
Hello,
I am looking for some guidance in developing a SL3 app that mimics this flash app:
http://www.urbanspoon.com/spin-widget
My first thoughts were to use a ScrollViewer containing a Stackpanel (oriented vertically) containing a bunch of text blocks and just use the ScrollViewer.ScrollToVerticalOffset to control the movement of the slot. That all worked and was very simple to do. Now I'm trying to figure out how to actually simulate the "spin" of the slot. Any suggestions are greatly appreciated!
Thanks in advance!
slot machine
drnomad
Member
715 Points
199 Posts
Re: Slot Machine Implementation Guidance
Sep 30, 2009 06:54 AM | LINK
If your control rotates the items round the wheel, then I guess the simulation is very simple by manipulating the scroll speed. In your example, they have also made the text a little vague, to make the rotation a little more convincing.
ben33333
Member
50 Points
11 Posts
Re: Slot Machine Implementation Guidance
Sep 30, 2009 04:41 PM | LINK
I think you're having trouble because the HorizontalOffset and VerticalOffset of ScrollViewer are read-only in Silverlight. However, there are workarounds:
http://blogs.msdn.com/delay/archive/2009/08/04/scrolling-so-smooth-like-the-butter-on-a-muffin-how-to-animate-the-horizontal-verticaloffset-properties-of-a-scrollviewer.aspx
That will probably work well with what you have already created. An alternative would be to place your StackPanel inside a Canvas and animate a TranslateTransform instead.
For the blur look, you could either overlay a blurred-text image over your text blocks, or use a pixel shader if you want something more advanced.
halhunt
0 Points
5 Posts
Re: Re: Slot Machine Implementation Guidance
Oct 01, 2009 01:18 AM | LINK
Thanks so much for your reply Ben. I will look over the link you suggested too. I guess my challenge is that the items in each of my slots are less than 10 items long so I'm not sure how to make them "wrap" around like a wheel. So when the user "spins" the slot the whole items list is repeated again. I think if I used a StackPanel inside a canvas I would have the same issue. Does that make any sense?
halhunt
0 Points
5 Posts
Re: Re: Re: Slot Machine Implementation Guidance
Oct 02, 2009 12:45 AM | LINK
Any other suggestions on ways to accomplish this are very much appreciated!
Jonathan She...
All-Star
50156 Points
4951 Posts
Microsoft
Re: Slot Machine Implementation Guidance
Oct 05, 2009 09:14 AM | LINK
Hi Halhunt,
I just took a look at the application. This can be down with Silverlight. We can simply add tree ListBox to show the Three Columns. Each column has two buttons, one for up and another for down operation. When we click to Spin, we can a WCF to get the target restaurant, and during this, we can show an animation or change the ListBox's ItemsSource with a fake data.
Best regards,
Jonathan
If you have any feedback about my replies, please contact msdnmg@microsoft.com.
Microsoft One Code Framework
halhunt
0 Points
5 Posts
Re: Re: Slot Machine Implementation Guidance
Oct 25, 2009 09:24 PM | LINK
Here is the final product:
http://www.shakedate.com
Enjoy!
Julio_Izquierdo
Member
4 Points
2 Posts
Re: Re: Slot Machine Implementation Guidance
Dec 09, 2010 06:59 PM | LINK
Hi halhun,
I'm trying to build something similar myself. Can you explain how you did it or would you care to share the code?
Thanks,
Julio
halhunt
0 Points
5 Posts
Re: Re: Slot Machine Implementation Guidance
Dec 10, 2010 12:24 AM | LINK
There has been a lot of interest lately on how I created the Silverlight slot machine in this thread so here are some details on what I did. I hope this helps.
Layout
The basic layout for the slot machine is a Grid with columns for each slot and rows for all the buttons (lock, slot up/down, etc.). Each slot is made up of a Canvas containing a StackPanel. Each element in the StackPanel is a Border containing a TextBlock (collectively referred to as a panel).
I used a DoubleAnimation to animate the (Canvas.Top) property of the filled StackPanel inside the Canvas. As I added elements to the StackPanel, I calculated the from/to properties of the DoubleAnimation. I set the animation’s RepeatBehavior to RepeatBehavior.Forever. This creates the revolving illusion of the slot when really it only moves up and down very quickly. I used a DispatcherTimer to manage how long each slot spins.
Logic
My implementation has the following classes: SlotMachine, Slot, Panel, and Result. I fed the SlotMachine the Xml file so it could initialize all the slots, fill all the slot’s panels, and load the results. When a user spins the slot machine I first filter all the possible results based on the users selections (if they “locked” any slots, etc.) and then I select a random result from those possibilities before the slot animations ever begin. This way I know what panels to display when each slot stops spinning.
Sounds are embedded as .wma resources and played using a MediaElement.
Data
I created an Xml file that contained all the information for the slot machine. It contained slot definitions, panel definitions, as well as all the results. Here is a subset my Xml file: