Possibilities for Images on Ecommerce Sites

by Bobbi Perreault 30. May 2008 23:54
Share on Facebook

This video is a great example of the possibilities in using Silverlight Deep Zoom for Ecommerce site images.  Hopefully it's not an error page!  If you have problems viewing here, the original site is http://delicategeniusblog.com/?p=692 and the author of the tool that is displayed can be found at: http://www.cynergysystems.com/

Is this what the data looks like where you work?

by Bobbi Perreault 29. May 2008 01:51
Share on Facebook

http://www.faxt.com/IsThisYourData.jpg

Tags:

Silverlight wont update UI from background thread

by Bobbi Perreault 25. May 2008 09:16
Share on Facebook

When I did this:  Used a web service to retrieve an XML serialized list of items from my database, and used the deserialized list to fill a member variable that was a list.

This happened:  Within the method which was called from the asyncronous retrieve - the member variable that was a list was filled with the appropriate number of class instances.

As soon as that same list was accessed from an event handler, the count would again show 0 items as if there never were any items from the retrieve.

Here's what I found out about it, and how I fixed it: 
In Silverlight applications, you aren't allowed to modify the UI thread from a background thread.  Of course, the last event of an asyncronous call to a web service isn't on the UI thread.  This line of code insures that the method which fills  my member vars is executed on the UI thread:

Dispatcher.BeginInvoke(() => setMappedItems());


That is, setMappedItems() is the method which fills the member list.

Walla, no more missing items in my list.   I found this useful information in this blog here:  http://adoguy.com/2008/05/06/Executing_Code_on_the_UI_Thread_in_Silverlight_2.aspx

Visifire Slider Column Chart - Source

by Bobbi Perreault 14. May 2008 05:57
Share on Facebook

I wrote about some changes I made to Visifire to support my Fuel Compare Calculator but forgot (I guess, I can't find it anyway!) to post the second half of that information - which is the details on how I did the implementation.  I'll at least provide the links to the source now, then if I can find my missing brain, I'll finish that post when I'm by my notes.

Source for the Silverlight control is here http://www.faxt.com/silverlight/fuelcomparecalculator/EZBurnFuelCompareCalculator.zip

The partial classes that I added to Visifire are here:  http://www.faxt.com/silverlight/fuelcomparecalculator/VisiFirePartial.zip

Tags:

Silverlight Custom Cursor

by Bobbi Perreault 10. May 2008 23:48
Share on FacebookThe Infloor-Heating Diagram Maker is an eCommerce web site enhancement tool -  meant to provide a useful service for customers.  This particular site offers for sale heating and plumbing supplies to owners of outdoor stoves.  I'm still working on this control, but wanted to respond to some inquiries I've seen concerning custom cursors. Since the Diagram Maker is at it's base a drawing program, it will need to have custom cursors to designate when a tool is selected for drawing.  The first custom cursor is one the will represent the Pencil tool (Pen/Pencil)

Here are the steps to add a custom cursor to your Silverlight application:o    Acquire an image that will be the Cursor.

  •   Add the image to your project.
  •  Create a control that consists of this image

	<UserControl x:Class="WidgetCreator.pencil"
    xmlns="http://schemas.microsoft.com/client/2007" 
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
    Width="16" Height="16">
    <Grid x:Name="pencilroot">
            <Image Source="pencil.png" Stretch="Fill"/>
 
    </Grid>
</UserControl>
  •   Add the control to your Canvas XAML.   (don't forget the namespace declaration at the top)

Namespace:  xmlns:WidgetCreator="clr-namespace:WidgetCreator"
XAML:   <WidgetCreator:pencil Canvas.Left="340" Canvas.Top="127" x:Name="pencil"/>

  •  Set it's Visibility to Collapsed.
  •  pencil.Visibility = Visibility.Collapsed;
  •  Add to the event handler where the cursor will become active code that hides the current cursor and shows your custom image.
// Capture mouse and update stat
           CaptureMouse();
           if (pencil != null)
           {
               pencil.Visibility = Visibility.Visible;
               movePencilToCurrentPosition((Point)_positionLast);
           }
                
private void movePencilToCurrentPosition( Point pt)
        {
               
            // Set the coordinates of customPointer to the mouse pointer coordinates
            pencil.SetValue(Canvas.LeftProperty, pt.X);
            pencil.SetValue(Canvas.TopProperty, pt.Y);
        }

 Add an event handler for the Mouse Move event - and use that to send the image where ever the mouse goes

private void HandleMouseMove(object sender, MouseEventArgs e)
            {
                
                //follow the cursor
                Point position = e.GetPosition(LayoutRoot);
                if (_bIn) //set the cursor if we're tracking a polygon creation.
                {
                   //ChangeParentKeepPosition(pencil, LayoutRoot, e);
                    movePencilToCurrentPosition(position);                    
    
                }
                
            }

Skinnable Controls - Menu System

by Bobbi Perreault 10. May 2008 00:04
Share on Facebook

Working as a web developer for going on 9 years, I've weathered  the transition from table based layouts to the Semantic Web.   When I start a new web page I begin by typing in the html semantically, with no consideration of layout at this point.  The symantic html is what search engines will see when the site is indexed.  It's my page's skeleton.     For example, I'll make sure the important title of the page is an H1 tag.  I'll layout all navigation as a list.  I'll wrap all my text in paragraphs. 

After the html markup is written - I can come back through and add the CSS style. Part of that will be to put some div tags in where the columns need to be.   When the CSS is created, I'll make sure the naming convention doesn't target a specific color or position.  What I mean is that if I have Red text in the markup used to notify users I won't call the style ".redtext" but ".alert".   If I'm naming a column, I'll name it ".column1" instead of ".leftcolumn".   That way, if that column gets moved to the bottom or the right later, the name of it's style will still make sense.

To me, it seems logical to move these same principles into the Silverlight application development arena.  Since I've multiple ecommerce sites to put these controls into, my goal is to make it once and apply the skin differently.  Take this back of the napkin drawing of a category list for example: 

 So in this case with a Silverlight control instead of an html page, I'll start with plain XAML, and go from there.  Here I have taken the napkin drawing of category pictures with descriptions, and translated it to a Silverlight wrap panel full of buttons.  If you would like to view the control, it can be seen here.   The control was built with generic xaml and it's styles are applied dynamically in the back end code.   If the concept is refined, it will work for multiple applications.

The wrap panel control came from Codeplex, by the way.  If you'd like to download it, the source can be found here:  http://www.codeproject.com/KB/silverlight/WrapPanelSilverlight.aspx

If you'd like the code for this category list, I've placed it out to this web server and that link is here: http://www.faxt.com/silverlight/snappea/CategoryList.zip .  Here's  the piece of code that fills the Wrap panel.

String buttonTemplate = "<Button xmlns='http://schemas.microsoft.com/client/2007' "
                + "  Style='{3}'>"
              + "<Button.Template>"
                + "<ControlTemplate TargetType='Button'>"
                  + "<Grid>"
                  + "<TextBlock  Style='{4}' Text='{0}' Grid.Row='0' />"
                  + "<Image Source='{1}'  Style='{5}' Grid.Row='1'/>"
               + "</Grid> "
                + "</ControlTemplate>"
              + "</Button.Template>"
              + "<Button.ToolTip>"
                + "<ToolTip Content='{2}' />"
              + "</Button.ToolTip>"
            + "</Button>";
            foreach (MenuItem mnu in _menu)
            {
                 //the StaticResource strings below could come from a configuration file, from parameters in the html, or ? 
                string onebutton = string.Format(buttonTemplate, mnu.MenuItemName, mnu.MenuItemImage, 
                                mnu.MenuItemPageUri, "{StaticResource buttonStyle1}",
                                "{StaticResource MenuItemNameBlock}""{StaticResource ThumbNailPreview}");
                Button bt = (Button) XamlReader.Load( onebutton );
                bt.Click += new RoutedEventHandler(bt_Click);
                Wrappable.Children.Add( bt );
            }

Tags:

 

RSS Feed FriendFeed