A Simple Silverlight Application Implementing MVVM

MVVM

In simple words, View knows ViewModel, ViewModel knows Model, but not vice versa.

Why MVVM
    Easy to unit test.
    No need to change model to support changes in View.
    Very minor changes required in ViewModel to support changes in View.
    Separates UX designer and developer i.e the development team can focus on creating ViewModel classes, and the design team can focus on making user-friendly Views.

Simple Silverlight application using MVVM

Here I am just going to get a student name and age from the user and display the details in a GridView as in the figure.

The important areas covered are MVVM, using Relay Command and IValueConverter.

Creating a Student class

I created student class with the following properties, Name, Age, JoiningDate.
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;

namespace MVVMDemoinSL
{
    public class Student
    {
        public string Name { get; set; }
        public int Age { get; set; }
        public DateTime JoiningDate { get; set; }
    }
}

Creating ViewModelBase and ViewModel class

It's always a good idea to have a ViewModelBase class and inherit all the ViewModels from that. Hence we can reuse the code for implementing INotifyPropertyChanged.

The main purpose of using INotifyPropertyChanged is to get notification whenever the property value is changed.
I created a ViewModelBase as below.
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.ComponentModel;

namespace MVVMDemoinSL
{
    public class ViewModelBase : INotifyPropertyChanged
    {
        public event PropertyChangedEventHandler PropertyChanged;
        protected void NotifyPropertyChanged(string propertyName)
        {
            if (PropertyChanged != null)
            {
                PropertyChanged(this, new PropertyChangedEventArgs(propertyName));
            }
        }
    }
}

I also created a ViewModel class which inherits from ViewModelBase.
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.Collections.ObjectModel;

namespace MVVMDemoinSL
{
    public class ViewModel : ViewModelBase
    {
        private Student _student;
        private ObservableCollection<Student> _students;
        private ICommand _SubmitCommand;
        public Student Student
        {
            get
            {
                return _student;
            }
            set
            {
                _student = value;
                NotifyPropertyChanged("Student");
            }
        }

        public ObservableCollection<Student> Students
        {
            get
            {
                return _students;
            }
            set
            {
                _students = value;
                NotifyPropertyChanged("Students");
            }
        }

        public ICommand SubmitCommand
        {
            get
            {
                if (_SubmitCommand == null)
                {
                    _SubmitCommand = new RelayCommand(Submit);
                }
                return _SubmitCommand;
            }
        }

        public ViewModel()
        {
            Student = new Student();
            Students = new ObservableCollection<Student>();
            Students.CollectionChanged += new System.Collections.Specialized.NotifyCollectionChangedEventHandler(Students_CollectionChanged);
        }
        //Whenever new item is added to the collection, am explicitly calling notify property changed

        void Students_CollectionChanged(object sender, System.Collections.Specialized.NotifyCollectionChangedEventArgs e)
        {
            NotifyPropertyChanged("Students");
        }

        private void Submit()
        {
            Student.JoiningDate = DateTime.Today.Date;
            Students.Add(Student);
            Student = new Student();
        }
    }
}

RelayCommand
Since we are following the MVVM pattern, instead of having a Button click event in code behind, we are going to use the Command Property of the button. The RelayCommand allows you to inject the command's logic via delegates ed into its constructor. This approach allows for terse, concise command implementation in ViewModel classes. RelayCommand is a simplified variation of the DelegateCommand. RelayCommand implementation using CommandManager is not possible using Silverlight.
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;

namespace MVVMDemoinSL
{
    public class RelayCommand : ICommand
    {
        private Func<bool> canExecute;
        private Action executeAction;
        public event EventHandler CanExecuteChanged;

        public RelayCommand(Action executeAction,
            Func<bool> canExecute)
        {
            this.executeAction = executeAction;
            this.canExecute = canExecute;
        }

        public RelayCommand(Action executeAction)
|        {
           this.executeAction = executeAction;
            this.canExecute = () => true;
        }

        public void RaiseCanExecuteChanged()
       {
            if (CanExecuteChanged != null)
            {
                CanExecuteChanged(this, EventArgs.Empty);
            }
        }

        public bool CanExecute(object parameter)
         {
           return canExecute == null ? true : canExecute();
        }

        public void Execute(object parameter)
        {
            executeAction();
        }
    }
}

View

Now we have to create a view and bind it with ViewModel properties. The code for the view can be found below. I have used a window, Grid, Textbox, TextBlock, Button and GridView.
<UserControl x:Class="MVVMDemoinSL.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
              xmlns:sdk="http://schemas.microsoft.com/winfx/2006/xaml/presentation/sdk"
             xmlns:viewmodel="clr-namespace:MVVMDemoinSL"
    mc:Ignorable="d"
    d:DesignHeight="300" d:DesignWidth="400">
    <UserControl.Resources>
        <viewmodel:ViewModel x:Key="ViewModel"/>
        <viewmodel:DatetimeToDateConverter x:Key="MyConverter"/>
    </UserControl.Resources>

    <Grid DataContext="{Binding Source={StaticResource ViewModel}}">
        <Grid.RowDefinitions>

            <RowDefinition Height="Auto"/>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="*"/>
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>

            <ColumnDefinition Width="Auto"/>
            <ColumnDefinition Width="*"/>
        </Grid.ColumnDefinitions>
        <TextBlock Grid.Row="0" Grid.Column="0" Text="Name" HorizontalAlignment="Center"/>
        <TextBox Grid.Row="0" Grid.Column="1" Width="100" HorizontalAlignment="Center" Text="{Binding Student.Name, Mode=TwoWay}"/>
        <TextBlock Grid.Row="1" Grid.Column="0" Text="Age" HorizontalAlignment="Center"/>
        <TextBox Grid.Row="1" Grid.Column="1" Width="100" HorizontalAlignment="Center" Text="{Binding Student.Age, Mode=TwoWay}"/>
        <Button Content="Submit" Command="{Binding SubmitCommand}" HorizontalAlignment="Right" Grid.Row="2" Grid.Column="0"/>
        <sdk:DataGrid ItemsSource="{Binding Students}" Grid.Row="3" Grid.Column="0" Width="200" AutoGenerateColumns="False">
            <sdk:DataGrid.Columns>
                <sdk:DataGridTextColumn Header="Name"  Binding="{Binding Name}" Width="60"/>
                <sdk:DataGridTextColumn  Header="Age" Binding="{Binding Age}" Width="60"/>
                <sdk:DataGridTextColumn Header="Joining Date" Binding="{Binding JoiningDate, Converter={StaticResource MyConverter}}" Width="80" />
            </sdk:DataGrid.Columns>
        </sdk:DataGrid>
    </Grid>
</UserControl>

If you see the above XAML code, you can see I am using Windows resources in my view. In resources, I am adding a reference to my ViewModel and DateTimeToDateConverter.

ValueConverter

We might often get some values from the property but we have to display some other value in the View. Say for example in my project, the Joining date is a date time value but I need to display only date. I can do this either by String format in binding or else ValueConverter. I just want to go with the latter one, since you can understand ValueConverter also.
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.Data;
using System.Globalization;

namespace MVVMDemoinSL
{
    public class DatetimeToDateConverter : IValueConverter
    {
        public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
        {
            DateTime date = (DateTime)value;
            return date.ToString("MM/d/yyyy");
        }

        public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
        {
            return value;
        }
    }
}

For implementing MVVM in WPF, please go through the following article.

Pop Up Control is a Visual Prompt Control provided in Silverlight. There are certain times when you need to really grab the user's attention. Maybe you need to display details about a critical error. Then you can just use this control. This visual prompt is designed to simulate a dialog box.
In our Sample Application we will just demonstrate how to use it.

Create a Silverlight Project

Figure 1.1 Creating Silverlight Project

Designing the Application
Here is an idea, we will add three images (ImageControls) to our application and on theirs LeftMouseButtonDown Event we will display the PopUp. So I have taken the help of Blend 3 to design the application. It will have 3 Images as Home, Search and Reports. The following figure displays our application.

Figure 1.2 Designing our Application

Adding a PopUp Control
This is actually disturbing; you can't find the control in the toolbox. But if you start typing the control name it will satisfy you. So I have added some controls like Border, StackPanel and Displaying Text and Button to close the PupUp.
    <Popup x:Name="myPopup" Margin="-34,0,-31,0" Grid.Row="2" Grid.Column="1" Height="78" VerticalAlignment="Bottom"  >    <Border CornerRadius="10" Background="Silver" BorderThickness="2" BorderBrush="Black">  
        <StackPanel Margin="10">  
                    <TextBlock x:Name="PopUpText"/>  
                    <Button x:Name="PopUpButton" Height="30" Width="90" Content="Close" Click="PopUpButton_Click" />  
        </StackPanel>  
        </Border>  
    </Popup>  

PopUp Control has a unique property called IsOpen which returns a boolean value of either true or false. The default value is always false. With this concept in mind let's add some events and use this property to control the show of the PopUp.

Calling the PopUp Control
As we discussed earlier we can handle the display of the PopUp by using the property IsOpen. Now we will see how we have used in our sample application.
    private void PopUpButton_Click(object sender, RoutedEventArgs e)  
    {  
          myPopup.IsOpen = false;  
    }  
      
    private void Home_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)  
    {  
          PopUpText.Text = "You Clicked Home";  
          myPopup.IsOpen = true;  
    }  
      
    private void Search_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)  
    {  
          PopUpText.Text = "You Clicked Search";  
          myPopup.IsOpen = true;  
    }  
      
    private void Reports_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)  
    {  
          PopUpText.Text = "You Clicked Reports";  
          myPopup.IsOpen = true;  
    }  

Running the Application
When you click different images you will be notified by the PopUp Control.

Figure 1.3 PopUp is displayed

That's it, we have successfully used the PopUp Control. Enjoy Coding.

The control that you just like drag or move with the mouse is embedded among a Border control then handle the mouse down, up and move events to create the object move among your layout panel.

See sample .xaml code:
<Canvas x:Name="LayoutRoot" Background="White">
<Border x:Name="border1"
Canvas.Top="100"
Canvas.Left="10"
MouseLeftButtonDown="border1_MouseLeftButtonDown"
MouseLeftButtonUp="border1_MouseLeftButtonUp"
MouseMove="border1_MouseMove"> 
<Image x:Name="MyImage" Source="images/Basket.png" Stretch="Uniform" ></Image>           
</Border>
</Canvas>

In the above code, a Border control is placed within the Canvas. The foremost necessary code to notice is:
MouseLeftButtonDown="border1_MouseLeftButtonDown"
MouseLeftButtonUp="border1_MouseLeftButtonUp"
MouseMove="border1_MouseMove"

The above lines outline 3 events that we tend to like to handle. because the name indicates, we are handling the mouse button down, mouse button up and mouse move events for the left mouse.

In the code behind, once the left button is pressed, we are going to set a global variable to point that user has started moving. within the mouse move event, we are going to get the current location of the mouse pointer and then set the new position for the border control. once the left mouse button is discharged, we are going to reset the global variable in order that we are going to not move the item from now on.
See the code for the code behind class:
public partial class Page : UserControl
{
// Global variable to indicate if user has clicked border
// and started/stopped moving.
private bool moving = false;
private double offSetX;
private double offSetY;
public Page()
{
InitializeComponent();
}

private void border1_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)
{
// Left mouse button clicked within border. start moving.
moving = true;

Point offset = e.GetPosition(border1);
offSetX = offset.X;
offSetY = offset.Y;
}

private void border1_MouseLeftButtonUp(object sender, MouseButtonEventArgs e)
{
// Left mouse button release. Stop moving.
moving = false;
}

private void border1_MouseMove(object sender, MouseEventArgs e)
{
if (moving)
{
    // Get the new mouse pointer position
    Canvas parent = (Canvas)this.border1.Parent;
    Point p = e.GetPosition(parent);
    double x = p.X - offSetX;
    double y = p.Y - offSetY;
    // Set the new position for the border control.
    this.border1.SetValue(Canvas.LeftProperty, x);
    this.border1.SetValue(Canvas.TopProperty, y);
}
}
}

HostForLIFE.eu Silverlight 6 Hosting
HostForLIFE.eu is European Windows Hosting Provider which focuses on Windows Platform only. We deliver on-demand hosting solutions including Shared hosting, Reseller Hosting, Cloud Hosting, Dedicated Servers, and IT as a Service for companies of all sizes. We have customers from around the globe, spread across every continent. We serve the hosting needs of the business and professional, government and nonprofit, entertainment and personal use market segments.

In this post allow us to understand how to use ScrollViewer panel Layout inside a Silverlight application. ScrollViewer is an additional layout container, that we don’t use constantly. It's chiefly useful showing contents in an exceedingly scrollable panel such as ListBox or Editor window. ListBox, TextBox, RichTextBox internally uses ScrollViewer to implement the scrolling functionality. Allow us to discuss the implementation in this post.

As usual, open up visual studio and choose Silverlight project. We will discover there's a Grid layout in your MainPage. xaml. Eliminate the default Grid layout and merely drag and drop the Stack panel Layout into our application. The code for this looks such as:
<StackPanel x:Name="LayoutRoot" > </StackPanel>

Inside the stack panel I am just defining 12 different rectangles.  And this is the code that I used:
<StackPanel x:Name="LayoutRoot" Orientation="Vertical" Width="100">
            <Rectangle Height="50" Width="100" Fill="Red" />
            <Rectangle Height="50" Width="100" Fill="Green" />
            <Rectangle Height="50" Width="100" Fill="Orange" />
            <Rectangle Height="50" Width="100" Fill="Tomato" />
            <Rectangle Height="50" Width="100" Fill="WhiteSmoke" />
            <Rectangle Height="50" Width="100" Fill="Green" />
            <Rectangle Height="50" Width="100" Fill="Blue" />
            <Rectangle Height="50" Width="100" Fill="Yellow" />
            <Rectangle Height="50" Width="100" Fill="Azure" />
            <Rectangle Height="50" Width="100" Fill="Gold" />
            <Rectangle Height="50" Width="100" Fill="Blue" />
            <Rectangle Height="50" Width="100" Fill="Violet" />
        </StackPanel>

In case we compile the above code as it's, we will notice all of the rectangles however no scroll bar result. Thus in an effort to get scroll bar effect we ought to put the above stack panel inside scroll viewer and ought to offer fixid width towards the scroll viewer. And this is the code snippet:
<ScrollViewer Height="200" >
        <StackPanel x:Name="LayoutRoot" Orientation="Vertical" Width="100">
            <Rectangle Height="50" Width="100" Fill="Red" />
            <Rectangle Height="50" Width="100" Fill="Green" />
            <Rectangle Height="50" Width="100" Fill="Orange" />
            <Rectangle Height="50" Width="100" Fill="Tomato" />
            <Rectangle Height="50" Width="100" Fill="WhiteSmoke" />
            <Rectangle Height="50" Width="100" Fill="Green" />
            <Rectangle Height="50" Width="100" Fill="Blue" />
            <Rectangle Height="50" Width="100" Fill="Yellow" />
            <Rectangle Height="50" Width="100" Fill="Azure" />
            <Rectangle Height="50" Width="100" Fill="Gold" />
            <Rectangle Height="50" Width="100" Fill="Blue" />
            <Rectangle Height="50" Width="100" Fill="Violet" />
        </StackPanel>
    </ScrollViewer>

Finally, Run the code and here is the result:

A data grid view is a rectangular control made of columns and rows. I have a DataGrid where I have included some controls in column header. Each column is a Template column. These controls appear just below the column header which are used for entering filter information. Here's the issue on my code on Silverlight 5.

VisualTreeHelper class helps to iterate through the visual tree of the xaml. Using it we can find the child and parent controls of the rendered controls. Lets check the Visual Tree of the rendered control using Silverlight Spy.

The Following Method do a search over the child controls with in a control recursively and returns the control based on Name.

private object GetChildControl(DependencyObject parent, string controlName)
{ 
    Object tempObj = null;
    int count = VisualTreeHelper.GetChildrenCount(parent);
    for (int counter = 0; counter < count; counter++)
    {
        //Get The Child Control based on Index
        tempObj = VisualTreeHelper.GetChild(parent, counter);
        //If Control's name Property matches with the argument control
        //name supplied then Return Control
        if ((tempObj as DependencyObject).GetValue(NameProperty).ToString() == controlName)
            return tempObj;
        else //Else Search Recursively
        {
            tempObj = GetChildControl(tempObj as DependencyObject, controlName);
            if (tempObj != null)
                return tempObj;
        }
    }
    return null;
}

Make sure that the same has to be delegated to UI thread using Dispatcher. As the controls created using UI Thread can not be accessed from other thread.
//Access the Grid Header Controls
Dispatcher.BeginInvoke(delegate
{
    var hyperlinkControl = GetChildControl(dataGrid1, "hlSort");
    var checkControl = GetChildControl(dataGrid1, "chkSelectAll");
});

So I was plugging right along in Silverlight using LINQ to asynchronously pull data from our database into my C# code. Everything was going great until I attempted to pull data from one table and its related tables all in one query. Here is what I found which resolved my data problem.

In my Library class I have the following code that enables my ASP.NET code to query a User by UserID and return a User object along with their UserFavorites and Illustration objects. This gives me everything I need to know about the user and their favorite illustrations.
public IQueryable<MyLibrary.User> GetUserByID(int userID)

{
    return myContext.Users.Include("UserFavorites").Include("UserFavorites.Illustration")
        .Where(u => u.UserID == userID);
}

In Silverlight I had a need to perform the same query using LINQ. After much searching on the web I found the two things that were needed to make this happen.
1. Use "Expand" instead of "Include"
2. Instead of "UserFavorites.Illustration" replace the "." with a "/" to get "UserFavorites/Illustration".

    int userID = 0;
    var qUser = ((DataServiceQuery<User>)(from myUser in service.Users
                  where myUser.UserID.Equals(userID)
                  select myUser))
                .Expand("UserFavorites")
                .Expand("UserFavorites/Illustration");

Now I have all of my data and I am happy once again. Using the Expand on my query is very nice in that I can get all of my data in one asynchronous call.

HostForLIFE.eu Silverlight 6 Hosting
HostForLIFE.eu is European Windows Hosting Provider which focuses on Windows Platform only. We deliver on-demand hosting solutions including Shared hosting, Reseller Hosting, Cloud Hosting, Dedicated Servers, and IT as a Service for companies of all sizes. We have customers from around the globe, spread across every continent. We serve the hosting needs of the business and professional, government and nonprofit, entertainment and personal use market segments.

This article will explore how to use the ViewBox control in Silverlight 6. The ViewBox control allows you to place a child control such as Image within it in such a way that it will be scaled appropriately to fit the available without any distortion. It is typically used in 2D graphics.

We will begin with creating a new Silverlight 6 project. Modify the existing XAML code of MainPage.xaml so that a Grid of 1 column and three rows is created. The code for the same is shown below:

<UserControl x:Class="SilverlightDemo.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc=http://schemas.openxmlformats.org/markup-compatibility/2006 mc:Ignorable="d" xmlns:sdk=http://schemas.microsoft.com/winfx/2006/xaml/presentation/ sdk HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
    <Grid x:Name="LayoutRoot" Background="White" Height="300" Width="300">
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="200" />
        </Grid.ColumnDefinitions>
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto" />
            <RowDefinition Height="Auto" />
            <RowDefinition Height="Auto" />
        </Grid.RowDefinitions>
    </Grid>
</UserControl>

Drag and drop the Viewbox control from the Toolbox into the XAML code between the <Grid></Grid> tags. Specify its row and column in the grid to be 0. The resulting code is seen below.

<UserControl x:Class="SilverlightDemo.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc=http://schemas.openxmlformats.org/markup-compatibility/2006 mc:Ignorable="d" xmlns:sdk=http://schemas.microsoft.com/winfx/2006/xaml/presentation/ sdk HorizontalAlignment="Stretch" VerticalAlignment="Stretch">        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="200" />
        </Grid.ColumnDefinitions>
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto" />
            <RowDefinition Height="Auto" />
            <RowDefinition Height="Auto" />
        </Grid.RowDefinitions>
         <controls:Viewbox Grid.Row="0" Grid.Column="0" Height="120" Width="120">
  </controls:Viewbox> 
    </Grid>
</UserControl>

Drag and drop the Viewbox control from the Toolbox into the XAML code between the <Grid></Grid> tags. Specify its row and column in the grid to be 0. The resulting code is seen below.

<UserControl x:Class="SilverlightDemo.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc=http://schemas.openxmlformats.org/markup-compatibility/2006 mc:Ignorable="d" xmlns:sdk=http://schemas.microsoft.com/winfx/2006/xaml/presentation/ sdk HorizontalAlignment="Stretch" VerticalAlignment="Stretch">        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="200" />
        </Grid.ColumnDefinitions>
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto" />
            <RowDefinition Height="Auto" />
            <RowDefinition Height="Auto" />
        </Grid.RowDefinitions>
         <controls:Viewbox Grid.Row="0" Grid.Column="0" Height="120" Width="120">
  </controls:Viewbox> 
    </Grid>
</UserControl>

Right click on the project name in the Solution Explorer pane and select Add Existing Item option. Choose the image "Winter.jg" from the My Documents\My Pictures\Sample Pictures folder.

Drag and drop an Image control in between the <controls:ViewBox> and </controls:ViewBox> tag and modify its code as shown below, to specify its source and size.

    <Grid x:Name="LayoutRoot" Background="White" Height="300" Width="300">
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="200" />
        </Grid.ColumnDefinitions>
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto" />
            <RowDefinition Height="Auto" />
            <RowDefinition Height="Auto" />
        </Grid.RowDefinitions>
         <controls:Viewbox Grid.Row="0" Grid.Column="0" Height="120" Width="120">
            <Image Source="Winter.jpg" Height="40" Width="40"></Image>
        </controls:Viewbox>
    </Grid>

Drag and drop another ViewBox and then an Image control in between the second <controls:ViewBox> and </controls:ViewBox> tag.

Modify the XAML as shown below:

    <Grid x:Name="LayoutRoot" Background="White" Height="300" Width="300">
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="200" />
        </Grid.ColumnDefinitions>
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto" />
            <RowDefinition Height="Auto" />
            <RowDefinition Height="Auto" />
        </Grid.RowDefinitions>
         <controls:Viewbox Grid.Row="0" Grid.Column="0" Height="120" Width="120">
            <Image Source="Winter.jpg" Height="40" Width="40"></Image>
        </controls:Viewbox>
<controls:Viewbox Grid.Row="1" Grid.Column="0" Height="70" Width="90">
    <Image Source="Winter.jpg" Height="40" Width="40"></Image></controls:Viewbox> 
    </Grid>

Save the solution, build and execute it. When you see the output, you will observe that the two images show no distortion whatsoever though their height and width are not the same. This has happened because of the ViewBox.

HostForLIFE.eu Silverlight 6 Hosting
HostForLIFE.eu is European Windows Hosting Provider which focuses on Windows Platform only. We deliver on-demand hosting solutions including Shared hosting, Reseller Hosting, Cloud Hosting, Dedicated Servers, and IT as a Service for companies of all sizes. We have customers from around the globe, spread across every continent. We serve the hosting needs of the business and professional, government and nonprofit, entertainment and personal use market segments.

This article demonstrates how to create and use an image brush in Silverlight using XAML and C#.

z

Image Brush
An image brush paints an area with an image. The ImageSource property represents the image to be used during the painting by an image brush. The ImageBrush object represents an image brush.

Creating an Image Brush
The ImageBrush element in XAML creates an image brush. The ImageSource property of the ImageBrush represents the image used in the painting process.

The following code snippet creates an image brush and sets the ImageSource property to an image.
<ImageBrush ImageSource="dock.jpg" />

We can fill a shape with an image brush by setting a shape's Fill property to the image brush. The code snippet in Listing 1 creates a rectangle shape sets the Fill property to an ImageBrush.
<Rectangle
    Width="200"
    Height="100"
    Stroke="Black"
    StrokeThickness="4">
    <Rectangle.Fill>
        <ImageBrush ImageSource="dock.jpg" />
    </Rectangle.Fill>
</Rectangle>

Listing 1
The CreateAnImageBrush method listed in Listing 2 draws same rectangle with an image brush in Figure 1 dynamically.
/// <summary>
/// Fills a rectangle with an ImageBrush
/// </summary>
public void CreateAnImageBrush()
{
    // Create a Rectangle

    Rectangle blueRectangle = new Rectangle();
    blueRectangle.Height = 100;
    blueRectangle.Width = 200;

     // Create an ImageBrush
    ImageBrush imgBrush = new ImageBrush();
     imgBrush.ImageSource =
        new BitmapImage(new Uri(@"Dock.jpg", UriKind.Relative));
     // Fill rectangle with an ImageBrush

    blueRectangle.Fill = imgBrush;
    // Add Rectangle to the Grid.
    LayoutRoot.Children.Add(blueRectangle);
}

HostForLIFE.eu Silverlight 6 Hosting
HostForLIFE.eu is European Windows Hosting Provider which focuses on Windows Platform only. We deliver on-demand hosting solutions including Shared hosting, Reseller Hosting, Cloud Hosting, Dedicated Servers, and IT as a Service for companies of all sizes. We have customers from around the globe, spread across every continent. We serve the hosting needs of the business and professional, government and nonprofit, entertainment and personal use market segments.

In this tutorial, you will learn how to show a non-annoying popup layer within a Silverlight web page.

Let's follow these steps:

Step 1

Add a button to your xaml page as shown below:

<Grid x:Name="LayoutRoot" Background="White" >
<Button Width="100" Height="50" x:Name="showPopup"
Click="showPopup_Click" Content="Show Popup" />
</Grid>

Step 2

Then, add the following code to your code behind file (page.xaml.cs):

Popup p = new Popup();
private void showPopup_Click(object sender, RoutedEventArgs e)
{

1. Create a panel control to host other controls
    StackPanel panel1 = new StackPanel();
    panel1.Background = new SolidColorBrush(Colors.Gray);

2. Create a button
    Button button1 = new Button();
    button1.Content = "Close";
    button1.Margin = new Thickness(5.0);
    button1.Click += new RoutedEventHandler(button1_Click);

3. Create a text label
    TextBlock textblock1 = new TextBlock();
    Textblock1.Text = "The popup control";
    Textblock1.Margin = new Thickness(5.0);

4. Add text label and button to the panel
    panel1.Children.Add(textblock1);
    panel1.Children.Add(button1);

Step 3

Now, make the panel a child of the popup so that the panel will be shown within the Popup when displayed:

   p.Child = panel1;

And you can set a position:

 p.VerticalOffset = 25;
   p.HorizontalOffset = 25;

Use this code to show the popup:

p.IsOpen = true;
}
void button1_Click(object sender, RoutedEventArgs e)
{

Then, to close the popup, follow this code:

// Close the popup.
   p.IsOpen = false;
}

Step 4

Now run the application. You can see the page with a button. When you click on the button, a popup layer will appear with a text label and a button in it. When you click on the button in the popup, it will close the popup.

HostForLIFE.eu Silverlight 6 Hosting
HostForLIFE.eu is European Windows Hosting Provider which focuses on Windows Platform only. We deliver on-demand hosting solutions including Shared hosting, Reseller Hosting, Cloud Hosting, Dedicated Servers, and IT as a Service for companies of all sizes. We have customers from around the globe, spread across every continent. We serve the hosting needs of the business and professional, government and nonprofit, entertainment and personal use market segments.

Data binding is one of the coolest gimmicks that have ever existed in Silverlight. Binding a UI Element's property with a property in the code behind, has the ability to do any sort of trap. It's wizardry, basically. Once the properties are bound, we have to continue telling the UI if the property's estimation has been adjusted in the code. INotifyPropertyChanged is helpful for this.

You see, since it is an interface, we have to first actualize it. The procedure is not exceptionally extreme however. In the new Silverlight project, here is the code of my main page:
publicpartialclassMainPage : UserControl
{
    privatestring _names; 
    publicstring Names
    {
        get
        {
           return _names;
        }
        set
        {
            _names = value;
        }
   } 
    public MainPage()
    {
        InitializeComponent();
    } 
    privatevoid MainPage_OnLoaded(object sender, RoutedEventArgs e)
    {
        Names = "This is the Text";
    }
}

The property "Name" I have here is bound with the textblock in XAML. Now write the following code:
<UserControlx:Class="PropertyChangedDescribed.MainPage"
 xmlns=http://schemas.microsoft.com/winfx/2006/xaml/presentation
 xmlns:x=http://schemas.microsoft.com/winfx/2006/xaml
 xmlns:d=http://schemas.microsoft.com/expression/blend/2008
 xmlns:mc=http://schemas.openxmlformats.org/markup-compatibility/2006
  mc:Ignorable="d"
 Loaded="MainPage_OnLoaded"
 x:Name="TestingPropertyChanged"
 d:DesignHeight="300"d:DesignWidth="400">
 <Gridx:Name="LayoutRoot"Background="White">
  <TextBlockText="{Binding Names, ElementName=TestingPropertyChanged}"/>
  </Grid>
</UserControl>

As should be obvious, the textblock has its "text" property bound with our code behind's property "Name". At this moment, regardless of what you set the estimation of "Name", it will never be reflected onto the UI. Thus, what we need is, each time we change the estimation of our property "Name," the content piece has its esteem changed as well. To do this, we have to actualize the interface INotifyPropertyChanged. Here is the changed primary page's code to do as such:
publicpartialclassMainPage : UserControl, INotifyPropertyChanged
{
    privatestring _names;
     publicstring Names
    {
        get
        {
            return _names;
        }
        set
        {
            _names = value;
            OnPropertyChanged("Names");
        }
    } 
    public MainPage()
    {
        InitializeComponent();
    } 
    privatevoid MainPage_OnLoaded(object sender, RoutedEventArgs e)
    {
        Names = "This is the Text";
    } 
    publicevent PropertyChangedEventHandler PropertyChanged;
     privatevoid OnPropertyChanged(string propertyName)
    {
        if (this.PropertyChanged != null)
        {
            PropertyChanged(this,new PropertyChangedEventArgs(propertyName));
        }
    }
}

HostForLIFE.eu Silverlight 6 Hosting
HostForLIFE.eu is European Windows Hosting Provider which focuses on Windows Platform only. We deliver on-demand hosting solutions including Shared hosting, Reseller Hosting, Cloud Hosting, Dedicated Servers, and IT as a Service for companies of all sizes. We have customers from around the globe, spread across every continent. We serve the hosting needs of the business and professional, government and nonprofit, entertainment and personal use market segments.