Using a VideoBrush in Silverlight Application
VideoBrush elements are very similar to the ImageBrush. Instead of an image, they define a video MediaElement that is applied as a brush. You can apply them to the properties of Silverlight controls the same way that the ImageBrush is applied.
To apply a VideoBrush to a Silverlight control, you need to define the VideoBrush element just as you do with an ImageBrush. However, different from an ImageBrush, you need to set a SourceName property that points to the x:Name of the MediaElement. Therefore, you also need to define a MediaElement separate from the Silverlight control. If you do not want the video to be displayed outside of the Silverlight control, set the Opacity property of the MediaElement to 0.
Eg:
< MediaElement Source="first.wmv"
x:Name="movie"
Opacity="0"/ >
< TextBox Height="100" Width="150" >
< TextBox.Background >
< VideoBrush SourceName="movie" Stretch="UniformToFill"/ >
< /TextBox.Background >
< /TextBox >
Showing posts with label Silverlight. Show all posts
Showing posts with label Silverlight. Show all posts
Tuesday, September 7, 2010
Adding an ImageBrush in Silverlight
Using an ImageBrush in Silverlight Application
ImageBrush elements are similar to the SolidColorBrush. Instead of a solid color, they define an image that is applied as a brush. You can apply them to the properties of Silverlight controls the same way that the SolidColorBrush is applied.
To apply an ImageBrush to a Silverlight control, you need to define the ImageBrush element and set the ImageSource property to an image that has been added to the project. You will likely want to set the Stretch property so that the image appears appropriately in the control.
Eg:
< TextBox Height="200" Width="150" >
< TextBox.Background >
< ImageBrush ImageSource="jobin.jpg"/ >
< /TextBox.Background >
< /TextBox >
ImageBrush elements are similar to the SolidColorBrush. Instead of a solid color, they define an image that is applied as a brush. You can apply them to the properties of Silverlight controls the same way that the SolidColorBrush is applied.
To apply an ImageBrush to a Silverlight control, you need to define the ImageBrush element and set the ImageSource property to an image that has been added to the project. You will likely want to set the Stretch property so that the image appears appropriately in the control.
Eg:
< TextBox Height="200" Width="150" >
< TextBox.Background >
< ImageBrush ImageSource="jobin.jpg"/ >
< /TextBox.Background >
< /TextBox >
Thursday, August 26, 2010
Using RadialGradientBrush in Silverlight
Adding a RadialGradientBrush
RadialGradientBrush elements are very similar to the LinearGradientBrush. They define a radial gradient that flows between two or more colors. You can apply them to the properties of Silverlight controls the same way that the LinearGradientBrush is applied.
To apply a RadialGradientBrush to a Silverlight control, you need to define the Radial- GradientBrush element. You can define the center of the gradient radius using the GradientOrigin property. The GradientOrigin is set on a 0 to 1 coordinate system separated by a comma.
You can also define the radius of the gradient in the X and Y planes using the RadiusX and RadiusY properties. These properties are set on a scale where 1 is the Height or Width of the Silverlight control.
Then you also need to define two or more GradientStop elements inside the Radial- GradientBrush. Each GradientStop element needs the Color property set. You can also define the offset between 0 and 1 where that color is set using the Offset property. Silverlight applies the gradient on a radius centered at the GradientOrigin and defined by the RadiusX and RadiusY properties matching the colors at each GradientStop along the way.
Eg:
< Rectangle Height="200" Width="200" >
< Rectangle.Fill >
< RadialGradientBrush >
< GradientStop Color="Blue" />
< GradientStop Color="White" Offset=".5" / >
< GradientStop Color="Blue" Offset=".9"/ >
< /RadialGradientBrush >
< /Rectangle.Fill >
< /Rectangle >
Eg:
< Rectangle Height="200" Width="200" >
< Rectangle.Fill >
< RadialGradientBrush GradientOrigin="0,0" >
< GradientStop Color="Blue"/ >
< GradientStop Color="White" Offset=".5"/ >
< GradientStop Color="Blue" Offset=".9"/ >
< /RadialGradientBrush >
< /Rectangle.Fill >
< /Rectangle >
Eg:
< Rectangle Height="200" Width="200" >
< Rectangle.Fill >
< RadialGradientBrush GradientOrigin=".5,.5" RadiusX=".6" RadiusY=".2" >
< GradientStop Color="Blue"/ >
< GradientStop Color="White" Offset=".5"/ >
< GradientStop Color="Blue" Offset=".9"/ >
< /RadialGradientBrush >
< /Rectangle.Fill >
< /Rectangle >
RadialGradientBrush elements are very similar to the LinearGradientBrush. They define a radial gradient that flows between two or more colors. You can apply them to the properties of Silverlight controls the same way that the LinearGradientBrush is applied.
To apply a RadialGradientBrush to a Silverlight control, you need to define the Radial- GradientBrush element. You can define the center of the gradient radius using the GradientOrigin property. The GradientOrigin is set on a 0 to 1 coordinate system separated by a comma.
You can also define the radius of the gradient in the X and Y planes using the RadiusX and RadiusY properties. These properties are set on a scale where 1 is the Height or Width of the Silverlight control.
Then you also need to define two or more GradientStop elements inside the Radial- GradientBrush. Each GradientStop element needs the Color property set. You can also define the offset between 0 and 1 where that color is set using the Offset property. Silverlight applies the gradient on a radius centered at the GradientOrigin and defined by the RadiusX and RadiusY properties matching the colors at each GradientStop along the way.
Eg:
< Rectangle Height="200" Width="200" >
< Rectangle.Fill >
< RadialGradientBrush >
< GradientStop Color="Blue" />
< GradientStop Color="White" Offset=".5" / >
< GradientStop Color="Blue" Offset=".9"/ >
< /RadialGradientBrush >
< /Rectangle.Fill >
< /Rectangle >
Eg:
< Rectangle Height="200" Width="200" >
< Rectangle.Fill >
< RadialGradientBrush GradientOrigin="0,0" >
< GradientStop Color="Blue"/ >
< GradientStop Color="White" Offset=".5"/ >
< GradientStop Color="Blue" Offset=".9"/ >
< /RadialGradientBrush >
< /Rectangle.Fill >
< /Rectangle >
Eg:
< Rectangle Height="200" Width="200" >
< Rectangle.Fill >
< RadialGradientBrush GradientOrigin=".5,.5" RadiusX=".6" RadiusY=".2" >
< GradientStop Color="Blue"/ >
< GradientStop Color="White" Offset=".5"/ >
< GradientStop Color="Blue" Offset=".9"/ >
< /RadialGradientBrush >
< /Rectangle.Fill >
< /Rectangle >
Thursday, August 19, 2010
Using a LinearGradientBrush in Silverlight
Using a LinearGradientBrush
LinearGradientBrush elements are similar to the SolidColorBrush. They define a linear gradient that flows between two or more colors. You can apply them to the properties of Silverlight controls the same way that the SolidColorBrush is applied.
To apply a LinearGradientBrush to a Silverlight control, you need to define the Linear- GradientBrush element and give it an EndPoint and a StartPoint that define the linear direction of the brush. The EndPoint and StartPoint are set on a 0 to 1 coordinate system separated by a comma.
Then you need to define two or more GradientStop elements inside the LinearGradient- Brush. Each GradientStop element needs the Color property set. You can also define the offset between 0 and 1 where that color is set using the Offset property. Silverlight applies the gradient linearly along the path defined by the StartPoint and EndPoint values matching the colors at each GradientStop along the way.
Eg:
< Rectangle Width="200" Height="200" Stroke="Black" >
< Rectangle.Fill >
< LinearGradientBrush StartPoint="0.0 0.0" EndPoint="0 1" >
< GradientStop Color="Red" Offset=""/ >
< GradientStop Color="Green" Offset="0.33"/ >
< GradientStop Color="Blue" Offset="0.67"/ >
< /LinearGradientBrush >
< /Rectangle.Fill >
< /Rectangle >
Eg:
< TextBlock Height="100"
TextAlignment="Center"
FontSize="30" >
< Run Text="Linear Gradient brush" >
< Run.Foreground >
< LinearGradientBrush >
< GradientStop Color="Blue" Offset=".3"/ >
< GradientStop Color="Red" Offset=".5"/ >
< GradientStop Color="Green" Offset=".8"/ >
< /LinearGradientBrush >
< /Run.Foreground >
< / Run >
< /TextBlock >
LinearGradientBrush elements are similar to the SolidColorBrush. They define a linear gradient that flows between two or more colors. You can apply them to the properties of Silverlight controls the same way that the SolidColorBrush is applied.
To apply a LinearGradientBrush to a Silverlight control, you need to define the Linear- GradientBrush element and give it an EndPoint and a StartPoint that define the linear direction of the brush. The EndPoint and StartPoint are set on a 0 to 1 coordinate system separated by a comma.
Then you need to define two or more GradientStop elements inside the LinearGradient- Brush. Each GradientStop element needs the Color property set. You can also define the offset between 0 and 1 where that color is set using the Offset property. Silverlight applies the gradient linearly along the path defined by the StartPoint and EndPoint values matching the colors at each GradientStop along the way.
Eg:
< Rectangle Width="200" Height="200" Stroke="Black" >
< Rectangle.Fill >
< LinearGradientBrush StartPoint="0.0 0.0" EndPoint="0 1" >
< GradientStop Color="Red" Offset=""/ >
< GradientStop Color="Green" Offset="0.33"/ >
< GradientStop Color="Blue" Offset="0.67"/ >
< /LinearGradientBrush >
< /Rectangle.Fill >
< /Rectangle >
Eg:
< TextBlock Height="100"
TextAlignment="Center"
FontSize="30" >
< Run Text="Linear Gradient brush" >
< Run.Foreground >
< LinearGradientBrush >
< GradientStop Color="Blue" Offset=".3"/ >
< GradientStop Color="Red" Offset=".5"/ >
< GradientStop Color="Green" Offset=".8"/ >
< /LinearGradientBrush >
< /Run.Foreground >
< / Run >
< /TextBlock >
Adding a SolidColorBrush in Silverlight
Adding a SolidColorBrush
The SolidColorBrush is the most common type that you can apply to Silverlight objects. A SolidColorBrush is automatically created for you when you set the color in one of the properties of a Silverlight object. For example, the following code automatically creates a SolidColorBrush implicitly for the Background property of a Canvas control:
< Canvas Background="Lavender"
Height="200"
Width="200" >
< / Canvas >
The previous code could also be written explicitly as follows:
< Canvas Height="200"
Width="200" >
< Canvas.Background >
< SolidColorBrush Color="Lavender"/ >
< /Canvas.Background >
< /Canvas >
Adding the SolidColorBrush explicitly takes considerably more code; however, you can set some additional properties of the SolidColorBrush element to enhance the look and feel of the control. For example, you can make the SolidColorBrush appear semitransparent by setting the Opacity property, as shown in the following code:
< Canvas Height="200"
Width="200" >
< Canvas.Background >
< SolidColorBrush Color="Red" Opacity=".3"/ >
< /Canvas.Background >
< /Canvas >
The SolidColorBrush is the most common type that you can apply to Silverlight objects. A SolidColorBrush is automatically created for you when you set the color in one of the properties of a Silverlight object. For example, the following code automatically creates a SolidColorBrush implicitly for the Background property of a Canvas control:
< Canvas Background="Lavender"
Height="200"
Width="200" >
< / Canvas >
The previous code could also be written explicitly as follows:
< Canvas Height="200"
Width="200" >
< Canvas.Background >
< SolidColorBrush Color="Lavender"/ >
< /Canvas.Background >
< /Canvas >
Adding the SolidColorBrush explicitly takes considerably more code; however, you can set some additional properties of the SolidColorBrush element to enhance the look and feel of the control. For example, you can make the SolidColorBrush appear semitransparent by setting the Opacity property, as shown in the following code:
< Canvas Height="200"
Width="200" >
< Canvas.Background >
< SolidColorBrush Color="Red" Opacity=".3"/ >
< /Canvas.Background >
< /Canvas >
Understanding the Silverlight Presentation Framework
Understanding the Silverlight Presentation Framework
The main purpose of the Silverlight presentation framework is to provide you with the UI controls and functionality to implement rich Internet applications. However, the presentation framework is much more than just the UI controls; it also encompasses browser interaction, threading, and system calls.
Namespaces that are part of the Silverlight presentation framework are:
System.Windows:
Provides the general presentation and base classes for Silverlight development. For example, the Application, UIElement, EventTrigger, and FontStyles.
System.Windows.Browser:
Provides the classes used to interact with the browser. For example, the HtmlDocument, HtmlElement, HtmlPage, and ScriptObject.
System.Windows.Controls:
Provides most of the UI controls. For example, TextBlock, Image, Grid, and UserControl.
System.Windows.Documents:
Provides the classes that support basic document concepts. For example, Fontsource, LineBreak, Inline, and Run.
System.Windows.Markup:
Provides the classes that support XAML processing. For example, XamlReader, ContentPropertyAttribute, and XmlLanguage.
System.Windows.Media:
Provides the classes that enable you to apply rich functionality to your applications. For example, GradientBrush, ScaleTransform, Colors, FontFamily, and PathGeometry.
System.Windows.Media. Animation:
Provides the classes used to animate Silverlight controls. For example, Begin Storyboard, Storyboard, DoubleAnimation, SplinePointKeyFrame, Timeline, and TimeLineMarker.
System.Windows.Shapes:
Provides the classes used to implement basic XAML shapes. For example, Ellipse, Path, and Rectangle.
System.Windows.Threading:
Provides the classes used to implement threads in your Silverlight applications. For example, Dispatcher, DispatcherOperation, and DispatcherTimer.
System.ComponentModel:
Provides the classes used to implement runtime and design-time behavior of components and controls. For example, ProgressChangedEventArgs, PropertyChangedEventArgs, BackgroundWorker, AsyncCompletedEventArgs, and TypeConverter.
The main purpose of the Silverlight presentation framework is to provide you with the UI controls and functionality to implement rich Internet applications. However, the presentation framework is much more than just the UI controls; it also encompasses browser interaction, threading, and system calls.
Namespaces that are part of the Silverlight presentation framework are:
System.Windows:
Provides the general presentation and base classes for Silverlight development. For example, the Application, UIElement, EventTrigger, and FontStyles.
System.Windows.Browser:
Provides the classes used to interact with the browser. For example, the HtmlDocument, HtmlElement, HtmlPage, and ScriptObject.
System.Windows.Controls:
Provides most of the UI controls. For example, TextBlock, Image, Grid, and UserControl.
System.Windows.Documents:
Provides the classes that support basic document concepts. For example, Fontsource, LineBreak, Inline, and Run.
System.Windows.Markup:
Provides the classes that support XAML processing. For example, XamlReader, ContentPropertyAttribute, and XmlLanguage.
System.Windows.Media:
Provides the classes that enable you to apply rich functionality to your applications. For example, GradientBrush, ScaleTransform, Colors, FontFamily, and PathGeometry.
System.Windows.Media. Animation:
Provides the classes used to animate Silverlight controls. For example, Begin Storyboard, Storyboard, DoubleAnimation, SplinePointKeyFrame, Timeline, and TimeLineMarker.
System.Windows.Shapes:
Provides the classes used to implement basic XAML shapes. For example, Ellipse, Path, and Rectangle.
System.Windows.Threading:
Provides the classes used to implement threads in your Silverlight applications. For example, Dispatcher, DispatcherOperation, and DispatcherTimer.
System.ComponentModel:
Provides the classes used to implement runtime and design-time behavior of components and controls. For example, ProgressChangedEventArgs, PropertyChangedEventArgs, BackgroundWorker, AsyncCompletedEventArgs, and TypeConverter.
Implementing Data Binding in Silverlight Applications
Implementing Data Binding in Silverlight Applications
An extremely useful feature of Silverlight is the ability to bind properties of Silverlight controls to data sources. When the values of the data sources change, the property values of the controls change as well.
Data binding can be implemented as one-time, one-way, or two-way. One-way data binding only changes the value of the control based on the data source. In two-way binding, if either the control value or the source value changes, the other is updated as well.
To implement data binding in XAML code, you first need to implement a Binding statement encased in {} brackets in place of the property value. The Binding statement uses the following syntax:
{Binding < value >, < options >}
The value setting in the Binding statement is the property of the data source that is used to fill in the value for the control property. You can also specify the following options in the Binding statement:
Converter: Specifies the converter object that is called by the binding engine to modify the data as it is passed between the data source and target property
ConverterCulture: Specifies the culture used by the converter to implement conversion of data
ConverterParamter: Specifies a parameter that can be passed to the converter
Mode: Specifies whether the data flow in the binding is one-way or two-way.
Source: Specifies the source object for the binding
The Binding statement tells the control only what property of the data source the value is bound to. You also need to set the value of the DataContext property of the control to assign a specific object as the data source.
To implement a class as a data source, the class must implement the INotifyProperty Changed interface and have an event of type PropertyChangedEventHandler named PropertyChanged.
The DataContext property is inheritable by child elements in the Silverlight application. If you have several controls that are bound to the same data source, then you can group those controls in a parent container such as a Canvas or Grid and then set the DataContext property of the parent. The data context flows down to the children without the need to set the property for each child.
Eg:
< TextBox Height="24" HorizontalAlignment="Left" Margin="60,72,0,0" VerticalAlignment="Top" Width="150" Text="{Binding Name, Mode=TwoWay}" TextWrapping="Wrap" x:Name="txtName" / >
write the following code
public class Employee : INotifyPropertyChanged
{
string name;
public event PropertyChangedEventHandler PropertyChanged;
private void NotifyChange(string property)
{
if (PropertyChanged != null)
{
PropertyChanged(this, new PropertyChangedEventArgs(property));
}
}
public string Name
{
set
{
name = value;
NotifyChange("Name");
}
get
{
return name;
}
}
}
-------------
public partial class Page : UserControl
{
Employee emp;
public Page()
{
InitializeComponent();
emp = new Employee{ Name = "Jobin John" };
LayoutRoot.DataContext = emp;
}
}
}
Hope its Helpfull for silverlight programmers.......
An extremely useful feature of Silverlight is the ability to bind properties of Silverlight controls to data sources. When the values of the data sources change, the property values of the controls change as well.
Data binding can be implemented as one-time, one-way, or two-way. One-way data binding only changes the value of the control based on the data source. In two-way binding, if either the control value or the source value changes, the other is updated as well.
To implement data binding in XAML code, you first need to implement a Binding statement encased in {} brackets in place of the property value. The Binding statement uses the following syntax:
{Binding < value >, < options >}
The value setting in the Binding statement is the property of the data source that is used to fill in the value for the control property. You can also specify the following options in the Binding statement:
Converter: Specifies the converter object that is called by the binding engine to modify the data as it is passed between the data source and target property
ConverterCulture: Specifies the culture used by the converter to implement conversion of data
ConverterParamter: Specifies a parameter that can be passed to the converter
Mode: Specifies whether the data flow in the binding is one-way or two-way.
Source: Specifies the source object for the binding
The Binding statement tells the control only what property of the data source the value is bound to. You also need to set the value of the DataContext property of the control to assign a specific object as the data source.
To implement a class as a data source, the class must implement the INotifyProperty Changed interface and have an event of type PropertyChangedEventHandler named PropertyChanged.
The DataContext property is inheritable by child elements in the Silverlight application. If you have several controls that are bound to the same data source, then you can group those controls in a parent container such as a Canvas or Grid and then set the DataContext property of the parent. The data context flows down to the children without the need to set the property for each child.
Eg:
< TextBox Height="24" HorizontalAlignment="Left" Margin="60,72,0,0" VerticalAlignment="Top" Width="150" Text="{Binding Name, Mode=TwoWay}" TextWrapping="Wrap" x:Name="txtName" / >
write the following code
public class Employee : INotifyPropertyChanged
{
string name;
public event PropertyChangedEventHandler PropertyChanged;
private void NotifyChange(string property)
{
if (PropertyChanged != null)
{
PropertyChanged(this, new PropertyChangedEventArgs(property));
}
}
public string Name
{
set
{
name = value;
NotifyChange("Name");
}
get
{
return name;
}
}
}
-------------
public partial class Page : UserControl
{
Employee emp;
public Page()
{
InitializeComponent();
emp = new Employee{ Name = "Jobin John" };
LayoutRoot.DataContext = emp;
}
}
}
Hope its Helpfull for silverlight programmers.......
Sunday, August 8, 2010
Introduction to Silverlight
Silverlight
Silverlight is Microsoft’s implementation of a cross-browser, cross-platform client framework that allows designers and developers to deliver Rich Internet Applications (RIA) embedded in Web pages OR Silverlight is Microsoft's new browser-based plug-in for delivering richer interactive applications to users over the web.
Silverlight applications are implemented as embedded objects in Web pages. When the browser encounters a Silverlight object in the Web page, the plug-in downloads an XAP package from the Web server that contains the binaries and resources for the Silverlight application and then begins code execution inside the Web page.
The Silverlight framework allows applications to access Web services, databases, Web servers, and other data sources to acquire data that is displayed in the UI. It also allows the application to integrate with the Web page DOM as well as AJAX and JavaScript to enhance the functionality of the Web page.
Comparing Silverlight 1.0 and Silverlight 2.0
The difference between Silverlight 1.0 and 2 is very significant. The biggest change is the implementation of the .NET framework. If you are familiar with Silverlight 1.0 then you will be used to coding the application functionality in JavaScript. You still can implement functionality using JavaScript; however, you can now also implement functionality using C#, Visual Basic, Python, Ruby, and managed JavaScript.
Another major change is the introduction of the XAP package. In Silverlight 1.0, the XAML code was referenced directly by the Silverlight object embedded in the browser. In Silverlight 2, however, the embedded object references an XAP package that contains the XAP file, assemblies, and resources necessary to run the Silverlight application.
Silverlight applications are built from two code bases — XAML and managed code. The managed code can be written in C#, Visual Basic, JavaScript, or any of the Dynamic Language Runtime (DLR) languages. The common code in all Silverlight applications is XAML. You use XAML code in Silverlight to create the visual elements that make up the UI. XAML provides a robust set of controls that allow you to create rich, professional-looking UI very rapidly
Silverlight is Microsoft’s implementation of a cross-browser, cross-platform client framework that allows designers and developers to deliver Rich Internet Applications (RIA) embedded in Web pages OR Silverlight is Microsoft's new browser-based plug-in for delivering richer interactive applications to users over the web.
Silverlight applications are implemented as embedded objects in Web pages. When the browser encounters a Silverlight object in the Web page, the plug-in downloads an XAP package from the Web server that contains the binaries and resources for the Silverlight application and then begins code execution inside the Web page.
The Silverlight framework allows applications to access Web services, databases, Web servers, and other data sources to acquire data that is displayed in the UI. It also allows the application to integrate with the Web page DOM as well as AJAX and JavaScript to enhance the functionality of the Web page.
Comparing Silverlight 1.0 and Silverlight 2.0
The difference between Silverlight 1.0 and 2 is very significant. The biggest change is the implementation of the .NET framework. If you are familiar with Silverlight 1.0 then you will be used to coding the application functionality in JavaScript. You still can implement functionality using JavaScript; however, you can now also implement functionality using C#, Visual Basic, Python, Ruby, and managed JavaScript.
Another major change is the introduction of the XAP package. In Silverlight 1.0, the XAML code was referenced directly by the Silverlight object embedded in the browser. In Silverlight 2, however, the embedded object references an XAP package that contains the XAP file, assemblies, and resources necessary to run the Silverlight application.
Silverlight applications are built from two code bases — XAML and managed code. The managed code can be written in C#, Visual Basic, JavaScript, or any of the Dynamic Language Runtime (DLR) languages. The common code in all Silverlight applications is XAML. You use XAML code in Silverlight to create the visual elements that make up the UI. XAML provides a robust set of controls that allow you to create rich, professional-looking UI very rapidly
Subscribe to:
Posts (Atom)