Menu

SILVERLIGHT CONTROL WITH MVVM

SILVERLIGHT CONTROL (LIST BOX, RADIO BUTTON, CHECK BOX, COMBO BOX) WITH MVVM

Getting Started

You need to have Silverlight 3.0 or 4.0 framework installed on your PC for implementation of SILVERLIGHT CONTROL.
We can create Sliverlight application for SILVERLIGHT CONTROL.

1.  Create a new Silverlight application. Open Visual Studio 2010 > File > New Project > Select the language (C# or VB.NET) > Select ‘Silverlight’ in the Project Types > from the templates, select Silverlight Application from the installed templates and enter a name for the application

2.  On clicking OK,

3.  First create “ModelBase” class. Code like.


public class ModelBase :INotifyPropertyChanged
{
public event PropertyChangedEventHandler PropertyChanged;

protected void FirePropertyChanged(string propertyName)

{
   var handler = PropertyChanged;

if (handler != null)

{

handler(this, new PropertyChangedEventArgs(propertyName));

}

}

}

4. Now, you have created “Country Model” class inside “Model” Folder. Code like

public class Country : ModelBase
    {
        private string _DisplayText;
        public string DisplayText
        {
            get { return _DisplayText; }
            set
            {
                _DisplayText = value;
                FirePropertyChanged("DisplayText");
            }
        }

        private string _Codename;
        public string Codename
        {
            get { return _Codename; }
            set
            {
                _Codename = value;
                FirePropertyChanged("Codename");
            }
        }
        private bool _IsChecked;
        public bool IsChecked
        {
            get
            {
                return _IsChecked;
            }
            set
            {
                _IsChecked = value;
                FirePropertyChanged("IsChecked");
            }
        }
    }

5. Now, you have created “RelayCommand” class inside “Control Command” Folder. Code like

  public class RelayCommand:ICommand
    {
         Func<object, bool> canExecute;
        Action<object> executeAction;
        bool canExecuteCache;

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

        public bool CanExecute(object parameter)
        {
            bool temp = canExecute(parameter);

            if (canExecuteCache != temp)
            {
                canExecuteCache = temp;
                if (CanExecuteChanged != null)
                {
                    CanExecuteChanged(this, new EventArgs());
                }
            }

            return canExecuteCache;
        }

        public event EventHandler CanExecuteChanged;

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

    }

6. Now,you have created “CountryService” class inside “Provider” folder. Using this file you have add Country information. Code like

public static class CountryService
 {

 public static ObservableCollection GetList()
 {
 return new ObservableCollection
 {
 new Country{DisplayText="India",
Codename="In",IsChecked=true},
 New
Country{
DisplayText="Pak",Codename="Pak",IsChecked=true},
 New
Country{DisplayText="Sri",
Codename="Sr",IsChecked=false}
 };
 }

 public static ObservableCollection GetStates(string CountryCode)
 {
 if (CountryCode == "In")
 {
 return new ObservableCollection
 {

 new Country {Codename = "FL",
DisplayText = "Florida"},

 };
 }
 if (CountryCode == "Pak")
 {
 return new ObservableCollection
 {

 new Country {Codename = "WA",
DisplayText = "Washington"},
 new Country {Codename = "NC",
 DisplayText = "North Carolina"},

 };
 }
 if (CountryCode == "Sr")
 {
 return new ObservableCollection
 {
 new Country {Codename = "NY",
DisplayText = "New York"},

 };
 }
 else
 {
 return new ObservableCollection
 {
 new Country {Codename = "Select",
 DisplayText = "Select"},
 };
 }
 }
 }

7. Now,you have created “MainViewModel” class inside “ViewModels” Folder.

public class MainViewModel : ModelBase
    {
        public MainViewModel()
        {
            this.Countries = CountryService.GetList();
            this.ListSelectChangeEvent = new RelayCommand(displayMessage, CanFoodGroupsSelected);
        }

        private ObservableCollection _states;
        public ObservableCollection States
        {
            get { return _states; }
            set
            {
                _states = value;
                FirePropertyChanged("States");
            }
        }
        private ObservableCollection _Countries;
        public ObservableCollection Countries
        {
            get { return _Countries; }
            set
            {
                _Countries = value;
                FirePropertyChanged("Countries");
            }
        }

        private string _selectedStateCode;
        public string SelectedStateCode
        {
            get { return _selectedStateCode; }
            set
            {
                _selectedStateCode = value;
                FirePropertyChanged("SelectedStateCode");
                this.States = CountryService.GetStates(value);
            }
        }

        private string _SelectedCountryName;
        public string SelectedCountryName
        {
            get
            {
                return _SelectedCountryName;
            }
            set
            {
                _SelectedCountryName = value;
                FirePropertyChanged("SelectedCountryName");
            }
        }

        public ICommand ListSelectChangeEvent { get; set; }
        public void displayMessage(object param)
        {
            Country objCountry = (Country)param;
            this.SelectedCountryName = objCountry.DisplayText;
        }

        private bool CanFoodGroupsSelected(object param)
        {
            return true;
        }
    }

8. You have code in your “xaml” file( MainPage.xaml). Code like

<UserControl x:Class="SilverlightControls.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:viewModels="clr-namespace:SilverlightControls.ViewModel"
    mc:Ignorable="d"
    d:DesignHeight="300" d:DesignWidth="600"     >
    <UserControl.Resources>
        <viewModels:MainViewModel x:Key="mainViewModels"/>
    </UserControl.Resources>
    <Grid x:Name="LayoutRoot" Background="White" DataContext="{StaticResource mainViewModels}">
        <Grid.RowDefinitions >
            <RowDefinition Height="Auto" />
            <RowDefinition Height="auto"/>
            <RowDefinition Height="auto"/>
            <RowDefinition Height="auto" />
            <RowDefinition Height="auto" />
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="Auto"/>
            <ColumnDefinition Width="auto"/>
            <ColumnDefinition Width="auto" />
            <ColumnDefinition Width="auto" />
        </Grid.ColumnDefinitions>
        <ComboBox Height="23" HorizontalAlignment="Left"  Grid.Row="0" Grid.Column="1"
                            x:Name="comboBox" VerticalAlignment="Top" Width="200"
                            ItemsSource="{Binding Path=Countries,Mode= OneWay}"
                            DisplayMemberPath="DisplayText"
                            SelectedValuePath="Codename"
                            SelectedValue="{Binding Path=SelectedStateCode, Mode=TwoWay}"
                       />
        <ComboBox Height="23" HorizontalAlignment="Left"  Grid.Row="0" Grid.Column="3"
                            x:Name="comboBox1" VerticalAlignment="Top" Width="200"
                            ItemsSource="{Binding Path=States,Mode= TwoWay}"
                            DisplayMemberPath="DisplayText"
                            SelectedValuePath="Codename"
                           />
<TextBlock Height="23" HorizontalAlignment="Left" Grid.Row="0"
Grid.Column="2" Name="textBlock"
Text="{Binding Path=SelectedStateCode, Mode=OneWay}" VerticalAlignment="Top" Width="65" />
        <TextBlock Height="23" HorizontalAlignment="Left"  Name="textBlock1" Text="Combo Box" VerticalAlignment="Top" Width="80" Grid.Row="0" Grid.Column="0"/>

        <ListBox x:Name="lsRadioButton" ItemsSource="{Binding Countries}" Grid.Row="1" Grid.Column="1" >
            <ListBox.ItemTemplate>
                <DataTemplate>
                    <RadioButton Content="{Binding DisplayText}"
                                 IsChecked="{Binding IsChecked,Mode=TwoWay}"
                                 Command="{Binding Source={StaticResource mainViewModels},
                                 Path=ListSelectChangeEvent, Mode=TwoWay}"
                                 CommandParameter="{Binding}">
                    </RadioButton>

                </DataTemplate>
            </ListBox.ItemTemplate>
        </ListBox>
        <ListBox ItemsSource="{Binding Countries}" Grid.Row="2" Grid.Column="1">
            <ListBox.ItemTemplate>
                <DataTemplate>
                    <CheckBox
                            x:Name="se"
                            Command="{Binding Source={StaticResource mainViewModels},
                            Path=ListSelectChangeEvent, Mode=TwoWay}"
                            IsChecked="{Binding IsSelected, Mode=TwoWay}"
                            Content="{Binding DisplayText}"
                            CommandParameter="{Binding}"
                        />
                </DataTemplate>
            </ListBox.ItemTemplate>
        </ListBox>

        <ListBox ItemsSource="{Binding Countries}"
                 Grid.Row="3" Grid.Column="1"
                 DisplayMemberPath="DisplayText"
                 SelectedValuePath="Codename"
                 SelectedValue="{Binding Path=SelectedStateCode, Mode=TwoWay}"
                           />

        <TextBlock Grid.Row="1" Height="35" HorizontalAlignment="Left" Margin="0,6,0,0" Name="textBlock2" Text="Radio Button" VerticalAlignment="Top" Width="82" />
        <TextBlock Grid.Row="2" Height="35" HorizontalAlignment="Left" Margin="0,6,0,0" Name="textBlock3" Text="Check Box Demo" VerticalAlignment="Top" Width="126"  />
        <TextBlock Grid.Row="3" Height="35" HorizontalAlignment="Left" Margin="0,6,0,0" Name="textBlock4" Text="List Box Item" VerticalAlignment="Top" Width="126"  />
        <TextBlock Grid.Row="4" Height="35" HorizontalAlignment="Left" Margin="0,6,0,0" Name="textBlock5" Text="{Binding SelectedCountryName}" VerticalAlignment="Top" Width="126"  />

    </Grid>
</UserControl>

No comments

Leave a Reply


9 × 6 =

Categories