Archive for the 'Silverlight' Category


Protect your Windows Phone 7 application on the MarketPlace

Aucun commentaire

You've probably noticed if you have a Windows phone 7, the Windows Phone Market place is just the jungle. You'll often find what you are looking for and probably many more. It is this last point that causes me the most problems: very often you will find several applications with the same name (not to mention the music), logos slightly modified and similar functionality. Without even talking about piracy because it is not directly possible, any developer or company can freely create an application with similar functionality when they are not complex to develop. So often you find 3 / 4 (and sometimes more) applications with the same name.

The problem is, I think, completely specific to Windows Phone 7 MarketPlace, I haven't not noticed this phenomenon on the AppStore.

To summarize, even if the application was released one month, two months or 1 year before and was the first of that name, nothing prevents a developer or company to file the same application later with a similar logo and name exactly identical. Microsoft's answer is: it is necessary to file a complaint in court to protect the application name and the logo idea. Imagine that you wore ten complaints for 10 different applications by 10 different society. Therefore as a developer Windows 7 Phone and Silverlight, I ask myself the following questions:

1 - I find it a good idea with a great name and I am a small business, how to protect my application?

2 - How do I get my application to be quickly found on the market place?

3 - What differentiates my application and protects it from others with the same name ?

Personally, I think a small structure has very little means to defend themselves apart from legal action. Market place on your application and name in particular could be filed with the same functionality, only remedy the law. But what law, it seems to me that this aspect is very difficult because it will likely file an international patent and / or go through all possible tools at your disposal.

To ensure that your applications will be found quickly, no mystery, it is what is used and highly rated by WindowsPhonaute, or you have other means such as a website marketing an advertising campaign, or a Windows application out there that either phone connected. This question refers to question three.

What will differentiate your applications from others having the same name:

* The ScreenShots content with unique graphics. This content is much more difficult to copy as opposed to the name. An image bank with unique and great content for example.
* The complex features that are not easy to develop for everyone.
* A seamless user experience, just what is need for NUI.

All these elements will be much protection against the copying of your application. But then what is different when comparing Microsoft Marketplace to AppStore? I will say something romantic :) . We all had the idea to create an application with THE IDEA of the year (IDEA). But today, the developer who wants to create in his corner this application, even with the idea of the century, could not protect his application's name against others. Long months of legal procedures are the key to all appeals. This can be very expensive ...

No technical answer to this problem is good, no good answer is legal kind unless you're part of a medium / large company and that you have many, many times before you. The correct answer is multiple : the artistic response, the response of the single, the answer content and development perfect, perfect ergonomics. All these elements together will be much harder to copy. So those who post applications just to post applications, while others of the same type already exist, please stop, you will not win any money that way. This behavior affects the quality of the microsoft marketplace and the fantastic tool that Windows Phone 7 is.

Silverlight Smooth Streaming plugin for WordPress

10 commentaires
Get Microsoft Silverlight

I put online a new plugin produced by Regart.net. It is a smooth streaming video player also capable of playing a standard video format wmv, mov or mp4 (when the video is encoded in H264). You will still need to host the video on IIS server if you want to enjoy the smooth streaming. The setup is relatively simple because we provide an administration window in WordPress. It has a preview of the player, you can change the color, the url of video, AutoPlay, size and background color of the player. It warns you when the video is not hosted on your server, about security constraints you may encounter (crossdomain.xml clientaccesspolicy.xml necessary and configured).

I realized the Silverlight side but I did not use the player SMF published by Microsoft. I preferred to use the library named SLExtensions designed by the company UCAYA. UCAYA is specialized in the design of this type of player. In the past, Ucaya has made the players of "Tour de France", "Rolland Garros", "France Television" and so on. What are the benefits you will ask ? It's simple. First of all, the features provided by the library are ultra complete. In addition, it offers the possibility of a Full MVVM conception, the interface is entirely Designable (much better than skinnable). Finally, its design is quite thin as it can instantiate a MediaElement or equivalent for smooth streaming according to the type of URL you provide : ISML ism and for smooth streaming wmv, mov, mp4 (H264) for standard videos. It is therefore possible to make a player at the card and avoid the arsenal of the library SMF provided by Microsoft.

Yet another 3D Lite Engine

Aucun commentaire

I will put online during the summer a first release of the library Tweened. It contains components, behaviors, a Tween wrapper (facilitating the creation of animation by code) and a mini 3D engine very simple to use. Here is a concrete example that can be downloaded here :

Install Microsoft Silverlight

I made this engine primarily for personal needs and to remind me math projective. Reinventing the wheel a some times can be good. The idea is mainly to provide a dll under 40kb, which allows conception of 3D interfaces. This will be useful for designers across Blend or Visual Studio using C #. It will contain in a short time all the basic functions wich are really useful and we do not currently have when using Blend: 3D Camera, 3D Container, 3D scene, detection of normal and smart z sorting (smart and more efficient than currently proposed in Blend) . I added a utility class to facilitate the use of mathematical projective (in progress).

The library contains :

1. A container typed Scene3D (inherited from Panel).
All objects wich are contained within get their projection property locked. Instead of use it, they can use attached dependency properties :

* Scene3D.LocalOffsetX
* Scene3D.LocalOffsetY
* Scene3D.LocalOffsetZ
* Scene3D.GlobalOffsetX
* Scene3D.GlobalOffsetY
* Scene3D.GlobalOffsetZ
* Scene3D.RotationX
* Scene3D.RotationY
* Scene3D.RotationZ

They are associated with an instance of type Element3D. This is recoverable (StartUp event when the 3d scene is broadcast) with an extension method added to instances of UIElement (GetElement3D).
2. A camera linked to the container Scene3D. It offers the following properties:
* FieldOfView
* NearPlane
* FarPlane
* Vanishing Point (XVanishingPoint, YVanishingPoint)
* Displacement (OffsetXCamera, OffsetYCamera, OffsetZCamera)
* Rotation (RotateXCamera, RotateYCamera, RotateZCamera)

Detecting the change of direction of normal (Backface culling) and the scalar product via events NormalDirectionChanged and DotProductChanged. These events are broadcast by instances of Element3D.

I am currently finishing a sorting algorithm depths. This engine should be fairly optimized because its rendering does not rely on a DispatcherTimer. Well, it is rather rendering pipeline optimized because it is not recursive by default. When only one object is changed, it invokes an internal method RenderElement. Conversely, when the scene or the camera is changed, it becomes recursive and updates all objects in the scene ... See you soon for the final release of the library tweened ...

Design Time Resources in Blend 4

Aucun commentaire

Blend 4 offers new features and one of them is rather obscure at first. Now, it is possible in Expression Blend to create resources unique to the design time (at the time of conception in Blend or Visual Studio). The problem is rather trivial, it is often necessary to allocate graphics resources that are defined at runtime. In the workspace of Visual Studio or Blend, they are not resolved as they are defined at runtime. This causes access errors and some display problems. Blend 4 can now solve this problem but the manner of proceeding is not very obvious. The goal is to create a design time resource dictionary containing a resource or multiple resources that you will only use the design time. The first thing to do is create a project and a resource contained in a resource dictionary. A gradient or SolidColorBrush will do the trick (see below).

Then, delete the link defined in App.xaml. Resources are now inaccessible and you get access errors. It does not matter, you have to go through this step. Save the project and then open it again in Blend 4, you get a nice dialog box telling you whether you want to create a dictionary used in design time (see below).

Finally, create the resource via C #, it will be used by Silverlight at runtime.

In the end you get two different visual result. The first concerns the design time, the second is the visual displayed at runtime using the resource instantiated during initialization:) So, the designer is completely autonomous. Ultimately, this process is not very orthodox but it is very useful. The principle is not based on anything other than a conditional compilation, generated at the project level (. Csproj). The following code:

<Page Include="Properties\DesignTimeResources.xaml">
 <Generator>MSBuild:Compile</Generator>
 <SubType>Designer</SubType>
 </Page>

has been replaced by this one :

<Page Include="Properties\DesignTimeResources.xaml"
Condition="'$(DesignTime)'=='true'
OR ('$(SolutionPath)'!='' AND Exists('$(SolutionPath)')
AND '$(BuildingInsideVisualStudio)'!='true'
AND '$(BuildingInsideExpressionBlend)'!='true')">
 <Generator>MSBuild:Compile</Generator>
<SubType>Designer</SubType>
 <ContainsDesignTimeResources>true</ContainsDesignTimeResources>
 </Page>

Introducing MVVM with simple gallery example

7 commentaires

Silverlight 4 and Blend 4 RC are barely out that we already see all the profits made by them. Two new features have retained my attention, binding system improvments and the design pattern MVVM fully managed through the implementation of commands. The aim of this post is to familiarize you with the implementation of the design pattern MVVM (Model, View, View-Model) in Silverlight and 4 highlight the benefits of the linkage system.

I - A word on the new link system

As you probably know, it is now possible to use data binding between different instances of DependencyObject. Previously, it was simply impossible to create a binding beetween XAML objects when they didn't inherit from FrameworkElement class. Now, almost everything is "bindable" and that's a good thing. We can therefore create a Binding between a RotationTransform of a RenderTransform and the Value property of a Slider. This example may be useful in design but not really relevant for a developer. We will see the benefits of this improvement in MVVM.

II - Foreword

This article only reflects my own vision of this pattern. There are many interpretations of the design model MVVM. Partly for this reason that the type of project MVVM "MVVM Silverlight Application" that was generated in Blend 4 beta has been renamed Databound Silverlight Application in Blend 4 RC. This allow to not freeze MVVM to one interpretation and at the same time go beyond this type of development.

III - Introduction

MVVM is a principle of design and organization wich split the development of RIAs into three categories : Model, View and View-Model. It's a sub category of separation pattern like MVC or MVP. This way, the code and design of an application are completely separated and it is easier to change them. In practice the developer will provide commands and properties which will be very simple to apply to controls contained in the view.

The direct benefit of this methodology is to free the designer of any constraints on design. Designer will be able to make his own decisions and choices. His tasks will become far more interesting than just skinning component. He will freely define the type of controls, their name, the transitions without having to worry about implementation details.

We will see a practical example of that concept further.

1 - View

A View contains all visual interfaces dedicated to user interactions. In other words, it's the IHM, they are composed of three types of things:

* A visual and logical tree composed of UIElement instances.
* Transitions and animations.
* The logical behavior can, for example, to control animations and transitions.

2 - Does a view should contain code behind ?

Here, 90% of developers say no. For my part, I think that view must contain its own logic to manage animations and transitions. In most cases, these tasks are not handled by the creation of C # code but by using behaviors. Thus, there is no need C # code because the behaviors are fully responsive to this issue. The challenge of design is often due to possible coupling between the data management and display. The behaviors were also intended to address this problem. These are crucial in MVVM Design pattern.

3 - Model

For simplicity, the model contains datas. It also handles all remote calls or transactions corresponding to CRUD operations (Create, Read, Update, Delete). Developers often use a static class to access datas easily. The model can broadcast events as needed to indicate the status of each transaction. Some developers will use model only as storage space. We won't cover Model in this post

4 - View-Model

This is the heart of the MVVM design pattern. Actually, View-Model is an abstraction of View from Model point of view. In other words, View-Model manages the connection between the data contained in the model and their display in the View. Thus the intermediary between View and Model.

I was recently asked:

Is it better to start from the View-Model or View shall be the first step ?

There is no simple answer to this question. This depends primarily on your business and to what kind of quality you want to make the application. Would you get a strong graphical interaction or a clean and efficient architecture with a maximum performance ? Some think that both are possible but again we should not kid ourselves. If one does not impact the other, we would have only one type of project named Databound Application. More graphics and interactions are burdensome, it is difficult to provide a clean and efficient architecture maintaining the same time. I have this point of view because I come from Flash platform. However, when designing an application, it is advisable to start with a prototype. The view is what is most practical for your client and you as a developer. The prototype allows to formalize the application that your client want to obtain, and that is what is most important. In the case of very standard applications such as a video player, for example, it is possible to design View-Model first, as the operations that the user wishes to achieve will always be the same (Play, Stop, Pause, etc ... ). The commands are, in this case, very predictable. We return to the concept of commands later.

5 - Does View-Model has to manage animations and transitions?

If we take the basic definition (View-Model an abstraction of the view), View-Model don't need to trigger transitions and animations directly. It just have to update properties that are bound to View. View can be notified about these updates and will use behaviors will help us in this task. However, in the case of animations created dynamically, it happens that View-Model has to manage the animations. It will in this way create a class dedicated management or use of properties attached outbuildings. Wherever possible, contrary to popular belief, views include the logic to display the transitions and animations, it's what is the code behind the UserControl view. The behaviors are nothing other than logic code placed in the visual tree and logical. It do not inherit from UIElement but DependencyObject. By default, it is the responsibility of interactive designer to trigger animation.

6 - All MVVM ?

The big question is : should you always design everything with MVVM design pattern ? The answer is no. Here are my arguments:

* If it was the case, we wouldn't have different types of projects in Blend.
* Use a single design pattern is extrem. In practice, it does not not always fit the constraints of time allotted.
* Depending on the size of your projects and needs (to evolve and change), it is not necessarily useful to use MVVM as it can in some case, add a touch of complexity. For example, when you try to create binding between read only collections of an object in a View, and collections contained in Model-View.
* Make Full MVVM is primarily dogma, it's like to cooking as Italian dishes. In short, you're missing the French cuisine, Indian, etc ...
* More the design and its constraints are important, the greater it will be difficult to standardize the development. It is the eternal problem of software development. The design and development are two aspects of RIA production.

MOST important, you can implement MVVM in your projects each time you think it will fit. You will get lot of experience in short time that way.

IV - An MVVM Gallery

After this brief introduction, we will immerse ourselves in the design of a complete application in MVVM.

Download GalleryMVVM_base project. This project is based on Silverlight Databound Application. You'll notice first that MainPage.xaml contains a View formalized by a UserControl named GalleryView. So you might considerMainPage as a layout container of Views. A directory contains the UserControl symbolizing the party view, another contains the classes for View-Model, the last one contains all classes later model managing access to data (see Figure below).

In GalleryView.xaml, all objects are already created and appointed, this work can be done independently of the development in C #. After a short concertation, we consider that the developer and the designer have agreed on a number of features listed below:

* Show / hide the interactive object (eg button) Previous Image / Next Image
* Load image Next / Previous
* Getting ImageBrush the new and the old loaded bitmap (this will help to create transitions)
* View pagination
* Show description, title and url of the image being
* Navigate to the state "while loading" or state "loading finished"
* Display a ProgressBar while loading bitmaps.

The developer and the designer have made their job part of the project. The design is finalized, we must now use the model-view abstraction, called GalleryViewModel, as context data view. That way, the gallery will be alive. We will show later GalleryViewModel's logic. Add the namespace xmlns: local = "clr-namespace: GalleryMVVM" within the UserControl root GalleryView. We will declare a new resource type GalleryViewModel as shown below:

Compile the application if needed by ctrl + shift + b, now that we've instantiated the View-Model as a resource, we can easily define it as data context LayoutRoot grid as shown below.

This is not sufficient, it is best to create a data binding that will update the View when View-Model properties are changed. We substitute this expression

by this one :

Now go in the Data panel, select and retain LayoutRoot unfold Data Context. You get a list of properties and commands corresponding to the specifications established between developer and designer (See below).

Regarding the view you're done, just drag and drop, properties and commands on objects of the visual and logical tree. It is also possible to proceed through the use of DataBinding menu. It is obtained when you click on the square icon at the right of each property.

You can do a simple test by dragging and dropping the commands named DisplayNextPicture and DisplayPreviousPicture on buttons. You can also create a DataBinding between Fill property of the Rectangle named newBitmap and NewPictureIB owned by View-Model. As you see, the slide is fully appointed, in other words, the designer can choose the type, layout, names of components and define visual states that he wants to activate. If you want to choose the targeted property where you want to create a Binding, simply press the alt key at the same time as you drag and drop.

V - Manage transitions

The new binding system brought on by Silverlight 4 gives us a lot of flexibility when developing a project following this design pattern. In MVVM, we try to minimize the logic code for each View, so it's pretty convenient to use behavior in Blend to manage transitions and animations.

1 - Trigger transitions

This is one of the major problems when talking MVVM. First, Microsoft provides an interactive behavior named DataStateBehavior that facilitates transition management. You can place it on LayoutRoot, it is able to trigger a transition according to the value of a property of View-Model. In our case, it is a property named IsLoaded that is set to false when the new image is loading, and true when it is loaded. The figure below shows the configuration of behavior.

Specifically, we just have to create a data Binding between Binding property and IsLoaded property of View-Model. When IsLoaded value is equal to True then we displays Completed Visual State otherwise it displays the Visual State named Loading. It may seem strange to put a capital T, but the Value property is typed Object. This methodology has the advantage of giving the designer the task of triggering the transition easily.

2 - Activate or Desactivate Behaviors

In Silverlight 3, it was not possible to bind a property of behavior, as IsEnabled property to another contained by the View-Model. Even if it implements INotifyPropertyChanged, IsEnabled was not "bindable" because the behavior did not inherit from the FrameworkElement but DependencyObject. With the new system of SL4, it is now a thing possible because binding is possible with object wich directly inherit from DependencyObject. Place two instances of behavior GotoStateAction on both copies of a button. When hovering over one or the other, we sail towards the visual state RightButtonMouseOver or LeftButtonMouseOver. When the mouse leaves the button, we will navigate to the state DefaultMouseLeave. The figure below is the setup, however the right button.

In the baseline scenario developer and designer have assumed that the pager (for example: bitmap 1 / 6) is not always diplayed. The paging is activated by View-Model. This happens when the property DisplayPageNumbers (from GalleryViewModel) is set to true.You just have to establish a data binding between IsEnabled (property of behavior) and DisplayPageNumbers. Here is the corresponding XAML :

The code is fairly simple to understand:

* The visibility of the button is linked to RightArrowVisibility of GalleryViewModel.
* The text displayed via the Content property is linked to property Paging of GalleryViewModel.
* Very important, all instances of the type inheriting ButtonBase implement, since Silverlight 4, Commanding via Command property. This allows to execute commands (actions ViewModel). The Click event triggers the commands. For all other types of events click, you can use the behavior named InvokeCommandAction.
* Finally, navigation behaviors are activated or deactivated by the property of DisplayPageNumbers GalleryViewModel.

VI - GalleryViewModel

On-View Model, the developer is on rails. The code is standard and the step are always the same:

* It is quite practical to create a base class which all classes of type View-Model inherit. You can call it ViewModel or ViewModelBase.
* This class must implement two interfaces: INotifyPropertyChanged and IDataErrorInfo. INotifyPropertyChanged can notify the view of any change of properties with DataBinding system. IDataErrorInfo is a new interface provided by Microsoft since SL4. It allows Views to display errors that are thrown. Concretely, this is particularly useful with two way Data Binding. In our case, the interest is lower because the view has no reason to change the properties of view-model. In the case of a form, it is required because IDataErrorInfo is much more convenient than directly throwing exception. You can read the post by John Papa the implementation of IDataErrorInfo.
* It is necessary to create properties that will be accessible directly from the view
* Finally, we must create commands executed from the View. The implementation of commands is also covered by an article by John Papa that you find here. Specifically, it proposes to create an abstract class named DelegateCommand to facilitate the instantiation of commands in view-model.

1 - Les propriétés accessible au sein de la vue "Bindable"

If you want to set a property accessible from the view, it must be declared with the public accessor. Moreover,to use the binding system, it must notify the view when it is changed. To do this, simply use the method NotifyPropertyChanged inherited from class ViewModel. You will find ViewModel class in Tweened.MVVMUtils

2 - Commanding

Commands should always refer to a method and a Boolean value (Boolean indicates whether the command should be executed). The following C # code corresponding to the commands and DisplayNextPicture DisplayPreviousPicture:

The Index property is updated with a new value, and notify the view of this change through the mechanism inherited from INotifyPropertyChanged. The method CanDisplayPictures always returns true which is not ideal, you can do some tests at this level. I only make a test for LoadAllPicture command, the test is made by the CanLoadAllPictures method :

VII - Final Gallery

You can see it here : http://www.tweened.org/wp-content/uploads/applis/diaporamaMVVM/.

You can download source code here : http://www.tweened.org/wp-content/uploads/applis/GalleryMVVM.zip.

Create your own behaviors with Silverlight

Aucun commentaire

If you've used Expression Blend, it is quite possible that you have used behavior during your projects. They are beneficial on several levels: first, they can add interaction without coding in C # or VB on the other hand, they provide valuable assistance when it is important to decouple the model and view-model. Finally, they play an essential role in production as they are developed with an objective of reuse and are easily configurable in Expression Blend.

There are two main families of behaviors, simple behaviors and action triggered behaviors. The simple behaviors are represented by a gear icon, MouseDragElementBehavior that you find in the assets panel, is of this kind. Once you settle on the object, it acquires additional capacity accessible. In an other way, action triggered behaviors only act when an event is broadcast. They are identified by the icon of the gear topped by a spire of reading.

To create a new behavior in Blend, you have to add an item to a project of type Behavior or Action (via the Add Item menu ...). We will create a behavior to create a copy of a visual object. This will allow us to generate a cool effect as shown in the Silverlight project below.

Install Microsoft Silverlight

Create a new project and add an Action behavior. Let the class inherit TargetedTriggerAction<UIElement>. This is convenient because we can target an object that you want to replicate the visual. You get the code below:

public class SnapshotAction : TargetedTriggerAction&lt;UIElement&gt;
{
	public SnapshotAction()
	{
 
	}
 
	protected override void Invoke(object o)
	{
 
	}
 
}

This is the overridden method Invoke of interest. This will be executed each time an event of your choice will be announced. We will now obtain an image of the component targeted then applied to the component with the behavior.

protected override void Invoke(object o)
{
      //on déclare une nouvelle image en écriture
      WriteableBitmap Wb;
 
      //on l'instancie en lui passant l'objet
      //elle doit créer un instantanné
      Wb = new WriteableBitmap(this.Target, null);
 
      //on crée un nouveau pinceau d'image
      ImageBrush Ib = new ImageBrush();
 
      Ib.AlignmentX = AlignmentX.Left;
 
      Ib.Stretch = Stretch.None;
      //on affecte l'image binaire de l'instantanné à
      //la propriété ImageSource du pinceau d'image
      Ib.ImageSource = Wb;
 
      //Ensuite on teste le type de l'objet ciblé et on affecte
      //la bonne propriété en fonction de ce dernier
      if (AssociatedObject is Shape) ((Shape)AssociatedObject).Fill = Ib;
      else if (AssociatedObject is Panel) ((Panel)AssociatedObject).Background = Ib;
      else if (AssociatedObject is Control) ((Control)AssociatedObject).Background = Ib;
      //nous pourrions utiliser un peu de réflexion pour améliorer ce test
}

The Target property of the behavior corresponds to the object targeted by the behavior. The property AssociatedObject corresponds to the object on which the component is deposited. In our case, we simply test the type of object to apply for the capture bitmap as brush filling.

That's it, just compile the project once to access the behavior in the assets panel, then place it on an instance of Shape (for example) as shown in the figure below.

The behavior is finalized here. I've added the ability to trigger replication bitmap mode automatically, via use of a DispatcherTimer. It is also possible to change the refresh rate to avoid loss of performance (see figure below).

Finally, know that with Silverlight, 4 it is now possible to create behaviors directly integrating the command pattern. This is directly related to the design model MVVM but that's another story.

Gallery in Silverlight for Wordpress

2 commentaires

I recently participated with Boris Forconi, in developing a plugin for wordpress. The idea was to create a Silverlight gallery in wordpress using the API but by developing the gallery itself in Silverlight. It is partially based on the one made by Tim Heuer. Boris has occupied any part of PHP and Wordpress integration. For my part, I developed the Silverlight gallery. The goal is to provide a simple way to put pictures online nicely for Wordpress blogs as shown below:

Get Microsoft Silverlight

Just write a tag like : [sl-gallery: ...]

You can set parameters as shown in the example below :

  • width=400
  • height=400
  • leftArrow=true
    //show/hide left arrow
  • rightArrow=true
    //show/hide right arrow
  • pageNumbers=true
    //affiche ou cache la pagination
  • thumbnails=true
    //show/hide thumbnails
  • fill=uniform
    / / used to indicate a way of filling you can choose between:
    / / Uniform (homothetic part by filling ability)
    / / UniformToFill (filling with homothety)
    / / Fill (filling with deformation dimensions)
    / / None (preserves the original dimensions)
  • bgcolor
    //set the background color
  • bgmode
    // set the background mode(windowless)

The first good news is that it is possible to use a menu to set it all in 2 seconds. It adds to the administration of sections Wordpress. A small window appears when you click the button (see below).

The second good news is that we will quickly sources available on wordpress.com. This way you can completely change the visual side of the gallery Silverlight. In all cases, it dynamically retrieves images from the gallery Wordpress. You can download a first version here.

Free ColorPicker and ColorChooser custom controls

13 commentaires

I put online two new components outlined below :

Install Microsoft Silverlight

You can download the tweenedcontrols library here.

ColorChooser

Since its beta version, this control has been greatly improved. It is now possible to click directly on the surface of the two swatches to select a color. The property is SelectedColor this time of type Color. This greatly simplifies the code and avoids the usage of an IValueConverter class.

ColorPicker

That component is intended to make a ColorChooser appear when user click on it, with the help of an instance of Popup. The whole problem was to place the ColorChooser beside the ColorPicker in any case. To this end, I've created a method of extension for Class Popup. It is also possible to access to the style and template of ColorChooser directly through the menu Template Edit => Edit Template Aditional as shown below.

ColorPicker has the IsOpen dependency property coupled with Opened and Closed events. Apart from this trick this class exposes properties and events of a ColorChooser.

[silverlight: http://www.tweened.org/wp-content/uploads/applis/TestColorControls.xap, 540, 323,3.0.40818.0]

A new Book in french to learn Silverlight

4 commentaires

I recently completed writing my book Silverlight Practice wich is dedicated to technology of the same name. It should be over 500 pages and focuses on learning good practices and team production. It is published by Pearson Education France and released February 2, 2010. I have not designed as a glossary of features but rather as a production guide and learning. He draws a sketch of the design of Silverlight applications, starting from the display list to loading external data in the design model MVVM through prototyping or organizational workflow.

The general idea of the book is to provide concrete examples downloadable for both designers and for developers. You can reserve a copy on the website of Pearson France here.

This book is for Web integrators, interactive designers, graphic designers and pure web developers unfamiliar platform. Net. It creates a bridge between development and design, to improve collaboration and productivity.

Its content takes into account the specificities of developers and designers of interactive forms of complementary exercises. The C # is chosen as the only logical language for clarity. The theory, examples and exercises (downloadable) are progressive and can be a learning base for non-developers. However this is not a book for beginners Web, but to those who have acquired bases on other technologies.

Here is the summary of the book:)

Part I. Approach Silverlight

1. Introduction
1.1 What does Silverlight?
1.2 In. Net 1 to Silverlight
1.3 The benefits of Silverlight
1.4 The Expression Studio
1.5 Positioning business
1.6 Development language and choice

2. The couple XAML / C #
2.1 XML
2.2 XAML, a declarative language powerful
2.3 The fundamentals of C #

3. HelloWorld
3.1 A first Silverlight application
3.2 Architecture of a solution
3.3 The root container
3.4 Add Text
3.5 Test and compile

4. A site full screen in 2 minutes
4.1 type projects website
4.2 Creating resizable containers
4.3 The component button
4.4 Add interactivity
4.5 Files deployed

5. The visual and logical tree
5.1 Components Visual
5.2 Principle of Nesting
5.3 Adding children to the display list
5.4 Remove objects from the visual tree
5.5 Exchange index

Part II. Interactivity and graphic design

6. Animation
6.1 Introduction
6.2 Animating with Expression Blend
6.3 Managing acceleration
6.4 Animating with C
6.5 The transformations on
6.6 Animate particles

7. Buttons
7.1 Create a video player
7.2 Visual Style
7.3 Generic Button
7.4 The manager of visual states
7.5 The switch or button ToggleButton

8. Interactivity and event model
8.1 The foundations of event model
8.2 withdrawn listening to an event
8.3 The weak coupling in practice
8.4 Event Propagation
8.5 The behavior

9. The basics of 3D projection
9.1 The 3D environment
9.2 The properties of 3D
9.3 The camera
9.4 Introduction to matrices

10. Prototyping dynamic SketchFlow
10.1 The Environment
10.2 Simple Prototype
10.3 The player SketchFlow
10.4 Interactivity
10.5 Interface rich

Part III. Designing rich applications

11. Graphic Resources
11.1 What is a resource
11.2 brushes
11.3 Fonts
11.4 Styles and component models
11.5 The model Slider
11.6 connections
11.7 The model ListBox

12. Custom Components
User Control 12.1
12.2 Connection Box
12.3 Custom Controls

13. Media and Data
13.1 Loading media
13.1.1 Dynamic loading of images
13.1.2 video formats and modes of dissemination
13.1.3 A simple video player
13.1.4 Dynamic Loading videos
13.2 Design MVVM
13.2.1 Principles
12.2.2 Model
12.2.3 Model-View
13.3 Loading Data
13.3.1 The object WebClient
13.3.2 Introduction to LINQ
13.3.3 Lambda Expression
13.3.4 Consuming XML with LINQ
13.3.5 Loading a JSON feed
13.3.6 Cross Domain Security

A new PieProgressBar Control

Aucun commentaire

For the purposes of a recent production, I had to design a control named PieProgressBar. This class inherits RangeBase and as such has all the capabilities inherent in this type of control. It behaves in the end like any type ProgressBar control with a few more things. The hard part was to create dynamically pie in C #. Unlike WPF, Silverlight does not allow to override method to create new kinds of Shape. In other words, even if Shape is an abstract class, it is useless to inherit because the method of route design can not be overloaded.
The other technique is to use the "Path mini language" for creating geometric shapes in XAML. I had to use 3 segments with a ArcSegment to achieve this control. as I could not create primitive Pie for the designer in Blend, it took cunning ... The technique involves creating a pie chart dynamically when assigning a control part (ControlPart). Internally, the properties of filling the route generated, are related to properties of the control via a simple data binding created in C #.
You can see some examples below and download the library
tweenedcontrols here.

Install Microsoft Silverlight

Once the dll referenced, you can instantiate the control PieProgressBar in Blend through the Assets panel as shown below:

This component will probably be included as others in the CodePlex project SLExtensions. Thierry Bouquain updates it at this time and I welcome the move :)

Next Page »