(X) Hide this Watch the recordings of our recent webinars: Switching on the Cloud for Silverlight by Gill Cleeren and WCF RIA Services Validation by Brian Noyes.
Sign up for the upcoming SilverlightShow webinars
Skip Navigation LinksHome / News / View News


Results Per Page

Found 7 results for Canvas.
Date between: <not defined> and <not defined>
Search in: News , Articles , Tips , Shows , Showcase , Books

Order by Publish Date   Ascending Title   Rating  

  • 0 comments  /  posted by  Paul Yanez  on  Apr 28, 2010 (11 months ago)
    In the following tutorial Paul Yanez shows how to create your own custom button with images, gradients and transitions.

    1- import an image and place on the artboard
    2- add a rectangle with a radial gradient the same width and height as the image
    3- add a rectangle with no fill and grey color as the border
    4- select all 3 objects, right click and group into a canvas
    5- right click and select make into usercontrol
    6- select button as the type of usercontrol you want to create
    7- right click and select “edit template/edit current”

    8- select the states panel and go to the “mouseover” state and set the gradient’s opacity property to “0″ and change the stroke color of the rectangle from grey to white

    9- change the transition duration to 0.3 sec and set the transition to “cubic in”

  • 0 comments  /  posted by  Silverlight Show  on  Jan 27, 2010 (more than a year ago)
    Tags: HTML 5 , Canvas , CodePlex
    In this project, which is now also available on CodePlex, David Anson successfully uses Silverlight as a rendering engine to implement HTML 5 <canvas> support.Image

    A few months ago, I described a proof-of-concept project and learning exercise I'd worked on to implement some of the basics of the HTML 5 <canvas> specification using Silverlight as the underlying platform: HTML 5 <canvas> announcement, fix for other cultures. As I explain in the introductory post, I didn't set out to come up with the most efficient, most complete implementation - just to get some familiarity with the <canvas> specification and see what it would be like to implement it with Silverlight.

  • Printing in Silverlight 3

    0 comments  /  posted by  Silverlight Show  on  Jul 31, 2009 (more than a year ago)
    In this sample, Gill Cleeren has created a very simple DTP application (desktop publishing application) which allows the user to draw on a Canvas, add some text and some images. After that, he can print the result.

    Probably the most requested feature for Silverlight 3 was being able to print or export the contents of a control so that we can save it and then print it. While there is no Print class of some sort directly available in Silverlight 3 either, we can print, using some small workaround. And that workaround goes by the name of the WriteableBitmap.

  • 1 comments  /  posted by  Antoni Dol  on  Jul 18, 2008 (more than a year ago)

    Note: This article is submitted by Antoni Dol for Silverlight Contest: Write and Win.Thanks a lot, Antoni! Hello All, Please drop a comment if you like it.

    This Silverlight 2 development kick start helps you get over initial hurdles and clears the path for faster results.

    Coming from projects in which WPF design experience was established, the step to developing in Silverlight 2 was not an easy one. Even though I anticipated getting disappointed and even annoyed by times, there were several gotchas that baffled me. Some of those can still be found in the current Beta 2 release, but others are resolved to a degree that makes for a workable Silverlight 2 environment.

  • 2 comments  /  posted by  Nikolay Raychev  on  Apr 09, 2008 (more than a year ago)

    This article is compatible with the latest version of Silverlight.

    In response to Joe’s comment on the Canvas article about how the Canvas control deals with the Measure/Arrange process when it is laid out by a parent Panel:

    It seems that during Measure/Arrange process the child Canvas will take zero width and height provided these properties are not set, even if it contains some controls. Here is a little example:


    <UserControl x:Class="CanvasInCanvas.Page"
        Width="400" Height="300">
        <Canvas x:Name="cnvControlHolder" Background="White" Height="300" Width="400">
            <Canvas x:Name="cnvInner" Canvas.Top="10" Canvas.Left="10" Background="Blue">
                <Button x:Name="btnHello" Content="Hello Joe :)" Canvas.Top="0" Canvas.Left="0" Margin="10"></Button>

    We don’t see the Blue background of the inner Canvas because its size is zero.

  • 9 comments  /  posted by  Nikolay Raychev  on  Apr 06, 2008 (more than a year ago)

    This article is compatible with the latest version of Silverlight.


    Layout controls are Silverlight controls which act as containers of other controls. Their main purpose is the positioning and arranging of their child controls. There are several layout controls: Canvas, StackPanel and Grid and TabPanel.

    See also:
    Canvas Article
    StackPanel Article
    Grid Article


    All layout controls derive from the basic abstract class Panel.

    There are also four more descendants of the Panel Class: DataGridCellsPresenter, DataGridColumnHeadersPresenter, DataGridDetailsPresenter, DataGridRowsPresenter. Their purpose is the positioning of elements in a DataGrid template. They are not standalone controls.

    Layout controls inherit the Children collection of type UIElementCollection. Since all elements in this collection are UIElement objects and the Panel itself derives from UIElement layout controls can be nested in one another without limitation.

    The following example demonstrates the nesting:

    Note: to understand this example you should be familiar with all layout controls: Canvas, StackPanel and Grid

    We want to have the following meaningless result (I don’t like giving real world examples, I just want to show you how nesting of layout controls works.):

  • 14 comments  /  posted by  Nikolay Raychev  on  Apr 06, 2008 (more than a year ago)

    This article is compatible with the latest version of Silverlight.


    The Canvas is the simplest layout control used as a container for other Silverlight controls. The inner controls are positioned absolutely towards its left and top sides.

    See also:
    Silverlight Layout controls
    Grid Article
    StackPanel Article


    The following example demonstrates the use of the Canvas:

    We want to have a rectangle positioned 100 pixels from the left side and 50 pixels from the top side:

    The child controls of the Canvas are positioned absolutely towards its left and top sides by their “Canvas.Left” and “Canvas.Top” attached properties.

    Here is the XAML code: