WPF C# Make ListBox items have a different value than item text

In XAML :

<ListBox x:Name=”lstboxCabinet” HorizontalAlignment=”Center” Height=”156″ Margin=”58,68,530,0″ VerticalAlignment=”Top” Width=”426″
DisplayMemberPath=”Text”
ItemsSource=”{Binding}”
SelectedValuePath=”id”
/>

 

 

 

In C#

 

Define Custom Class:

public class ListBoxValueText
{
public string Value { get; set; }
public string Text { get; set; }
}

 

Populate the Listbox:

 

DataTable dataTable = ******Your Database Table which contains data*****

lstboxCabinet.Items.Clear();
List<ListBoxValueText> data = new List<ListBoxValueText>();
foreach (DataRow row in dataTable.Rows)
{
data.Add(new ListBoxValueText() { Value = row[“id”].ToString(), Text = row[“name”].ToString() });
}
lstboxCabinet.DataContext = data;

 

Callback Assigned selected value to a string:

 

string selectedCabinet = (lstboxCabinet.SelectedItem as ListBoxValueText).Value;

Advertisements

Angular PIPES

Transform data before display. For example, lower case to upper case, date formatting etc.

Built in pipes include lowercase, uppercase, decimal, date, percent, currency etc

To read more about angular built-in pipesTo read more about angular built-in pipesPipe URLDate https://angular.io/api/common/DatePipeDecimal https://angular.io/api/common/DecimalPipeCurrency https://angular.io/api/common/CurrencyPipePercent https://angular.io/api/common/PercentPipe

Change loading (Spinning) splash icon for VS2015 angular 2 project

By Default, when I load angular project, this what I see at the beginning when I run the application:

 

a26

 

I would like to change it something look like:

a27.PNG

 

Solution:

Add the following css code in the skyle.css file in here:

a28.PNG

 

 

/* Absolute Center Spinner */
.loading {
position: fixed;
z-index: 999;
height: 2em;
width: 2em;
overflow: show;
margin: auto;
top: 0;
left: 0;
bottom: 0;
right: 0;
}

/* Transparent Overlay */
.loading:before {
content: ”;
display: block;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0,0,0,0.3);
}

/* :not(:required) hides these rules from IE9 and below */
.loading:not(:required) {
/* hide “loading…” text */
font: 0/0 a;
color: transparent;
text-shadow: none;
background-color: transparent;
border: 0;
}

.loading:not(:required):after {
content: ”;
display: block;
font-size: 10px;
width: 1em;
height: 1em;
margin-top: -0.5em;
-webkit-animation: spinner 1500ms infinite linear;
-moz-animation: spinner 1500ms infinite linear;
-ms-animation: spinner 1500ms infinite linear;
-o-animation: spinner 1500ms infinite linear;
animation: spinner 1500ms infinite linear;
border-radius: 0.5em;
-webkit-box-shadow: rgba(0, 0, 0, 0.75) 1.5em 0 0 0, rgba(0, 0, 0, 0.75) 1.1em 1.1em 0 0, rgba(0, 0, 0, 0.75) 0 1.5em 0 0, rgba(0, 0, 0, 0.75) -1.1em 1.1em 0 0, rgba(0, 0, 0, 0.5) -1.5em 0 0 0, rgba(0, 0, 0, 0.5) -1.1em -1.1em 0 0, rgba(0, 0, 0, 0.75) 0 -1.5em 0 0, rgba(0, 0, 0, 0.75) 1.1em -1.1em 0 0;
box-shadow: rgba(0, 0, 0, 0.75) 1.5em 0 0 0, rgba(0, 0, 0, 0.75) 1.1em 1.1em 0 0, rgba(0, 0, 0, 0.75) 0 1.5em 0 0, rgba(0, 0, 0, 0.75) -1.1em 1.1em 0 0, rgba(0, 0, 0, 0.75) -1.5em 0 0 0, rgba(0, 0, 0, 0.75) -1.1em -1.1em 0 0, rgba(0, 0, 0, 0.75) 0 -1.5em 0 0, rgba(0, 0, 0, 0.75) 1.1em -1.1em 0 0;
}

/* Animation */

@-webkit-keyframes spinner {
0% {
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-ms-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
}

100% {
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-ms-transform: rotate(360deg);
-o-transform: rotate(360deg);
transform: rotate(360deg);
}
}

@-moz-keyframes spinner {
0% {
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-ms-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
}

100% {
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-ms-transform: rotate(360deg);
-o-transform: rotate(360deg);
transform: rotate(360deg);
}
}

@-o-keyframes spinner {
0% {
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-ms-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
}

100% {
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-ms-transform: rotate(360deg);
-o-transform: rotate(360deg);
transform: rotate(360deg);
}
}

@keyframes spinner {
0% {
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-ms-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
}

100% {
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-ms-transform: rotate(360deg);
-o-transform: rotate(360deg);
transform: rotate(360deg);
}
}

 

Change the code in index.html file with following code:

a29

 

Loading

 

Don’t forget to Delete your cookies in IE browser to see the effect of this change.

VS2015 Add Bootstrap and jquery with Angular 2

  1. Run Node.js command prompt (start–>run–>node.js)
  2.  a22
  3. Find the project location from VSa23
  4. In command prompt, navigate to that project directory
  5. cd “c:\Users\xxxxxxxx\Documents\Visual Studio 2015\Projects\NDAdmin\NDAdmin”
  6. Run the installation command:
  7. npm install bootstrap@3 jquery –save
  8. Show hidden folder–>Right click on bootstrap and jquery–>Include in Projecta24
  9. In the Index.html file, add the following lines:
  10. /node_modules/jquery/dist/jquery.min.js
    <link href=”/node_modules/bootstrap/dist/css/bootstrap.min.css” rel=”stylesheet” />
    /node_modules/bootstrap/dist/js/bootstrap.min.js

Thats all 🙂

Setting Up VS2015 for Angular 2 Project step by step and run the angular project using F5 key

    1. Create an empty VS ASP.NET Projecta1a2
    2. Download angular from here and unzip the downloaded zip file
    3. Copy the 4 items as selected bellow from the unzipped foldera4
    4. Open the home folder of the VS projecta3
    5. Paste the copied files to the main project folder. (Not in the location where you see the .sln file) a5
    6. Here it should look like after you paste all files:a6
    7. Now click on show all icon in solution explorer and you should see all copied folders and files in the VS:
    8. a7a8
    9. Select the following files and right click and select Include in the project and select Yes when you get Typescript message
    10. Now restore all packagesa12
    11. You should see the tree view in the output windowa13
    12. Click 2 times in the show all files icon to see node_modulesa14
    13. Expand the node_modules and select the following folders and right click and include in the projecta16
    14. Now open the index.html file and change the followingsa17a18
    15. Now open the system.config.js and modify as bellowa19a20
    16. Press F5 and you should see the Hello Angular. But if you get this error:a21
    17. Add the following line in that file right after :{
    18. “noStrictGenericChecks”: true,