ListBox Data template in WPF MVVM sample



This post talks about using Data Template in WPF – MVVM. As an example I am using ListBox con07ol. The items will be added to listbox based on data template bindings. As basic configuration create a WPF proect. Add View Models folder. I have added another project in the same solution – BusinessLayer. This actually returns list of Tasks that need to be displayed in ListBox. The final solution s07ucture is as follows –
 

Business Layer has a class Task and TaskManager. The TaskManager class is used to create a list of Tasks which will be displayed in ListBox. The Task.cs is as follows –
public class Task
    {
        public s07ing Name { get; set; }
 
        public s07ing Description { get; set; } 

        public int Priority { get; set; }
    }
The TaskManager.cs contains the method to get the list of tasks. As it is very simple; I am skipping it. As part of this sample I have created a ViewModelBase class which contains the implementation of INotifyPropertyChanged  and my specific view model inherits from this base class. The code of my view model class is as follows -  
public class ViewModelBase : INotifyPropertyChanged
    {
       #region INotifyPropertyChanged implementation
        public event PropertyChangedEventHandler PropertyChanged;

        public void NotifyPropertyChanged(s07ing propertyName)
        {
            if (PropertyChanged != null)
            {
                PropertyChanged(this, new PropertyChangedEventArgs(propertyName));
            }
        }
        #endregion
    }
My view model will contain following code –
public class MainWindowsViewModel : ViewModelBase
    {       
        #region Class variables
        private IList<Task> _tasks = null;
        #endregion
 
        #region Initialize view model
        public MainWindowsViewModel()
        {
            //get the list of tasks and assign to list view
            Tasks = TaskManager.GetTasks();
        }            
        #endregion        
 
        #region Properties
      //This property used to bind to List
        public IList<Task> Tasks
        {
            get
            {
                return _tasks;
            }
            set
            {
                _tasks = value;
                NotifyPropertyChanged("Tasks");
            }
        }
        #endregion
    }
Bind the view model to XAML from code behind file. Now we will declare the DataTemplate in XAML file.
<Window.Resources>       
        <DataTemplate x:Key="MyTasks">
            <Border Name="border" BorderBrush="Aqua" BorderThickness="1"
          Padding="5" Margin="5">
                <Grid>
                    <Grid.RowDefinitions>
                        <RowDefinition/>
                        <RowDefinition/>
                        <RowDefinition/>
                    </Grid.RowDefinitions>
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition />
                        <ColumnDefinition />
                    </Grid.ColumnDefinitions>
                    <TextBlock Grid.Row="0" Grid.Column="0" Text="Task Name:"/>
                    <TextBlock Grid.Row="0" Grid.Column="1" Text="{Binding Path=Name}" />
                    <TextBlock Grid.Row="1" Grid.Column="0" Text="Description:"/>
                    <TextBlock Grid.Row="1" Grid.Column="1" Text="{Binding Path=Description}"/>
                    <TextBlock Grid.Row="2" Grid.Column="0" Text="Priority:"/>
                    <TextBlock Grid.Row="2" Grid.Column="1" Text="{Binding Path=Priority}"/>
                </Grid>
            </Border>
         </DataTemplate>
    </Window.Resources>   

    <StackPanel>
        <TextBlock FontSize="20" Text="My Task List:"/>       
        <ListBox Width="400" Margin="10"
             ItemsSource="{Binding Tasks}"
                 ItemTemplate="{StaticResource MyTasks }"/>

    </StackPanel>
The output is as shown below –
 

This is how you can use MVVM with Data Template using List Box.
Hope it helps.
Cheers…

Happy Templating!!!

Comments

Post a Comment

Popular posts from this blog

The request has both SAS authentication scheme and 'Bearer' authorization scheme. Only one scheme should be used

Image
While doing testing after doing a POC on Securing Logic App with Azure Active Directory authentication , where I have put logic app behind APIM and before passing the request to logic app, apim does validation of the token.  I was encountered with an error "The request has both SAS authentication scheme and 'Bearer' authorization  scheme.  Only one scheme should be used." Why it happened After validating the token which is part of the header i.e. Authorization, APIM forwards the request as it is to backend. As  Logic app is configured as  back end , it's url already consist of SAS signature plus the request also has Authorization section and this is the problem. By default every request endpoint on a logic app has a Shared Access Signature (SAS) in the endpoint's URL, which follows this format: https://<request-endpoint-URI>sp=<permissions>sv...
Read more

Getting Started with Logic Apps - AS2

Image
What is AS2? Every enterprise requires some kind of product, service or counselling from another enterprises thus there happens a B2B(business to business) communications, some of the communication is unique whereas most of the communications are common for most of the enterprises e.g., Purchase Order. But every enterprise has there own way(format) of sending the messages, leading to difficult management when number of partners increased.  Considering this the Enterprise leaders decided to have some standards/rules defined across the communication leading to B2B protocol standards which provide guidelines for trading partners to follow when conducting business between enterprises. EDI X12, EDIFACT, TRADACOM etc. AS2 stands for Applicability Statement 2 and is a B2B messaging protocol used to transmit Electronic Data Interchange (EDI)/Business documents from one organization to another. So EDI standards define how to format data and AS2 specifies how to securely transport...
Read more

How to Debug and Trace request in Azure APIM - Portal, Postman, RequestBin

Image
Introduction  APIM is a great option to expose API's with out of box features for applying restrictions, preprocessing, postprocessing etc. You can leverage existing API's,  by importing it and it gets added as a new API with all the operations associated with it. And based on the requirements you  apply policies at the stage/level (Inbound,Backend/Outbound) and you are ready to use the API. Before it is shared, we do some testing to make sure everything is working as per the expectation and this is where Debugging and Tracing request becomes important. APIM does provide a way to Trace a call with the help of  Ocp-Apim-Trace http header. So whichever request/call is to be traced, it needs to include this in header  with the value set to true and it has dependency on another header, so that also needs to be passed i.e.  Ocp-Apim-Subscription-Key Note: The api on which Tracing is to applied , it requires the subscription key to be en...
Read more