Design .Net

Designers, Controls And everything between them.

March 2008 - Posts

SilverLight 2 Beta Quick Tip - FullScreen

In the previous version of SilverLight we could enter FullScreen mode in our Content using BrowserHost.IsFullScreen.

In SilverLight 2 Beta we no longer have BrowserHost, Instead we can use:

App.Current.Host.Content.IsFullScreen = true;

I have added a source code Sample

Enjoy!

SliverLight2 Beta Quick Tip: Implement MultiScaleImage behavior like in Image Control

Using MultiScaleImage control we get a vivid user friendly image manipulation experience in this quick tip I will demonstrate how to provide the same experience using Image control in SilverLight 2 Beta.

In the Expression Blend Blog we can find the source code on how to implement Zooming using MultiScaleImage I have used this code and replaced the MultiScaleImage with Image:

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

    <Image Width="770" Height="570" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" x:Name="MainImage"/>

</Grid>

*Notice* I didn't provided source for our Image.

And in the Code file I have used ScaleTransform:

public Page()

{

    InitializeComponent();

 

    this.MouseMove += delegate(object sender, MouseEventArgs e)

    {

        this.lastMousePos = e.GetPosition(this.MainImage);

    };

    this.MouseLeftButtonUp += new MouseButtonEventHandler(Page_MouseLeftButtonUp);

    new MouseWheelHelper(this).Moved += delegate(object sender, MouseWheelEventArgs e)

    {

        if (e.Delta > 0)

        {

            zoom *= 1.2;

        }

        else

        {

            zoom /= 1.2;

        }

 

        ScaleTransform scaleTransform = new ScaleTransform();

        scaleTransform.CenterY = this.lastMousePos.Y;

        scaleTransform.CenterX = this.lastMousePos.X;

        scaleTransform.ScaleX = zoom;

        scaleTransform.ScaleY = zoom;

 

        MainImage.RenderTransform = sc;

    };

}

Using this code you will have the same experience.

In my next post I will try to provide Panning Behavior.

Source Code

Enjoy!  

Create your own Designer or Introduction To Custom Designers - Part 3: SmartTags and Source Code.

As I promised I will supply the source code for the Designer and I will explain about SmartTags, SmartTags enable us easier access to our control an extended to UI.

So SmartTags enable us to access designated operation to our control.

How to create SmartTas:

Step 1:

In my previous session I have demonstrated how to create a Custom Designer, now all you have to do to add SmartTags to your control is to override the ActionLists property of your desginer.

private DesignerActionList m_DesignerActionList;

private DesignerActionListCollection m_ActionLists;

public override DesignerActionListCollection ActionLists

{

    get

    {

        if(m_ActionLists == null)

        {

            m_ActionLists = new DesignerActionListCollection();

            m_DesignerActionList = new MyDesignerActionList(this.Control);

            m_ActionLists.Add(m_DesignerActionList);

        }

        return m_ActionLists;

    }

}

As you may have notice I have created my own implementation of the DesignerActionList class, the new implementation contains the definition of SmartTags abilities exposed by my new DesignerActionList class.

Step 2: Add abilities to your DesignerActionList

To add new SmartTags all you have to do is to override the GetSortedActionItems method and add the Method to be Invoked when the SmartTag is invoked. By adding DesignerActionItemCollection a DesignerActionMethodItem we will Invoke a method.

public override DesignerActionItemCollection GetSortedActionItems()

{

    DesignerActionItemCollection items = new DesignerActionItemCollection();

    items.Add(new DesignerActionMethodItem(this,

                "ImageLocation", "ImageLocation",true));

 

    return items;

}

Now when we will design our control we will be able to use SmartTags.

designerVerb

I have Included source code for our designer.  

 SourceCode

That's it.

*njoy!