Light Up the Web with Silverlight by Jacek Ciereszko

Blog about programming in Silverlight

  Home  |   Contact  |   Syndication    |   Login
  24 Posts | 0 Stories | 39 Comments | 0 Trackbacks

News

My post about Deep Zoom Composer was recommended by Scott Guthrie! :) (see here)

Archives

About Me

News

Who was here

Friday, August 06, 2010 #

After few minutes of playing with new Microsoft Lab's gadget -> Zoom.it, I decided to share with you few comments.

First

It looks so nice and it gives a lot of fun :D Check for example how my blog looks like as a one image :D

link: http://zoom.it/zFq1

Second

Great API! Both, JavaScript http://zoom.it/pages/api/quickstarts/javascript  and Silverlight http://zoom.it/pages/api/quickstarts/silverlight. Imagine DIGG with websites' preview in zoom.it :D

And last but not least

It not support Silverlight  on pages :P I've tried to generate my http://surfity.com/ website but result is different than I expected ;)

http://zoom.it/gKjs

 

Anyway, zoom.it looks like great tool which can give your website something new and very innovative! :)

Best regards,

Jacek Ciereszko


Sunday, May 02, 2010 #

If you are interested in my last post about "How to center and scale Silverlight applications using ViewBox control", I just published behavior that you can use instead of making changes in code.

How it works?

1. Download behavior (http://gallery.expression.microsoft.com/en-us/CenterAndScale )

2. Add dll to your application

<UserControl .....
    xmlns:interaction="clr-namespace:System.Windows.Interactivity;assembly=System.Windows.Interactivity"       
    xmlns:behavior="clr-namespace:CenterAncScaleBehavior;assembly=CenterAncScaleBehavior"  .... >

    <interaction:Interaction.Behaviors>
        <behavior:CenterAncScaleBehavior />
    </interaction:Interaction.Behaviors>


    <Grid > ... </Grid>

</UserControl>

3. DONE! Your application is ready!

 

Watch movie to see how it works (66 seconds):

See examples

Application without "Center And Scale Behavior":  http://bit.ly/cVinEC

Application with "Center And Scale Behavior":  http://bit.ly/ba8UsI

 

Source code and dlls

http://gallery.expression.microsoft.com/en-us/CenterAndScale

 

Cheers!

Jacek Ciereszko


There are many ways to make your application scalable in Web Browser window and align it in the center. Usually we use two Grid controls to align and panel control (like Canvas) to scale our apps.

Not the best solution

<UserControl>

    <Grid x:Name="LayoutRoot" Background="White">

        <Grid HorizontalAlignment="Center" VerticalAlignment="Center">

            <Canvas x:Name="scalePanel" VerticalAlignment="Top" HorizontalAlignment="Center">

               

            </Canvas>

        </Grid>

    </Grid>

</UserControl>

             

The example above usually works but there are better ways. How? Use ViewBox. ViewBox control contains scale mechanisms with some stretching options. So ViewBox together with Grid control is all what we need to align and scale our applications.

Good solution

<UserControl>

    <Grid x:Name="LayoutRoot" Background="White">

        <Viewbox>

            ...

        </Viewbox>

    </Grid>

</UserControl>

How to find ViewBox control

For those applications created in Silverlight 4, ViewBox is available in plug-in. For applications created in Silverlight 3 you can find it in Microsoft Silverlight Toolkit.

Demo

Let’s create a simple application that will contain: Button, TextBlock and red Rectangle. It will also have some Margin settings. This application won’t be in the center of window and it will not scale.

<UserControl … >

    <Grid x:Name="LayoutRoot">

        <Grid Margin="100, 50, 100, 20">

                <StackPanel Orientation="Horizontal">

                    <Button Width="100" Height="100" Content="test"/>

                    <TextBlock Text="Button" Width="100" Height="100" />

                    <Rectangle Width="100" Height="100" Fill="Red"/>

                </StackPanel>

        </Grid>

</Grid>

</UserControl>

 

Run demo: RUN

But If we use ViewBox control, we will got centered and always scaled application.

   <Grid x:Name="LayoutRoot">

        <Viewbox>

            <Grid Margin="100, 50, 100, 20">

                    <StackPanel Orientation="Horizontal">

                        <Button Width="100" Height="100" Content="test"/>

                        <TextBlock Text="bottom" Width="100" Height="100" />

                        <Rectangle Width="100" Height="100" Fill="Red"/>

                    </StackPanel>

            </Grid>

        </Viewbox>

    </Grid>

Link to application: RUN (try to resize application’s window)

Link to source code: SilverlightCenterApplication.zip

References

 

 Polish version: http://jacekciereszko.pl/2010/05/jak-wysrodkowac-i-skalowac-aplikacje.html

Jacek Ciereszko

 


Sunday, March 21, 2010 #

Few days ago I faced a problem with printing in new Silverlight 4 RC. When you try to dynamically load image (in code behind) and print it, it doesn't work. Paper sheet is blank.

Problem

XAML file:

<Image x:Name="image" Stretch="None" />

XAML.cs:

image.Source = new BitmapImage(new Uri(imageUri, UriKind.RelativeOrAbsolute)); 

Print:

var pd = new PrintDocument();
  pd.PrintPage += (s, args) =>
    {
      args.PageVisual = image;
    };
  pd.Print();

Result:

Blank paper.

 

Solution

What you need to do, is forced Silverlight engine to load that image before printing start. To accomplish that I proposed simply checking PixelWith value. Your code will ask about PixelWidth of image so it will have to be loaded.

XAML.cs:

BitmapImage bImage = new BitmapImage(new Uri(imageUri, UriKind.RelativeOrAbsolute));
image.Source = bImage;
InitControl(imageUri, movieUri, isLeft);

int w = bImage.PixelWidth;
int h = bImage.PixelHeight;

 

DONE!

 

Jacek Ciereszko

 


Saturday, October 03, 2009 #

After my last successes with TextBox Button Inovker Behavior, which was downloaded more than 700 times in 7 days and recommended by Silverlight sites like http://silverlike.net/invoke-button-click-event/, http://silverlightcream.com/, http://geekswithblogs.net/WynApseTechnicalMusings/ ,  I got motivation to share with you one more. This time my behavior will not be so useful and probably won’t be so famous but I hope It will be helpful for someone.

What I did

What I did this time is a simple behavior for opening ComboBox when mouse is over it. It might be useful in some scenario and makes one more click less for user. You can also find similar solution on youtube.com site where you don’t have to click ComboBox, but only move mouse over user's profile.

Live demo

How to add this to application

<ComboBox>
 
<interaction:Interaction.Behaviors>
     
<behavior:OpenComboBoxBehavior />
 
</interaction:Interaction.Behaviors>

<!-- sample data -->
 
<ComboBoxItem>
     
<TextBlock Text="First element" />
 
</ComboBoxItem>
 
<ComboBoxItem>
     
<TextBlock Text="Second element" />
 
</ComboBoxItem>
 
<ComboBoxItem>
     
<TextBlock Text="Third element" />
 
</ComboBoxItem>
 
<ComboBoxItem>
     
<TextBlock Text="Fourth element" />
 
</ComboBoxItem>
</ComboBox>
where "interaction:" is a namespace for "clr-namespace:System.Windows.Interactivity;assembly=System.Windows.Interactivity" and "behavior:" is a namespace for behavior's code.

Source Code

using System;
using System.Net;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Documents;
using System.Windows.Ink;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;
using System.Windows.Interactivity;

/// Behavior for ComboBox control.
/// It invokes drop down list when mouse is over it.
///
/// Jacek Ciereszko
/// http://geekswithblogs.net/SilverBlog/
///

///

namespace ComboBoxBehavior
{
   
public class OpenComboBoxBehavior : Behavior
   
{
       
///
       
/// Called after the Behavior is attached to an AssociatedObject.
       
///

       
/// Override this to hook up functionality to the AssociatedObject.
       
protected override void OnAttached()
       
{
           
base.OnAttached();
           
this.AssociatedObject.MouseEnter += new MouseEventHandler(AssociatedObject_MouseEnter);
       
}

       
///
       
/// Called after the Behavior is detached from an AssociatedObject.
       
///

       
/// Override this to hook up functionality to the AssociatedObject.
       
protected override void OnDetaching()
       
{
           
this.AssociatedObject.MouseEnter -= new MouseEventHandler(AssociatedObject_MouseEnter);
           
base.OnDetaching();
       
}

       
///
       
/// When mouse is over ComboBox, control drop down will open
       
///

       
///
       
///
       
void AssociatedObject_MouseEnter(object sender, MouseEventArgs e)
       
{
           
this.AssociatedObject.IsDropDownOpen = true;
       
}
   
}
}

Download

Source code and live example is also available on http://gallery.expression.microsoft.com/en-us/OpenComboBoxDropDown

---
Jacek Ciereszko

Polish version: http://jacekciereszko.pl/2009/10/behaviors-mouse-over-combobox-open.html

Thursday, September 24, 2009 #

As I promised in my last post about Surifty.com ( http://geekswithblogs.net/SilverBlog/archive/2009/09/15/visual-search-dont-browse-surf-it.aspx ) I did some performance improvement but still you have to run it on good PC to see 100% power of visual search engine. From now on application need less than 250MB in memory (I know, It’s still a lot!).

I also changed design. I hope it's now more user friendly. :)

And here is a sample video showing how http://surfity.com/ looks like in action!





Bests,
Jacek Ciereszko

Tuesday, September 22, 2009 #

For those of you who would like to add (attach) behavior to control in code behind, there is a simple solution.

Adding Behaviors

Let's say that we have xaml code like this one:

<TextBox x:Name="TextBoxInvoker" Text="TextBoxControl"  >

     <i:Interaction.Behaviors>

          <behavior:TextBoxSimpleBehavior />

     </i:Interaction.Behaviors>

</TextBox>

, where "i:" is a namespace for "clr-namespace:System.Windows.Interactivity;assembly=System.Windows.Interactivity" and "behavior:" is a namespace for behavior's class "TextBoxSimpleBehavior", which  can be simple class like this one (just adding typed letters to content):

using System;

using System.Net;

using System.Windows;

using System.Windows.Controls;

using System.Windows.Documents;

using System.Windows.Ink;

using System.Windows.Input;

using System.Windows.Media;

using System.Windows.Media.Animation;

using System.Windows.Shapes;

using System.Windows.Interactivity;

 

/// Dummy  sample behavior for TextBox control.

/// It add extra letter in the end of Text property.

/// <author>

/// Jacek Ciereszko

/// http://geekswithblogs.net/SilverBlog/

/// </author>

 

namespace TextBoxEnterBehavior

{

    public class TextBoxSimpleBehavior : Behavior<TextBox>

    {

        public TextBoxSimpleBehavior() : base() { }

 

        /// <summary>

        /// Called after the Behavior is attached to an AssociatedObject.

        /// </summary>

        /// <remarks>Override this to hook up functionality to the AssociatedObject.</remarks>

        protected override void OnAttached()

        {

            base.OnAttached();

            this.AssociatedObject.KeyDown += new KeyEventHandler(AssociatedObject_KeyDown);

        }

 

        /// <summary>

        /// Called after the Behavior is detached from an AssociatedObject.

        /// </summary>

        /// <remarks>Override this to hook up functionality to the AssociatedObject.</remarks>

        protected override void OnDetaching()

        {

            base.OnDetaching();

            this.AssociatedObject.KeyDown += new KeyEventHandler(AssociatedObject_KeyDown);

        }

 

        /// Simple operation on TextBox

        void AssociatedObject_KeyDown(object sender, KeyEventArgs e)

        {

            this.AssociatedObject.Text += e.Key;

        }

 

    }

}

 

So, to do the same operation in code behind, write:

// Adding behavior in code behind

TextBoxSimpleBehavior textBoxSimpleBehavior = new TextBoxSimpleBehavior();

            System.Windows.Interactivity.Interaction.GetBehaviors(TextBoxInvoker).Add(textBoxSimpleBehavior);

Adding Triggers

In this example I will use my TargetedTriggerAction from previous post http://geekswithblogs.net/SilverBlog/archive/2009/09/21/behaviors-textbox-enter-button-invoke-targetedtriggeraction.aspx
In xaml I attached my TriggerAction using this code:

<Button x:Name="TargetedButton" Content="Targeted Button"  />

<TextBox x:Name="TextBoxInvoker" Text="TextBox" >

    <i:Interaction.Triggers>

        <i:EventTrigger EventName="KeyDown" >

            <behavior:TextBoxEnterButtonInvoke TargetName="TargetedButton" />

        </i:EventTrigger>

    </i:Interaction.Triggers>

</TextBox>

where "i:" is a namespace for "clr-namespace:System.Windows.Interactivity;assembly=System.Windows.Interactivity" and "behavior:" is a namespace for behavior's code.

In code behind I will write this code:

// Adding TriggerAction in code behind

TextBoxEnterButtonInvoke textBoxEnterButtonInvoke = new TextBoxEnterButtonInvoke();

textBoxEnterButtonInvoke.TargetName = "TargetedButton";

 

System.Windows.Interactivity.EventTrigger eventTrigger = new System.Windows.Interactivity.EventTrigger("KeyDown");

eventTrigger.Actions.Add(textBoxEnterButtonInvoke);

 

System.Windows.Interactivity.Interaction.GetTriggers(TextBoxInvoker).Add(eventTrigger);

Done! That's all we need to attach behaviors in code behind.

---
Jacek Ciereszko

 


Monday, September 21, 2009 #

Few days ago I wrote a small behavior, which I think, can be used in many applications, so I decided to share it with you :)

What are behaviors in Silverlight I won't write in this post, because there are many other places where you can find nice tutorial about this. I personally recommend this one: http://www.silverlightshow.net/items/Behaviors-and-Triggers-in-Silverlight-3.aspx

What I did

What I did is a "TargetedTriggerAction" behavior, which simulate button click on targeted button control, when user press "Enter" key in a TextBox control.

You probably think now that I did a useless code because you can do the same by handling KeyDown event in TextBox, but what about if you love MVVM, you want your code behind to stay clear and you don't want to make a mess in ViewModels? Then this solution is what you are looking for.

Where to use it?

The best place to use this behavior is a search controls, where user can finish operations by click Button control or pressing "Enter" key.

Live demo (pressing Enter key in the TextBox have the same result like clicking the button)

How to add it to your application

<Button x:Name="TargetedButton" Content="Targeted Button"  />
<TextBox Text="TextBox" >
    <i:Interaction.Triggers>
        <i:EventTrigger EventName="KeyDown" >
            <behavior:TextBoxEnterButtonInvoke TargetName="TargetedButton" />
        </i:EventTrigger>
    </i:Interaction.Triggers>
</TextBox>
where "i:" is a namespace for "clr-namespace:System.Windows.Interactivity;assembly=System.Windows.Interactivity" and "behavior:" is a namespace for behavior's code.

Source Code

Application is so small that I decided to enter all source code:

using System;

using System.Net;

using System.Windows;

using System.Windows.Controls;

using System.Windows.Documents;

using System.Windows.Ink;

using System.Windows.Input;

using System.Windows.Media;

using System.Windows.Media.Animation;

using System.Windows.Shapes;

using System.Windows.Interactivity;

using System.Windows.Automation.Peers;

using System.Windows.Automation.Provider;

using System.Windows.Controls.Primitives;

 

/// TargetedTriggerAction for TextBox control.

/// It invokes targeted button when Enter is pressed inside TextBox.

/// <author>

/// Jacek Ciereszko

/// http://geekswithblogs.net/SilverBlog/

/// </author>

///

 

namespace TextBoxEnterBehavior

{

    public class TextBoxEnterButtonInvoke : TargetedTriggerAction<ButtonBase>

    {

        /// <summary>

        /// Gets or sets the peer.

        /// </summary>

        /// <value>The peer.</value>

        private AutomationPeer _peer { get; set; }

 

        /// <summary>

        /// Gets or sets the target button

        /// </summary>

        private ButtonBase _targetedButton { get; set; }

 

        /// <summary>

        /// Called after the TargetedTriggerAction is attached to an AssociatedObject.

        /// </summary>

        /// <remarks>Override this to hook up functionality to the AssociatedObject.</remarks>

        protected override void OnAttached()

        {

            base.OnAttached();

            _targetedButton = this.Target;

            if (null == _targetedButton)

            {

                return;

            }

 

            // set peer

            this._peer = FrameworkElementAutomationPeer.FromElement(_targetedButton);

            if (this._peer == null)

            {

                this._peer = FrameworkElementAutomationPeer.CreatePeerForElement(_targetedButton);

            }

        }

 

        /// <summary>

        /// Called after targeted Button change.

        /// </summary>

        /// <remarks>Override this to hook up functionality to the new targeted Button.</remarks>

        protected override void OnTargetChanged(ButtonBase oldTarget, ButtonBase newTarget)

        {

            base.OnTargetChanged(oldTarget, newTarget);

            _targetedButton = newTarget;

            if (null == _targetedButton)

            {

                return;

            }

 

            // set peer

            this._peer = FrameworkElementAutomationPeer.FromElement(_targetedButton);

            if (this._peer == null)

            {

                this._peer = FrameworkElementAutomationPeer.CreatePeerForElement(_targetedButton);

            }

        }

 

        /// <summary>

        /// Invokes the targeted Button when Enter key is pressed inside TextBox.

        /// </summary>

        /// <param name="parameter">KeyEventArgs with Enter key</param>

        protected override void Invoke(object parameter)

        {

            KeyEventArgs keyEventArgs = parameter as KeyEventArgs;

            if (null != keyEventArgs && keyEventArgs.Key == Key.Enter)

            {

                if (null != _peer)

                {

                    IInvokeProvider invokeProvider = _peer.GetPattern(PatternInterface.Invoke) as IInvokeProvider;

                    invokeProvider.Invoke();

                }

            }

        }

    }

}

 


Download

Source code and live example is also available on
http://gallery.expression.microsoft.com/en-us/TextBoxInvokeButton


-----
Jacek Ciereszko

Polish version: http://jacekciereszko.pl/2009/09/behaviors-textbox-enter-button-invoke.html

Tuesday, September 15, 2009 #

Today, when Microsoft released “Bing Visual Search” I decided also to release to public beta version of my own visual search site :) It’s of course not so fancy like this from Microsoft but I think it’s enough to search something and have fun.

http://surfity.com [Beta]

I named it Surfity.com because it’s more like surfing through the Internet than browsing. Surfity.com is available of course under http://surfity.com  domain.

Lunch Surfity.com [Beta]

Features

Main features in Surfity.com are:

·         Surfing through Images, Videos and websites (use tabs)

·         User can use left list (listbox) to change actual picture or play with main surface.

·         Main surface let to zoom in and out, drag and drop and select items (use mouse LBM and wheel).

·         User is able to go to:

o    “Full Screen” mode

o   Enlarge surf-space

o   Install application locally (out of browser)

 

Technologies

Surfity.com was created purely in .NET. It’s uses new features of Silverlight 3.0 and Bing.com’s API.

View enlarged

Surfity.com out of browser

Feedback

I’m looking forward for your feedback. If something is wrong, or you think it should work in different ways, please leave a comment! :)

History

I started this project about month ago to participate in programming competition. Because it was my third idea and I liked it so much, I decided to continue my research. Now I will adding new features until I will be bored or I will find something new to do ;)

Known issues

·         I am aware about performance and this is main task to do now. I plan to fix it in next few days.

·         Developer API. I would like to release user control, so everyone could incorporate Surfity.com with his websites and surf through his own data.

 

So, remember about comments and “surf the web with http://surfity.com” ;)

 

---

Jacek Ciereszko

kick it on DotNetKicks.com   Shout it


Wednesday, June 17, 2009 #

Hi, "Silverlight Count Down Control"  is now available in Silverlight 2.0! I did also some changes with tooltips. Read more on project's site ( http://silverlightgadgets.codeplex.com/ )


Live demo (Silverlight 2.0) : http://wpierdalaj.pl/SWG/SilverlightCountDown/Run/SilverlightCountDownTimerExampleTestPage.html

More info about control:
http://geekswithblogs.net/SilverBlog/archive/2009/04/27/silverlightcountdowncontrol.aspx