tag:blogger.com,1999:blog-42590751055402671152024-03-24T12:53:22.610+05:30 Logesh Palani - EngineerXamarin | Microsoft Azure | IOT | UWP | .NET | Android | iOS Logesh Palanihttp://www.blogger.com/profile/11572235997627400122noreply@blogger.comBlogger37125tag:blogger.com,1999:blog-4259075105540267115.post-18064993832609869792021-04-07T03:00:00.009+05:302021-07-13T16:17:24.910+05:30Our AI Project Got Selected One of Azure AI Hackathon Top 50 Eligible submissions <table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto;">
<tbody>
<tr>
<td style="text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh8pakfgwqXgR9EVL9D-lfs7O95WSbrCIxYB_mEFgO2IHc5tjwMacwgZjw-xzNiQAtd7xSYTicPvKpCzc5bH1rlxA9Y7im1AXZX9Qil5vrlDy_u2nvWmEhZmc2KfpuKCBR0vcg2klcSK3p3/s640/Attendance+Management+using+Azure+Cognitive+Services.png" style="margin-left: auto; margin-right: auto;"><img border="0" data-original-height="473" data-original-width="640" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh8pakfgwqXgR9EVL9D-lfs7O95WSbrCIxYB_mEFgO2IHc5tjwMacwgZjw-xzNiQAtd7xSYTicPvKpCzc5bH1rlxA9Y7im1AXZX9Qil5vrlDy_u2nvWmEhZmc2KfpuKCBR0vcg2klcSK3p3/s16000/Attendance+Management+using+Azure+Cognitive+Services.png" /></a>
</td>
</tr>
<tr>
<td class="tr-caption" style="text-align: center;">
Attendance Management using Azure Cognitive Services
</td>
</tr>
</tbody>
</table>
<h2 style="text-align: left;">
<span style="font-family: Open Sans;"><br /></span></h2><h2 style="text-align: left;"><span style="font-size: x-large; font-weight: normal;"><span style="font-family: Open Sans;">Introduction,</span>
</span></h2>
<div>
<span style="font-size: medium;"><span style="font-family: Open Sans;"> Our Microsoft Azure AI Project named as
"Attendance Management using Azure Cognitive Service" got selected one of
top 50 eligible projects in Microsoft Azure AI Hackathon. This blog is
about, how I build the application and what are the Microsoft Services used.</span></span></div><div><span style="font-size: medium;"><span style="font-family: Open Sans;"><br /></span></span></div>
<div>
<h2 style="background-color: white; box-sizing: border-box; direction: ltr; font-size: 1.875em; font-weight: 500; line-height: 1.25; margin: 0px 0px 0.6em; overflow-wrap: break-word; padding: 0px; text-rendering: optimizelegibility;">
<span style="font-family: Open Sans;">Inspiration to build this project</span></h2>
<ol style="background-color: white; box-sizing: border-box; direction: ltr; font-size: 16px; line-height: 1.6; list-style-position: outside; margin: 0px 0px 1.25em 1.1em; overflow-wrap: break-word; padding: 0px;">
<li style="box-sizing: border-box; direction: ltr; margin: 0px; overflow-wrap: break-word; padding: 0px;">
<span style="font-family: Open Sans;"><span>Still in my school, the attendance is taken manually. But they are
providing id cards which becomes useless. Every period staff will be
wasting time in taking attendance.</span>
</span></li>
<li style="box-sizing: border-box; direction: ltr; margin: 0px; overflow-wrap: break-word; padding: 0px;">
<span style="font-family: Open Sans;">In my office providing one ID card with RFID. In this, RFID is useless
and RFID configuration to the Microcontrollers is creating
complexity.</span>
</li>
</ol>
<p style="background-color: white; box-sizing: border-box; direction: ltr; font-size: 16px; line-height: 1.6; margin: 0px 0px 1.25em; overflow-wrap: break-word; padding: 0px; text-rendering: optimizelegibility;">
<span style="font-family: Open Sans;">So we have decided to build one attendance management project using Azure
Custom Vision and Computer Vision.</span>
</p>
<h2 style="background-color: white; box-sizing: border-box; direction: ltr; font-size: 1.875em; font-weight: 500; line-height: 1.25; margin: 0px 0px 0.6em; overflow-wrap: break-word; padding: 0px; text-rendering: optimizelegibility;">
<span style="font-family: Open Sans;">What it does</span>
</h2>
<p style="background-color: white; box-sizing: border-box; direction: ltr; font-size: 16px; line-height: 1.6; margin: 0px 0px 1.25em; overflow-wrap: break-word; padding: 0px; text-rendering: optimizelegibility;">
<span style="font-family: Open Sans;">User or student must show the ID card to the camera and Our Custom Vision
will capture the current ID card validity. Because every company's Id card
design is different. We will come to that later.</span>
</p>
<p style="background-color: white; box-sizing: border-box; direction: ltr; font-size: 16px; line-height: 1.6; margin: 0px 0px 1.25em; overflow-wrap: break-word; padding: 0px; text-rendering: optimizelegibility;">
<span style="font-family: Open Sans;">Once the ID is valid, it will hit the Computer Vision to extract the
texts from the ID card which will be sent to the server using an API call
to record that the student is successfully logged in.</span>
</p>
<h2 style="background-color: white; box-sizing: border-box; direction: ltr; font-size: 1.875em; font-weight: 500; line-height: 1.25; margin: 0px 0px 0.6em; overflow-wrap: break-word; padding: 0px; text-rendering: optimizelegibility;">
<span style="font-family: Open Sans;">How we built it</span>
</h2>
<p style="background-color: white; box-sizing: border-box; direction: ltr; font-size: 16px; line-height: 1.6; margin: 0px 0px 1.25em; overflow-wrap: break-word; padding: 0px; text-rendering: optimizelegibility;">
<span style="font-family: Open Sans;">First, we have created a Custom Vision Project at customvision.ai and
taken 20 to 30 id card photos for the success case and taken 30 unknown ID
card images for the failure case. Then we build a model and tested it
quickly using the Quick Test option. After that, we extracted and
downloaded the ONNX model. Once it downloaded created a new UWP project
and added a reference for UWP IOT support. then we have added the ONNX
model to the Assets folder. Then automatically it generates one model
class with the same name as the ONNX model. Then created the CaptureVideo
class to capture the video. Once the video is captured, the Frame arrived
method will trigger for every frame arrival. Then we passed this frame to
the model to predict the labels.</span>
</p>
<p style="background-color: white; box-sizing: border-box; direction: ltr; font-size: 16px; line-height: 1.6; margin: 0px 0px 1.25em; overflow-wrap: break-word; padding: 0px; text-rendering: optimizelegibility;">
<span style="font-family: Open Sans;">With this, we would be getting a score with labels in which we are just
checking the probability and tag a name if it's correct. If it is correct,
we are also hitting a <span style="box-sizing: border-box; line-height: inherit; overflow-wrap: break-word; text-rendering: optimizelegibility;">Computer Vision API</span> to extract the texts from id card. To ensure correctness we are
matching the pattern, as like my office id details has 3 lines of text
there, which is set as a condition that if we got more than 3 lines
from <span style="box-sizing: border-box; line-height: inherit; overflow-wrap: break-word; text-rendering: optimizelegibility;">RecognizePrintedTextInStreamAsync</span> API, then I know all details are found else I would be showing
invalid ID text with a voiceover "Show correct ID". After this, we would
be hitting an API to store the attendance details and reset the new frame
arriving condition.</span>
</p>
<h2 style="background-color: white; box-sizing: border-box; direction: ltr; font-size: 1.875em; font-weight: 500; line-height: 1.25; margin: 0px 0px 0.6em; overflow-wrap: break-word; padding: 0px; text-rendering: optimizelegibility;">
<span style="font-family: Open Sans;">Why I used two Cognitive Services? we can archive the same thing using
only Custom Vision, Why you used Azure Computer Vision</span>
</h2>
<p style="background-color: white; box-sizing: border-box; direction: ltr; font-size: 16px; line-height: 1.6; margin: 0px 0px 1.25em; overflow-wrap: break-word; padding: 0px; text-rendering: optimizelegibility;">
<span style="font-family: Open Sans;">We can archive, but we can't get all ID cards to build the model. Just 30
to 50 ID cards are used to build a model to find, it the ID is valid or
not. Then used the same camera frame to share into Computer Vision to
Extract text and hit an API. In this way, we can convert the old users and
new users without using RFID and manual attendance.</span>
</p>
<h2 style="background-color: white; box-sizing: border-box; direction: ltr; font-size: 1.875em; font-weight: 500; line-height: 1.25; margin: 0px 0px 0.6em; overflow-wrap: break-word; padding: 0px; text-rendering: optimizelegibility;">
<span style="font-family: Open Sans;">Challenges we ran into</span>
</h2>
<p style="background-color: white; box-sizing: border-box; direction: ltr; font-size: 16px; line-height: 1.6; margin: 0px 0px 1.25em; overflow-wrap: break-word; padding: 0px; text-rendering: optimizelegibility;">
<span style="font-family: Open Sans;">Hard</span>
</p>
<ol style="background-color: white; box-sizing: border-box; direction: ltr; font-size: 16px; line-height: 1.6; list-style-position: outside; margin: 0px 0px 1.25em 1.1em; overflow-wrap: break-word; padding: 0px;">
<li style="box-sizing: border-box; direction: ltr; margin: 0px; overflow-wrap: break-word; padding: 0px;">
<span style="font-family: Open Sans;">The exported ONNX model sometimes not creating a model class.</span>
</li>
<li style="box-sizing: border-box; direction: ltr; margin: 0px; overflow-wrap: break-word; padding: 0px;">
<span style="font-family: Open Sans;">While am creating a model with the "AzureCongitiveService.Prediction"
option, I can't export the ONNX model. Easy</span>
</li>
<li style="box-sizing: border-box; direction: ltr; margin: 0px; overflow-wrap: break-word; padding: 0px;">
<span style="font-family: Open Sans;">Extracting the text using Computer vision is too easy Thanks to
Microsoft and Team because you guys only make this too easy. When using
OCR it is a very hard problem.</span>
</li>
</ol>
<h2 style="background-color: white; box-sizing: border-box; direction: ltr; font-size: 1.875em; font-weight: 500; line-height: 1.25; margin: 0px 0px 0.6em; overflow-wrap: break-word; padding: 0px; text-rendering: optimizelegibility;">
<span style="font-family: Open Sans;">our mistakes</span>
</h2>
<ol style="background-color: white; box-sizing: border-box; direction: ltr; font-size: 16px; line-height: 1.6; list-style-position: outside; margin: 0px 0px 1.25em 1.1em; overflow-wrap: break-word; padding: 0px;">
<li style="box-sizing: border-box; direction: ltr; margin: 0px; overflow-wrap: break-word; padding: 0px;">
<span style="font-family: Open Sans;">In this case, we bought the wrong camera module for Raspberry PI, so it
did not work with Windows IoT Core.</span>
</li>
</ol>
<h2 style="background-color: white; box-sizing: border-box; direction: ltr; font-size: 1.875em; font-weight: 500; line-height: 1.25; margin: 0px 0px 0.6em; overflow-wrap: break-word; padding: 0px; text-rendering: optimizelegibility;">
<span style="font-family: Open Sans;">Accomplishments that we're proud of</span>
</h2>
<ol style="background-color: white; box-sizing: border-box; direction: ltr; font-size: 16px; line-height: 1.6; list-style-position: outside; margin: 0px 0px 1.25em 1.1em; overflow-wrap: break-word; padding: 0px;">
<li style="box-sizing: border-box; direction: ltr; margin: 0px; overflow-wrap: break-word; padding: 0px;">
<span style="font-family: Open Sans;">We have made our first ML Model without Code.</span>
</li>
<li style="box-sizing: border-box; direction: ltr; margin: 0px; overflow-wrap: break-word; padding: 0px;">
<span style="font-family: Open Sans;">Used Azure Custom Vision and Computer Vision.</span>
</li>
<li style="box-sizing: border-box; direction: ltr; margin: 0px; overflow-wrap: break-word; padding: 0px;">
<span style="font-family: Open Sans;">Build and Run First UWP IoT app to raspberry pi with Windows IoT Core
OS.</span>
</li>
<li style="box-sizing: border-box; direction: ltr; margin: 0px; overflow-wrap: break-word; padding: 0px;">
<span style="font-family: Open Sans;">Really Custom Vision is awesome to build use.</span>
</li>
</ol>
<h2 style="background-color: white; box-sizing: border-box; direction: ltr; font-size: 1.875em; font-weight: 500; line-height: 1.25; margin: 0px 0px 0.6em; overflow-wrap: break-word; padding: 0px; text-rendering: optimizelegibility;">
<span style="font-family: Open Sans;">What we learned</span>
</h2>
<ol style="background-color: white; box-sizing: border-box; direction: ltr; font-size: 16px; line-height: 1.6; list-style-position: outside; margin: 0px 0px 1.25em 1.1em; overflow-wrap: break-word; padding: 0px;">
<li style="box-sizing: border-box; direction: ltr; margin: 0px; overflow-wrap: break-word; padding: 0px;">
<span style="font-family: Open Sans;">Build and Run First UWP IoT app to raspberry pi with Windows IoT Core
OS. Learned some concepts in UWP and Windows IoT Core.</span>
</li>
<li style="box-sizing: border-box; direction: ltr; margin: 0px; overflow-wrap: break-word; padding: 0px;">
<span style="font-family: Open Sans;">Using Azure Custom Vision, build and exported our first no code ML
Model and used it in our own project. Sometimes it not generating model
class code, could you please fix it? We had struck nearly 1 week on this
issue.</span>
</li>
<li style="box-sizing: border-box; direction: ltr; margin: 0px; overflow-wrap: break-word; padding: 0px;">
<span style="font-family: Open Sans;">Computer Vision and its services, In this project we have used only
text extraction API.</span>
</li>
</ol>
<h2 style="background-color: white; box-sizing: border-box; direction: ltr; font-size: 1.875em; font-weight: 500; line-height: 1.25; margin: 0px 0px 0.6em; overflow-wrap: break-word; padding: 0px; text-rendering: optimizelegibility;">
<span style="font-family: Open Sans;">What's next for Attendance Management using Azure Cognitive
Services</span>
</h2>
<p style="background-color: white; box-sizing: border-box; direction: ltr; font-size: 16px; line-height: 1.6; margin: 0px 0px 1.25em; overflow-wrap: break-word; padding: 0px; text-rendering: optimizelegibility;">
<span style="font-family: Open Sans;">Going to buy a new camera that supports Windows IoT Core. Then going to
show it in our office and convince them to implement this in real-time for
taking attendance.</span>
</p>
</div>
<div>
<span style="font-family: Open Sans;"><br /></span>
</div>
<div><br /></div>
Logesh Palanihttp://www.blogger.com/profile/11572235997627400122noreply@blogger.com0tag:blogger.com,1999:blog-4259075105540267115.post-65187510274014431642021-04-03T01:41:00.003+05:302022-10-01T16:10:23.744+05:30Publish Blazor WebAssembly with PWA in Azure Static Apps using GitHub Actions Step by Step<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhph8z1mMksaORZM0B0Uw31vwzWF1Dp-TS8M1fylIlQBa2_hyphenhyphenTlbKmhqaPUo7sLY24COnp3LQDLvA3-Y36u2RvYOQMYPDf8NoqWkbIyTF6Gs8r6Esmzd4o4eS8qJVJBx2bRXt_DoB44a53j/s854/Cover.PNG" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="483" data-original-width="854" height="226" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhph8z1mMksaORZM0B0Uw31vwzWF1Dp-TS8M1fylIlQBa2_hyphenhyphenTlbKmhqaPUo7sLY24COnp3LQDLvA3-Y36u2RvYOQMYPDf8NoqWkbIyTF6Gs8r6Esmzd4o4eS8qJVJBx2bRXt_DoB44a53j/w400-h226/Cover.PNG" width="400" /></a></div><br /><h3 style="text-align: left;">Introduction</h3>
<div>
Most people adopt mobile devices for their purchase, reading, watching videos,
movies and etc. Building mobile apps for their customers, it much cost for small business. At the time, Progressive Web Apps comes out with excellent features with different facilities. I do not say, PWA gives 100 percent native performance but gives good performance and different features also and today popular websites main success is PWA.because it works like a mobile app with its own window and you can add like app into your device home screen and performing like native apps. now days almost all the trending applications have PWA support, some of them below.
</div>
<div><br /></div>
<div>
<ol style="text-align: left;">
<li>Outlook</li>
<li>Youtube</li>
<li>Spotify</li>
<li>AliExpress</li>
<li>Flipkart</li>
<li>Twitter</li>
<li>BookMyShow</li>
<li>Pinterest</li>
</ol>
<h4 style="text-align: left;">
The next question in our mind is What is PWA and how it works?
</h4>
</div>
<div><br /></div>
<div>
Progressive Web Apps are websites but they look and feel like apps but you don't need to download them from any store, while you visiting, you have options to add to your home screen. This means users can access all information and capabilities in-app window. It helps more for small businesses
to increase engagement and visits.
</div>
<div><br /></div>
<h4 style="text-align: left;">Great benefits from PWA</h4>
<div>
<ul style="text-align: left;">
<li>Less data uses</li>
<li>Improves performance</li>
<li>Faster loading times</li>
<li>Engaging user experience</li>
<li>Working offline with cached data</li>
<li>Loading instantly</li>
<li>Independent of network speed</li>
<li>Running own window, not a browser window</li>
<li>Add like native apps in device home screen, start menu, dock</li>
<li>
Notifications (Receiving notifications from backend server, even while the
user isn't using the app(offline)
</li>
<li>Automatically updating the app in the background</li>
</ul>
<div>
For most apps push notification is the main success to engage the customers
with new products and updated products.
</div>
</div>
<div><br /></div>
<h4 style="text-align: left;">Some real-world examples are</h4>
<div><br /></div>
<div>
<ul style="text-align: left;">
<li>
If a new product arrived at the store, we will notify the user by sending a
notification to users, people will react to that notification and to visiting our site. The product price reduction will send notifications to uses, then they may purchase.
</li>
<li>
If you're a blogger, some content you published or updated the content, we
will send the notification to the user, then the reader will come.
</li>
</ul>
</div>
<div><br /></div>
<div>
Because, every people including me, not visiting the product or blog regularly. cause of busy, If you send the notification, they might have to
look at your content or site
</div>
<div><br /></div>
<h4 style="text-align: left;">Is notification supports all platforms?</h4>
<div>Yes, it supports almost all the platforms.</div>
<div><br /></div>
<div><br /></div>
<div>
In this demonstration, the Frontend framework is Blazor Web Assembly with PWA
and backend Azure Functions with Cosmos Database with Github Actions for
CI-CD.
</div>
<div>Let start,</div>
<div><br /></div>
<div><b>Create Github Repository</b></div>
<div>
Go to Github
<a href="https://github.com/staticwebdev/vanilla-basic" rel="nofollow" target="_blank">prebuilt vanilla-basic template</a>
for Blazor and Azure Functions and click "use this template to create a new
repository, after redirection, gives your repository name, and click create
repository. After the Repository creations, create a new branch named
development and then take the development branch clone to local and go to the
cloned path, then create a new Empty Solution in the cloned path.
</div>
<div><br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgJxVDXbF1uyKhEaIK452nCMVw1vSBbqI2BrA5LQDYN-KoxrTgE44lhwdRwxuyp64NdQypmyyQXgVAsTof0rp-6I-1LknPYUK0cu3mZ1-E82CFWWF_6QgOxbSM-uD0bSG1a8L6ziPvG400p/s957/vennilla+app.PNG" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="487" data-original-width="957" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgJxVDXbF1uyKhEaIK452nCMVw1vSBbqI2BrA5LQDYN-KoxrTgE44lhwdRwxuyp64NdQypmyyQXgVAsTof0rp-6I-1LknPYUK0cu3mZ1-E82CFWWF_6QgOxbSM-uD0bSG1a8L6ziPvG400p/s320/vennilla+app.PNG" width="320" /></a>
</div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEggJRsIcEpqvb3OQgar-egal4RsTJSciNJGIvrVHYBXBu61N6ZRIWLW-pZKggBBXbKPhn15eHN4sJWLDtNlB8SMeMpZ3myIdGwWu5-za3eX7_LkMGMI4yy2VPjv77goXiGGWC8aBTU1zIju/s819/Github+Repo+Creation+1.PNG" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="626" data-original-width="819" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEggJRsIcEpqvb3OQgar-egal4RsTJSciNJGIvrVHYBXBu61N6ZRIWLW-pZKggBBXbKPhn15eHN4sJWLDtNlB8SMeMpZ3myIdGwWu5-za3eX7_LkMGMI4yy2VPjv77goXiGGWC8aBTU1zIju/s320/Github+Repo+Creation+1.PNG" width="320" /></a>
</div>
<br />
<div class="separator" style="clear: both; text-align: center;"><br /></div>
<br />
<div>
Before creating a project, Open<a href="https://portal.azure.com/#create/hub" rel="nofollow" target="_blank">
Azure Portal</a>
and Create a new Azure Static App and configure it with the GitHub repository
we created before. Click "Create a resource" and select "Static Web App
(Preview)" and select Subscription and Resource Group, then give Name, Region
and by default, Github is selected and log in to your GitHub and select the repository you created before and select the master branch.
</div>
<div><br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgiTgxOeAIrVuLANUiicLkUJNpg4fRJd4oQQwg0dGvZkdgjUU2CVkXVtWgQ0NKHF3Ul5lnm5qWjHjPI5tmoGBhFpQBAnxbzPDKmQUm-QR4GxWjR6KEfjIpAlD_G3M6fYP84P5G-We8l3GXF/s966/1.PNG" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="635" data-original-width="966" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgiTgxOeAIrVuLANUiicLkUJNpg4fRJd4oQQwg0dGvZkdgjUU2CVkXVtWgQ0NKHF3Ul5lnm5qWjHjPI5tmoGBhFpQBAnxbzPDKmQUm-QR4GxWjR6KEfjIpAlD_G3M6fYP84P5G-We8l3GXF/s320/1.PNG" width="320" /></a>
</div>
<div><br /></div>
<div><br /></div>
<div><br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgBhsK2i_TODFKyXv25e2rwG9IL47UdZOvQYU0YjJJblAbssEb5GkpMJcS63bYib2btqEQhn6L1XSf2cZoshLtqzoL27ZRt-p9kTeizBuaOnbKLbsgcjDiWWo6fqZ1bkjirFYg4WcTBEVKZ/s924/2.PNG" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="593" data-original-width="924" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgBhsK2i_TODFKyXv25e2rwG9IL47UdZOvQYU0YjJJblAbssEb5GkpMJcS63bYib2btqEQhn6L1XSf2cZoshLtqzoL27ZRt-p9kTeizBuaOnbKLbsgcjDiWWo6fqZ1bkjirFYg4WcTBEVKZ/s320/2.PNG" width="320" /></a>
</div>
<br />
<div><br /></div>
<div>
After the project creation, you will get a live url of your web app and click
and browse your site.
</div>
<div><br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi-CxwVkwom5-xFonxGluZAVEfem0paA49Ts2eGpeLFsDQEMWu7gdItfYIIKIUFvyfcKnozUJ3-xEQDFNY6DTfB0xbhwFaDcqXcGXkK2XPNdIFXIvFnp1NoMLVa94g1H3h9R4s0uyQkNrd4/s1590/3.PNG" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="693" data-original-width="1590" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi-CxwVkwom5-xFonxGluZAVEfem0paA49Ts2eGpeLFsDQEMWu7gdItfYIIKIUFvyfcKnozUJ3-xEQDFNY6DTfB0xbhwFaDcqXcGXkK2XPNdIFXIvFnp1NoMLVa94g1H3h9R4s0uyQkNrd4/s320/3.PNG" width="320" /></a>
</div>
<div><br /></div>
<div><br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg61LTX8yHS-0YsGi9A4SnMhWpmSwg7hQV9o469yZ2mxl7N6BVM0-klDEb4EAAxh_Wp46XHC5mPbshHjul8G0WUQRe-txvG-sXW3zfZLnUDvq_nvxSLS88VRs1ZgADrnv8hxUHBe9Wz_cSs/s1595/4.PNG" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="829" data-original-width="1595" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg61LTX8yHS-0YsGi9A4SnMhWpmSwg7hQV9o469yZ2mxl7N6BVM0-klDEb4EAAxh_Wp46XHC5mPbshHjul8G0WUQRe-txvG-sXW3zfZLnUDvq_nvxSLS88VRs1ZgADrnv8hxUHBe9Wz_cSs/s320/4.PNG" width="320" /></a>
</div>
<div class="separator" style="clear: both; text-align: center;"><br /></div>
<div class="separator" style="clear: both; text-align: left;">
Now, back to Visual Studio and right-click Solution Explorer and click Add New
Project >> in the new window select Blazor WebAssembly App and check the
PWA check box for the PWA and authentication type None and give name as Client
else you need to configure Actions.
</div>
<div class="separator" style="clear: both; text-align: left;">
In case you forgot check the PWA checkbox you can add later manually.
</div>
<div class="separator" style="clear: both; text-align: left;"><br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj_EWJktJwQkH554tN2KN-1MdAktXpJRMqZGluZ2JBe-22_bK9elcyh3-YEwkCwUnMTP44XaFJ_GzI6KlO2ZIt0vEmTgwH3advasebwV4kSUu8CSdWp1AqdmjwI3Sqr4SnIrEY8OQXc3frW/s1117/6.PNG" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="634" data-original-width="1117" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj_EWJktJwQkH554tN2KN-1MdAktXpJRMqZGluZ2JBe-22_bK9elcyh3-YEwkCwUnMTP44XaFJ_GzI6KlO2ZIt0vEmTgwH3advasebwV4kSUu8CSdWp1AqdmjwI3Sqr4SnIrEY8OQXc3frW/s320/6.PNG" width="320" /></a>
</div>
<br />
<div class="separator" style="clear: both; text-align: left;">
Now, design something in Index.razor page and run your app locally, I have
created cards to show list out products
</div>
<div class="separator" style="clear: both; text-align: left;"><br /></div>
<script src="https://gist.github.com/logeshpalani32/9adb8e06179752247ed5ee8eeb5cffc4.js"></script>
<div class="separator" style="clear: both; text-align: left;"><br /></div>
<div class="separator" style="clear: both; text-align: left;"><br /></div>
<div class="separator" style="clear: both; text-align: left;">
Next, add Azure Functions App in Same Solutions by going, right-click Solution
and Add New Project >> Select Azure Functions and give named API.
</div>
<div><br /></div>
<div><br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjeQO9kBVhRy_Ag38A2qFjgyG9wi21tsk_pftR-qkVAMU0zTySkCitCQSiHy8e4YYAXuCIP4Q1NqpuhnMnozqPCjMB8DIGQdpt7C3jOtLmQ8NttdWYnMvuEIpso7YKTVkTNZzGnsVcs5WD-/s1026/AF.PNG" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="672" data-original-width="1026" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjeQO9kBVhRy_Ag38A2qFjgyG9wi21tsk_pftR-qkVAMU0zTySkCitCQSiHy8e4YYAXuCIP4Q1NqpuhnMnozqPCjMB8DIGQdpt7C3jOtLmQ8NttdWYnMvuEIpso7YKTVkTNZzGnsVcs5WD-/s320/AF.PNG" width="320" /></a>
</div>
<br />
<div>
For a backend we need data, so now return back to Azure Portal and create a
new Azure Cosmos Database. In Azure Portal create a new resource under
Databases select Azure Cosmos Database and give an account name and select API
( Cosmos database supports different APIs for query) and Location, then select
Capacity Mode is Serverless, It's in Preview but loves this preview. Because it
only billing when you use and More details about Serververss in
<a href="https://devblogs.microsoft.com/cosmosdb/serverless-preview/" rel="nofollow" target="_blank">Microsoft </a>dev blog and account type. Now you can click the create button.
</div>
<div><br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEibSxuaud2Y4LaW_-qxZIazpIPVPhrAE7v3O-9ll2faYzurSFX6tzan-Q1ZHlGMZUtd4L8Epq3CfwXlPedXEVWHSOu1Yp6b74lEX8pcjMD35Tdk8xdCYrp0LUo3HGbRQZa_ASUGcE1AE6dE/s1348/a+new+cosmos+database.PNG" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="727" data-original-width="1348" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEibSxuaud2Y4LaW_-qxZIazpIPVPhrAE7v3O-9ll2faYzurSFX6tzan-Q1ZHlGMZUtd4L8Epq3CfwXlPedXEVWHSOu1Yp6b74lEX8pcjMD35Tdk8xdCYrp0LUo3HGbRQZa_ASUGcE1AE6dE/s320/a+new+cosmos+database.PNG" width="320" /></a>
</div>
<br />
<div><br /></div>
<div>
Once the database created, open Storage using Storage Explorer or use<a href="https://azure.microsoft.com/en-in/features/storage-explorer/" rel="nofollow" target="_blank">
Storage Explorer</a> to View and Edit Data. Then create a new database and container.
</div>
<div><br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhaD_lrCvFbN3RVrFSTzX-TMvzRH2qK25dT6LgANN0zbBp138XaqcoJh9aafeNDFjzyQf2YiV_WE1Zi4wRC49vw31oTEn8gNl0g-BcN3gatqb-hG1Z0mNV60-Z8OaJBur_T_7GgewezI1QZ/s627/Container+Creation.PNG" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="627" data-original-width="459" height="320" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhaD_lrCvFbN3RVrFSTzX-TMvzRH2qK25dT6LgANN0zbBp138XaqcoJh9aafeNDFjzyQf2YiV_WE1Zi4wRC49vw31oTEn8gNl0g-BcN3gatqb-hG1Z0mNV60-Z8OaJBur_T_7GgewezI1QZ/s320/Container+Creation.PNG" /></a>
</div>
<br />
<div class="separator" style="clear: both; text-align: center;"><br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjELdD4dsPnt6b9JS6dabynuC5bqLKoLVXZ0o0VQmLHI8TMc_2zPWUVOhb4vuPBTARZXuB4UFkTOkUJRQgKj3IQ-vj5NkaW_trXMDoerPWIexFLEsaOX4cB9cBEoVyieM0P82E8ibU-XlNg/s333/cosmos+db+creation.PNG" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="333" data-original-width="208" height="320" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjELdD4dsPnt6b9JS6dabynuC5bqLKoLVXZ0o0VQmLHI8TMc_2zPWUVOhb4vuPBTARZXuB4UFkTOkUJRQgKj3IQ-vj5NkaW_trXMDoerPWIexFLEsaOX4cB9cBEoVyieM0P82E8ibU-XlNg/s320/cosmos+db+creation.PNG" /></a>
</div>
Now think all the applications have images. So we need to store those images
also, but we choose Cosmos database it is much cost. So we need some blob
storage. Azure Cosmos database provides the
<a href="https://docs.microsoft.com/en-us/azure/cosmos-db/attachments" rel="nofollow" target="_blank">ability to query metadata</a>
and links to blobs stored in the blob storage. For creating Storage
Account>> go-to resources and click Create a resource>> select
Storage Account and give account name then click create. After that Create a new
Container and set the access level Blob, so only you can interact from the web
app else it won't allow you to read. Again, take blob storage Keys for upload
images and create an Images container in Azure Blob Storage.
<div><br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjw_W4lX8oGMmOuK3XyxoAe1qUlfkYYVSnxEhisdhBW-gA4rQvZKfg-dviGvrEU01lJsXeHx5fa8tMfuih2ZlZKiFhrmDGKNohC4Ber3yWqI8Z6Z58IXT6DOmY7ugy7KAT-qMd9vFaTkQIS/s759/Create+Blob.PNG" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="737" data-original-width="759" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjw_W4lX8oGMmOuK3XyxoAe1qUlfkYYVSnxEhisdhBW-gA4rQvZKfg-dviGvrEU01lJsXeHx5fa8tMfuih2ZlZKiFhrmDGKNohC4Ber3yWqI8Z6Z58IXT6DOmY7ugy7KAT-qMd9vFaTkQIS/s320/Create+Blob.PNG" width="320" /></a>
</div>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgqMK4RlBXSZuC6o3v43ox_M5J4OCsNGZjNOV7IIz24Zc8BF1xZ6hIS8hIjQ0ql4iYCYlOdS7F0E4fdQi619iTy6xg12b-sb-lUPkfmVeZwp69oACFL4IUkD2UgN5FHutftD861y6c8VJ0g/s746/new+container.PNG" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="746" data-original-width="444" height="320" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgqMK4RlBXSZuC6o3v43ox_M5J4OCsNGZjNOV7IIz24Zc8BF1xZ6hIS8hIjQ0ql4iYCYlOdS7F0E4fdQi619iTy6xg12b-sb-lUPkfmVeZwp69oACFL4IUkD2UgN5FHutftD861y6c8VJ0g/s320/new+container.PNG" /></a>
</div>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi-BGPJWDwEi0hJWS9WF2a0_vhBadig61bOW1W5hL1O34Qe38iOnfkIoh48sZsHKDFLVgH-l0zpd2xA14ARy4iMZ2W8kTOA2JlXAWwkOWrFxhFGEU87BPzqpZKu-9lifz4YYNYOhVK9BHAP/s1097/new+container+created.PNG" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="162" data-original-width="1097" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi-BGPJWDwEi0hJWS9WF2a0_vhBadig61bOW1W5hL1O34Qe38iOnfkIoh48sZsHKDFLVgH-l0zpd2xA14ARy4iMZ2W8kTOA2JlXAWwkOWrFxhFGEU87BPzqpZKu-9lifz4YYNYOhVK9BHAP/s320/new+container+created.PNG" width="320" /></a>
</div>
<br />
<div>
<br />
<div>
<br />
<div>
Everything setup is done in Azure. Now back to Visual Studio and
Create a new Azure Function for Adding Product. For that go to Solution
Explorer and Right Click the <i>Api </i>project and select add
>> new Function >> in the window select HTTP Trigger named
AddProduct.cs. In this function, we are adding the image first in blob
storage, then we are adding, the Absolute url and Product in Azure Blob
Storage. Below is the code for adding products.
<div>
<div><br /></div>
<script src="https://gist.github.com/logeshpalani32/de30621e3a028387fc38672c2e4bf96c.js"></script>
<div><br /></div>
<div>
Add the Connection strings we kept from the Cosmos database and blob,
add them into your local.setting.json file. While moving to live we
need to store the connection string in the Static Web App
Configuration.
</div>
<div><br /></div>
<script src="https://gist.github.com/logeshpalani32/2bd2cff2cb645874407e2fb6868eedbb.js"></script>
<div>
<br />
<div><br /></div>
<div>
Now, Add another HttpTrigger for getting added products in the database. For that, go to Solution Explorer and right-click Add
>> Azure Functions >> Select HTTP Trigger Set named
GetProducts.The Code is below.
</div>
<div><br /></div>
<div><br /></div>
<script src="https://gist.github.com/logeshpalani32/edfd043f7c9e6abfc59bdfa92c345838.js"></script>
<div><br /></div>
<div>
Now run the application the Api and in console check, all the
function running
</div>
<div><br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhOBe4rBogbdBegz_TpJXcinKea32MmMBJCL7MhRptiLFjScTg4bVlZfLNC-M-HVG614VzBrVU8e-IaP4XYEI5Q8CRGgNUEe0DBwFmdmVtIXM4v8F-RDD0VtEpTPh9nvl5mNDjbttJQTRex/s537/Functions+Running.PNG" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="131" data-original-width="537" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhOBe4rBogbdBegz_TpJXcinKea32MmMBJCL7MhRptiLFjScTg4bVlZfLNC-M-HVG614VzBrVU8e-IaP4XYEI5Q8CRGgNUEe0DBwFmdmVtIXM4v8F-RDD0VtEpTPh9nvl5mNDjbttJQTRex/s320/Functions+Running.PNG" width="320" /></a>
</div>
<br />
<div>
Ok, now our client and APIs are working fine locally, it time to
move into production, already we have configured all the deployment
setup. Now Push the code into the <i>development </i>branch and create a new Pull Request. After GitHub automatically runs the test
automatically, If the test passed it notify the admin or maintainer
to merge via mail and GitHub notification.
</div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg7Dijgs380S_Yk8GwJ2PV_T3QE-EUacCi5hE6CUH6UCjYvBIbdkADfUYVd408KtLUg-dv9wVQ1OfXU2Z5tUfYtUgAhqfJi_XeJGXjIzwO3QvuZncpruVl6TPwXY7FCPHwlxjeEhYqz1UaU/s968/new+pull+request.PNG" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="552" data-original-width="968" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg7Dijgs380S_Yk8GwJ2PV_T3QE-EUacCi5hE6CUH6UCjYvBIbdkADfUYVd408KtLUg-dv9wVQ1OfXU2Z5tUfYtUgAhqfJi_XeJGXjIzwO3QvuZncpruVl6TPwXY7FCPHwlxjeEhYqz1UaU/s320/new+pull+request.PNG" width="320" /></a>
</div>
<br />
<div><br /></div>
<div>
After you click to merge the request it automatically shows the stage version of your live application with new changes
</div>
<div><br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgGv80RwFpurHBHKYJ7UySejRkoOdEGTvYmn10v2q4wQfD7wdATfN3c0TMqnscaIU2bGhLBfkCuAkB4qZwm_eoF8c5SGQGL_Bb2IWm6Edt2osss93smFG7LDIkdjTuSy6wPSPxKxYA5ok7F/s968/new+pull+request.PNG" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="552" data-original-width="968" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgGv80RwFpurHBHKYJ7UySejRkoOdEGTvYmn10v2q4wQfD7wdATfN3c0TMqnscaIU2bGhLBfkCuAkB4qZwm_eoF8c5SGQGL_Bb2IWm6Edt2osss93smFG7LDIkdjTuSy6wPSPxKxYA5ok7F/s320/new+pull+request.PNG" width="320" /></a>
</div>
After the changes in the main branch, Github actions start building
and deploying into Azure automatically
</div>
<div><br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgkBQdJMmjDCTr4x8KbsnVlOa6b62x00MmOZQshLV1CWEmIClVYjcut8cWZ1lVHQxDDJ6AwdSU9S_hLS6IelFrA56Cz4sLr6FEbYj-qOe6vOK_R5nEopQ8rOaursdYl28v7CE27w6WLnL29/s977/Action+Starts.PNG" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="349" data-original-width="977" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgkBQdJMmjDCTr4x8KbsnVlOa6b62x00MmOZQshLV1CWEmIClVYjcut8cWZ1lVHQxDDJ6AwdSU9S_hLS6IelFrA56Cz4sLr6FEbYj-qOe6vOK_R5nEopQ8rOaursdYl28v7CE27w6WLnL29/s320/Action+Starts.PNG" width="320" /></a>
</div>
<br />
<div>
<br />
<div>
The default action automatically creates while you creating Static
Web App. For deployment, you need a deployment key from Azure and storage the Key in Action secrets Under settings. You can get the from the Static Web App home page.
</div>
<div><br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhxRc5erH4B7cJmM-FsAwOjfbMz0LR9tOSBPSG0ORpjh847DX9-GMvMaaZOvIoC0n4hG20-66sito3EX8Q9PTsMSsHnZZbO_jWZvXRdFKLjU1W4dLzHBlFJzLs_ef9FQPQIrw52Ddbzco-q/s1300/Github+Screats.PNG" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="629" data-original-width="1300" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhxRc5erH4B7cJmM-FsAwOjfbMz0LR9tOSBPSG0ORpjh847DX9-GMvMaaZOvIoC0n4hG20-66sito3EX8Q9PTsMSsHnZZbO_jWZvXRdFKLjU1W4dLzHBlFJzLs_ef9FQPQIrw52Ddbzco-q/s320/Github+Screats.PNG" width="320" /></a>
</div>
<br />
<div><br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiSXWu-MA9LBVW8hOHOVhFUxdqpiq4qIBc1jjbBFShe1S4233AxSurqY16a7qNLXEzNyE2vkLUhLTry-8k2P5pKvlNaRcLmDhqsRdNaoulwOdpUCEQl9ibWcDMzCDYyhNuPiCP8q2Az1h59/s1373/Azure+Deployment+Token.PNG" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="310" data-original-width="1373" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiSXWu-MA9LBVW8hOHOVhFUxdqpiq4qIBc1jjbBFShe1S4233AxSurqY16a7qNLXEzNyE2vkLUhLTry-8k2P5pKvlNaRcLmDhqsRdNaoulwOdpUCEQl9ibWcDMzCDYyhNuPiCP8q2Az1h59/s320/Azure+Deployment+Token.PNG" width="320" /></a>
</div>
<br />
<div>
It takes a few min to build and deploy in life, The sites down in
less than min.
</div>
<div><br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjylEYs4hnGBi6zXgYuWPvY1MjxB1DvblImUktV6Co10eE7nMxig9xj7SxIjcDijSTXp-mtPr0wssG_yPp8VJ11EeC4UADKKURqlZmP1TvXM_ZA_RufSMhkuFc2Xk69hFsNSQV1agp5FEYc/s1544/actions+finished+successfully.PNG" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="478" data-original-width="1544" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjylEYs4hnGBi6zXgYuWPvY1MjxB1DvblImUktV6Co10eE7nMxig9xj7SxIjcDijSTXp-mtPr0wssG_yPp8VJ11EeC4UADKKURqlZmP1TvXM_ZA_RufSMhkuFc2Xk69hFsNSQV1agp5FEYc/s320/actions+finished+successfully.PNG" width="320" /></a>
</div>
<br />
<div>Now check app is live below</div>
<div><br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiXSuTbTznMXdANR1oMLrQCd0AaPGZM29nyZMX-gK8sA78GDlFT37xJ78J0RCEI2kkBckXEVaYkIdw5xjtsu-gdBpJUrj8jog5-LIro-ToLLuu1atgZrOVULMeMboMaD5ZwJMW-NFIM4kJM/s1581/site+in+live.PNG" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="721" data-original-width="1581" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiXSuTbTznMXdANR1oMLrQCd0AaPGZM29nyZMX-gK8sA78GDlFT37xJ78J0RCEI2kkBckXEVaYkIdw5xjtsu-gdBpJUrj8jog5-LIro-ToLLuu1atgZrOVULMeMboMaD5ZwJMW-NFIM4kJM/s320/site+in+live.PNG" width="320" /></a>
</div>
<br />
<div>
In Azure Function we have the option to see the running Azure
Function in Azure Portal.
</div>
<div><br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjEvuleeBqOoAoxz0AaAPybz3yCECChzAoJmhdF-vx1lDV9zU4pJCin7UQQ2eb7qgoOT260CU0IG9vVBazqK_S6Yq1U3PCMDE2ChY-vipX-uIVHsslgJXRexR9WpuMgH9Bf8h0SrDUnNy8h/s804/Running+AF.PNG" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="676" data-original-width="804" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjEvuleeBqOoAoxz0AaAPybz3yCECChzAoJmhdF-vx1lDV9zU4pJCin7UQQ2eb7qgoOT260CU0IG9vVBazqK_S6Yq1U3PCMDE2ChY-vipX-uIVHsslgJXRexR9WpuMgH9Bf8h0SrDUnNy8h/s320/Running+AF.PNG" width="320" /></a>
</div>
<br />
<div><br /></div>
<div>
Now back to Github and open .github folder >>
workflows>>and click .yml file. This is the configuration or pipeline configuration between the resource group and Azure Static Web Site. If you created the project name as a
different name, update the configurations in app_location.
</div>
<div><br /></div>
<script src="https://gist.github.com/logeshpalani32/b6b8d3d28abc79aff09e79573aa3a4bd.js"></script>
<div><br /></div>
<div><br /></div>
<div>we added a Database connection string in the local setting file, Now we need to same or new database connection string in the Static Web App Configuration. For that, open Azure Portal>>go to static web apps >> click configuration and new key values and click add. The key name must give what you have given locally, else Azure Function not able to contact the database</div><div><br /></div><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg5kvkoCchVxXE16Jh8wkOcgFh__cpPDuhbIhEHwOSUQo5uigJVj58jwBc6Idt-qaB1uOnbB-43nRfmMpUwdU-AHhtl1fkD5Mf0Bnry2_4w34vlFhjVT24l6Gh3owKaVVFh54t-oNFDfR5S/s1409/Configure+ConnectionString+in+live.PNG" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="504" data-original-width="1409" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg5kvkoCchVxXE16Jh8wkOcgFh__cpPDuhbIhEHwOSUQo5uigJVj58jwBc6Idt-qaB1uOnbB-43nRfmMpUwdU-AHhtl1fkD5Mf0Bnry2_4w34vlFhjVT24l6Gh3owKaVVFh54t-oNFDfR5S/s320/Configure+ConnectionString+in+live.PNG" width="320" /></a></div><br /><div><br /></div><div><br /></div><div>
We have done all the development, now check app and APIs are working fine. The first check client app is working running and it running or not. Yeah, it running it also supports PWA and installing into local also.</div><div><br /></div><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgGg7wwxg7vLwsSAvlnUFOH0BoPzvFe52mma87v1NQhfn9mYkrUl4N5jFIyypAAREv4Ws_q__u0udwjmK97tqcSCfLRkhdKgdhehmH4Ko1XZYvelRQGxmIMTeUI9fpWD5ieBjP_Kkahtk7O/s427/Screenshot+%252814%2529.png" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="407" data-original-width="427" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgGg7wwxg7vLwsSAvlnUFOH0BoPzvFe52mma87v1NQhfn9mYkrUl4N5jFIyypAAREv4Ws_q__u0udwjmK97tqcSCfLRkhdKgdhehmH4Ko1XZYvelRQGxmIMTeUI9fpWD5ieBjP_Kkahtk7O/s320/Screenshot+%252814%2529.png" width="320" /></a></div><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjP6VQiwpywzPvqpjrr5AJkDkxthHGqUxpFKV-zlEBq7CjPqSc-4qv1OTLx238l3LtnPya0z_FoFwsaMOYBuyEVoOvOq0DqakVCAjHmMj4O8s8NtdqwQ1l20qunenfhbXGx_7vkmVafp9T2/s219/service+worker.PNG" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="138" data-original-width="219" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjP6VQiwpywzPvqpjrr5AJkDkxthHGqUxpFKV-zlEBq7CjPqSc-4qv1OTLx238l3LtnPya0z_FoFwsaMOYBuyEVoOvOq0DqakVCAjHmMj4O8s8NtdqwQ1l20qunenfhbXGx_7vkmVafp9T2/s0/service+worker.PNG" /></a></div><br /><div class="separator" style="clear: both; text-align: center;"><br /></div><br /><div><br /></div><div>Add new product using AddProduct Function App to test it working. it works perfectly, data has been added in Cosmos Database and Blob.</div><div><br /></div><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiOH6MADeNsOLxNEv9eWR00UlPxMzGP6E3tgLwx1sZglPloVdcY8p1pO_zYYqWihKRVorTSJobrZfwl1CLzKch1UJ54qOn-kbhz_kcoqoNk2eL7-cPwS0V2kUmcWCsfdZu5AWdZcvGu1s3a/s1094/blob+storage.PNG" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="240" data-original-width="1094" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiOH6MADeNsOLxNEv9eWR00UlPxMzGP6E3tgLwx1sZglPloVdcY8p1pO_zYYqWihKRVorTSJobrZfwl1CLzKch1UJ54qOn-kbhz_kcoqoNk2eL7-cPwS0V2kUmcWCsfdZu5AWdZcvGu1s3a/s320/blob+storage.PNG" width="320" /></a></div><br /><div><br /></div><div>Next check our live APIs are working in Postman, because, we've set GetProduct API to also support only Post Request.</div><div><br /></div><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjMx4zBPNZX4Ga6OlOXbrOEpXMP8wNhZAk2HvvuUpXGo6UhQRa21tI_6AU49B6zvpbLHM_TqvdAUOkkWZMShu3sBfXgNOwiJOZj2I9n_vWE6z4HIeJTLbflowqEx4DJJhD1ESxiXz2PoOaD/s1449/Get+Products+Live.PNG" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="880" data-original-width="1449" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjMx4zBPNZX4Ga6OlOXbrOEpXMP8wNhZAk2HvvuUpXGo6UhQRa21tI_6AU49B6zvpbLHM_TqvdAUOkkWZMShu3sBfXgNOwiJOZj2I9n_vWE6z4HIeJTLbflowqEx4DJJhD1ESxiXz2PoOaD/s320/Get+Products+Live.PNG" width="320" /></a></div><br /><div><br /></div><div><br /></div><div>We did complete the web application, now we can see what other possibilities there.</div><div><br /></div>
<h4 style="text-align: left;">Notification support</h4><div>We can send a notification to the users who all subscribed. you must configure some settings in your Client and Server for saving the user tokens and for asking to subscribe notification also we need some keys to send notification from the server-side. For sending PWA notifications we need VAPID keys, for creating the VAPID key, you different online tools, and NPM packages. After the user subscribed we get some user keys from the user end, we need to store those into the Database to send notifications.</div><div><br /></div><h4 style="text-align: left;">Machine Learning / AI</h4><div>Nowadays, all the applications having Machine learning support in the background to give a customized experience for the user example Instagram. The Cosmos database completely supports all the advanced analytics and complete Azure Machin Learning Supports and Different Machine Learning Tools Supports also, like Apache Spark and more.</div><div><br /></div><h4 style="text-align: left;">Security and Authentication</h4><div>you can use Azure AD and AuthO authentication also in your application with Azure Functions. Instead of allowing sensitive data anonymously, you can configure Authentications in your application with Azure Functions and store the auth document in Cosmos DB.</div><div><br /></div><div>In Azure default advisor there, to Inform you like the app is how much site is secured and Which area can reduce the cost and other options also.</div><div><br /></div>
<h4 style="text-align: left;">Design of Web App</h4>
<div>You must consider the Web App resolutions for mobile apps also because we going to give PWA apps also, If mobile design not good, users won't use your PWA app. On the outside different sizes of Screen Resolutions and Screen sizes there. The designer must concentrate on the design.</div><h4 style="text-align: left;"><br />Analytics / Insights</h4>
<div>For Static Web App, you can add exiting App Insights App and create new App Insights and configure with it. so only you can easily see how many users are on the site, The App Insights provide a lot of analytics options. </div>
<div><br /></div><h4 style="text-align: left;">Cache</h4><div><br /></div><div> For the cache to improve the site performance and tracking user for advanced analytics, we can easily integrate Redis Cache into Web Application. Azure itself has the option to create a Redis cache database and configure it with your existing Web application.</div></div></div></div></div></div><div><br /></div><div>Source Code - <a href="https://github.com/logeshpalani30/AzureStaticWebAppDemo" rel="nofollow" target="_blank">GitHub</a></div>
Logesh Palanihttp://www.blogger.com/profile/11572235997627400122noreply@blogger.com1tag:blogger.com,1999:blog-4259075105540267115.post-58167209676504059612020-07-21T23:07:00.002+05:302021-07-25T15:32:46.536+05:30Xamarin Forms PayUMoney Integration <br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiaWS-oUziCx6XTVrsFSStBL9SjHYg12EXNjNLsT-JfMvy5c9ZiQcmATksaS-xKgHrBN9ZhYswYKKbR6EGoy787r6LAu82r70EL6yXLst8dXNhTf6BMMg6HaSBPyybCH_ItMyh1hAjiI301/s2048/Xamarin+Forms+PayUMoney+Integration.png" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="1152" data-original-width="2048" height="351" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiaWS-oUziCx6XTVrsFSStBL9SjHYg12EXNjNLsT-JfMvy5c9ZiQcmATksaS-xKgHrBN9ZhYswYKKbR6EGoy787r6LAu82r70EL6yXLst8dXNhTf6BMMg6HaSBPyybCH_ItMyh1hAjiI301/w625-h351/Xamarin+Forms+PayUMoney+Integration.png" width="625" /></a>
</div>
<div class="separator" style="clear: both; text-align: left;"><br /></div>
<div class="separator" style="clear: both; text-align: left;"><br /></div>
<h3 style="clear: both; text-align: left;">
<font face="verdana">Introduction</font>
</h3>
<div>
<font face="verdana"><span> Today, we are going to see how to integrate the PayUMoney
Payment Gateway with Xamarin.Forms Application. I did this payment gateway
using WebView and custom renderer, am not using any PayUMoney SDK. In
Xamarin Forms WebView default HTTP method is GET. But here I write code
for WebView renderer and changing the HTTP method GET into POST and
passing an encoded string from shared to platform-specific and added this
string as the Body of the POST method. My experience if parsing the Native
PayU SKD to Xamarin Library, it has difficult and there is no support from
the PayUMoney team. I think the story is enough. I don't like to tell a
lot of stories, let go for action in code.</span><br /></font>
</div>
<div>
<font face="verdana"><span><br /></span></font>
</div>
<div>
<font face="verdana"><b>Let's Go</b></font>
</div>
<div>
<font face="verdana"> Open Visual Studio and Create a new Empty Xamarin Forms
Project. For creating an app, go to Visual Studio >> File >>
Project >> Xamarin Forms app and click create a new project. In
the dialog window, give the app name, solution name, location and create
it.<br /></font>
</div>
<div>
<font face="verdana"><br /></font>
</div>
<div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj6R28WmNS84a6cxDW2onefM46ABBrEQr1g6ZTHs00EB1YuH0ykIlTRq3pXVeY0td25AnWRSA3bk483cjv-EA_ZYzsip_bjfYSkpR1iN6-6wO9MGfi2Ml19bKOaPgsh5DtJxIH0r0be_8h-/s709/Screenshot+2020-07-21+at+9.51.42+PM.png" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="509" data-original-width="709" height="360" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj6R28WmNS84a6cxDW2onefM46ABBrEQr1g6ZTHs00EB1YuH0ykIlTRq3pXVeY0td25AnWRSA3bk483cjv-EA_ZYzsip_bjfYSkpR1iN6-6wO9MGfi2Ml19bKOaPgsh5DtJxIH0r0be_8h-/w500-h360/Screenshot+2020-07-21+at+9.51.42+PM.png" width="500" /></a>
</div>
<font face="verdana"><br /></font>
</div>
<div>
<font face="verdana"><br /></font>
</div>
<div>
<font face="verdana"><span> After the project creation, create a new class named as
PayWebView and it should be inherited from WebView and create new
properties PostData and url, you code must be like below. </span><br /></font>
</div>
<div>
<font face="verdana"><span><br /></span></font>
</div>
<br />
<script src="https://gist.github.com/logeshpalani32/f87fc6198a4ae54559c423abe7a7b3d9.js"></script>
<br />
<div>
<font face="verdana"><span><br /></span></font>
</div>
<div>
<font face="verdana"><span><br /></span></font>
</div>
<div>
<font face="verdana"><span>Now design UI, open MianPage.xaml and add the namespace of PayWebView
class, we created in the last step and add PayWebView control in UI. This
page code is given below.</span></font>
</div>
<br />
<script src="https://gist.github.com/logeshpalani32/934d5b864de0f6dd6bfb619832d01dd2.js"></script>
<br />
<div>
<font face="verdana"><span><br /></span></font>
</div>
<div>
<font face="verdana"><span>Next, open MainPage.xaml.cs file and create multiple variables like
amount, mail id, product info, name, success url and failure url. If
payment is success it will redirect to success url or else goes to
failure url, then only you will know the payment status in WebView. The
code is given here.</span></font>
</div>
<br />
<script src="https://gist.github.com/logeshpalani32/399adf431e3569cc5c5978b96cf67a2c.js"></script>
<br />
<div>
<font face="verdana"><span><br /></span></font>
</div>
<div>
<font face="verdana"><span>It's time to go for platform-specific, just expand the android project
and create new class named as PayWebView class. Get the control and set
the post url and postData from the PayWebView variables we created in
first. This code is given below.</span></font>
</div>
<br />
<script src="https://gist.github.com/logeshpalani32/8777f3ccff5e4fb3b76ef6858f9e22ec.js"></script>
<br />
<div>
<font face="verdana"><span><br /></span></font>
</div>
<div>
<font face="verdana"><span>Next, expand iOS project, and get the Native control and create
NSMutualUrlRequest and set the url and data and Http method is POST, then
call LoadRequest method.</span></font>
</div>
<br />
<script src="https://gist.github.com/logeshpalani32/9c4fe610ce14c06135ec613b15c21498.js"></script>
<br />
<div>
<font face="verdana"><span><br /></span></font>
</div>
<div>
<font face="verdana"><span><br /></span></font>
</div>
<div>
<font face="verdana"><span>Finally, we have done all the things, now rebuild and run the
application, you will get output like below.</span></font>
</div>
<br />
<iframe allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen="" frameborder="0" height="315" src="https://www.youtube.com/embed/NMp1QcPMoGQ" width="560"></iframe>
<div>
<font face="verdana"><span><br /></span></font>
</div>
<div>
<font face="verdana"><span><br /></span></font>
</div>
<div>
<font face="verdana">Source Code in
<a href="https://github.com/logeshpalani32/Xamarin.Forms-Samples/tree/master/XFPayUMoney" rel="nofollow" target="_blank">GitHub</a></font>
</div>
<div><br /></div><div>
</div>
<div>
<font face="verdana"><b>Conclusion</b></font>
</div>
<div>
<font face="verdana">I hope you guys, this article will helps you, thanks for reading.</font>
</div>
<div>
<font face="verdana"><br /></font>
</div>
<div><br /></div>
Logesh Palanihttp://www.blogger.com/profile/11572235997627400122noreply@blogger.com4tag:blogger.com,1999:blog-4259075105540267115.post-76255846528092724062020-07-14T23:04:00.010+05:302021-07-25T15:35:50.463+05:30Xamarin iOS PayUMoney Payment Integration #PayUMoney<h3 style="background-attachment: initial; background-clip: initial; background-image: initial; background-origin: initial; background-position: initial; background-repeat: initial; background-size: initial; color: #0e101a; margin-bottom: 0pt; margin-top: 0pt;">
<p style="background-attachment: initial; background-clip: initial; background-image: initial; background-origin: initial; background-position: initial; background-repeat: initial; background-size: initial; margin-bottom: 0pt; margin-top: 0pt;"></p>
<div class="separator" style="clear: both; text-align: center;"><br /></div>
<br />
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto;">
<tbody>
<tr>
<td style="text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhtko02i5eSG385jSXz_Ocqh5I-2GKe0dbJPito7ML9o9ECzG5bZ0_DaxP6Sf8aVpxtp0hn2f79NmY0_2QJTjwmi91xdbUGQks-aCGxZIVKU7MHY-F3Dqj0RmXiXXxP3qDtxaO-4XHPVYXS/s945/Copy+of+Pink+Blue+Gradient+Quinceanera+Facebook+Event+Cover+Photo.png" style="margin-left: auto; margin-right: auto;"><img border="0" data-original-height="531" data-original-width="945" height="351" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhtko02i5eSG385jSXz_Ocqh5I-2GKe0dbJPito7ML9o9ECzG5bZ0_DaxP6Sf8aVpxtp0hn2f79NmY0_2QJTjwmi91xdbUGQks-aCGxZIVKU7MHY-F3Dqj0RmXiXXxP3qDtxaO-4XHPVYXS/w625-h351/Copy+of+Pink+Blue+Gradient+Quinceanera+Facebook+Event+Cover+Photo.png" width="625" /></a>
</td>
</tr>
<tr>
<td class="tr-caption" style="text-align: center;"><br /></td>
</tr>
</tbody>
</table>
<span data-preserver-spaces="true" style="background-attachment: initial; background-clip: initial; background-image: initial; background-origin: initial; background-position: initial; background-repeat: initial; background-size: initial; margin-bottom: 0pt; margin-top: 0pt;"><br /></span>
<p></p>
<p style="background-attachment: initial; background-clip: initial; background-image: initial; background-origin: initial; background-position: initial; background-repeat: initial; background-size: initial; margin-bottom: 0pt; margin-top: 0pt;">
<span data-preserver-spaces="true" style="background-attachment: initial; background-clip: initial; background-image: initial; background-origin: initial; background-position: initial; background-repeat: initial; background-size: initial; margin-bottom: 0pt; margin-top: 0pt;"><br /></span>
</p>
<p style="background-attachment: initial; background-clip: initial; background-image: initial; background-origin: initial; background-position: initial; background-repeat: initial; background-size: initial; margin-bottom: 0pt; margin-top: 0pt;">
<span data-preserver-spaces="true" style="background-attachment: initial; background-clip: initial; background-image: initial; background-origin: initial; background-position: initial; background-repeat: initial; background-size: initial; margin-bottom: 0pt; margin-top: 0pt;">Introduction </span>
</p>
<p style="background-attachment: initial; background-clip: initial; background-image: initial; background-origin: initial; background-position: initial; background-repeat: initial; background-size: initial; margin-bottom: 0pt; margin-top: 0pt;">
<span data-preserver-spaces="true" style="background-attachment: initial; background-clip: initial; background-image: initial; background-origin: initial; background-position: initial; background-repeat: initial; background-size: initial; margin-bottom: 0pt; margin-top: 0pt;"><br /></span>
</p>
<p style="background-attachment: initial; background-clip: initial; background-image: initial; background-origin: initial; background-position: initial; background-repeat: initial; background-size: initial; margin-bottom: 0pt; margin-top: 0pt;">
<span data-preserver-spaces="true" style="background-attachment: initial; background-clip: initial; background-image: initial; background-origin: initial; background-position: initial; background-repeat: initial; background-size: initial; font-weight: normal; margin-bottom: 0pt; margin-top: 0pt;">This article we are going to see, how to implement PayUMoney payment
integration in Xamarin iOS. Before we start, I’ll do this payment gateway
through WebView, I’ve tried to bind native library to Xamarin iOS Library,
but my bad luck, it was a failure, so I have moved into WebView.
</span>
</p>
<p style="background-attachment: initial; background-clip: initial; background-image: initial; background-origin: initial; background-position: initial; background-repeat: initial; background-size: initial; margin-bottom: 0pt; margin-top: 0pt;">
<br />
</p>
<p style="background-attachment: initial; background-clip: initial; background-image: initial; background-origin: initial; background-position: initial; background-repeat: initial; background-size: initial; margin-bottom: 0pt; margin-top: 0pt;">
<span data-preserver-spaces="true" style="background-attachment: initial; background-clip: initial; background-image: initial; background-origin: initial; background-position: initial; background-repeat: initial; background-size: initial; margin-bottom: 0pt; margin-top: 0pt;">Prerequisites </span>
</p>
<p style="background-attachment: initial; background-clip: initial; background-image: initial; background-origin: initial; background-position: initial; background-repeat: initial; background-size: initial; margin-bottom: 0pt; margin-top: 0pt;">
<span data-preserver-spaces="true" style="background-attachment: initial; background-clip: initial; background-image: initial; background-origin: initial; background-position: initial; background-repeat: initial; background-size: initial; font-weight: normal; margin-bottom: 0pt; margin-top: 0pt;"><br /></span>
</p>
<ul style="background-attachment: initial; background-clip: initial; background-image: initial; background-origin: initial; background-position: initial; background-repeat: initial; background-size: initial; margin-bottom: 0pt; margin-top: 0pt;">
<li style="background-attachment: initial; background-clip: initial; background-image: initial; background-origin: initial; background-position: initial; background-repeat: initial; background-size: initial; list-style-type: disc; margin-bottom: 0pt; margin-top: 0pt;">
<span data-preserver-spaces="true" style="background-attachment: initial; background-clip: initial; background-image: initial; background-origin: initial; background-position: initial; background-repeat: initial; background-size: initial; font-weight: normal; margin-bottom: 0pt; margin-top: 0pt;">Visual Studio or Visual Studio for Mac </span>
</li>
<li style="background-attachment: initial; background-clip: initial; background-image: initial; background-origin: initial; background-position: initial; background-repeat: initial; background-size: initial; list-style-type: disc; margin-bottom: 0pt; margin-top: 0pt;">
<span data-preserver-spaces="true" style="background-attachment: initial; background-clip: initial; background-image: initial; background-origin: initial; background-position: initial; background-repeat: initial; background-size: initial; font-weight: normal; margin-bottom: 0pt; margin-top: 0pt;">PayUMoney Production or Test Key and Salt </span>
</li>
</ul>
<p style="background-attachment: initial; background-clip: initial; background-image: initial; background-origin: initial; background-position: initial; background-repeat: initial; background-size: initial; margin-bottom: 0pt; margin-top: 0pt;">
<span data-preserver-spaces="true" style="background-attachment: initial; background-clip: initial; background-image: initial; background-origin: initial; background-position: initial; background-repeat: initial; background-size: initial; font-weight: normal; margin-bottom: 0pt; margin-top: 0pt;"><br /></span>
</p>
<p style="background-attachment: initial; background-clip: initial; background-image: initial; background-origin: initial; background-position: initial; background-repeat: initial; background-size: initial; margin-bottom: 0pt; margin-top: 0pt;">
<span data-preserver-spaces="true" style="background-attachment: initial; background-clip: initial; background-image: initial; background-origin: initial; background-position: initial; background-repeat: initial; background-size: initial; margin-bottom: 0pt; margin-top: 0pt;">Let’s Start </span>
</p>
<p style="background-attachment: initial; background-clip: initial; background-image: initial; background-origin: initial; background-position: initial; background-repeat: initial; background-size: initial; margin-bottom: 0pt; margin-top: 0pt;">
<span data-preserver-spaces="true" style="background-attachment: initial; background-clip: initial; background-image: initial; background-origin: initial; background-position: initial; background-repeat: initial; background-size: initial; font-weight: normal; margin-bottom: 0pt; margin-top: 0pt;"><br /></span>
</p>
<p style="background-attachment: initial; background-clip: initial; background-image: initial; background-origin: initial; background-position: initial; background-repeat: initial; background-size: initial; margin-bottom: 0pt; margin-top: 0pt;">
<span data-preserver-spaces="true" style="background-attachment: initial; background-clip: initial; background-image: initial; background-origin: initial; background-position: initial; background-repeat: initial; background-size: initial; margin-bottom: 0pt; margin-top: 0pt;">Step 1: </span>
</p>
<p style="background-attachment: initial; background-clip: initial; background-image: initial; background-origin: initial; background-position: initial; background-repeat: initial; background-size: initial; margin-bottom: 0pt; margin-top: 0pt;">
<span data-preserver-spaces="true" style="background-attachment: initial; background-clip: initial; background-image: initial; background-origin: initial; background-position: initial; background-repeat: initial; background-size: initial; font-weight: normal; margin-bottom: 0pt; margin-top: 0pt;"><br /></span>
</p>
<p style="background-attachment: initial; background-clip: initial; background-image: initial; background-origin: initial; background-position: initial; background-repeat: initial; background-size: initial; margin-bottom: 0pt; margin-top: 0pt;">
<span data-preserver-spaces="true" style="background-attachment: initial; background-clip: initial; background-image: initial; background-origin: initial; background-position: initial; background-repeat: initial; background-size: initial; font-weight: normal; margin-bottom: 0pt; margin-top: 0pt;">Create a new Xamarin iOS project in Visual Studio, for this sample I used
Visual Studio for Mac. For that, Open Visual Studio for Mac and click New,
in the left plane select App under iOS section and then click Create. In
the new dialog window, give the project name, solution name, and location,
then click Create. </span>
</p>
<p style="background-attachment: initial; background-clip: initial; background-image: initial; background-origin: initial; background-position: initial; background-repeat: initial; background-size: initial; margin-bottom: 0pt; margin-top: 0pt;">
<span data-preserver-spaces="true" style="background-attachment: initial; background-clip: initial; background-image: initial; background-origin: initial; background-position: initial; background-repeat: initial; background-size: initial; font-weight: normal; margin-bottom: 0pt; margin-top: 0pt;"><br /></span>
</p>
<p style="background-attachment: initial; background-clip: initial; background-image: initial; background-origin: initial; background-position: initial; background-repeat: initial; background-size: initial; margin-bottom: 0pt; margin-top: 0pt;">
<span data-preserver-spaces="true" style="background-attachment: initial; background-clip: initial; background-image: initial; background-origin: initial; background-position: initial; background-repeat: initial; background-size: initial; font-weight: normal; margin-bottom: 0pt; margin-top: 0pt;"></span>
</p>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgZOU5qRLQHYHFld5aU2iJTiVeExjpJ-Xi1PnALaattawxG-GS4jRfXMAKY3Cv_2NZSWo5lvf0b_YPQDAYICc58mMkDmCXf_KRa5Fb0HIJOEnEYtquEbCQsF3wLgi365cB0SxSEZVu5hXYX/s709/Screenshot+2020-07-14+at+10.45.36+PM.png" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="513" data-original-width="709" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgZOU5qRLQHYHFld5aU2iJTiVeExjpJ-Xi1PnALaattawxG-GS4jRfXMAKY3Cv_2NZSWo5lvf0b_YPQDAYICc58mMkDmCXf_KRa5Fb0HIJOEnEYtquEbCQsF3wLgi365cB0SxSEZVu5hXYX/s320/Screenshot+2020-07-14+at+10.45.36+PM.png" width="320" /></a>
</div>
<span style="font-weight: normal;"> </span>
<p></p>
<p style="background-attachment: initial; background-clip: initial; background-image: initial; background-origin: initial; background-position: initial; background-repeat: initial; background-size: initial; margin-bottom: 0pt; margin-top: 0pt;">
<span style="font-weight: normal;"><br /></span>
</p>
<p style="background-attachment: initial; background-clip: initial; background-image: initial; background-origin: initial; background-position: initial; background-repeat: initial; background-size: initial; margin-bottom: 0pt; margin-top: 0pt;">
<span data-preserver-spaces="true" style="background-attachment: initial; background-clip: initial; background-image: initial; background-origin: initial; background-position: initial; background-repeat: initial; background-size: initial; margin-bottom: 0pt; margin-top: 0pt;">Step 2 :</span>
</p>
<p style="background-attachment: initial; background-clip: initial; background-image: initial; background-origin: initial; background-position: initial; background-repeat: initial; background-size: initial; margin-bottom: 0pt; margin-top: 0pt;">
<span data-preserver-spaces="true" style="background-attachment: initial; background-clip: initial; background-image: initial; background-origin: initial; background-position: initial; background-repeat: initial; background-size: initial; font-weight: normal; margin-bottom: 0pt; margin-top: 0pt;"><br /></span>
</p>
<p style="background-attachment: initial; background-clip: initial; background-image: initial; background-origin: initial; background-position: initial; background-repeat: initial; background-size: initial; margin-bottom: 0pt; margin-top: 0pt;">
<span data-preserver-spaces="true" style="background-attachment: initial; background-clip: initial; background-image: initial; background-origin: initial; background-position: initial; background-repeat: initial; background-size: initial; font-weight: normal; margin-bottom: 0pt; margin-top: 0pt;">Open ViewController.cs file and create new UIWebView inside ViewDidLoad
method and set the WebView frame equal to base view frame size, implement
the IWebViewDelegate interface and override the <span>ShouldLoad method and set this interface the WebView we already
created.</span></span>
</p>
<p style="background-attachment: initial; background-clip: initial; background-image: initial; background-origin: initial; background-position: initial; background-repeat: initial; background-size: initial; margin-bottom: 0pt; margin-top: 0pt;">
<span data-preserver-spaces="true" style="background-attachment: initial; background-clip: initial; background-image: initial; background-origin: initial; background-position: initial; background-repeat: initial; background-size: initial; font-weight: normal; margin-bottom: 0pt; margin-top: 0pt;"><br /></span>
</p>
<p style="background-attachment: initial; background-clip: initial; background-image: initial; background-origin: initial; background-position: initial; background-repeat: initial; background-size: initial; margin-bottom: 0pt; margin-top: 0pt;">
<span data-preserver-spaces="true" style="background-attachment: initial; background-clip: initial; background-image: initial; background-origin: initial; background-position: initial; background-repeat: initial; background-size: initial; font-weight: normal; margin-bottom: 0pt; margin-top: 0pt;">Create NSMutableUrlRequest class and set request method as POST and set
Header type as “application/json” </span>
</p>
<p style="background-attachment: initial; background-clip: initial; background-image: initial; background-origin: initial; background-position: initial; background-repeat: initial; background-size: initial; margin-bottom: 0pt; margin-top: 0pt;">
<span data-preserver-spaces="true" style="background-attachment: initial; background-clip: initial; background-image: initial; background-origin: initial; background-position: initial; background-repeat: initial; background-size: initial; font-weight: normal; margin-bottom: 0pt; margin-top: 0pt;"><br /></span>
</p>
<p style="background-attachment: initial; background-clip: initial; background-image: initial; background-origin: initial; background-position: initial; background-repeat: initial; background-size: initial; margin-bottom: 0pt; margin-top: 0pt;">
<span data-preserver-spaces="true" style="background-attachment: initial; background-clip: initial; background-image: initial; background-origin: initial; background-position: initial; background-repeat: initial; background-size: initial; font-weight: normal; margin-bottom: 0pt; margin-top: 0pt;">GetPostString method used for append all parameters as given below and
set this returned string into the body of NSMutableUrlRequest class.
</span>
</p>
<p style="background-attachment: initial; background-clip: initial; background-image: initial; background-origin: initial; background-position: initial; background-repeat: initial; background-size: initial; margin-bottom: 0pt; margin-top: 0pt;">
<span data-preserver-spaces="true" style="background-attachment: initial; background-clip: initial; background-image: initial; background-origin: initial; background-position: initial; background-repeat: initial; background-size: initial; font-weight: normal; margin-bottom: 0pt; margin-top: 0pt;"><br /></span>
</p>
<p style="background-attachment: initial; background-clip: initial; background-image: initial; background-origin: initial; background-position: initial; background-repeat: initial; background-size: initial; margin-bottom: 0pt; margin-top: 0pt;">
<span data-preserver-spaces="true" style="background-attachment: initial; background-clip: initial; background-image: initial; background-origin: initial; background-position: initial; background-repeat: initial; background-size: initial; font-weight: normal; margin-bottom: 0pt; margin-top: 0pt;">GetHash method used to convert the string into SHA512 format. And full
source code is given below. </span>
</p>
<p style="background-attachment: initial; background-clip: initial; background-image: initial; background-origin: initial; background-position: initial; background-repeat: initial; background-size: initial; margin-bottom: 0pt; margin-top: 0pt;">
<span data-preserver-spaces="true" style="background-attachment: initial; background-clip: initial; background-image: initial; background-origin: initial; background-position: initial; background-repeat: initial; background-size: initial; font-weight: normal; margin-bottom: 0pt; margin-top: 0pt;"> </span>
</p>
<br />
<script src="https://gist.github.com/logeshpalani32/e4de9e16e61044e2621907ff62e6df87.js"></script>
<br />
<p style="background-attachment: initial; background-clip: initial; background-image: initial; background-origin: initial; background-position: initial; background-repeat: initial; background-size: initial; margin-bottom: 0pt; margin-top: 0pt;">
<span data-preserver-spaces="true" style="background-attachment: initial; background-clip: initial; background-image: initial; background-origin: initial; background-position: initial; background-repeat: initial; background-size: initial; margin-bottom: 0pt; margin-top: 0pt;">Step 3: </span>
</p>
<p style="background-attachment: initial; background-clip: initial; background-image: initial; background-origin: initial; background-position: initial; background-repeat: initial; background-size: initial; margin-bottom: 0pt; margin-top: 0pt;">
</p>
<p style="background-attachment: initial; background-clip: initial; background-image: initial; background-origin: initial; background-position: initial; background-repeat: initial; background-size: initial; margin-bottom: 0pt; margin-top: 0pt;">
<span data-preserver-spaces="true" style="background-attachment: initial; background-clip: initial; background-image: initial; background-origin: initial; background-position: initial; background-repeat: initial; background-size: initial; font-weight: normal; margin-bottom: 0pt; margin-top: 0pt;">Run the application and get the output like the below video. </span>
</p>
<p style="background-attachment: initial; background-clip: initial; background-image: initial; background-origin: initial; background-position: initial; background-repeat: initial; background-size: initial; margin-bottom: 0pt; margin-top: 0pt;">
<span data-preserver-spaces="true" style="background-attachment: initial; background-clip: initial; background-image: initial; background-origin: initial; background-position: initial; background-repeat: initial; background-size: initial; font-weight: normal; margin-bottom: 0pt; margin-top: 0pt;"><br /></span>
</p>
<br />
<iframe allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen="" frameborder="0" height="315" src="https://www.youtube.com/embed/NMp1QcPMoGQ" width="560"></iframe>
<br />
<p style="background-attachment: initial; background-clip: initial; background-image: initial; background-origin: initial; background-position: initial; background-repeat: initial; background-size: initial; margin-bottom: 0pt; margin-top: 0pt;"></p>
<div class="separator" style="clear: both; text-align: center;"><br /></div>
<p style="background-attachment: initial; background-clip: initial; background-image: initial; background-origin: initial; background-position: initial; background-repeat: initial; background-size: initial; margin-bottom: 0pt; margin-top: 0pt;"><br /></p><p style="background-attachment: initial; background-clip: initial; background-image: initial; background-origin: initial; background-position: initial; background-repeat: initial; background-size: initial; margin-bottom: 0pt; margin-top: 0pt;"><span style="font-weight: normal;"> The sample in <a href="https://github.com/logeshpalani32/Xamarin.iOS-Samples/tree/master/PayUiOSWebView" target="_blank">GitHub</a></span></p><p style="background-attachment: initial; background-clip: initial; background-image: initial; background-origin: initial; background-position: initial; background-repeat: initial; background-size: initial; margin-bottom: 0pt; margin-top: 0pt;"><br /></p><p style="background-attachment: initial; background-clip: initial; background-image: initial; background-origin: initial; background-position: initial; background-repeat: initial; background-size: initial; margin-bottom: 0pt; margin-top: 0pt;">
</p>
<p style="background-attachment: initial; background-clip: initial; background-image: initial; background-origin: initial; background-position: initial; background-repeat: initial; background-size: initial; margin-bottom: 0pt; margin-top: 0pt;">
<span data-preserver-spaces="true" style="background-attachment: initial; background-clip: initial; background-image: initial; background-origin: initial; background-position: initial; background-repeat: initial; background-size: initial; margin-bottom: 0pt; margin-top: 0pt;">Conclusion</span>
</p>
<p style="background-attachment: initial; background-clip: initial; background-image: initial; background-origin: initial; background-position: initial; background-repeat: initial; background-size: initial; margin-bottom: 0pt; margin-top: 0pt;">
<span data-preserver-spaces="true" style="background-attachment: initial; background-clip: initial; background-image: initial; background-origin: initial; background-position: initial; background-repeat: initial; background-size: initial; font-weight: normal; margin-bottom: 0pt; margin-top: 0pt;">If, you any issue in Key and Salt, just command below.</span><span style="font-weight: normal;"> This article credit goes to </span><a href="https://twitter.com/Anbu_Mani27" style="font-weight: normal;" target="_blank">@anbumani27 </a>
</p>
<p style="background-attachment: initial; background-clip: initial; background-image: initial; background-origin: initial; background-position: initial; background-repeat: initial; background-size: initial; margin-bottom: 0pt; margin-top: 0pt;">
<br />
</p>
<p style="background-attachment: initial; background-clip: initial; background-image: initial; background-origin: initial; background-position: initial; background-repeat: initial; background-size: initial; margin-bottom: 0pt; margin-top: 0pt;">
<br />
</p>
</h3>
<p style="background-attachment: initial; background-clip: initial; background-image: initial; background-origin: initial; background-position: initial; background-repeat: initial; background-size: initial; color: #0e101a; margin-bottom: 0pt; margin-top: 0pt;"></p>
Logesh Palanihttp://www.blogger.com/profile/11572235997627400122noreply@blogger.com0tag:blogger.com,1999:blog-4259075105540267115.post-40214967423924161552020-06-18T22:38:00.004+05:302021-07-25T15:36:49.843+05:30Expandable List View in Xamarin Android<div style="line-height: 2; text-align: justify;">
<font face="verdana" style="line-height: 2;"><b>Introduction </b></font>
</div><div style="line-height: 2; text-align: justify;"><font face="verdana" style="line-height: 2;"><b><br /></b></font></div>
<div style="line-height: 2; text-align: justify;">
<font face="verdana" style="line-height: 2;"><span> </span>This article, we are going to learn how to use ExpandableListView in
Xamarin Android and I’ll show the demo for the Expandable ListView in
Xamarin.Android application. In the ListView, you can click any one item and
it will expand and show the sub list or sub-items of the selected item and
you can select or click the subview items with click events. </font>
</div>
<div style="line-height: 2; text-align: justify;">
<font face="verdana" style="line-height: 2;"><br /></font>
</div>
<div style="line-height: 2; text-align: justify;">
<font face="verdana" style="line-height: 2;"><div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgPBDPcfs9I1D4zvDmqPlsLe2RqRtlgvoCuukoliBn-hT5cacVu9YTvRuUZYvxZled-mmvRK635Rks0FAGUg5jXYhIzYxulFSXrhXiO6liXaEl2cNeot1IhBtN9czKdxhZ4rOk8OocvWOwU/s640/WhatsApp+Video+2020-06-18+at+10.16.36+PM.gif" style="margin-left: 1em; margin-right: 1em;"><img alt="Expandable List View in Xamarin Android" border="0" data-original-height="640" data-original-width="320" height="500" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgPBDPcfs9I1D4zvDmqPlsLe2RqRtlgvoCuukoliBn-hT5cacVu9YTvRuUZYvxZled-mmvRK635Rks0FAGUg5jXYhIzYxulFSXrhXiO6liXaEl2cNeot1IhBtN9czKdxhZ4rOk8OocvWOwU/w250-h500/WhatsApp+Video+2020-06-18+at+10.16.36+PM.gif" title="Expandable List View" width="250" /></a>
</div>
</font>
</div>
<div style="line-height: 2; text-align: justify;">
<font face="verdana" style="line-height: 2;"><br /></font>
</div>
<div style="line-height: 2; text-align: justify;">
<b style="line-height: 2;"><font face="verdana" style="line-height: 2;">Prerequisites </font></b>
</div>
<div style="line-height: 2;">
<ul style="line-height: 2; text-align: left;">
<li style="line-height: 2; text-align: justify;">
<font face="verdana" style="line-height: 2;">Visual Studio for Mac </font>
</li>
</ul>
</div>
<div style="line-height: 2; text-align: justify;">
<font face="verdana" style="line-height: 2;"> </font>
</div>
<div style="line-height: 2; text-align: justify;">
<font face="verdana" style="line-height: 2;">Let’s start the story </font>
</div>
<div style="line-height: 2; text-align: justify;">
<b style="line-height: 2;"><font face="verdana" style="line-height: 2;">Step 1 </font></b>
</div>
<div style="line-height: 2; text-align: justify;">
<font face="verdana" style="line-height: 2;">Let Create Xamarin Android Project in Visual Studio for Mac. </font>
</div>
<div style="line-height: 2; text-align: justify;">
<font face="verdana" style="line-height: 2;"><br /></font>
</div>
<div style="line-height: 2; text-align: justify;">
<font face="verdana" style="line-height: 2;"><table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto;">
<tbody>
<tr>
<td style="text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi86cnzoU6SqhTvmQ5QyLAqRYV7qhtPAt6ggCOqbiFWrxUERw6JwqhwLClS6Z8x5kqot7L0eOMdQEEulkXfZKl_l9-XuZVyTAgt1CGrqX-d44pm_BLGEG6R-_CcrCqwE0r_YBxcyhmyZaA4/s709/Screenshot+2020-06-18+at+10.09.45+PM.png" style="margin-left: auto; margin-right: auto;"><img border="0" data-original-height="511" data-original-width="709" height="289" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi86cnzoU6SqhTvmQ5QyLAqRYV7qhtPAt6ggCOqbiFWrxUERw6JwqhwLClS6Z8x5kqot7L0eOMdQEEulkXfZKl_l9-XuZVyTAgt1CGrqX-d44pm_BLGEG6R-_CcrCqwE0r_YBxcyhmyZaA4/w400-h289/Screenshot+2020-06-18+at+10.09.45+PM.png" width="400" /></a>
</td>
</tr>
<tr>
<td class="tr-caption" style="text-align: center;">
Xamarin Android Project Creation<br />
</td>
</tr>
</tbody>
</table>
</font>
</div>
<div style="line-height: 2; text-align: justify;">
<font face="verdana" style="line-height: 2;"><br /></font>
</div>
<div style="line-height: 2;">
<div style="line-height: 2; text-align: justify;">
<b style="line-height: 2;"><font face="verdana" style="line-height: 2;">Step 2 </font></b>
</div>
</div>
<div style="line-height: 2; text-align: justify;">
<b style="line-height: 2;"><font face="verdana" style="line-height: 2;"><br /></font></b>
</div>
<div style="line-height: 2; text-align: justify;">
<font face="verdana" style="line-height: 2;">After the project creation, open the<span> </span></font><span style="font-family: verdana;">content_main.xml</span><span style="font-family: verdana;"> file.
For that, open Solution Explorer >> Resources >> Layout >>
double click the content_main.xml and design the ExpanableListView. The code
is given below. </span></div>
<br />
<script src="https://gist.github.com/logeshpalani32/4892c3f67384da5705272e1fa8b0c0b8.js"></script>
<br />
<div style="line-height: 2; text-align: justify;"><br /></div>
<div style="line-height: 2; text-align: justify;">
<font face="verdana" style="line-height: 2;"> <b style="line-height: 2;">Step 3 </b></font>
</div>
<div style="line-height: 2; text-align: justify;">
<b style="line-height: 2;"><font face="verdana" style="line-height: 2;"><br /></font></b>
</div>
<div style="line-height: 2; text-align: justify;">
<font face="verdana" style="line-height: 2;">Next, design your header list layout. Create a new list_view_header.xml
file under the layout folder. For that, open Solution Explorer >>
Resources >> right-click the layout folder and select a new file, In
the dialog window, the left plane selects Android and center plane select
layout >> give the name as list_view_header.xml and then click Create.
The source code is given below. </font>
</div>
<div style="line-height: 2; text-align: justify;">
<font face="verdana" style="line-height: 2;"> </font>
</div>
<br />
<script src="https://gist.github.com/logeshpalani32/11f1cdb1cb301515a142e436b6b503ee.js"></script>
<br />
<div style="line-height: 2;">
<div style="line-height: 2; text-align: justify;">
<b style="line-height: 2;"><font face="verdana" style="line-height: 2;">Step 4</font></b>
</div>
</div>
<div style="line-height: 2; text-align: justify;">
<b style="line-height: 2;"><font face="verdana" style="line-height: 2;"><br /></font></b>
</div>
<div style="line-height: 2; text-align: justify;">
<font face="verdana" style="line-height: 2;">As well as, create sub list layout and give names as expand_list_chlid.xml,
and code is given below. </font>
</div>
<br />
<script src="https://gist.github.com/logeshpalani32/228f270d78cba3bff0e7aad900f83d63.js"></script>
<br />
<div style="line-height: 2; text-align: justify;">
<font face="verdana" style="line-height: 2;"> </font>
</div>
<div style="line-height: 2;">
<div style="line-height: 2; text-align: justify;">
<b style="line-height: 2;"><font face="verdana" style="line-height: 2;">Step 5 </font></b>
</div>
</div>
<div style="line-height: 2; text-align: justify;">
<b style="line-height: 2;"><font face="verdana" style="line-height: 2;"><br /></font></b>
</div>
<div style="line-height: 2; text-align: justify;">
<font face="verdana" style="line-height: 2;">Now, create another XML file under a drawable file and give file name as group_indicator.xml. This file is used for
the dropdown indicator and Import the image files to the drawable folder.
This drawable code is given below. </font>
</div>
<div style="line-height: 2; text-align: justify;">
<font face="verdana" style="line-height: 2;"> </font>
</div>
<br />
<script src="https://gist.github.com/logeshpalani32/0ba971e54f367a7753ff3a71a8ab889c.js"></script>
<br />
<div style="line-height: 2;">
<div style="line-height: 2; text-align: justify;">
<b style="line-height: 2;"><font face="verdana" style="line-height: 2;">Step 6</font></b>
</div>
</div>
<div style="line-height: 2; text-align: justify;">
<b style="line-height: 2;"><font face="verdana" style="line-height: 2;"><br /></font></b>
</div>
<div style="line-height: 2; text-align: justify;">
<font face="verdana" style="line-height: 2;">Next, open colors.xml file and add the below colors to the
resources. </font>
</div>
<div style="line-height: 2; text-align: justify;">
<font face="verdana" style="line-height: 2;"> </font>
</div>
<br />
<script src="https://gist.github.com/logeshpalani32/75c2c4e90a97bc361096aca0f7d7b113.js"></script>
<br />
<div style="line-height: 2;">
<div style="line-height: 2; text-align: justify;">
<b style="line-height: 2;"><font face="verdana" style="line-height: 2;">Step 7 </font></b>
</div>
</div>
<div style="line-height: 2; text-align: justify;">
<b style="line-height: 2;"><font face="verdana" style="line-height: 2;"><br /></font></b>
</div>
<div style="line-height: 2; text-align: justify;">
<font face="verdana" style="line-height: 2;">Next, Create a new ExpandableModel.cs class under the Models folder. This
model class is inherited from Java.Lang.Object class and the code is given
below. </font>
</div>
<div style="line-height: 2; text-align: justify;">
<font face="verdana" style="line-height: 2;"> </font>
</div>
<br />
<script src="https://gist.github.com/logeshpalani32/136d508ed0d6346cee0a756ce76e65a9.js"></script>
<br />
<div style="line-height: 2;">
<div style="line-height: 2; text-align: justify;">
<b style="line-height: 2;"><font face="verdana" style="line-height: 2;">Step 8</font></b>
</div>
</div>
<div style="line-height: 2; text-align: justify;">
<b style="line-height: 2;"><font face="verdana" style="line-height: 2;"><br /></font></b>
</div>
<div style="line-height: 2; text-align: justify;">
<font face="verdana" style="line-height: 2;">Now, Create new ExpandableListAdapter.cs class under adapters folder. This
adapter inherited from the BaseExpandableListAdapter class and full source
code is given below. </font>
</div>
<div style="line-height: 2; text-align: justify;">
<font face="verdana" style="line-height: 2;"> </font>
</div>
<br />
<script src="https://gist.github.com/logeshpalani32/fc169984ade6a34bb17217dd5b92079f.js"></script>
<br />
<div style="line-height: 2;">
<div style="line-height: 2; text-align: justify;">
<b style="line-height: 2;"><font face="verdana" style="line-height: 2;">Step 9</font></b>
</div>
</div>
<div style="line-height: 2; text-align: justify;">
<b style="line-height: 2;"><font face="verdana" style="line-height: 2;"><br /></font></b>
</div>
<div style="line-height: 2; text-align: justify;">
<font face="verdana" style="line-height: 2;">Next, open MainActivity.cs file and set adapter to this expandable list
view and the code is given below. </font>
</div><div style="line-height: 2; text-align: justify;"><font face="verdana" style="line-height: 2;"><br /></font></div>
<div style="line-height: 2; text-align: justify;">
<font face="verdana" style="line-height: 2;">
<br /></font>
</div>
<br />
<script src="https://gist.github.com/logeshpalani32/a866a894d1a5e8eecba08a6236f274cf.js"></script>
<br />
<div style="line-height: 2; text-align: justify;">
<font face="verdana" style="line-height: 2;"><b>Step 10</b></font></div>
<div style="line-height: 2; text-align: justify;">
<font face="verdana" style="line-height: 2;">Now, run your application and get output like below.</font>
</div>
<div style="line-height: 2; text-align: justify;">
<font face="verdana" style="line-height: 2;"><br /></font>
</div>
<div style="line-height: 2; text-align: justify;">
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiz31S_zYa10gogaoEY24QVxxDy-T3nNFstZR6zCGdJyP202J85wCS08qTKeLYUK-tzdKnr2R6RlPRfd6cdcM2Hr_ElAJ4ofrANqfajatO-7vcntqX-884HSCNxlEbHwwoSJEFGDAfV02vu/s640/WhatsApp+Video+2020-06-18+at+10.16.36+PM.gif" style="margin-left: 1em; margin-right: 1em;"><img alt="Expandable List View in Xamarin Android" border="0" data-original-height="640" data-original-width="320" height="500" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiz31S_zYa10gogaoEY24QVxxDy-T3nNFstZR6zCGdJyP202J85wCS08qTKeLYUK-tzdKnr2R6RlPRfd6cdcM2Hr_ElAJ4ofrANqfajatO-7vcntqX-884HSCNxlEbHwwoSJEFGDAfV02vu/w250-h500/WhatsApp+Video+2020-06-18+at+10.16.36+PM.gif" width="250" /></a>
</div>
<font face="verdana" style="line-height: 2;"><br /></font>
</div>
<div style="line-height: 2; text-align: justify;">
<font face="verdana" style="line-height: 2;"><br /></font>
</div>
<div style="line-height: 2; text-align: justify;">
<font face="verdana" style="line-height: 2;">The Full Source Code in
<a href="https://github.com/logeshpalani32/Xamarin.Android-Samples/tree/master/XAExpandableListView" target="_blank">Github</a></font>
</div>
<div style="line-height: 2; text-align: justify;"><b style="line-height: 2;"><font face="verdana" style="line-height: 2;"><br /></font></b></div><div style="line-height: 2; text-align: justify;">
<b style="line-height: 2;"><font face="verdana" style="line-height: 2;">Conclusion</font></b>
</div>
<div style="line-height: 2; text-align: justify;">
<font face="verdana" style="line-height: 2;"><br /></font>
</div>
<div style="line-height: 2; text-align: justify;">
<font face="verdana" style="line-height: 2;">I hope this is helpful for you, Thanks for reading </font></div>
<div style="line-height: 2; text-align: justify;">
<font face="verdana" style="line-height: 2;"> </font>
</div>
Logesh Palanihttp://www.blogger.com/profile/11572235997627400122noreply@blogger.com1tag:blogger.com,1999:blog-4259075105540267115.post-91625441760761362132020-06-16T23:39:00.004+05:302021-07-25T15:38:00.763+05:30Toast in Xamarin Forms<p class="p1" style="font-stretch: normal; font-variant-east-asian: normal; font-variant-numeric: normal; line-height: 2; margin: 0px;">
<font face="verdana" style="line-height: 2;"></font>
</p>
<div class="separator" style="clear: both; text-align: center;">
<font face="verdana" style="line-height: 2;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgEJCHH44z8NP4fPpNEUGYP-ETwyZzi7sspe5O3nhENme_HyLWyaq5DVfKvbZ9SGkfLmLtwYHOrF4g5-RowqxX2mERGPiERZnIXNV6CNMPKkOt0DK-zsUTuX17kFRxJ6qOxq7IclSC3Lpv-/s2240/Copy+of+Pink+Blue+Gradient+Quinceanera+Facebook+Event+Cover+Photo.png" style="margin-left: 1em; margin-right: 1em;"><img alt="Toast in Xamarin Forms" border="0" data-original-height="1260" data-original-width="2240" height="360" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgEJCHH44z8NP4fPpNEUGYP-ETwyZzi7sspe5O3nhENme_HyLWyaq5DVfKvbZ9SGkfLmLtwYHOrF4g5-RowqxX2mERGPiERZnIXNV6CNMPKkOt0DK-zsUTuX17kFRxJ6qOxq7IclSC3Lpv-/w640-h360/Copy+of+Pink+Blue+Gradient+Quinceanera+Facebook+Event+Cover+Photo.png" title="Toast in Xamarin Forms" width="640" /></a></font>
</div>
<font face="verdana" style="line-height: 2;"><b style="line-height: 2;"><br /></b></font>
<p></p>
<p class="p1" style="font-stretch: normal; font-variant-east-asian: normal; font-variant-numeric: normal; line-height: 2; margin: 0px;">
<font face="verdana" style="line-height: 2;"><b style="line-height: 2;">Introduction </b></font>
</p>
<p class="p1" style="font-stretch: normal; font-variant-east-asian: normal; font-variant-numeric: normal; line-height: 2; margin: 0px;">
<font face="verdana" style="line-height: 2;">This blog, we are going to see how to implement Toast Message in Xamarin
Forms for Android and iOS. This project, we can use dependency injection to
display toast and not using any third-party plugin. The android has a
default widget for toast but iOS has an only alert controller. </font>
</p>
<p class="p1" style="font-stretch: normal; font-variant-east-asian: normal; font-variant-numeric: normal; line-height: 2; margin: 0px;">
<font face="verdana" style="line-height: 2;"> </font>
</p>
<p class="p1" style="font-stretch: normal; font-variant-east-asian: normal; font-variant-numeric: normal; line-height: 2; margin: 0px;">
<font face="verdana" style="line-height: 2;"><b style="line-height: 2;">Let’s start the story </b></font>
</p>
<p class="p1" style="font-stretch: normal; font-variant-east-asian: normal; font-variant-numeric: normal; line-height: 2; margin: 0px;">
<font face="verdana" style="line-height: 2;"><b style="line-height: 2;">Step 1: </b></font>
</p>
<p class="p1" style="font-stretch: normal; font-variant-east-asian: normal; font-variant-numeric: normal; line-height: 2; margin: 0px;">
<font face="verdana" style="line-height: 2;">Create Xamarin Forms Mobile App in Visual Studio for Mac. For that, go to
Visual Studio for Mac >> New >> In the left plane select
Cross-Platform and center plane select Blank Xamarin Forms App and click
Next >> Give Application Name and Target Platforms, click Next and
again click Create. </font>
</p>
<p class="p1" style="font-stretch: normal; font-variant-east-asian: normal; font-variant-numeric: normal; line-height: 2; margin: 0px;">
<font face="verdana" style="line-height: 2;"><br /></font>
</p>
<p class="p1" style="font-stretch: normal; font-variant-east-asian: normal; font-variant-numeric: normal; line-height: 2; margin: 0px;">
<font face="verdana" style="line-height: 2;"></font>
</p>
<div class="separator" style="clear: both; text-align: center;">
<font face="verdana" style="line-height: 2;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEimKH3j3wce7ucn4j3gTqZkUdnJyJL_Gp7RpPKdXgVnj4261mp8B4Ij-fI9ns-zckbe0sDyYezriUwGsu11rIBQLefgBZjQYOFbQBj8TqNzarJfjC5yP3iWlCjUBB5n_vdWsG4s3Qg0VbPW/s709/Screenshot+2020-06-16+at+5.24.21+PM.png" style="margin-left: 1em; margin-right: 1em;"><img alt="Xamarin Forms" border="0" data-original-height="510" data-original-width="709" height="288" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEimKH3j3wce7ucn4j3gTqZkUdnJyJL_Gp7RpPKdXgVnj4261mp8B4Ij-fI9ns-zckbe0sDyYezriUwGsu11rIBQLefgBZjQYOFbQBj8TqNzarJfjC5yP3iWlCjUBB5n_vdWsG4s3Qg0VbPW/w400-h288/Screenshot+2020-06-16+at+5.24.21+PM.png" width="400" /></a></font>
</div>
<font face="verdana" style="line-height: 2;"> </font>
<p></p>
<p class="p1" style="font-stretch: normal; font-variant-east-asian: normal; font-variant-numeric: normal; line-height: 2; margin: 0px;">
<font face="verdana" style="line-height: 2;"><br /></font>
</p>
<p class="p1" style="font-stretch: normal; font-variant-east-asian: normal; font-variant-numeric: normal; line-height: 2; margin: 0px;">
<font face="verdana" style="line-height: 2;"><b style="line-height: 2;">Step 2: </b></font>
</p>
<p class="p1" style="font-stretch: normal; font-variant-east-asian: normal; font-variant-numeric: normal; line-height: 2; margin: 0px;">
<font face="verdana" style="line-height: 2;">After project creation, expand the Shared project and create an IMessage.cs
interface under Interface Folder. For that, right-click the shared project
and select new File >> In the dialog window, select interface and give
name as IMessage and click Add. Create two methods for a long and short
message, the code is given below. </font>
</p>
<p class="p1" style="font-stretch: normal; font-variant-east-asian: normal; font-variant-numeric: normal; line-height: 2; margin: 0px;">
<font face="verdana" style="line-height: 2;"> </font>
</p>
<p class="p1" style="font-stretch: normal; font-variant-east-asian: normal; font-variant-numeric: normal; line-height: 2; margin: 0px;">
<font face="verdana" style="line-height: 2;"><br /></font>
</p>
<p class="p1" style="font-stretch: normal; font-variant-east-asian: normal; font-variant-numeric: normal; line-height: 2; margin: 0px;">
<br />
<script src="https://gist.github.com/logeshpalani32/44e081fbaede349f860da80035765c40.js"></script>
<br />
</p>
<p class="p1" style="font-stretch: normal; font-variant-east-asian: normal; font-variant-numeric: normal; line-height: 2; margin: 0px;">
<font face="verdana" style="line-height: 2;"><b style="line-height: 2;">Platform-Specific Configuration </b></font>
</p>
<p class="p1" style="font-stretch: normal; font-variant-east-asian: normal; font-variant-numeric: normal; line-height: 2; margin: 0px;">
<font face="verdana" style="line-height: 2;"><b style="line-height: 2;">Android Project </b></font>
</p>
<p class="p1" style="font-stretch: normal; font-variant-east-asian: normal; font-variant-numeric: normal; line-height: 2; margin: 0px;">
<font face="verdana" style="line-height: 2;">Now, Expand the Android project and create MessageAndroid class. This
MessageAndroid class inherits from the IMessage interface, that we already
created in Shared Project and register this class as a dependency. This Code
is given below. </font>
</p>
<p class="p1" style="font-stretch: normal; font-variant-east-asian: normal; font-variant-numeric: normal; line-height: 2; margin: 0px;">
<font face="verdana" style="line-height: 2;"> </font>
</p>
<br />
<script src="https://gist.github.com/logeshpalani32/f994d4e9eccb8f1f72894e5d25b83ed6.js"></script>
<br />
<p class="p1" style="font-stretch: normal; font-variant-east-asian: normal; font-variant-numeric: normal; line-height: 2; margin: 0px;">
<font face="verdana" style="line-height: 2;"><b style="line-height: 2;">iOS Project </b></font>
</p>
<p class="p1" style="font-stretch: normal; font-variant-east-asian: normal; font-variant-numeric: normal; line-height: 2; margin: 0px;">
<font face="verdana" style="line-height: 2;">Next, open iOS Project and create MessageiOS class and as well as inherit
the same IMessage interface to this class and the full source code given
below. Here we created a simple alert Controller and timer Scheduled to
disappear the alert controller. </font>
</p>
<p class="p1" style="font-stretch: normal; font-variant-east-asian: normal; font-variant-numeric: normal; line-height: 2; margin: 0px;">
<font face="verdana" style="line-height: 2;"> </font>
</p>
<br />
<script src="https://gist.github.com/logeshpalani32/64f55946a967cde23c086047b8c103ba.js"></script>
<br />
<p class="p1" style="font-stretch: normal; font-variant-east-asian: normal; font-variant-numeric: normal; line-height: 2; margin: 0px;">
<font face="verdana" style="line-height: 2;"><b style="line-height: 2;">Step 3: </b></font>
</p>
<p class="p1" style="font-stretch: normal; font-variant-east-asian: normal; font-variant-numeric: normal; line-height: 2; margin: 0px;">
<font face="verdana" style="line-height: 2;">Now, design your user interface in MainPage.xaml file in Shared Project.
For that, go to Solution Explorer >> Shared Project >> double
click and open MainPage.xaml and design two-button with the clicked event.
The code is given below. </font>
</p>
<p class="p1" style="font-stretch: normal; font-variant-east-asian: normal; font-variant-numeric: normal; line-height: 2; margin: 0px;">
<font face="verdana" style="line-height: 2;"> </font>
</p>
<br />
<script src="https://gist.github.com/logeshpalani32/776b1619b6efdd70cb6d6cc9c1250752.js"></script>
<br />
<p class="p1" style="font-stretch: normal; font-variant-east-asian: normal; font-variant-numeric: normal; line-height: 2; margin: 0px;">
<font face="verdana" style="line-height: 2;">Next, open MainPage.cs file and call dependency service to show toast and
the code is given below </font>
</p>
<p class="p1" style="font-stretch: normal; font-variant-east-asian: normal; font-variant-numeric: normal; line-height: 2; margin: 0px;">
<font face="verdana" style="line-height: 2;"> </font>
</p>
<br />
<script src="https://gist.github.com/logeshpalani32/f4b9b54b8ad12964a3d0d04a2881b945.js"></script>
<br />
<p class="p1" style="font-stretch: normal; font-variant-east-asian: normal; font-variant-numeric: normal; line-height: 2; margin: 0px;">
<font face="verdana" style="line-height: 2;"><b style="line-height: 2;">Step 4: </b></font>
</p>
<p class="p1" style="font-stretch: normal; font-variant-east-asian: normal; font-variant-numeric: normal; line-height: 2; margin: 0px;">
<font face="verdana" style="line-height: 2;">Run, your application, and click the buttons to show a toast message. The
screenshot is given below. </font>
</p>
<p class="p1" style="font-stretch: normal; font-variant-east-asian: normal; font-variant-numeric: normal; line-height: 2; margin: 0px;">
<font face="verdana" style="line-height: 2;"> </font>
</p>
<p class="p1" style="font-stretch: normal; font-variant-east-asian: normal; font-variant-numeric: normal; line-height: 2; margin: 0px;"></p>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj9z3ecqEEeIIQyLXuf1JLJMxPvnCBcJQLcYxtBKlkQYa-f0SZIIH6Bu-8CapRCG7BYBIH1sxYRezwPLZIMO1hjdhLAWxrb65Tx_W3jHCRsZduLJSbV8yA51JHRPJAE6-CRtHjq4ZeamDIL/s850/Screenshot+2020-06-16+at+11.21.21+PM.png" style="margin-left: 1em; margin-right: 1em;"><img alt="Toast in Xamarin Form" border="0" data-original-height="382" data-original-width="850" height="180" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj9z3ecqEEeIIQyLXuf1JLJMxPvnCBcJQLcYxtBKlkQYa-f0SZIIH6Bu-8CapRCG7BYBIH1sxYRezwPLZIMO1hjdhLAWxrb65Tx_W3jHCRsZduLJSbV8yA51JHRPJAE6-CRtHjq4ZeamDIL/w400-h180/Screenshot+2020-06-16+at+11.21.21+PM.png" width="400" /></a>
</div>
<font face="verdana" style="line-height: 2;"><br /></font>
<p></p>
<p class="p1" style="font-stretch: normal; font-variant-east-asian: normal; font-variant-numeric: normal; line-height: 2; margin: 0px;">
<font face="verdana" style="line-height: 2;"> The Full Source Code in <a href="https://github.com/logeshpalani32/Xamarin.Forms-Samples/tree/master/Xamarin.Forms-ToastMessageUsingDependencyInjection" target="_blank">Github</a></font></p>
<p class="p1" style="font-stretch: normal; font-variant-east-asian: normal; font-variant-numeric: normal; line-height: 2; margin: 0px;">
<font face="verdana" style="line-height: 2;"><b style="line-height: 2;">Conclusion </b></font>
</p>
<p class="p1" style="font-stretch: normal; font-variant-east-asian: normal; font-variant-numeric: normal; line-height: 2; margin: 0px;">
<font face="verdana" style="line-height: 2;">I hope you, this article helpful for you, and if you have any suggestions
or comments post in the comment below. Thanks for reading. </font>
</p>
Logesh Palanihttp://www.blogger.com/profile/11572235997627400122noreply@blogger.com2United States37.09024 -95.71289136.555124576885852 -96.26220740625 37.625355423114151 -95.16357459375tag:blogger.com,1999:blog-4259075105540267115.post-6465642722733186062020-06-07T22:50:00.003+05:302021-12-28T19:54:52.721+05:30How To Convert Base 64 to Image in Xamarin<div style="line-height: 2;">
<font face="verdana" size="4" style="line-height: 2;"><b>Introduction</b></font>
</div>
<div style="line-height: 2;">
<font face="verdana" size="4" style="line-height: 2;"><b><br /></b></font>
</div>
<div style="line-height: 2;">
<font face="verdana" size="4" style="line-height: 2;">This blog, we are going to learn how to convert Image to base 64 and vice
versa. The lot of struggle with converting a string to bitmap image and
Image to base 64 string format conversion. I’ll share the code I used in my
last project, that exactly worked for in all the cases. </font></div><div style="line-height: 2;">
</div>
<div style="line-height: 2;">
<font face="verdana" size="4" style="line-height: 2;"><b>Story</b></font>
</div>
<div style="line-height: 2;">
<font face="verdana" size="4" style="line-height: 2;"><b><br /></b></font>
</div>
<div style="line-height: 2;">
<span style="font-family: verdana; font-size: large;">First, we can see how to convert, base64 string to Image. For the first
time, I hear this base 64 string, I thought that was very tough, but that is
not like that, it is very easy. The C# code I used for my project is given
below. </span></div>
<br>
<script src="https://gist.github.com/logeshpalani32/e8a8e27affa30f834627496c5406183e.js"></script>
<div style="line-height: 2;">
<font face="verdana" size="4" style="line-height: 2;"> </font>
</div>
<div style="line-height: 2;">
<font face="verdana" size="4" style="line-height: 2;">Now, we can change Image to base64 string to image conversion, this code is given
below. </font></div>
<br>
<script src="https://gist.github.com/logeshpalani32/9b26d28bc08201ecd92ba467762d9665.js"></script>
<div style="line-height: 2;">
<font face="verdana" size="4" style="line-height: 2;"><br /></font>
</div><div style="line-height: 2;"><span style="font-family: verdana; font-size: large;">The Full code is given below</span></div>
<br />
<script src="https://gist.github.com/logeshpalani31/e8a8e27affa30f834627496c5406183e.js"></script>
<br />
<script src="https://gist.github.com/logeshpalani31/9b26d28bc08201ecd92ba467762d9665.js"></script>
<br />
<div style="line-height: 2;">
<font face="verdana" size="4" style="line-height: 2;">Thanks for reading this. If, you get an exception, comment
below. </font><span style="font-family: verdana; font-size: large;"> </span>
</div>
Logesh Palanihttp://www.blogger.com/profile/11572235997627400122noreply@blogger.com2tag:blogger.com,1999:blog-4259075105540267115.post-40981346032571048292020-06-06T13:37:00.000+05:302020-06-06T13:37:15.166+05:30Get Started DragonBoard 410c with Windows IoT Core<h3 class="hckui__typography__h3 title-with-anchor" id="toc-introduction-0" style="background-color: white; box-sizing: border-box; color: #111111; font-family: proxima-nova, helveticaneue, Helvetica, Arial, "lucida grande", sans-serif; line-height: 2; margin-bottom: 0px; margin-top: 0px;">
<font face="verdana"><span style="box-sizing: border-box; line-height: 2;"><div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiKtXtYaDN2plUWEyHN0-BIoTXNuISo58bg0KvCJG2TVvgbE2gpFBzi8zqt3NQW9NTbdwu52TQ1P458ywSfiFDsQEKoCmjpEU8KYJ2o-0wMfukXgYdSkWqPOreca0raBalMj8cnzLqTWnOZ/s900/_YYtt0Q8Aoz.jpg" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="675" data-original-width="900" height="480" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiKtXtYaDN2plUWEyHN0-BIoTXNuISo58bg0KvCJG2TVvgbE2gpFBzi8zqt3NQW9NTbdwu52TQ1P458ywSfiFDsQEKoCmjpEU8KYJ2o-0wMfukXgYdSkWqPOreca0raBalMj8cnzLqTWnOZ/w640-h480/_YYtt0Q8Aoz.jpg" width="640" /></a>
</div>
<font size="6" style="line-height: 2;"><br /></font></span>
</font></h3>
<h3 class="hckui__typography__h3 title-with-anchor" id="toc-introduction-0" style="background-color: white; box-sizing: border-box; color: #111111; font-family: proxima-nova, helveticaneue, Helvetica, Arial, "lucida grande", sans-serif; line-height: 2; margin-bottom: 0px; margin-top: 0px;">
<font face="verdana"><span style="box-sizing: border-box; line-height: 2;"><font size="6" style="line-height: 2;">Introduction</font></span>
</font></h3>
<div style="line-height: 2;">
<font face="verdana"><span style="box-sizing: border-box; line-height: 2;"><span style="background-color: white; color: #4a4a4a; font-family: proxima-nova, helveticaneue, Helvetica, Arial, "lucida grande", sans-serif; font-size: 18px; line-height: 2;"><span style="line-height: 2;"> </span><span style="line-height: 2;"> </span><span style="line-height: 2;"> </span>This project, we
are going to configure DragonBoard with Windows IoT Core in different
ways. The first way is the automatic method and other ways are
manual.</span></span>
</font></div>
<div style="line-height: 2;">
<font face="verdana"><span style="box-sizing: border-box; line-height: 2;"><span style="background-color: white; color: #4a4a4a; font-family: proxima-nova, helveticaneue, Helvetica, Arial, "lucida grande", sans-serif; line-height: 2;"><span style="color: #222222; font-family: arial, sans-serif; line-height: 2;"><b style="line-height: 2;"><font size="4" style="line-height: 2;">Prerequisites</font></b></span></span></span>
</font></div>
<div style="line-height: 2;">
<font face="verdana"><span style="box-sizing: border-box; line-height: 2;"><span style="background-color: white; color: #4a4a4a; font-family: proxima-nova, helveticaneue, Helvetica, Arial, "lucida grande", sans-serif; line-height: 2;"><span style="color: #222222; font-family: arial, sans-serif; line-height: 2;"><b style="line-height: 2;"><font size="4" style="line-height: 2;"><span style="line-height: 2;"> </span>Hardware
Components</font></b></span></span></span>
</font></div>
<div style="line-height: 2;">
<ul style="line-height: 2; text-align: left;">
<ul style="line-height: 2;">
<li style="line-height: 2;">
<font face="verdana"><font color="#222222" face="arial, sans-serif" size="4" style="line-height: 2;"><span style="background-color: white; line-height: 2;"><a href="https://www.hackster.io/Qualcomm/products/dragonboard-410c?ref=project-3ea2cc" style="line-height: 2;" target="_blank">Qualcomm DragonBoard 410c</a></span></font>
</font></li>
<li style="line-height: 2;">
<font face="verdana"><font color="#222222" face="arial, sans-serif" size="4" style="line-height: 2;">USB-A to Mini -USB Cable</font>
</font></li>
<li style="line-height: 2;">
<font face="verdana"><font color="#222222" face="arial, sans-serif" size="4" style="line-height: 2;">External Display</font>
</font></li>
<li style="line-height: 2;">
<font face="verdana"><font color="#222222" face="arial, sans-serif" size="4" style="line-height: 2;">Keyboard & Mouse</font>
</font></li>
</ul>
</ul>
<div style="line-height: 2;">
<div style="line-height: 2;">
<font face="verdana"><span style="box-sizing: border-box; line-height: 2;"><span style="background-color: white; color: #4a4a4a; font-family: proxima-nova, helveticaneue, Helvetica, Arial, "lucida grande", sans-serif; line-height: 2;"><span style="color: #222222; font-family: arial, sans-serif; line-height: 2;"><b style="line-height: 2;"><font size="4" style="line-height: 2;"> Software apps and online services</font></b></span></span></span>
</font></div>
<div style="line-height: 2;">
<ul style="line-height: 2; text-align: left;">
<ul style="line-height: 2;">
<li style="line-height: 2;">
<font face="verdana"><span style="box-sizing: border-box; line-height: 2;"><span style="background-color: white; color: #4a4a4a; font-family: proxima-nova, helveticaneue, Helvetica, Arial, "lucida grande", sans-serif; line-height: 2;"><span style="color: #222222; font-family: arial, sans-serif; line-height: 2;"><font size="4" style="line-height: 2;">Windows IOT Core</font></span></span></span>
</font></li>
<li style="line-height: 2;">
<font face="verdana"><span style="box-sizing: border-box; line-height: 2;"><span style="background-color: white; color: #4a4a4a; font-family: proxima-nova, helveticaneue, Helvetica, Arial, "lucida grande", sans-serif; line-height: 2;"><span style="color: #222222; font-family: arial, sans-serif; line-height: 2;"><font size="4" style="line-height: 2;">Windows 10</font></span></span></span>
</font></li>
<li style="line-height: 2;">
<font face="verdana"><span style="box-sizing: border-box; line-height: 2;"><span style="background-color: white; color: #4a4a4a; font-family: proxima-nova, helveticaneue, Helvetica, Arial, "lucida grande", sans-serif; line-height: 2;"><span style="color: #222222; font-family: arial, sans-serif; line-height: 2;"><font size="4" style="line-height: 2;">Windows IOT Core Dashboard</font></span></span></span>
</font></li>
<li style="line-height: 2;">
<font face="verdana"><span style="box-sizing: border-box; line-height: 2;"><span style="background-color: white; color: #4a4a4a; font-family: proxima-nova, helveticaneue, Helvetica, Arial, "lucida grande", sans-serif; line-height: 2;"><span style="color: #222222; font-family: arial, sans-serif; line-height: 2;"><font size="4" style="line-height: 2;">Win32 Disk Imager</font></span></span></span>
</font></li>
<li style="line-height: 2;">
<font face="verdana"><span style="box-sizing: border-box; line-height: 2;"><span style="background-color: white; color: #4a4a4a; font-family: proxima-nova, helveticaneue, Helvetica, Arial, "lucida grande", sans-serif; line-height: 2;"><span style="color: #222222; font-family: arial, sans-serif; line-height: 2;"><font size="4" style="line-height: 2;">Qualcomm DragonBoard Update Tool</font></span></span></span>
</font></li>
</ul>
</ul>
<div style="line-height: 2;">
<font face="verdana"><font color="#222222" face="arial, sans-serif" size="6" style="line-height: 2;"><b style="line-height: 2;">Story</b></font>
</font></div>
<div style="line-height: 2;">
<font face="verdana"><span style="background-color: white; color: #4a4a4a; font-family: proxima-nova, helveticaneue, Helvetica, Arial, "lucida grande", sans-serif; font-size: 18px; line-height: 2;">This project, we are going to configure DragonBoard with Windows IoT
Core in different ways. The first way is the automatic method and
other ways are manual.</span>
</font></div>
<div style="line-height: 2;">
<p class="hckui__typography__bodyL" style="background-color: white; box-sizing: border-box; color: #4a4a4a; font-family: proxima-nova, helveticaneue, Helvetica, Arial, "lucida grande", sans-serif; font-size: 18px; line-height: 2; margin: 15px 0px 10px;"><font face="verdana">
Before starting, you must install the required software in Windows 10
Machine.
</font></p>
<p class="hckui__typography__bodyL" style="background-color: white; box-sizing: border-box; color: #4a4a4a; font-family: proxima-nova, helveticaneue, Helvetica, Arial, "lucida grande", sans-serif; font-size: 18px; line-height: 26px; margin: 15px 0px 10px;"></p>
<ul style="line-height: 2; text-align: left;">
<li style="line-height: 2;">
<font face="verdana"><span style="background-color: white; box-sizing: border-box; color: #4a4a4a; font-family: proxima-nova, helveticaneue, Helvetica, Arial, "lucida grande", sans-serif; font-size: 18px; line-height: 2;">Windows IoT Core Dashboard -</span><a href="https://docs.microsoft.com/en-us/windows/iot-core/downloads">https://docs.microsoft.com/en-us/windows/iot-core/downloads</a>
</font></li>
<li style="line-height: 2;">
<font face="verdana"><span style="background-color: white; box-sizing: border-box; color: #4a4a4a; font-family: proxima-nova, helveticaneue, Helvetica, Arial, "lucida grande", sans-serif; font-size: 18px; line-height: 2;">Win32 Disk Imager - </span><a href="https://sourceforge.net/projects/win32diskimager/files/latest/download">https://sourceforge.net/projects/win32diskimager/files/latest/download</a>
</font></li>
<li style="line-height: 2;">
<font face="verdana"><span style="background-color: white; box-sizing: border-box; color: #4a4a4a; font-family: proxima-nova, helveticaneue, Helvetica, Arial, "lucida grande", sans-serif; font-size: 18px; line-height: 2;">Windows IoT Core Image or OS - </span><a href="https://www.microsoft.com/en-us/software-download/windows10IoTCore#!">https://www.microsoft.com/en-us/software-download/windows10IoTCore#!</a>
</font></li>
</ul>
<div style="line-height: 2;">
<font face="verdana"><span style="background-color: white; color: #4a4a4a; font-family: proxima-nova, helveticaneue, Helvetica, Arial, "lucida grande", sans-serif; font-size: 18px; line-height: 2;">Download and install the above-listed software</span>
</font></div>
<div style="line-height: 2;">
<font face="verdana"><span style="background-color: #eeeeee; color: #4a4a4a; font-family: proxima-nova, helveticaneue, Helvetica, Arial, "lucida grande", sans-serif; font-size: 18px; line-height: 2;"><font color="#4a4a4a">Info: If you changing any pin configuration, make sure to board
is power off.</font></span>
</font></div><div style="line-height: 2;"><span style="background-color: #eeeeee; color: #4a4a4a; font-family: proxima-nova, helveticaneue, Helvetica, Arial, "lucida grande", sans-serif; font-size: 18px; line-height: 2;"><font color="#4a4a4a" face="verdana"><br /></font></span></div>
</div>
</div>
</div>
</div>
<div style="line-height: 2;">
<font face="verdana"><span style="box-sizing: border-box; line-height: 2;"><span style="background-color: white; color: #4a4a4a; font-family: proxima-nova, helveticaneue, Helvetica, Arial, "lucida grande", sans-serif; font-size: 18px; line-height: 2;"><p class="hckui__typography__bodyL" style="box-sizing: border-box; line-height: 2; margin: 0px 0px 10px;">
<span style="box-sizing: border-box; font-weight: 700; line-height: 2;">Way 1:</span><span style="box-sizing: border-box; font-weight: 700; line-height: 2;">using Windows IoT Core Dashboard</span>
</p>
<p class="hckui__typography__bodyL" style="box-sizing: border-box; line-height: 2; margin: 15px 0px 10px;">
Here you have two options installation from online or offline.
</p></span></span>
</font><h3 class="hckui__typography__h3 title-with-anchor" id="toc-options-1--online-installation-1" style="background-color: white; box-sizing: border-box; color: #111111; font-family: proxima-nova, helveticaneue, Helvetica, Arial, "lucida grande", sans-serif; font-size: 24px; line-height: 2; margin-bottom: 0px; margin-top: 30px;">
<font face="verdana"><span style="box-sizing: border-box; line-height: 2;">Options 1: Online Installation</span>
</font></h3>
<p class="hckui__typography__bodyL" style="background-color: white; box-sizing: border-box; color: #4a4a4a; font-family: proxima-nova, helveticaneue, Helvetica, Arial, "lucida grande", sans-serif; font-size: 18px; line-height: 2; margin: 10px 0px;">
<font face="verdana"><span style="box-sizing: border-box; line-height: 2;">Open Windows IoT Core Dashboard and the left plane select </span><em style="box-sizing: border-box; line-height: 2;">Setup a new device</em><span style="box-sizing: border-box; font-weight: 700; line-height: 2;">,</span><span style="box-sizing: border-box; line-height: 2;"> select </span><em style="box-sizing: border-box; line-height: 2;">Device Type</em><span style="box-sizing: border-box; line-height: 2;"> is </span><em style="box-sizing: border-box; line-height: 2;">Qualcomm (DragonBoard 410c</em><span style="box-sizing: border-box; line-height: 2;">), </span><em style="box-sizing: border-box; line-height: 2;">OS Version</em><span style="box-sizing: border-box; line-height: 2;">, Device and check the </span><em style="box-sizing: border-box; line-height: 2;">Terms and condition</em><span style="box-sizing: border-box; line-height: 2;"> check box, then click </span><span style="box-sizing: border-box; font-weight: 700; line-height: 2;"><em style="box-sizing: border-box; line-height: 2;">Download and Install</em></span><em style="box-sizing: border-box; line-height: 2;">.</em>
</font></p>
<p class="hckui__typography__bodyL" style="background-color: white; box-sizing: border-box; color: #4a4a4a; font-family: proxima-nova, helveticaneue, Helvetica, Arial, "lucida grande", sans-serif; font-size: 18px; line-height: 2; margin: 10px 0px;">
<font face="verdana"><em style="box-sizing: border-box; line-height: 2;"><span style="color: #4d4d4d; font-size: 17.5px; font-style: normal;"></span></em>
</font></p>
<pre style="line-height: 2; text-align: left;"><em style="box-sizing: border-box; line-height: 2;"><font face="verdana">Note: Your device not shown in the select device, long press power button with + Plus button.</font></em></pre>
<p></p>
</div>
<div style="line-height: 2;">
<font face="verdana"><span style="box-sizing: border-box; line-height: 2;"><div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi6GVXPhqGhadK-62mhA5bQo3P4g9YPMEipNlAJENiuMx0e0_Hkz6buwoLmrlaTL7NzXr9O3cW4NL5m2-wRtu9XKZ3uX9qPJFAr8joK5GBJRMuh5h7hLU-H7Ky-Yzxq2XNsUi1rhLaKmFye/s740/1_GOaryuFpMI.jpg" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="409" data-original-width="740" height="221" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi6GVXPhqGhadK-62mhA5bQo3P4g9YPMEipNlAJENiuMx0e0_Hkz6buwoLmrlaTL7NzXr9O3cW4NL5m2-wRtu9XKZ3uX9qPJFAr8joK5GBJRMuh5h7hLU-H7Ky-Yzxq2XNsUi1rhLaKmFye/w400-h221/1_GOaryuFpMI.jpg" width="400" /></a>
</div>
<span style="background-color: white; color: #4a4a4a; font-family: proxima-nova, helveticaneue, Helvetica, Arial, "lucida grande", sans-serif; font-size: 18px; line-height: 2;"><br /></span></span>
</font></div>
<div style="line-height: 2;">
<span style="box-sizing: border-box; line-height: 2;"><span style="background-color: white; color: #4a4a4a; font-family: proxima-nova, helveticaneue, Helvetica, Arial, "lucida grande", sans-serif; font-size: 18px; line-height: 2;"><h3 class="hckui__typography__h3 title-with-anchor" id="toc-options-2--offline-installation-2" style="box-sizing: border-box; color: #111111; font-size: 24px; line-height: 2; margin-bottom: 0px; margin-top: 0px;">
<font face="verdana"><span style="box-sizing: border-box; line-height: 2;">Options 2: Offline Installation</span>
</font></h3>
<p class="hckui__typography__bodyL" style="box-sizing: border-box; line-height: 2; margin: 10px 0px;">
<font face="verdana"><span style="box-sizing: border-box; line-height: 2;">First, you need to download </span><em style="box-sizing: border-box; line-height: 2;">.ISO</em><span style="box-sizing: border-box; line-height: 2;"> image file from Microsoft Site and install it.</span>
</font></p>
<p class="hckui__typography__bodyL" style="box-sizing: border-box; line-height: 2; margin: 15px 0px 10px;">
<font face="verdana"><span style="box-sizing: border-box; line-height: 2;">Note ISO Image download URL - </span><a href="https://www.microsoft.com/en-us/software-download/windows10IoTCore#!">https://www.microsoft.com/en-us/software-download/windows10IoTCore#!</a>
</font></p>
<p class="hckui__typography__bodyL" style="box-sizing: border-box; line-height: 2; margin: 15px 0px 10px;">
<font face="verdana"><span style="box-sizing: border-box; line-height: 2;">After downloading the image, double click the open iso image file and
install the installer package. Check the </span><em style="box-sizing: border-box; line-height: 2;">Terms and Conditions </em><span style="box-sizing: border-box; line-height: 2;">and click install.</span>
</font></p>
<p class="hckui__typography__bodyL" style="box-sizing: border-box; line-height: 2; margin: 15px 0px 10px;"></p>
<div class="separator" style="clear: both; text-align: center;">
<font face="verdana"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjpg2J7haomGnWSKhKnOJvJlU7BjkuwMgrY0znNJ1SiHV5bCkCInFc4fWVNTMGbnFmMEqBBRn8xOeDEAEeUWHbKxbC9J0z1XO_kcDJMF8JHHGCK-oqqdOn6342nbKvVYmhMHGzQ-bO74rHN/s498/os_install_nA7VQ4Koda.jpg" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="387" data-original-width="498" height="311" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjpg2J7haomGnWSKhKnOJvJlU7BjkuwMgrY0znNJ1SiHV5bCkCInFc4fWVNTMGbnFmMEqBBRn8xOeDEAEeUWHbKxbC9J0z1XO_kcDJMF8JHHGCK-oqqdOn6342nbKvVYmhMHGzQ-bO74rHN/w400-h311/os_install_nA7VQ4Koda.jpg" width="400" /></a>
</font></div>
<font face="verdana"><span style="box-sizing: border-box; line-height: 2;"><br /></span>
</font><p></p>
<p class="hckui__typography__bodyL" style="box-sizing: border-box; line-height: 2; margin: 15px 0px 10px;"><font face="verdana">
The Installation processing window like below image,
</font></p>
<div class="separator" style="clear: both; text-align: center;">
<font face="verdana"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh3f9awJucQqStxeWxHGQIcYwRzH2MGPf8e7XFlKalu21PyiZCX9Qa0_qv8Du-32qtsWxG-YlsmGb_HTfDqI8pwafQRJDaIDEzpJHMjxRba7kKIsKA3yNmVn5rRFrqBJlzK5YmuxIFkRmi-/s498/status_installing_YujY8gYnia+%25281%2529.jpg" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="384" data-original-width="498" height="309" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh3f9awJucQqStxeWxHGQIcYwRzH2MGPf8e7XFlKalu21PyiZCX9Qa0_qv8Du-32qtsWxG-YlsmGb_HTfDqI8pwafQRJDaIDEzpJHMjxRba7kKIsKA3yNmVn5rRFrqBJlzK5YmuxIFkRmi-/w400-h309/status_installing_YujY8gYnia+%25281%2529.jpg" width="400" /></a>
</font></div>
<p class="hckui__typography__bodyL" style="box-sizing: border-box; line-height: 2; margin: 15px 0px 10px;">
<font face="verdana"><br />
</font></p>
<p class="hckui__typography__bodyL" style="box-sizing: border-box; line-height: 2; margin: 15px 0px 10px;"><font face="verdana">
After installation, you will get a.ffu file in your installed location.
</font></p>
<div class="separator" style="clear: both; text-align: center;">
<font face="verdana"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjM3lNPouj7xYm5eyBGf17-cw6WKiZNybSnxUhvqOLX-D6Y2MRJEUqWuTIcjTfQsQPzt6l5NVTQ2ms-UEVSOkBlbBNthg9VLeYb_jZKu_eX6OlJR9ciiiW5m0sHOC4l-V1LFUzQsTBMqvB0/s740/location_QX1vzQUkHZ.jpg" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="141" data-original-width="740" height="76" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjM3lNPouj7xYm5eyBGf17-cw6WKiZNybSnxUhvqOLX-D6Y2MRJEUqWuTIcjTfQsQPzt6l5NVTQ2ms-UEVSOkBlbBNthg9VLeYb_jZKu_eX6OlJR9ciiiW5m0sHOC4l-V1LFUzQsTBMqvB0/w400-h76/location_QX1vzQUkHZ.jpg" width="400" /></a>
</font></div>
<p class="hckui__typography__bodyL" style="box-sizing: border-box; line-height: 2; margin: 15px 0px 10px;">
<font face="verdana"><br />
</font></p>
<p class="hckui__typography__bodyL" style="box-sizing: border-box; line-height: 2; margin: 15px 0px 10px;"><font face="verdana">
Return back to Windows IoT Core Dashboard and fill the pre-downloaded
image field to this.ffu image and click install it.
</font></p>
<div class="separator" style="clear: both; text-align: center;">
<font face="verdana"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgGCfgkLmAH_r9ZX7NoZFvL_jUBQNOp4Am_FhM-UEeMFDl14d1v8NIx_-YMFOBaBLQSqFKpLUlE8TA6KD_hIOpW8BCQThfhyphenhyphengQblZ4oIZxpU8b6uHcOnEGPg7jeV5ZHq4IJ7xCRd_dGco6G/s740/custom_dashboard_GbZqWhIWHz.jpg" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="416" data-original-width="740" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgGCfgkLmAH_r9ZX7NoZFvL_jUBQNOp4Am_FhM-UEeMFDl14d1v8NIx_-YMFOBaBLQSqFKpLUlE8TA6KD_hIOpW8BCQThfhyphenhyphengQblZ4oIZxpU8b6uHcOnEGPg7jeV5ZHq4IJ7xCRd_dGco6G/s320/custom_dashboard_GbZqWhIWHz.jpg" width="320" /></a>
</font></div>
<p class="hckui__typography__bodyL" style="box-sizing: border-box; line-height: 2; margin: 15px 0px 10px;">
<font face="verdana"><br />
</font></p>
<p class="hckui__typography__bodyL" style="box-sizing: border-box; line-height: 2; margin: 0px 0px 10px;">
<font face="verdana"><span style="box-sizing: border-box; line-height: 2;">Now Directly go to </span><em style="box-sizing: border-box; line-height: 2;"><span style="box-sizing: border-box; font-weight: 700; line-height: 2;">Device Setup Instruction</span></em><span style="box-sizing: border-box; line-height: 2;">, no need to follow other ways.</span>
</font></p>
<p class="hckui__typography__bodyL" style="box-sizing: border-box; line-height: 2; margin: 15px 0px 10px;">
<font face="verdana"><span style="box-sizing: border-box; font-weight: 700; line-height: 2;">Way 2:</span><span style="box-sizing: border-box; font-weight: 700; line-height: 2;">using SD Card</span>
</font></p>
<p class="hckui__typography__bodyL" style="box-sizing: border-box; line-height: 2; margin: 15px 0px 10px;">
<font face="verdana"><span style="box-sizing: border-box; font-weight: 700; line-height: 2;"><span style="background-color: #f2f2f2; color: #777777; font-family: menlo, monaco, consolas, "courier new", monospace; font-size: 15.75px; font-weight: 400; line-height: 2;">Set the boot switches S6 to 0100</span></span>
</font></p>
<p class="hckui__typography__bodyL" style="box-sizing: border-box; line-height: 2; margin: 0px 0px 10px;"><font face="verdana">
In this way, we going to directly flash the iso file in SD Card and
insert into DragonBoard and install Windows IoT Core.
</font></p>
<p class="hckui__typography__bodyL" style="box-sizing: border-box; line-height: 2; margin: 15px 0px 10px;">
<font face="verdana"><span style="box-sizing: border-box; font-weight: 700;"></span>
</font></p>
<p class="hckui__typography__bodyL" style="box-sizing: border-box; line-height: 2; margin: 15px 0px 10px;"><font face="verdana">
First, download and install Win32 Disk Imager and open it. Now select
iso image and storage device, then write it.
</font></p>
<div class="separator" style="clear: both; text-align: center;">
<font face="verdana"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh32eJkg0nAJOAdNaV5EncUCKVCDBrdDxjNYUk554ChIXNdK1NRMsr0xeLB_F6cZEZx8Y_8lD46fi2Z8eI_sz_m2QwbAXFFzFvcSE77ZpKaO7Uzb7NQ3CR4fMqvkXrMIJhGeH6rM5Zh20Rx/s498/win32_install_opubhPdalC.jpg" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="388" data-original-width="498" height="311" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh32eJkg0nAJOAdNaV5EncUCKVCDBrdDxjNYUk554ChIXNdK1NRMsr0xeLB_F6cZEZx8Y_8lD46fi2Z8eI_sz_m2QwbAXFFzFvcSE77ZpKaO7Uzb7NQ3CR4fMqvkXrMIJhGeH6rM5Zh20Rx/w400-h311/win32_install_opubhPdalC.jpg" width="400" /></a>
</font></div>
<p class="hckui__typography__bodyL" style="box-sizing: border-box; line-height: 2; margin: 15px 0px 10px;">
<font face="verdana"><br />
</font></p>
<p class="hckui__typography__bodyL" style="box-sizing: border-box; line-height: 26px; margin: 15px 0px 10px;"></p>
<ul class="hckui__typography__bodyL" style="-webkit-text-stroke-width: 0px; background-color: white; box-sizing: border-box; color: #4a4a4a; font-family: proxima-nova, helveticaneue, Helvetica, Arial, "lucida grande", sans-serif; font-size: 18px; font-style: normal; font-variant-caps: normal; font-variant-ligatures: normal; font-weight: 400; letter-spacing: normal; line-height: 26px; margin: 10px 0px 0px 10px; orphans: 2; padding: 0px 0px 0px 20px; text-align: start; text-decoration-color: initial; text-decoration-style: initial; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px;"></ul>
<p></p>
<p class="hckui__typography__bodyL" style="-webkit-text-stroke-width: 0px; background-color: white; box-sizing: border-box; color: #4a4a4a; font-family: proxima-nova, helveticaneue, Helvetica, Arial, "lucida grande", sans-serif; font-size: 18px; font-style: normal; font-variant-caps: normal; font-variant-ligatures: normal; font-weight: 400; letter-spacing: normal; line-height: 2; margin: 0px 0px 10px; orphans: 2; text-align: start; text-decoration-color: initial; text-decoration-style: initial; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px;"><font face="verdana">
Now, set up your DragonBoard, must follow these instructions
</font></p>
<ul class="hckui__typography__bodyL" style="box-sizing: border-box; line-height: 2; margin: 10px 0px 0px 10px; padding: 0px 0px 0px 20px;">
<li style="box-sizing: border-box; line-height: 2;"><font face="verdana">
Power DragonBoard through the power charger
</font></li>
<li style="box-sizing: border-box; line-height: 2; margin-top: 10px;"><font face="verdana">
Connect External Display through HDMI
</font></li>
<li style="box-sizing: border-box; line-height: 2; margin-top: 10px;"><font face="verdana">
Connect Keyboard & Display through USB
</font></li>
<li style="box-sizing: border-box; line-height: 2; margin-top: 10px;"><font face="verdana">
Insert flashed SD card into DragonBoard Storage Device interface
</font></li>
</ul>
<p class="hckui__typography__bodyL" style="box-sizing: border-box; line-height: 2; margin: 10px 0px;"><font face="verdana">
Next, start your DragonBoard, After a few seconds of loading, it will
ask to choose your OS, because DragonBoard comes with Android OS, but
now inserted SD will contain Windows IoT Core OS If you choose Windows
IoT Core OS, the Android OS will destroy and the Windows IoT Core Image
installing to Device storage form SD Card, After installation, the
device will be automatically restarted and till restarting remove your
SD card
</font></p>
<div class="separator" style="clear: both; text-align: center;">
<font face="verdana"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjQnhETKHpobIfySFkNh6qycKXAgAUL8fF0YepLtCoa8mNE4wNPc8Pekfp7E9iTMZ6HKVKyqSeYgrQYi87TIrNBsIsxTFeWBDzKP3548dA7g6vxLBW9199zECGtkJezPIgND3cZUWz4_4Zf/s483/sd_write_new_jt7bM7TE2t.jpg" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="335" data-original-width="483" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjQnhETKHpobIfySFkNh6qycKXAgAUL8fF0YepLtCoa8mNE4wNPc8Pekfp7E9iTMZ6HKVKyqSeYgrQYi87TIrNBsIsxTFeWBDzKP3548dA7g6vxLBW9199zECGtkJezPIgND3cZUWz4_4Zf/s320/sd_write_new_jt7bM7TE2t.jpg" width="320" /></a>
</font></div>
<p class="hckui__typography__bodyL" style="box-sizing: border-box; line-height: 2; margin: 10px 0px;">
<font face="verdana"><br />
</font></p>
<p class="hckui__typography__bodyL" style="box-sizing: border-box; line-height: 26px; margin: 0px 0px 10px;">
<font face="verdana"><span style="box-sizing: border-box;"> Afterward, go to </span><em style="box-sizing: border-box;"><span style="box-sizing: border-box; font-weight: 700;">Device Setup Instruction</span></em><span style="box-sizing: border-box;">, no need to follow other ways.</span>
</font></p>
<h3 class="hckui__typography__h3 title-with-anchor" id="toc-way-3--using-the-dragonboard-update-tool-3" style="box-sizing: border-box; color: #111111; font-size: 24px; line-height: 32px; margin-bottom: 0px; margin-top: 30px;">
<font face="verdana"><span style="box-sizing: border-box;"> Way 3: using the DragonBoard Update Tool</span>
</font></h3>
<p class="hckui__typography__bodyL" style="box-sizing: border-box; line-height: 26px; margin: 10px 0px;"><font face="verdana">
In this way, we are going to install through USB but using DragonBoard
Update Tool
</font></p>
<p class="hckui__typography__bodyL" style="box-sizing: border-box; line-height: 26px; margin: 15px 0px 10px;">
<font face="verdana"><span style="box-sizing: border-box;">Download and Install DragonBoard Update Tool -</span><a href="http://ess-wiki.advantech.com.tw/view/IoTGateway/BSP/Windows10_IoT_Core">http://ess-wiki.advantech.com.tw/view/IoTGateway/BSP/Windows10_IoT_Core</a>
</font></p>
<p class="hckui__typography__bodyL" style="box-sizing: border-box; line-height: 26px; margin: 15px 0px 10px;"><font face="verdana">
The Windows IoT Core Image was already installed If you didn't install
follow above steps and install it After installation start Dragon Update
Tool. Now Connect DragonBoard through USB and DragonBoard Update Tool
should detect the board and the connection status should show:
"Connected" with Green Mark
</font></p>
<div class="separator" style="clear: both; text-align: center;">
<font face="verdana"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhonV_SWFG6A3GCYGIIoZYVhMozVynrOZqL7sWml40-AfQs8C7sNbaLUhfIrShwwXTf9nMEbe70oSYr_ReGR3eAfMx4bcjbszdISL6kOel-cLXZVWh9R_sy0KBUXikQosY32EHVd8pgxMgH/s663/db_update_tool_avMOfyZjRe.jpg" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="171" data-original-width="663" height="104" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhonV_SWFG6A3GCYGIIoZYVhMozVynrOZqL7sWml40-AfQs8C7sNbaLUhfIrShwwXTf9nMEbe70oSYr_ReGR3eAfMx4bcjbszdISL6kOel-cLXZVWh9R_sy0KBUXikQosY32EHVd8pgxMgH/w400-h104/db_update_tool_avMOfyZjRe.jpg" width="400" /></a>
</font></div>
<p class="hckui__typography__bodyL" style="box-sizing: border-box; line-height: 26px; margin: 15px 0px 10px;">
<font face="verdana"><br />
</font></p>
<p class="hckui__typography__bodyL" style="box-sizing: border-box; line-height: 26px; margin: 15px 0px 10px;">
<font face="verdana"><span style="box-sizing: border-box;">In the DragonBoard Update Tool click the </span><em style="box-sizing: border-box;">Browse</em><span style="box-sizing: border-box;"> button and select.ffu installed image file you installed. Click
the "Program" button and wait for the image to be copied to the
board.</span>
</font></p>
<p class="hckui__typography__bodyL" style="box-sizing: border-box; line-height: 26px; margin: 15px 0px 10px;">
<font face="verdana"><span style="color: #111111; font-size: 24px;"><b>OS Setup</b></span>
</font></p>
<div>
<font face="verdana"><span style="box-sizing: border-box;"><span style="background-color: #f2f2f2; color: #777777; font-family: menlo, monaco, consolas, "courier new", monospace; font-size: 15.75px;"><span> </span>reset the boot switches S6 to
0000</span></span>
</font></div>
<div>
<font face="verdana"><span style="box-sizing: border-box;"><span style="background-color: #f2f2f2; color: #777777; font-family: menlo, monaco, consolas, "courier new", monospace; font-size: 15.75px;"><br /></span></span>
</font></div>
<div>
<font face="verdana"><span style="box-sizing: border-box;">Now connect Display, Keyboard, Mouse, and power up the device, Wait
for a few seconds to start the OS installation automatically. Once
device is ready to install Windows IoT Core OS</span>
</font></div>
<div>
<div class="separator" style="clear: both; text-align: center;">
<font face="verdana"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgV9cnOhC6cPVyBynwO3ZimgmjJPS1hR011wUsZVAqFpParab63WFGqn0ngBdbR_XtqqbbS7iq1LZL1bvgk21-5ZsJLRrCvPEIo5KrdyA1MQ-zJb_nfs181mbode4_1GLOXqH3MtqtPhJb0/s740/img_20200220_200350_d4SNaViyld.jpg" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="437" data-original-width="740" height="236" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgV9cnOhC6cPVyBynwO3ZimgmjJPS1hR011wUsZVAqFpParab63WFGqn0ngBdbR_XtqqbbS7iq1LZL1bvgk21-5ZsJLRrCvPEIo5KrdyA1MQ-zJb_nfs181mbode4_1GLOXqH3MtqtPhJb0/w400-h236/img_20200220_200350_d4SNaViyld.jpg" width="400" /></a>
</font></div>
<font face="verdana"><span style="box-sizing: border-box;"><br /></span>
</font></div>
<div>
<font face="verdana"><span style="box-sizing: border-box;">After, the Windows Installation completed, we need to configure the
OS settings, first of all, it goes to language settings, select your
language and click Next</span>
</font></div>
<div>
<div class="separator" style="clear: both; text-align: center;">
<font face="verdana"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj0z9xuglk6qsDmMiMiHNUDvwIm9cG7BHEdnZ_L8hQZcQCalUG7ccwWZgOfZ3xn0AwKUhpIU5lzAQEUJSmiCKa5ecumBrZWn-PiYbU1kF0ewh-85mkHP-RAhuozK863khusWY7N_-3OCgXs/s740/img_20200220_203648_xxuIDqwAxn.jpg" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="433" data-original-width="740" height="234" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj0z9xuglk6qsDmMiMiHNUDvwIm9cG7BHEdnZ_L8hQZcQCalUG7ccwWZgOfZ3xn0AwKUhpIU5lzAQEUJSmiCKa5ecumBrZWn-PiYbU1kF0ewh-85mkHP-RAhuozK863khusWY7N_-3OCgXs/w400-h234/img_20200220_203648_xxuIDqwAxn.jpg" width="400" /></a>
</font></div>
<font face="verdana"><span style="box-sizing: border-box;"><br /></span>
</font></div>
<div>
<font face="verdana"><span style="box-sizing: border-box;">Next, choose privacy settings and click Next</span>
</font></div>
<div>
<div class="separator" style="clear: both; text-align: center;">
<font face="verdana"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj41SjgbmrrwxKgeNRnF5glBP2nBLP6-DBCVded1bHGvm9iV4vUZdzhZudgevVktoaSu_0hWgDYjLlnlJ-BZXNOgBMWcsyhreioR956tNARbD6bchOK32vof5nm4_6bWtwgFA7MT4UReun4/s740/img_20200220_203821_iLJBz0Rnks.jpg" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="434" data-original-width="740" height="235" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj41SjgbmrrwxKgeNRnF5glBP2nBLP6-DBCVded1bHGvm9iV4vUZdzhZudgevVktoaSu_0hWgDYjLlnlJ-BZXNOgBMWcsyhreioR956tNARbD6bchOK32vof5nm4_6bWtwgFA7MT4UReun4/w400-h235/img_20200220_203821_iLJBz0Rnks.jpg" width="400" /></a>
</font></div>
<font face="verdana"><span style="box-sizing: border-box;"><br /></span>
</font></div>
<div>
<font face="verdana"><span style="box-sizing: border-box;">Next, accept your Location settings</span>
</font></div>
<p class="hckui__typography__bodyL" style="box-sizing: border-box; line-height: 26px; margin: 15px 0px 10px;"></p>
<div class="separator" style="clear: both; text-align: center;">
<font face="verdana"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhFoCsuBMqEUDmmEdQ-7QtsJ3KEg1C8FUptvinxhA8NVIDSLTX3dtsgOJtaN0YCLHdxFcMDmre7nQ-Igf_fXXUtk2u-y48UzzpuUajaNfuKrfuRyHVj4m4p6hapTPb5cY5xFtgxogOe-HKl/s740/img_20200220_204023_LzvVCj9ZBF.jpg" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="432" data-original-width="740" height="234" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhFoCsuBMqEUDmmEdQ-7QtsJ3KEg1C8FUptvinxhA8NVIDSLTX3dtsgOJtaN0YCLHdxFcMDmre7nQ-Igf_fXXUtk2u-y48UzzpuUajaNfuKrfuRyHVj4m4p6hapTPb5cY5xFtgxogOe-HKl/w400-h234/img_20200220_204023_LzvVCj9ZBF.jpg" width="400" /></a>
</font></div>
<font face="verdana"><span style="box-sizing: border-box;"><br /></span>
</font><p></p>
<p class="hckui__typography__bodyL" style="box-sizing: border-box; line-height: 26px; margin: 15px 0px 10px;">
<font face="verdana"><span style="box-sizing: border-box;">Next, configure your network settings, connect your device to WiFi or
skip the step now</span>
</font></p>
<p class="hckui__typography__bodyL" style="box-sizing: border-box; line-height: 26px; margin: 15px 0px 10px;"></p>
<div class="separator" style="clear: both; text-align: center;">
<font face="verdana"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhFnl7xatL_qnHiQ5wbnvdgo2s09pTUktsZtxz7Eu2f53UHBYxNfZ6khV0VmYo49-82ClDClrqmECBloz0AMKUJauczILzM_57RypyZuXIL9xjLIf9BxeVuCQwh6_ZRq6Xp3_tDR_xDbOuH/s740/img_20200421_224712_-_copy_3NU34TbBmR.jpg" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="433" data-original-width="740" height="234" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhFnl7xatL_qnHiQ5wbnvdgo2s09pTUktsZtxz7Eu2f53UHBYxNfZ6khV0VmYo49-82ClDClrqmECBloz0AMKUJauczILzM_57RypyZuXIL9xjLIf9BxeVuCQwh6_ZRq6Xp3_tDR_xDbOuH/w400-h234/img_20200421_224712_-_copy_3NU34TbBmR.jpg" width="400" /></a>
</font></div>
<font face="verdana"><span style="box-sizing: border-box;"><br /></span>
</font><p></p>
<p class="hckui__typography__bodyL" style="box-sizing: border-box; line-height: 26px; margin: 15px 0px 10px;">
<font face="verdana"><span style="box-sizing: border-box;">Finally, we configured our device, Windows Start Screen like below
and check Start menu, command prompt and settings screens</span>
</font></p>
<p class="hckui__typography__bodyL" style="box-sizing: border-box; line-height: 26px; margin: 15px 0px 10px;"></p>
<div class="separator" style="clear: both; text-align: center;">
<font face="verdana"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhZZB4zMxkZYIPU45yyM_joj95OhNzwd56eZ9r1jTrCcWMX5WwpvQPbIV3kD-xP0BZa2aR4Tl1JL9VC7miT0SVspA9nQ6yyfR7q7KyQSQ7CVrIWKOeEkyigT1GG42F8IbLNRQCXgwUAdFhG/s740/img_20200421_230118_RCXJUvzTkK.jpg" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="460" data-original-width="740" height="249" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhZZB4zMxkZYIPU45yyM_joj95OhNzwd56eZ9r1jTrCcWMX5WwpvQPbIV3kD-xP0BZa2aR4Tl1JL9VC7miT0SVspA9nQ6yyfR7q7KyQSQ7CVrIWKOeEkyigT1GG42F8IbLNRQCXgwUAdFhG/w400-h249/img_20200421_230118_RCXJUvzTkK.jpg" width="400" /></a>
</font></div>
<font face="verdana"><span style="box-sizing: border-box;"><br /></span>
</font><p></p>
<p class="hckui__typography__bodyL" style="box-sizing: border-box; line-height: 26px; margin: 0px 0px 10px;">
<font face="verdana"><span style="box-sizing: border-box; font-weight: 700;">Windows </span><span style="box-sizing: border-box; font-weight: 700;">Device </span><span style="box-sizing: border-box; font-weight: 700;">Portal</span><span style="box-sizing: border-box; font-weight: 700;"> Setup Instruction</span>
</font></p>
<p class="hckui__typography__bodyL" style="box-sizing: border-box; line-height: 26px; margin: 15px 0px 10px;">
<font face="verdana"><span style="box-sizing: border-box;"></span>
</font></p>
<ul class="hckui__typography__bodyL" style="box-sizing: border-box; line-height: 26px; margin: 10px 0px 0px 10px; padding: 0px 0px 0px 20px; text-align: left;">
<li style="box-sizing: border-box;"><font face="verdana">
Now Connect USB and Windows IoT Core Dashboard Device list shown your
connected device.
</font></li>
<li style="box-sizing: border-box; margin-top: 10px;"><font face="verdana">
Make sure your host PC can reach the IP which Windows IoT Device gets.
</font></li>
<li style="box-sizing: border-box; margin-top: 10px;">
<font face="verdana"><span style="box-sizing: border-box;">Right-click the device and open Device Portal in a favorite web
browser and your localhost like </span><a class="hckui__typography__linkBlue" href="http://192.168.0.1:8080/" rel="nofollow" style="background-color: transparent; box-sizing: border-box; color: #2e9fe6; cursor: pointer; text-decoration-line: none;">http://192.168.0.1:8080</a>
</font></li>
<li style="box-sizing: border-box; margin-top: 10px;">
<font face="verdana"><span style="box-sizing: border-box;">Now a popup window will appear and give username and password to
access the device. </span>
</font></li>
<ul>
<li style="box-sizing: border-box; margin-top: 10px;">
<font face="verdana"><span style="box-sizing: border-box;">username: Administrator </span>
</font></li>
<li style="box-sizing: border-box; margin-top: 10px;"><font face="verdana">
password: p@ssw0rd
</font></li>
</ul>
</ul>
<div><font face="verdana"><br /></font></div>
<div class="separator" style="clear: both; text-align: center;">
<font face="verdana"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhwwKAfJmzSqSiXj2h5fSigdf-HSTKZ3JCvHyKAVIpVzfzrK-majPUXUideEorqMHK9u-fgZO4JZ7MBHA61b795t2Y-uo01aoO7IHt1Kxnk_1RKWueEScCh4MoCeCwPLBUjClpkfTYfqd-U/s740/screenshot_%25284%2529_duw51X3ahO.jpg" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="416" data-original-width="740" height="225" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhwwKAfJmzSqSiXj2h5fSigdf-HSTKZ3JCvHyKAVIpVzfzrK-majPUXUideEorqMHK9u-fgZO4JZ7MBHA61b795t2Y-uo01aoO7IHt1Kxnk_1RKWueEScCh4MoCeCwPLBUjClpkfTYfqd-U/w400-h225/screenshot_%25284%2529_duw51X3ahO.jpg" width="400" /></a>
</font></div>
<div><font face="verdana"><br /></font></div>
<div><font face="verdana">
Then, you have all the access to Windows Device via Windows Device
Portal
</font></div>
<div class="separator" style="clear: both; text-align: center;">
<font face="verdana"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi6C5y7xhLvj90qqUAFzAWVLhRSSL0K71KSf0gCvq2tgmzL5z9NrCQbWcBbEYvYbOwtqFNYmfuvnNgaMOtrIBA6F_A4kvDIPBBvFni5lDKnKv9jjsXuviUdPjPBgXOgxRVZSa8F9qaL7FrU/s740/screenshot_%25285%2529_rBpwBr0ci7.jpg" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="416" data-original-width="740" height="225" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi6C5y7xhLvj90qqUAFzAWVLhRSSL0K71KSf0gCvq2tgmzL5z9NrCQbWcBbEYvYbOwtqFNYmfuvnNgaMOtrIBA6F_A4kvDIPBBvFni5lDKnKv9jjsXuviUdPjPBgXOgxRVZSa8F9qaL7FrU/w400-h225/screenshot_%25285%2529_rBpwBr0ci7.jpg" width="400" /></a>
</font></div>
<div><font face="verdana"><br /></font></div>
<div>
<p class="hckui__typography__bodyL" style="box-sizing: border-box; line-height: 26px; margin: 0px 0px 10px;"><font face="verdana">
Windows Device portal configuration completed.
</font></p>
<h3 class="hckui__typography__h3 title-with-anchor" id="toc-conclusion-5" style="box-sizing: border-box; color: #111111; font-size: 24px; line-height: 32px; margin-bottom: 0px; margin-top: 30px;">
<font face="verdana"><span style="box-sizing: border-box;"> Conclusion</span>
</font></h3>
<p class="hckui__typography__bodyL" style="box-sizing: border-box; line-height: 26px; margin: 10px 0px;"><font face="verdana">
In this blog, we learned how to Install and Configure the Windows IoT
Core with DragonBoard and if you have any queries, comment below.
</font></p>
</div></span></span>
</div>
Logesh Palanihttp://www.blogger.com/profile/11572235997627400122noreply@blogger.com0tag:blogger.com,1999:blog-4259075105540267115.post-58628207273436494642020-06-01T14:29:00.002+05:302021-07-25T15:41:30.576+05:30[Solution]: Visual Studio Debugger Not Working in Xamarin Android<div style="line-height: 2;">
<p style="background-attachment: initial; background-clip: initial; background-image: initial; background-origin: initial; background-position: initial; background-repeat: initial; background-size: initial; color: #0e101a; line-height: 2; margin-bottom: 0pt; margin-top: 0pt;">
<strong style="background-attachment: initial; background-clip: initial; background-image: initial; background-origin: initial; background-position: initial; background-repeat: initial; background-size: initial; line-height: 2; margin-bottom: 0pt; margin-top: 0pt;"><font face="verdana" style="line-height: 2;">What is the issue?</font></strong>
</p>
<p style="background-attachment: initial; background-clip: initial; background-image: initial; background-origin: initial; background-position: initial; background-repeat: initial; background-size: initial; color: #0e101a; line-height: 2; margin-bottom: 0pt; margin-top: 0pt;">
<font face="verdana" style="line-height: 2;"><br /></font>
</p>
<p style="background-attachment: initial; background-clip: initial; background-image: initial; background-origin: initial; background-position: initial; background-repeat: initial; background-size: initial; color: #0e101a; line-height: 2; margin-bottom: 0pt; margin-top: 0pt;">
<span data-preserver-spaces="true" style="background-attachment: initial; background-clip: initial; background-image: initial; background-origin: initial; background-position: initial; background-repeat: initial; background-size: initial; line-height: 2; margin-bottom: 0pt; margin-top: 0pt;"><font face="verdana" style="line-height: 2;">The debugger not working issue occurs when your project configuration
issue or Visual Studio issue. Some cases, specific project breakpoints,
or debuggers not able to attach or not work properly and I faced this
issue last 2 days in my android project. without debugger developers
going to face a lot of issues. Here, I will give multiple solutions to
how to fix this issue in Visual Studio for Mac.</font></span>
</p>
<p style="background-attachment: initial; background-clip: initial; background-image: initial; background-origin: initial; background-position: initial; background-repeat: initial; background-size: initial; color: #0e101a; line-height: 2; margin-bottom: 0pt; margin-top: 0pt;">
<font face="verdana" style="line-height: 2;"><br /></font>
</p>
<p style="background-attachment: initial; background-clip: initial; background-image: initial; background-origin: initial; background-position: initial; background-repeat: initial; background-size: initial; color: #0e101a; line-height: 2; margin-bottom: 0pt; margin-top: 0pt;">
<strong style="background-attachment: initial; background-clip: initial; background-image: initial; background-origin: initial; background-position: initial; background-repeat: initial; background-size: initial; line-height: 2; margin-bottom: 0pt; margin-top: 0pt;"><font face="verdana" style="line-height: 2;">Solution 1: Specific project debugger not working</font></strong>
</p>
<p style="background-attachment: initial; background-clip: initial; background-image: initial; background-origin: initial; background-position: initial; background-repeat: initial; background-size: initial; color: #0e101a; line-height: 2; margin-bottom: 0pt; margin-top: 0pt;">
<span data-preserver-spaces="true" style="background-attachment: initial; background-clip: initial; background-image: initial; background-origin: initial; background-position: initial; background-repeat: initial; background-size: initial; line-height: 2; margin-bottom: 0pt; margin-top: 0pt;"><font face="verdana" style="line-height: 2;">Check you're debugging mode project configuration as
correct. </font></span>
</p>
<ul style="background-attachment: initial; background-clip: initial; background-image: initial; background-origin: initial; background-position: initial; background-repeat: initial; background-size: initial; color: #0e101a; line-height: 2; margin-bottom: 0pt; margin-top: 0pt;">
<li style="background-attachment: initial; background-clip: initial; background-image: initial; background-origin: initial; background-position: initial; background-repeat: initial; background-size: initial; line-height: 2; list-style-type: disc; margin-bottom: 0pt; margin-top: 0pt;">
<span data-preserver-spaces="true" style="background-attachment: initial; background-clip: initial; background-image: initial; background-origin: initial; background-position: initial; background-repeat: initial; background-size: initial; line-height: 2; margin-bottom: 0pt; margin-top: 0pt;"><font face="verdana" style="line-height: 2;">set debug type as "portable", if, it's in "full" change into
"portable"</font></span>
</li>
<li style="background-attachment: initial; background-clip: initial; background-image: initial; background-origin: initial; background-position: initial; background-repeat: initial; background-size: initial; line-height: 2; list-style-type: disc; margin-bottom: 0pt; margin-top: 0pt;">
<span data-preserver-spaces="true" style="background-attachment: initial; background-clip: initial; background-image: initial; background-origin: initial; background-position: initial; background-repeat: initial; background-size: initial; line-height: 2; margin-bottom: 0pt; margin-top: 0pt;"><font face="verdana" style="line-height: 2;">check the "Use Shared Mono Runtime", if it's not checked </font></span>
</li>
<li style="background-attachment: initial; background-clip: initial; background-image: initial; background-origin: initial; background-position: initial; background-repeat: initial; background-size: initial; line-height: 2; list-style-type: disc; margin-bottom: 0pt; margin-top: 0pt;">
<span data-preserver-spaces="true" style="background-attachment: initial; background-clip: initial; background-image: initial; background-origin: initial; background-position: initial; background-repeat: initial; background-size: initial; line-height: 2; margin-bottom: 0pt; margin-top: 0pt;"><font face="verdana" style="line-height: 2;">uncheck "Optimize code"</font></span>
</li>
<li style="background-attachment: initial; background-clip: initial; background-image: initial; background-origin: initial; background-position: initial; background-repeat: initial; background-size: initial; line-height: 2; list-style-type: disc; margin-bottom: 0pt; margin-top: 0pt;">
<span data-preserver-spaces="true" style="background-attachment: initial; background-clip: initial; background-image: initial; background-origin: initial; background-position: initial; background-repeat: initial; background-size: initial; line-height: 2; margin-bottom: 0pt; margin-top: 0pt;"><font face="verdana" style="line-height: 2;">uncheck "Multi-dex"</font></span>
</li>
</ul>
<div>
<font color="#0e101a" face="verdana"><br /></font>
<script src="https://gist.github.com/logeshpalani32/9db2bed1ef50c35f0fe24e1b0e3a17cc.js"></script>
</div>
<p style="background-attachment: initial; background-clip: initial; background-image: initial; background-origin: initial; background-position: initial; background-repeat: initial; background-size: initial; color: #0e101a; line-height: 2; margin-bottom: 0pt; margin-top: 0pt;">
<strong style="background-attachment: initial; background-clip: initial; background-image: initial; background-origin: initial; background-position: initial; background-repeat: initial; background-size: initial; line-height: 2; margin-bottom: 0pt; margin-top: 0pt;"><font face="verdana" style="line-height: 2;">Solution 2: Debugger not working in Visual Studio</font></strong>
</p>
<p style="background-attachment: initial; background-clip: initial; background-image: initial; background-origin: initial; background-position: initial; background-repeat: initial; background-size: initial; color: #0e101a; line-height: 2; margin-bottom: 0pt; margin-top: 0pt;">
<span data-preserver-spaces="true" style="background-attachment: initial; background-clip: initial; background-image: initial; background-origin: initial; background-position: initial; background-repeat: initial; background-size: initial; line-height: 2; margin-bottom: 0pt; margin-top: 0pt;"><font face="verdana" style="line-height: 2;"> First, delete the bin & obj file and restart your Visual
Studio and try. it may solve the issue. This issue came for debugger not
able to attach the Visual Studio process. Because the debugger and
Visual Studio Process was different.</font></span>
</p>
<p style="background-attachment: initial; background-clip: initial; background-image: initial; background-origin: initial; background-position: initial; background-repeat: initial; background-size: initial; color: #0e101a; line-height: 2; margin-bottom: 0pt; margin-top: 0pt;">
<font face="verdana" style="line-height: 2;"><br /></font>
</p>
<p style="background-attachment: initial; background-clip: initial; background-image: initial; background-origin: initial; background-position: initial; background-repeat: initial; background-size: initial; color: #0e101a; line-height: 2; margin-bottom: 0pt; margin-top: 0pt;">
<strong style="background-attachment: initial; background-clip: initial; background-image: initial; background-origin: initial; background-position: initial; background-repeat: initial; background-size: initial; line-height: 2; margin-bottom: 0pt; margin-top: 0pt;"><font face="verdana" style="line-height: 2;">Solution 3: Project Startup Configuration.</font></strong>
</p>
<p style="background-attachment: initial; background-clip: initial; background-image: initial; background-origin: initial; background-position: initial; background-repeat: initial; background-size: initial; color: #0e101a; line-height: 2; margin-bottom: 0pt; margin-top: 0pt;">
<span data-preserver-spaces="true" style="background-attachment: initial; background-clip: initial; background-image: initial; background-origin: initial; background-position: initial; background-repeat: initial; background-size: initial; line-height: 2; margin-bottom: 0pt; margin-top: 0pt;"><font face="verdana" style="line-height: 2;">The Visual Studio debugger sometimes won't work-in Multi-Startup
Project. Select and right-click the single project and select "Set as
Startup Project" as a single project and try.</font></span>
</p>
<p style="background-attachment: initial; background-clip: initial; background-image: initial; background-origin: initial; background-position: initial; background-repeat: initial; background-size: initial; color: #0e101a; line-height: 2; margin-bottom: 0pt; margin-top: 0pt;">
<font face="verdana" style="line-height: 2;"><br /></font>
</p>
<p style="background-attachment: initial; background-clip: initial; background-image: initial; background-origin: initial; background-position: initial; background-repeat: initial; background-size: initial; color: #0e101a; line-height: 2; margin-bottom: 0pt; margin-top: 0pt;">
<span data-preserver-spaces="true" style="background-attachment: initial; background-clip: initial; background-image: initial; background-origin: initial; background-position: initial; background-repeat: initial; background-size: initial; line-height: 2; margin-bottom: 0pt; margin-top: 0pt;"><font face="verdana" style="line-height: 2;">These 3 solutions not helping your debugger issue fixing, comment
below. I will try to find a new solution.</font></span>
</p><p style="background-attachment: initial; background-clip: initial; background-image: initial; background-origin: initial; background-position: initial; background-repeat: initial; background-size: initial; color: #0e101a; line-height: 2; margin-bottom: 0pt; margin-top: 0pt;"><span data-preserver-spaces="true" style="background-attachment: initial; background-clip: initial; background-image: initial; background-origin: initial; background-position: initial; background-repeat: initial; background-size: initial; line-height: 2; margin-bottom: 0pt; margin-top: 0pt;"><font face="verdana" style="line-height: 2;"><br /></font></span></p><p style="background-attachment: initial; background-clip: initial; background-image: initial; background-origin: initial; background-position: initial; background-repeat: initial; background-size: initial; color: #0e101a; line-height: 2; margin-bottom: 0pt; margin-top: 0pt;"><span data-preserver-spaces="true" style="background-attachment: initial; background-clip: initial; background-image: initial; background-origin: initial; background-position: initial; background-repeat: initial; background-size: initial; line-height: 2; margin-bottom: 0pt; margin-top: 0pt;"><font face="verdana" style="line-height: 2;">Thanks for reading,</font></span></p>
<p style="background-attachment: initial; background-clip: initial; background-image: initial; background-origin: initial; background-position: initial; background-repeat: initial; background-size: initial; color: #0e101a; margin-bottom: 0pt; margin-top: 0pt;"></p>
</div>
Logesh Palanihttp://www.blogger.com/profile/11572235997627400122noreply@blogger.com0tag:blogger.com,1999:blog-4259075105540267115.post-75492761238436628252020-05-16T23:52:00.002+05:302021-07-25T15:42:20.510+05:30Xamarin.Android - Gesture Detector <h2 style="line-height: 2; text-align: left;"><font face="verdana" size="4">Introduction</font></h2>
<div style="line-height: 2;">
<font face="verdana"><font size="4"> The gesture detector means finger movement in the touchscreen
interface. The gesture types are Tab, Drag, Flick, Swipe, Double Tab, Pinch,
Three Finger Pinch, Three Finger Swipe , Touch, Hold, Rotate and Shake. In
this article, we are going to learn how to implement these gestures in our
application.</font>
</font></div>
<div style="line-height: 2;">
<font face="verdana"><font size="4"><br /></font>
</font></div>
<table cellpadding="0" cellspacing="0" class="tr-caption-container" style="line-height: 2; margin-left: auto; margin-right: auto; text-align: center;">
<tbody style="line-height: 2;">
<tr style="line-height: 2;">
<td style="line-height: 2; text-align: center;">
<font face="verdana"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgZMK6o5_cLMZUX7wWG5L3idOWBw5qJlER9meVFFPCjfQq6InRVlFAA215BDxB742kumZBHXeSm5sL66DjBymtXUAEmxjgwV-JiOY0olf1mLvN5EfXq1_ECds8QBNopa_75293QdJ15CURr/" style="line-height: 2; margin-left: auto; margin-right: auto;"><font size="4"><img border="0" data-original-height="800" data-original-width="400" height="320" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgZMK6o5_cLMZUX7wWG5L3idOWBw5qJlER9meVFFPCjfQq6InRVlFAA215BDxB742kumZBHXeSm5sL66DjBymtXUAEmxjgwV-JiOY0olf1mLvN5EfXq1_ECds8QBNopa_75293QdJ15CURr/s320/XAGesturesOutput.gif" /></font></a>
</font></td>
</tr>
<tr style="line-height: 2;">
<td class="tr-caption" style="line-height: 2; text-align: center;">
<font face="verdana"><font size="4">Add caption<br /></font>
</font></td>
</tr>
</tbody>
</table>
<h2 style="clear: both; line-height: 2; text-align: left;">
<div style="line-height: 2; text-align: center;">
<font face="verdana"><font size="4"><br /></font>
</font></div>
<font face="verdana"><font size="4">Let's start the story</font>
</font></h2>
<div class="separator" style="clear: both; line-height: 2; text-align: left;">
<font face="verdana"><font size="4"><br /></font>
</font></div>
<div class="separator" style="clear: both; line-height: 2; text-align: left;">
<font face="verdana"><font size="4">Create a Xamarin Android project in Visual Studio 201.Go to the Visual
Studio >> Create new project >> select Android App (Xamarin) and
click Next. In the Next dialog box, give Project Name, Location Name and
Location, then click the Create button. </font>
</font></div>
<div class="separator" style="clear: both; line-height: 2; text-align: left;">
<font face="verdana"><font size="4"><br /></font>
</font></div>
<div class="separator" style="clear: both; line-height: 2; text-align: center;">
<font face="verdana"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh1NVf-Lh8TAiJOxuYbZadSNUGuWD9PqK4NpQDy46fRvjzGLujJVGkHOP28FzJ7yHEqRlQ86a3WbhXXAYN_ysnrklUTcWMdFt7IuhBETm_5c7KYE_iAqCliny3lz-HiwFZ9xgDeTY-kYVMr/" style="line-height: 2; margin-left: 1em; margin-right: 1em;"><font size="4"><img border="0" data-original-height="511" data-original-width="709" height="289" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh1NVf-Lh8TAiJOxuYbZadSNUGuWD9PqK4NpQDy46fRvjzGLujJVGkHOP28FzJ7yHEqRlQ86a3WbhXXAYN_ysnrklUTcWMdFt7IuhBETm_5c7KYE_iAqCliny3lz-HiwFZ9xgDeTY-kYVMr/w400-h289/Screenshot+2020-05-16+at+11.22.18+PM.png" width="400" /></font></a>
</font></div>
<div class="separator" style="clear: both; line-height: 2; text-align: left;">
<font face="verdana"><font size="4"><br /></font>
</font></div>
<div class="separator" style="clear: both; line-height: 2; text-align: left;">
<font face="verdana"><font size="4"><br /></font>
</font></div>
<div class="separator" style="clear: both; line-height: 2; text-align: left;">
<font face="verdana"><font size="4">After the project creation, open content_main.xml file and add TextView
widget in the UI and set width and height as match_parent. The code is given
below.</font>
</font></div>
<font face="verdana"><br />
<script src="https://gist.github.com/logeshpalani32/db6e73bd448ee2d6ec5073bef96eacb0.js"></script>
<br />
</font><div class="separator" style="clear: both; line-height: 2; text-align: left;">
<font face="verdana"><font size="4"><br /></font>
</font></div>
<div class="separator" style="clear: both; line-height: 2; text-align: left;">
<font face="verdana"><font size="4">Next, open MainActivity.cs class by double-clicking it. The gesture
interfaces are going to implement in this MainActivity.This interface will
create following gesture methods:</font>
</font></div>
<div class="separator" style="clear: both; line-height: 2; text-align: left;">
<font face="verdana"><font size="4"><br /></font>
</font></div>
<div class="separator" style="clear: both; line-height: 2; text-align: left;">
<ul style="line-height: 2; text-align: left;">
<ul><li style="line-height: 2;"><font face="verdana" size="4">OnDown</font></li><li style="line-height: 2;"><font face="verdana" size="4">OnScroll</font></li><li style="line-height: 2;"><font face="verdana" size="4">OnSingleTabUp</font></li><li style="line-height: 2;"><font face="verdana" size="4">OnLongPress</font></li><li style="line-height: 2;"><font face="verdana" size="4">OnFling</font></li><li style="line-height: 2;"><font face="verdana" size="4">OnShowPress</font></li></ul>
</ul>
<div style="line-height: 2;">
<font face="verdana"><font size="4">Methods with definitions here:</font>
</font></div>
<div style="line-height: 2;">
<ul style="line-height: 2; text-align: left;">
<ul><li style="line-height: 2;"><font face="verdana" size="4"><b><i>OnDown(MotionEvent e)</i> </b>- Down MotionEvent will get
triggers, once touch or tab the UI.</font></li><li style="line-height: 2;"><font face="verdana" size="4"><i><b>OnFling(MotionEvent e1, MotionEvent e2, float velocityX, float
velocityY)</b> </i>- Notifies of swipe occurs in the start and end of MotionEvent or
threshold of swipe.</font></li><li style="line-height: 2;"><font face="verdana" size="4"><i><b>OnLongPress(MotionEvent e)</b> </i>- This event will trigger,
once long touch or tab of UI</font></li><li style="line-height: 2;"><font face="verdana" size="4"><i><b>OnScroll(MotionEvent e1, MotionEvent e2, float distanceX, float
distanceY)</b></i>
- while scrolling this event will get trigger.</font></li><li style="line-height: 2;"><font face="verdana" size="4"><b><i>OnShowPress(MotionEvent e)</i></b> - performed a done
MotionEvent and not above performed a moment.</font></li><li style="line-height: 2;"><font face="verdana" size="4"><b><i>OnSingleTabTabUp(MotionEvent e) </i></b>- On single tab the
widget or layout this event.</font></li></ul>
</ul>
<div style="line-height: 2;">
<font face="verdana"><font size="4">Based on the Fling start and end velocity, we can set the following
swipe directions:</font>
</font></div>
</div>
<div style="line-height: 2;">
<ol style="line-height: 2; text-align: left;">
<ol><li style="line-height: 2;"><font face="verdana" size="4">Top to Bottom</font></li><li style="line-height: 2;"><font face="verdana" size="4">Bottom to Top</font></li><li style="line-height: 2;"><font face="verdana" size="4">Right to Left</font></li><li style="line-height: 2;"><font face="verdana" size="4">Left to Right</font></li></ol>
</ol>
<div style="line-height: 2;">
<font face="verdana"><font size="4">Velocity has two types </font>
</font></div>
</div>
<div style="line-height: 2;">
<ol style="line-height: 2; text-align: left;">
<li style="line-height: 2;">
<font face="verdana"><font size="4">Swipe threshold - the difference between the initial position and
final position of touch in the any four directions, we already seen
before.</font>
</font></li>
<li style="line-height: 2;">
<font face="verdana"><font size="4">Velocity threshold - how quickly swiped gesture.</font>
</font></li>
</ol>
<div style="line-height: 2;">
<font face="verdana"><font size="4">Finally set this interface to that TextView, we already designed in
content_main.xml and this page code is give below.</font>
</font></div>
</div>
<div style="line-height: 2;">
<font face="verdana"><font size="4"><br /></font>
</font></div>
<font face="verdana"><br />
<script src="https://gist.github.com/logeshpalani32/9b87b652eefe0ce66f452aa7f0d8ccb3.js"></script>
<br />
</font><div style="line-height: 2;">
<font face="verdana"><font size="4">Run your application and get output like below gif</font>
</font></div>
<div style="line-height: 2;">
<font face="verdana"><font size="4"><br /></font>
</font></div>
<div class="separator" style="clear: both; line-height: 2; text-align: center;">
<font face="verdana"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhU1SIgc4MUBDxZletA8X8ge6sIVvgJXvEARAKzeebknLzyWhXVZUrePP0gFIzaMgAqf7D-2AzwhjuRcODYLQx6Im2JPIrn4j1YbbfWtBaHQFE2Sgx_iNcHE7Nr5bBxaZku4MT4mk2CQxiN/" style="line-height: 2; margin-left: 1em; margin-right: 1em;"><font size="4"><img border="0" data-original-height="800" data-original-width="400" height="320" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhU1SIgc4MUBDxZletA8X8ge6sIVvgJXvEARAKzeebknLzyWhXVZUrePP0gFIzaMgAqf7D-2AzwhjuRcODYLQx6Im2JPIrn4j1YbbfWtBaHQFE2Sgx_iNcHE7Nr5bBxaZku4MT4mk2CQxiN/s320/XAGesturesOutput.gif" /></font></a>
</font></div>
<div style="line-height: 2;">
<font face="verdana"><font size="4"><br /></font>
</font></div>
<div style="line-height: 2;">
<font face="verdana"><font size="4">The full source code is here - <a href="https://github.com/logeshpalani32/Xamarin.Android-Samples/tree/master/Xamarin.Android-Gestures" target="_blank">GitHub</a></font></font></div>
<div style="line-height: 2;"><font face="verdana" size="4"><b>Conclusion</b></font></div>
<div style="line-height: 2;">
<font face="verdana"><font size="4">I hope you all, understand the gestures and how to implement our
application, Thank for reading.</font>
</font></div>
</div>
<div style="line-height: 2;"><br /></div>
Logesh Palanihttp://www.blogger.com/profile/11572235997627400122noreply@blogger.com0tag:blogger.com,1999:blog-4259075105540267115.post-14857630124897944412020-05-14T23:03:00.004+05:302020-05-14T23:51:30.380+05:30Xamarin.Forms - DataGrid<span class="TextRun SCXW257597796 BCX0" data-contrast="auto" lang="EN-US" style="-webkit-app-region: none; -webkit-appearance: none; -webkit-border-image: none; -webkit-box-align: stretch; -webkit-box-decoration-break: slice; -webkit-box-direction: normal; -webkit-box-flex: 0; -webkit-box-ordinal-group: 1; -webkit-box-orient: horizontal; -webkit-box-pack: start; -webkit-font-smoothing: auto; -webkit-highlight: none; -webkit-hyphenate-character: auto; -webkit-line-break: after-white-space; -webkit-locale: "en-US"; -webkit-margin-collapse: collapse collapse; -webkit-mask-box-image-outset: 0px; -webkit-mask-box-image-repeat: stretch; -webkit-mask-box-image-slice: 0 fill; -webkit-mask-box-image-source: none; -webkit-mask-box-image-width: auto; -webkit-mask-composite: source-over; -webkit-mask: none 0% 0% / auto repeat border-box border-box; -webkit-print-color-adjust: economy; -webkit-rtl-ordering: logical; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); -webkit-text-combine: none; -webkit-text-emphasis-position: over right; -webkit-text-emphasis: none rgba(0, 0, 0, 0.847); -webkit-text-fill-color: rgba(0, 0, 0, 0.847); -webkit-text-orientation: vertical-right; -webkit-text-security: none; -webkit-text-stroke-color: rgba(0, 0, 0, 0.847); -webkit-user-drag: none; -webkit-user-modify: read-write; -webkit-writing-mode: horizontal-tb; alignment-baseline: auto; animation: 0s ease 0s 1 normal none running none; backdrop-filter: none; backface-visibility: visible; background-attachment: scroll; background-blend-mode: normal; background-clip: border-box; background-image: none; background-origin: padding-box; background-position: 0% 0%; background-repeat: repeat; background-size: auto; baseline-shift: 0px; border-collapse: separate; border-radius: 0px; border-spacing: 0px; border: 0px none rgba(0, 0, 0, 0.847); bottom: auto; box-shadow: none; box-sizing: content-box; break-after: auto; break-before: auto; break-inside: auto; buffered-rendering: auto; caption-side: top; caret-color: rgba(0, 0, 0, 0.847); clear: none; clip-path: none; clip-rule: nonzero; clip: auto; color-interpolation-filters: linearrgb; color-interpolation: srgb; color-rendering: auto; color: rgba(0, 0, 0, 0.847); column-rule: 0px none rgba(0, 0, 0, 0.847); column-span: none; columns: auto auto; content: normal; cursor: text; cx: 0px; cy: 0px; d: none; direction: ltr; display: inline; dominant-baseline: auto; empty-cells: show; fill-opacity: 1; fill-rule: nonzero; fill: rgb(0, 0, 0); filter: none; flex-flow: row nowrap; flex: 0 1 auto; float: none; flood-color: rgb(0, 0, 0); flood-opacity: 1; font-family: calibri, calibri_embeddedfont, calibri_msfontservice, sans-serif; font-kerning: none; font-optical-sizing: auto; font-stretch: 100%; font-variant-east-asian: normal; font-variant-ligatures: no-common-ligatures no-discretionary-ligatures no-historical-ligatures no-contextual; font-variant-numeric: normal; gap: normal; grid-area: auto / auto / auto / auto; grid-auto-columns: auto; grid-auto-flow: row; grid-auto-rows: auto; grid-template-areas: none; grid-template-columns: none; grid-template-rows: none; height: auto; hyphens: manual; image-rendering: auto; isolation: auto; left: auto; lighting-color: rgb(255, 255, 255); line-height: 19.425px; list-style: outside none disc; margin: 0px; marker: none; mask-type: luminance; mask: none; max-height: none; max-width: none; min-height: 0px; min-width: 0px; mix-blend-mode: normal; object-fit: fill; object-position: 50% 50%; offset: none 0px auto 0deg; opacity: 1; order: 0; outline-offset: 0px; outline: rgba(0, 0, 0, 0.847) none 0px; overflow-anchor: auto; overflow-wrap: break-word; overflow: visible; padding: 0px; paint-order: normal; perspective-origin: 0px 0px; perspective: none; place-content: normal; place-items: normal; place-self: auto; pointer-events: auto; position: static; r: 0px; resize: none; right: auto; rx: auto; ry: auto; scroll-behavior: auto; shape-image-threshold: 0; shape-margin: 0px; shape-outside: none; shape-rendering: auto; speak: normal; stop-color: rgb(0, 0, 0); stop-opacity: 1; stroke-dasharray: none; stroke-dashoffset: 0px; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 4; stroke-opacity: 1; stroke-width: 1px; stroke: none; tab-size: 8; table-layout: auto; text-align-last: auto; text-anchor: start; text-decoration-color: rgba(0, 0, 0, 0.847); text-decoration-skip-ink: auto; text-decoration-style: solid; text-overflow: clip; text-rendering: auto; text-shadow: none; text-size-adjust: auto; text-underline-position: auto; top: auto; touch-action: auto; transform-origin: 0px 0px; transform-style: flat; transform: none; transition: all 0s ease 0s; unicode-bidi: normal; user-select: text; vector-effect: none; vertical-align: baseline; visibility: visible; width: auto; will-change: auto; word-break: normal; writing-mode: horizontal-tb; x: 0px; y: 0px; z-index: auto; zoom: 1;" xml:lang="EN-US"><span class="NormalTextRun SCXW257597796 BCX0"><font size="4"><b>Introduction<span style="font-size: 14.6667px;"> </span></b></font></span></span>
<div>
<span class="TextRun SCXW257597796 BCX0" data-contrast="auto" lang="EN-US" style="-webkit-app-region: none; -webkit-appearance: none; -webkit-border-image: none; -webkit-box-align: stretch; -webkit-box-decoration-break: slice; -webkit-box-direction: normal; -webkit-box-flex: 0; -webkit-box-ordinal-group: 1; -webkit-box-orient: horizontal; -webkit-box-pack: start; -webkit-font-smoothing: auto; -webkit-highlight: none; -webkit-hyphenate-character: auto; -webkit-line-break: after-white-space; -webkit-locale: "en-US"; -webkit-margin-collapse: collapse collapse; -webkit-mask-box-image-outset: 0px; -webkit-mask-box-image-repeat: stretch; -webkit-mask-box-image-slice: 0 fill; -webkit-mask-box-image-source: none; -webkit-mask-box-image-width: auto; -webkit-mask-composite: source-over; -webkit-mask: none 0% 0% / auto repeat border-box border-box; -webkit-print-color-adjust: economy; -webkit-rtl-ordering: logical; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); -webkit-text-combine: none; -webkit-text-emphasis-position: over right; -webkit-text-emphasis: none rgba(0, 0, 0, 0.847); -webkit-text-fill-color: rgba(0, 0, 0, 0.847); -webkit-text-orientation: vertical-right; -webkit-text-security: none; -webkit-text-stroke-color: rgba(0, 0, 0, 0.847); -webkit-user-drag: none; -webkit-user-modify: read-write; -webkit-writing-mode: horizontal-tb; alignment-baseline: auto; animation: 0s ease 0s 1 normal none running none; backdrop-filter: none; backface-visibility: visible; background-attachment: scroll; background-blend-mode: normal; background-clip: border-box; background-image: none; background-origin: padding-box; background-position: 0% 0%; background-repeat: repeat; background-size: auto; baseline-shift: 0px; border-collapse: separate; border-radius: 0px; border-spacing: 0px; border: 0px none rgba(0, 0, 0, 0.847); bottom: auto; box-shadow: none; box-sizing: content-box; break-after: auto; break-before: auto; break-inside: auto; buffered-rendering: auto; caption-side: top; caret-color: rgba(0, 0, 0, 0.847); clear: none; clip-path: none; clip-rule: nonzero; clip: auto; color-interpolation-filters: linearrgb; color-interpolation: srgb; color-rendering: auto; color: rgba(0, 0, 0, 0.847); column-rule: 0px none rgba(0, 0, 0, 0.847); column-span: none; columns: auto auto; content: normal; cursor: text; cx: 0px; cy: 0px; d: none; direction: ltr; display: inline; dominant-baseline: auto; empty-cells: show; fill-opacity: 1; fill-rule: nonzero; fill: rgb(0, 0, 0); filter: none; flex-flow: row nowrap; flex: 0 1 auto; float: none; flood-color: rgb(0, 0, 0); flood-opacity: 1; font-family: calibri, calibri_embeddedfont, calibri_msfontservice, sans-serif; font-kerning: none; font-optical-sizing: auto; font-stretch: 100%; font-variant-east-asian: normal; font-variant-ligatures: no-common-ligatures no-discretionary-ligatures no-historical-ligatures no-contextual; font-variant-numeric: normal; gap: normal; grid-area: auto / auto / auto / auto; grid-auto-columns: auto; grid-auto-flow: row; grid-auto-rows: auto; grid-template-areas: none; grid-template-columns: none; grid-template-rows: none; height: auto; hyphens: manual; image-rendering: auto; isolation: auto; left: auto; lighting-color: rgb(255, 255, 255); line-height: 19.425px; list-style: outside none disc; margin: 0px; marker: none; mask-type: luminance; mask: none; max-height: none; max-width: none; min-height: 0px; min-width: 0px; mix-blend-mode: normal; object-fit: fill; object-position: 50% 50%; offset: none 0px auto 0deg; opacity: 1; order: 0; outline-offset: 0px; outline: rgba(0, 0, 0, 0.847) none 0px; overflow-anchor: auto; overflow-wrap: break-word; overflow: visible; padding: 0px; paint-order: normal; perspective-origin: 0px 0px; perspective: none; place-content: normal; place-items: normal; place-self: auto; pointer-events: auto; position: static; r: 0px; resize: none; right: auto; rx: auto; ry: auto; scroll-behavior: auto; shape-image-threshold: 0; shape-margin: 0px; shape-outside: none; shape-rendering: auto; speak: normal; stop-color: rgb(0, 0, 0); stop-opacity: 1; stroke-dasharray: none; stroke-dashoffset: 0px; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 4; stroke-opacity: 1; stroke-width: 1px; stroke: none; tab-size: 8; table-layout: auto; text-align-last: auto; text-anchor: start; text-decoration-color: rgba(0, 0, 0, 0.847); text-decoration-skip-ink: auto; text-decoration-style: solid; text-overflow: clip; text-rendering: auto; text-shadow: none; text-size-adjust: auto; text-underline-position: auto; top: auto; touch-action: auto; transform-origin: 0px 0px; transform-style: flat; transform: none; transition: all 0s ease 0s; unicode-bidi: normal; user-select: text; vector-effect: none; vertical-align: baseline; visibility: visible; width: auto; will-change: auto; word-break: normal; writing-mode: horizontal-tb; x: 0px; y: 0px; z-index: auto; zoom: 1;" xml:lang="EN-US"><span class="NormalTextRun SCXW257597796 BCX0"><span class="TextRun SCXW71627051 BCX0" data-contrast="auto" lang="EN-US" style="-webkit-tap-highlight-color: transparent; -webkit-user-drag: none; background-color: white; font-kerning: none; font-size: 11pt; line-height: 2; margin: 0px; padding: 0px; user-select: text;" xml:lang="EN-US"><span class="NormalTextRun SCXW71627051 BCX0" style="-webkit-tap-highlight-color: transparent; -webkit-user-drag: none; background-color: inherit; line-height: 2; margin: 0px; padding: 0px; user-select: text;"><span> </span><span> </span><span> </span><span> </span><span> </span>The DataGrid is format or
architecture to show a set of data in the user interface. In Xamarin
Forms there is no default DataGrid control, so we need to install
“</span><span class="NormalTextRun SpellingErrorV2 SCXW71627051 BCX0" style="-webkit-tap-highlight-color: transparent; -webkit-user-drag: none; background-color: inherit; background-image: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB3aWR0aD0iNXB4IiBoZWlnaHQ9IjRweCIgdmlld0JveD0iMCAwIDUgNCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIj4KICAgIDwhLS0gR2VuZXJhdG9yOiBTa2V0Y2ggNTYuMiAoODE2NzIpIC0gaHR0cHM6Ly9za2V0Y2guY29tIC0tPgogICAgPHRpdGxlPnNwZWxsaW5nX3NxdWlnZ2xlPC90aXRsZT4KICAgIDxkZXNjPkNyZWF0ZWQgd2l0aCBTa2V0Y2guPC9kZXNjPgogICAgPGcgaWQ9IkZsYWdzIiBzdHJva2U9Im5vbmUiIHN0cm9rZS13aWR0aD0iMSIgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIj4KICAgICAgICA8ZyB0cmFuc2Zvcm09InRyYW5zbGF0ZSgtMTAxMC4wMDAwMDAsIC0yOTYuMDAwMDAwKSIgaWQ9InNwZWxsaW5nX3NxdWlnZ2xlIj4KICAgICAgICAgICAgPGcgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMTAxMC4wMDAwMDAsIDI5Ni4wMDAwMDApIj4KICAgICAgICAgICAgICAgIDxwYXRoIGQ9Ik0wLDMgQzEuMjUsMyAxLjI1LDEgMi41LDEgQzMuNzUsMSAzLjc1LDMgNSwzIiBpZD0iUGF0aCIgc3Ryb2tlPSIjRUIwMDAwIiBzdHJva2Utd2lkdGg9IjEiPjwvcGF0aD4KICAgICAgICAgICAgICAgIDxyZWN0IGlkPSJSZWN0YW5nbGUiIHg9IjAiIHk9IjAiIHdpZHRoPSI1IiBoZWlnaHQ9IjQiPjwvcmVjdD4KICAgICAgICAgICAgPC9nPgogICAgICAgIDwvZz4KICAgIDwvZz4KPC9zdmc+"); background-position: 0% 100%; background-repeat: repeat-x; border-bottom: 1px solid transparent; line-height: 2; margin: 0px; padding: 0px; user-select: text;">Xamarin.Forms.DataGrid</span><span class="NormalTextRun SCXW71627051 BCX0" style="-webkit-tap-highlight-color: transparent; -webkit-user-drag: none; background-color: inherit; line-height: 2; margin: 0px; padding: 0px; user-select: text;">” dependency. </span></span></span></span>
</div><div><span class="TextRun SCXW257597796 BCX0" data-contrast="auto" lang="EN-US" style="-webkit-app-region: none; -webkit-appearance: none; -webkit-border-image: none; -webkit-box-align: stretch; -webkit-box-decoration-break: slice; -webkit-box-direction: normal; -webkit-box-flex: 0; -webkit-box-ordinal-group: 1; -webkit-box-orient: horizontal; -webkit-box-pack: start; -webkit-font-smoothing: auto; -webkit-highlight: none; -webkit-hyphenate-character: auto; -webkit-line-break: after-white-space; -webkit-locale: "en-US"; -webkit-margin-collapse: collapse collapse; -webkit-mask-box-image-outset: 0px; -webkit-mask-box-image-repeat: stretch; -webkit-mask-box-image-slice: 0 fill; -webkit-mask-box-image-source: none; -webkit-mask-box-image-width: auto; -webkit-mask-composite: source-over; -webkit-mask: none 0% 0% / auto repeat border-box border-box; -webkit-print-color-adjust: economy; -webkit-rtl-ordering: logical; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); -webkit-text-combine: none; -webkit-text-emphasis-position: over right; -webkit-text-emphasis: none rgba(0, 0, 0, 0.847); -webkit-text-fill-color: rgba(0, 0, 0, 0.847); -webkit-text-orientation: vertical-right; -webkit-text-security: none; -webkit-text-stroke-color: rgba(0, 0, 0, 0.847); -webkit-user-drag: none; -webkit-user-modify: read-write; -webkit-writing-mode: horizontal-tb; alignment-baseline: auto; animation: 0s ease 0s 1 normal none running none; backdrop-filter: none; backface-visibility: visible; background-attachment: scroll; background-blend-mode: normal; background-clip: border-box; background-image: none; background-origin: padding-box; background-position: 0% 0%; background-repeat: repeat; background-size: auto; baseline-shift: 0px; border-collapse: separate; border-radius: 0px; border-spacing: 0px; border: 0px none rgba(0, 0, 0, 0.847); bottom: auto; box-shadow: none; box-sizing: content-box; break-after: auto; break-before: auto; break-inside: auto; buffered-rendering: auto; caption-side: top; caret-color: rgba(0, 0, 0, 0.847); clear: none; clip-path: none; clip-rule: nonzero; clip: auto; color-interpolation-filters: linearrgb; color-interpolation: srgb; color-rendering: auto; color: rgba(0, 0, 0, 0.847); column-rule: 0px none rgba(0, 0, 0, 0.847); column-span: none; columns: auto auto; content: normal; cursor: text; cx: 0px; cy: 0px; d: none; direction: ltr; display: inline; dominant-baseline: auto; empty-cells: show; fill-opacity: 1; fill-rule: nonzero; fill: rgb(0, 0, 0); filter: none; flex-flow: row nowrap; flex: 0 1 auto; float: none; flood-color: rgb(0, 0, 0); flood-opacity: 1; font-family: calibri, calibri_embeddedfont, calibri_msfontservice, sans-serif; font-kerning: none; font-optical-sizing: auto; font-stretch: 100%; font-variant-east-asian: normal; font-variant-ligatures: no-common-ligatures no-discretionary-ligatures no-historical-ligatures no-contextual; font-variant-numeric: normal; gap: normal; grid-area: auto / auto / auto / auto; grid-auto-columns: auto; grid-auto-flow: row; grid-auto-rows: auto; grid-template-areas: none; grid-template-columns: none; grid-template-rows: none; height: auto; hyphens: manual; image-rendering: auto; isolation: auto; left: auto; lighting-color: rgb(255, 255, 255); line-height: 19.425px; list-style: outside none disc; margin: 0px; marker: none; mask-type: luminance; mask: none; max-height: none; max-width: none; min-height: 0px; min-width: 0px; mix-blend-mode: normal; object-fit: fill; object-position: 50% 50%; offset: none 0px auto 0deg; opacity: 1; order: 0; outline-offset: 0px; outline: rgba(0, 0, 0, 0.847) none 0px; overflow-anchor: auto; overflow-wrap: break-word; overflow: visible; padding: 0px; paint-order: normal; perspective-origin: 0px 0px; perspective: none; place-content: normal; place-items: normal; place-self: auto; pointer-events: auto; position: static; r: 0px; resize: none; right: auto; rx: auto; ry: auto; scroll-behavior: auto; shape-image-threshold: 0; shape-margin: 0px; shape-outside: none; shape-rendering: auto; speak: normal; stop-color: rgb(0, 0, 0); stop-opacity: 1; stroke-dasharray: none; stroke-dashoffset: 0px; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 4; stroke-opacity: 1; stroke-width: 1px; stroke: none; tab-size: 8; table-layout: auto; text-align-last: auto; text-anchor: start; text-decoration-color: rgba(0, 0, 0, 0.847); text-decoration-skip-ink: auto; text-decoration-style: solid; text-overflow: clip; text-rendering: auto; text-shadow: none; text-size-adjust: auto; text-underline-position: auto; top: auto; touch-action: auto; transform-origin: 0px 0px; transform-style: flat; transform: none; transition: all 0s ease 0s; unicode-bidi: normal; user-select: text; vector-effect: none; vertical-align: baseline; visibility: visible; width: auto; will-change: auto; word-break: normal; writing-mode: horizontal-tb; x: 0px; y: 0px; z-index: auto; zoom: 1;" xml:lang="EN-US"><span class="NormalTextRun SCXW257597796 BCX0"><span class="TextRun SCXW71627051 BCX0" data-contrast="auto" lang="EN-US" style="-webkit-tap-highlight-color: transparent; -webkit-user-drag: none; background-color: white; font-kerning: none; font-size: 11pt; line-height: 2; margin: 0px; padding: 0px; user-select: text;" xml:lang="EN-US"><span class="NormalTextRun SCXW71627051 BCX0" style="-webkit-tap-highlight-color: transparent; -webkit-user-drag: none; background-color: inherit; line-height: 2; margin: 0px; padding: 0px; user-select: text;"><br /></span></span></span></span></div><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiVeMx6_crJWLlkLSYrEGnZHw7M1T1DpjY6AxrIIjaEgM2SYUMKPYVLbVWZqiGGjfke7Ci6xkmZStAzS0jxlOA3eJGDQExRjCqr-qtrK_Zv0-RiAogMRa-g6mVTUa30Ew8AGV1jzNBrtyrO/" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="1080" data-original-width="540" height="400" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiVeMx6_crJWLlkLSYrEGnZHw7M1T1DpjY6AxrIIjaEgM2SYUMKPYVLbVWZqiGGjfke7Ci6xkmZStAzS0jxlOA3eJGDQExRjCqr-qtrK_Zv0-RiAogMRa-g6mVTUa30Ew8AGV1jzNBrtyrO/w200-h400/WhatsApp+Image+2020-05-14+at+10.54.29+PM.jpeg" width="200" /></a></div><div><br /></div>
<div style="line-height: 2;">
<span class="TextRun SCXW257597796 BCX0" data-contrast="auto" lang="EN-US" style="-webkit-app-region: none; -webkit-appearance: none; -webkit-border-image: none; -webkit-box-align: stretch; -webkit-box-decoration-break: slice; -webkit-box-direction: normal; -webkit-box-flex: 0; -webkit-box-ordinal-group: 1; -webkit-box-orient: horizontal; -webkit-box-pack: start; -webkit-font-smoothing: auto; -webkit-highlight: none; -webkit-hyphenate-character: auto; -webkit-line-break: after-white-space; -webkit-locale: "en-US"; -webkit-margin-collapse: collapse collapse; -webkit-mask-box-image-outset: 0px; -webkit-mask-box-image-repeat: stretch; -webkit-mask-box-image-slice: 0 fill; -webkit-mask-box-image-source: none; -webkit-mask-box-image-width: auto; -webkit-mask-composite: source-over; -webkit-mask: none 0% 0% / auto repeat border-box border-box; -webkit-print-color-adjust: economy; -webkit-rtl-ordering: logical; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); -webkit-text-combine: none; -webkit-text-emphasis-position: over right; -webkit-text-emphasis: none rgba(0, 0, 0, 0.847); -webkit-text-fill-color: rgba(0, 0, 0, 0.847); -webkit-text-orientation: vertical-right; -webkit-text-security: none; -webkit-text-stroke-color: rgba(0, 0, 0, 0.847); -webkit-user-drag: none; -webkit-user-modify: read-write; -webkit-writing-mode: horizontal-tb; alignment-baseline: auto; animation: 0s ease 0s 1 normal none running none; backdrop-filter: none; backface-visibility: visible; background-attachment: scroll; background-blend-mode: normal; background-clip: border-box; background-image: none; background-origin: padding-box; background-position: 0% 0%; background-repeat: repeat; background-size: auto; baseline-shift: 0px; border-collapse: separate; border-radius: 0px; border-spacing: 0px; border: 0px none rgba(0, 0, 0, 0.847); bottom: auto; box-shadow: none; box-sizing: content-box; break-after: auto; break-before: auto; break-inside: auto; buffered-rendering: auto; caption-side: top; caret-color: rgba(0, 0, 0, 0.847); clear: none; clip-path: none; clip-rule: nonzero; clip: auto; color-interpolation-filters: linearrgb; color-interpolation: srgb; color-rendering: auto; color: rgba(0, 0, 0, 0.847); column-rule: 0px none rgba(0, 0, 0, 0.847); column-span: none; columns: auto auto; content: normal; cursor: text; cx: 0px; cy: 0px; d: none; direction: ltr; display: inline; dominant-baseline: auto; empty-cells: show; fill-opacity: 1; fill-rule: nonzero; fill: rgb(0, 0, 0); filter: none; flex-flow: row nowrap; flex: 0 1 auto; float: none; flood-color: rgb(0, 0, 0); flood-opacity: 1; font-family: calibri, calibri_embeddedfont, calibri_msfontservice, sans-serif; font-kerning: none; font-optical-sizing: auto; font-stretch: 100%; font-variant-east-asian: normal; font-variant-ligatures: no-common-ligatures no-discretionary-ligatures no-historical-ligatures no-contextual; font-variant-numeric: normal; gap: normal; grid-area: auto / auto / auto / auto; grid-auto-columns: auto; grid-auto-flow: row; grid-auto-rows: auto; grid-template-areas: none; grid-template-columns: none; grid-template-rows: none; height: auto; hyphens: manual; image-rendering: auto; isolation: auto; left: auto; lighting-color: rgb(255, 255, 255); line-height: 2; list-style: outside none disc; margin: 0px; marker: none; mask-type: luminance; mask: none; max-height: none; max-width: none; min-height: 0px; min-width: 0px; mix-blend-mode: normal; object-fit: fill; object-position: 50% 50%; offset: none 0px auto 0deg; opacity: 1; order: 0; outline-offset: 0px; outline: rgba(0, 0, 0, 0.847) none 0px; overflow-anchor: auto; overflow-wrap: break-word; overflow: visible; padding: 0px; paint-order: normal; perspective-origin: 0px 0px; perspective: none; place-content: normal; place-items: normal; place-self: auto; pointer-events: auto; position: static; r: 0px; resize: none; right: auto; rx: auto; ry: auto; scroll-behavior: auto; shape-image-threshold: 0; shape-margin: 0px; shape-outside: none; shape-rendering: auto; speak: normal; stop-color: rgb(0, 0, 0); stop-opacity: 1; stroke-dasharray: none; stroke-dashoffset: 0px; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 4; stroke-opacity: 1; stroke-width: 1px; stroke: none; tab-size: 8; table-layout: auto; text-align-last: auto; text-anchor: start; text-decoration-color: rgba(0, 0, 0, 0.847); text-decoration-skip-ink: auto; text-decoration-style: solid; text-overflow: clip; text-rendering: auto; text-shadow: none; text-size-adjust: auto; text-underline-position: auto; top: auto; touch-action: auto; transform-origin: 0px 0px; transform-style: flat; transform: none; transition: all 0s ease 0s; unicode-bidi: normal; user-select: text; vector-effect: none; vertical-align: baseline; visibility: visible; width: auto; will-change: auto; word-break: normal; writing-mode: horizontal-tb; x: 0px; y: 0px; z-index: auto; zoom: 1;" xml:lang="EN-US"><span class="NormalTextRun SCXW257597796 BCX0" style="line-height: 2;"><span class="TextRun SCXW71627051 BCX0" data-contrast="auto" lang="EN-US" style="-webkit-tap-highlight-color: transparent; -webkit-user-drag: none; background-color: white; font-kerning: none; font-size: 11pt; line-height: 2; margin: 0px; padding: 0px; user-select: text;" xml:lang="EN-US"><span class="NormalTextRun SCXW71627051 BCX0" style="-webkit-tap-highlight-color: transparent; -webkit-user-drag: none; background-color: inherit; line-height: 2; margin: 0px; padding: 0px; user-select: text;"><br /></span></span></span></span>
</div>
<div style="line-height: 2;">
<span class="TextRun SCXW257597796 BCX0" data-contrast="auto" lang="EN-US" style="-webkit-app-region: none; -webkit-appearance: none; -webkit-border-image: none; -webkit-box-align: stretch; -webkit-box-decoration-break: slice; -webkit-box-direction: normal; -webkit-box-flex: 0; -webkit-box-ordinal-group: 1; -webkit-box-orient: horizontal; -webkit-box-pack: start; -webkit-font-smoothing: auto; -webkit-highlight: none; -webkit-hyphenate-character: auto; -webkit-line-break: after-white-space; -webkit-locale: "en-US"; -webkit-margin-collapse: collapse collapse; -webkit-mask-box-image-outset: 0px; -webkit-mask-box-image-repeat: stretch; -webkit-mask-box-image-slice: 0 fill; -webkit-mask-box-image-source: none; -webkit-mask-box-image-width: auto; -webkit-mask-composite: source-over; -webkit-mask: none 0% 0% / auto repeat border-box border-box; -webkit-print-color-adjust: economy; -webkit-rtl-ordering: logical; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); -webkit-text-combine: none; -webkit-text-emphasis-position: over right; -webkit-text-emphasis: none rgba(0, 0, 0, 0.847); -webkit-text-orientation: vertical-right; -webkit-text-security: none; -webkit-user-drag: none; -webkit-user-modify: read-write; -webkit-writing-mode: horizontal-tb; alignment-baseline: auto; animation: 0s ease 0s 1 normal none running none; backdrop-filter: none; backface-visibility: visible; background-attachment: scroll; background-blend-mode: normal; background-clip: border-box; background-image: none; background-origin: padding-box; background-position: 0% 0%; background-repeat: repeat; background-size: auto; baseline-shift: 0px; border-collapse: separate; border-radius: 0px; border-spacing: 0px; border: 0px none rgba(0, 0, 0, 0.847); bottom: auto; box-shadow: none; box-sizing: content-box; break-after: auto; break-before: auto; break-inside: auto; buffered-rendering: auto; caption-side: top; clear: none; clip-path: none; clip-rule: nonzero; clip: auto; color-interpolation-filters: linearrgb; color-interpolation: srgb; color-rendering: auto; column-rule: 0px none rgba(0, 0, 0, 0.847); column-span: none; columns: auto auto; content: normal; cursor: text; cx: 0px; cy: 0px; d: none; direction: ltr; display: inline; dominant-baseline: auto; empty-cells: show; fill-opacity: 1; fill-rule: nonzero; fill: rgb(0, 0, 0); filter: none; flex-flow: row nowrap; flex: 0 1 auto; float: none; flood-color: rgb(0, 0, 0); flood-opacity: 1; font-kerning: none; font-optical-sizing: auto; font-stretch: 100%; font-variant-east-asian: normal; font-variant-numeric: normal; gap: normal; grid-area: auto / auto / auto / auto; grid-auto-columns: auto; grid-auto-flow: row; grid-auto-rows: auto; grid-template-areas: none; grid-template-columns: none; grid-template-rows: none; height: auto; hyphens: manual; image-rendering: auto; isolation: auto; left: auto; lighting-color: rgb(255, 255, 255); line-height: 2; list-style: outside none disc; margin: 0px; marker: none; mask-type: luminance; mask: none; max-height: none; max-width: none; min-height: 0px; min-width: 0px; mix-blend-mode: normal; object-fit: fill; object-position: 50% 50%; offset: none 0px auto 0deg; opacity: 1; order: 0; outline-offset: 0px; outline: rgba(0, 0, 0, 0.847) none 0px; overflow-anchor: auto; overflow-wrap: break-word; overflow: visible; padding: 0px; paint-order: normal; perspective-origin: 0px 0px; perspective: none; place-content: normal; place-items: normal; place-self: auto; pointer-events: auto; position: static; r: 0px; resize: none; right: auto; rx: auto; ry: auto; scroll-behavior: auto; shape-image-threshold: 0; shape-margin: 0px; shape-outside: none; shape-rendering: auto; speak: normal; stop-color: rgb(0, 0, 0); stop-opacity: 1; stroke-dasharray: none; stroke-dashoffset: 0px; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 4; stroke-opacity: 1; stroke-width: 1px; stroke: none; tab-size: 8; table-layout: auto; text-align-last: auto; text-anchor: start; text-decoration-color: rgba(0, 0, 0, 0.847); text-decoration-skip-ink: auto; text-decoration-style: solid; text-overflow: clip; text-rendering: auto; text-shadow: none; text-size-adjust: auto; text-underline-position: auto; top: auto; touch-action: auto; transform-origin: 0px 0px; transform-style: flat; transform: none; transition: all 0s ease 0s; unicode-bidi: normal; user-select: text; vector-effect: none; vertical-align: baseline; visibility: visible; width: auto; will-change: auto; word-break: normal; writing-mode: horizontal-tb; x: 0px; y: 0px; z-index: auto; zoom: 1;" xml:lang="EN-US"><span class="NormalTextRun SCXW257597796 BCX0" style="line-height: 2;"><span class="TextRun SCXW71627051 BCX0" data-contrast="auto" lang="EN-US" style="-webkit-tap-highlight-color: transparent; -webkit-user-drag: none; background-color: white; font-kerning: none; line-height: 2; margin: 0px; padding: 0px; user-select: text;" xml:lang="EN-US"><span class="NormalTextRun SCXW71627051 BCX0" style="-webkit-tap-highlight-color: transparent; -webkit-user-drag: none; background-color: inherit; line-height: 2; margin: 0px; padding: 0px; user-select: text;"><div class="OutlineElement Ltr SCXW152171131 BCX0" style="-webkit-tap-highlight-color: transparent; -webkit-user-drag: none; clear: both; cursor: text; direction: ltr; line-height: 2; margin: 0px; overflow: visible; padding: 0px; position: relative; user-select: text;">
<p class="Paragraph SCXW152171131 BCX0" lang="EN-US" paraeid="{50c6d90c-2f59-4d16-a459-311db21eccc7}{45}" paraid="126897420" style="-webkit-tap-highlight-color: transparent; -webkit-text-fill-color: rgba(0, 0, 0, 0.847); -webkit-text-stroke-color: rgba(0, 0, 0, 0.847); -webkit-user-drag: none; background-color: transparent; caret-color: rgba(0, 0, 0, 0.847); color: windowtext; font-family: "segoe ui", "segoe ui web", arial, verdana, sans-serif; font-variant-ligatures: normal; line-height: 2; margin: 0px; overflow-wrap: break-word; padding: 0px; user-select: text; vertical-align: baseline;" xml:lang="EN-US">
<span class="TextRun SCXW4341959 BCX0" data-contrast="auto" lang="EN-US" style="-webkit-tap-highlight-color: transparent; -webkit-user-drag: none; background-color: inherit; color: rgba(0, 0, 0, 0.847); font-family: calibri, calibri_embeddedfont, calibri_msfontservice, sans-serif; font-kerning: none; font-size: 11pt; font-variant-ligatures: none !important; line-height: 2; margin: 0px; padding: 0px; user-select: text;" xml:lang="EN-US"><span class="NormalTextRun SCXW4341959 BCX0" style="-webkit-tap-highlight-color: transparent; -webkit-user-drag: none; background-color: inherit; line-height: 2; margin: 0px; padding: 0px; user-select: text;"><b style="line-height: 2;">Let’s start :) </b></span></span></p><p class="Paragraph SCXW152171131 BCX0" lang="EN-US" paraeid="{50c6d90c-2f59-4d16-a459-311db21eccc7}{45}" paraid="126897420" style="-webkit-tap-highlight-color: transparent; -webkit-text-fill-color: rgba(0, 0, 0, 0.847); -webkit-text-stroke-color: rgba(0, 0, 0, 0.847); -webkit-user-drag: none; background-color: transparent; caret-color: rgba(0, 0, 0, 0.847); color: windowtext; font-family: "segoe ui", "segoe ui web", arial, verdana, sans-serif; font-variant-ligatures: normal; line-height: 2; margin: 0px; overflow-wrap: break-word; padding: 0px; user-select: text; vertical-align: baseline;" xml:lang="EN-US"><span class="TextRun SCXW4341959 BCX0" data-contrast="auto" lang="EN-US" style="-webkit-tap-highlight-color: transparent; -webkit-user-drag: none; background-color: inherit; color: rgba(0, 0, 0, 0.847); font-family: calibri, calibri_embeddedfont, calibri_msfontservice, sans-serif; font-kerning: none; font-size: 11pt; font-variant-ligatures: none !important; line-height: 2; margin: 0px; padding: 0px; user-select: text;" xml:lang="EN-US"><span class="NormalTextRun SCXW4341959 BCX0" style="-webkit-tap-highlight-color: transparent; -webkit-user-drag: none; background-color: inherit; line-height: 2; margin: 0px; padding: 0px; user-select: text;">create new </span></span><span class="TextRun SCXW4341959 BCX0" data-contrast="auto" lang="EN-US" style="-webkit-tap-highlight-color: transparent; -webkit-user-drag: none; background-color: inherit; color: rgba(0, 0, 0, 0.847); font-family: calibri, calibri_embeddedfont, calibri_msfontservice, sans-serif; font-kerning: none; font-size: 11pt; font-variant-ligatures: none !important; line-height: 2; margin: 0px; padding: 0px; user-select: text;" xml:lang="EN-US"><span class="NormalTextRun SpellingErrorV2 SCXW4341959 BCX0" style="-webkit-tap-highlight-color: transparent; -webkit-user-drag: none; background-color: inherit; background-image: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB3aWR0aD0iNXB4IiBoZWlnaHQ9IjRweCIgdmlld0JveD0iMCAwIDUgNCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIj4KICAgIDwhLS0gR2VuZXJhdG9yOiBTa2V0Y2ggNTYuMiAoODE2NzIpIC0gaHR0cHM6Ly9za2V0Y2guY29tIC0tPgogICAgPHRpdGxlPnNwZWxsaW5nX3NxdWlnZ2xlPC90aXRsZT4KICAgIDxkZXNjPkNyZWF0ZWQgd2l0aCBTa2V0Y2guPC9kZXNjPgogICAgPGcgaWQ9IkZsYWdzIiBzdHJva2U9Im5vbmUiIHN0cm9rZS13aWR0aD0iMSIgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIj4KICAgICAgICA8ZyB0cmFuc2Zvcm09InRyYW5zbGF0ZSgtMTAxMC4wMDAwMDAsIC0yOTYuMDAwMDAwKSIgaWQ9InNwZWxsaW5nX3NxdWlnZ2xlIj4KICAgICAgICAgICAgPGcgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMTAxMC4wMDAwMDAsIDI5Ni4wMDAwMDApIj4KICAgICAgICAgICAgICAgIDxwYXRoIGQ9Ik0wLDMgQzEuMjUsMyAxLjI1LDEgMi41LDEgQzMuNzUsMSAzLjc1LDMgNSwzIiBpZD0iUGF0aCIgc3Ryb2tlPSIjRUIwMDAwIiBzdHJva2Utd2lkdGg9IjEiPjwvcGF0aD4KICAgICAgICAgICAgICAgIDxyZWN0IGlkPSJSZWN0YW5nbGUiIHg9IjAiIHk9IjAiIHdpZHRoPSI1IiBoZWlnaHQ9IjQiPjwvcmVjdD4KICAgICAgICAgICAgPC9nPgogICAgICAgIDwvZz4KICAgIDwvZz4KPC9zdmc+"); background-position: 0% 100%; background-repeat: repeat-x; border-bottom: 1px solid transparent; line-height: 2; margin: 0px; padding: 0px; user-select: text;">Xamarin.Forms</span></span><span class="TextRun SCXW4341959 BCX0" data-contrast="auto" lang="EN-US" style="-webkit-tap-highlight-color: transparent; -webkit-user-drag: none; background-color: inherit; color: rgba(0, 0, 0, 0.847); font-family: calibri, calibri_embeddedfont, calibri_msfontservice, sans-serif; font-kerning: none; font-size: 11pt; font-variant-ligatures: none !important; line-height: 2; margin: 0px; padding: 0px; user-select: text;" xml:lang="EN-US"><span class="NormalTextRun SCXW4341959 BCX0" style="-webkit-tap-highlight-color: transparent; -webkit-user-drag: none; background-color: inherit; line-height: 2; margin: 0px; padding: 0px; user-select: text;"> application in Visual Studio for Mac</span></span><span class="EOP SCXW4341959 BCX0" data-ccp-props="{"201341983":0,"335551550":1,"335551620":1,"335559739":160,"335559740":259}" style="-webkit-tap-highlight-color: transparent; -webkit-user-drag: none; background-color: inherit; color: rgba(0, 0, 0, 0.847); font-family: calibri, calibri_embeddedfont, calibri_msfontservice, sans-serif; font-size: 11pt; line-height: 2; margin: 0px; padding: 0px; user-select: text;"> </span>
</p>
<div>
<span class="EOP SCXW4341959 BCX0" data-ccp-props="{"201341983":0,"335551550":1,"335551620":1,"335559739":160,"335559740":259}" style="-webkit-tap-highlight-color: transparent; -webkit-user-drag: none; color: rgba(0, 0, 0, 0.847); font-family: calibri, calibri_embeddedfont, calibri_msfontservice, sans-serif; font-size: 11pt; line-height: 19.425px; margin: 0px; padding: 0px; user-select: text;"><br /></span>
</div>
<div>
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto;">
<tbody>
<tr>
<td style="text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgaUQBBOdvcig07CugBBCMzMLJ-fY1Q4oTDBMAdllFTzQB_nDD0YITzYkI1RZ7KUpULcXacikezRsgvfEBqj89YlPci0Nd-4hx5pwJKQmaYITf0iN4qwASuj76Cv4rGaoZUeED6Rufx4-bL/" style="margin-left: auto; margin-right: auto;"><img border="0" data-original-height="650" data-original-width="907" height="287" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgaUQBBOdvcig07CugBBCMzMLJ-fY1Q4oTDBMAdllFTzQB_nDD0YITzYkI1RZ7KUpULcXacikezRsgvfEBqj89YlPci0Nd-4hx5pwJKQmaYITf0iN4qwASuj76Cv4rGaoZUeED6Rufx4-bL/w400-h287/Screenshot+2020-05-14+at+10.00.06+PM.png" width="400" /></a>
</td>
</tr>
<tr>
<td class="tr-caption" style="text-align: center;">
New Xamarin.Forms
</td>
</tr>
</tbody>
</table>
</div>
<div>
<span class="EOP SCXW4341959 BCX0" data-ccp-props="{"201341983":0,"335551550":1,"335551620":1,"335559739":160,"335559740":259}" style="-webkit-tap-highlight-color: transparent; -webkit-user-drag: none; color: rgba(0, 0, 0, 0.847); font-family: calibri, calibri_embeddedfont, calibri_msfontservice, sans-serif; font-size: 11pt; line-height: 19.425px; margin: 0px; padding: 0px; user-select: text;"><br /></span>
</div>
<p></p>
<p class="Paragraph SCXW152171131 BCX0" lang="EN-US" paraeid="{50c6d90c-2f59-4d16-a459-311db21eccc7}{45}" paraid="126897420" style="-webkit-tap-highlight-color: transparent; -webkit-user-drag: none; background-color: transparent; line-height: 2; margin: 0px; overflow-wrap: break-word; padding: 0px; text-align: left; user-select: text; vertical-align: baseline;" xml:lang="EN-US">
<span class="TextRun SCXW3906706 BCX0" data-contrast="auto" lang="EN-US" style="-webkit-tap-highlight-color: transparent; -webkit-user-drag: none; color: rgba(0, 0, 0, 0.847); font-family: calibri, calibri_embeddedfont, calibri_msfontservice, sans-serif; font-kerning: none; font-size: 11pt; font-variant-ligatures: none !important; line-height: 2; margin: 0px; padding: 0px; user-select: text;" xml:lang="EN-US"><span class="NormalTextRun SCXW3906706 BCX0" style="-webkit-tap-highlight-color: transparent; -webkit-user-drag: none; background-color: inherit; line-height: 2; margin: 0px; padding: 0px; user-select: text;">Once Project created, install “</span><span class="NormalTextRun SpellingErrorV2 SCXW3906706 BCX0" style="-webkit-tap-highlight-color: transparent; -webkit-user-drag: none; background-color: inherit; background-image: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB3aWR0aD0iNXB4IiBoZWlnaHQ9IjRweCIgdmlld0JveD0iMCAwIDUgNCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIj4KICAgIDwhLS0gR2VuZXJhdG9yOiBTa2V0Y2ggNTYuMiAoODE2NzIpIC0gaHR0cHM6Ly9za2V0Y2guY29tIC0tPgogICAgPHRpdGxlPnNwZWxsaW5nX3NxdWlnZ2xlPC90aXRsZT4KICAgIDxkZXNjPkNyZWF0ZWQgd2l0aCBTa2V0Y2guPC9kZXNjPgogICAgPGcgaWQ9IkZsYWdzIiBzdHJva2U9Im5vbmUiIHN0cm9rZS13aWR0aD0iMSIgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIj4KICAgICAgICA8ZyB0cmFuc2Zvcm09InRyYW5zbGF0ZSgtMTAxMC4wMDAwMDAsIC0yOTYuMDAwMDAwKSIgaWQ9InNwZWxsaW5nX3NxdWlnZ2xlIj4KICAgICAgICAgICAgPGcgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMTAxMC4wMDAwMDAsIDI5Ni4wMDAwMDApIj4KICAgICAgICAgICAgICAgIDxwYXRoIGQ9Ik0wLDMgQzEuMjUsMyAxLjI1LDEgMi41LDEgQzMuNzUsMSAzLjc1LDMgNSwzIiBpZD0iUGF0aCIgc3Ryb2tlPSIjRUIwMDAwIiBzdHJva2Utd2lkdGg9IjEiPjwvcGF0aD4KICAgICAgICAgICAgICAgIDxyZWN0IGlkPSJSZWN0YW5nbGUiIHg9IjAiIHk9IjAiIHdpZHRoPSI1IiBoZWlnaHQ9IjQiPjwvcmVjdD4KICAgICAgICAgICAgPC9nPgogICAgICAgIDwvZz4KICAgIDwvZz4KPC9zdmc+"); background-position: 0% 100%; background-repeat: repeat-x; border-bottom: 1px solid transparent; line-height: 2; margin: 0px; padding: 0px; user-select: text;">Xamarin.Forms.DataGrid</span><span class="NormalTextRun SCXW3906706 BCX0" style="-webkit-tap-highlight-color: transparent; -webkit-user-drag: none; background-color: inherit; line-height: 2; margin: 0px; padding: 0px; user-select: text;">” dependency by going, the Solution Explorer >>
right-click and select “Manage </span><span class="NormalTextRun SpellingErrorV2 SCXW3906706 BCX0" style="-webkit-tap-highlight-color: transparent; -webkit-user-drag: none; background-color: inherit; background-image: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB3aWR0aD0iNXB4IiBoZWlnaHQ9IjRweCIgdmlld0JveD0iMCAwIDUgNCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIj4KICAgIDwhLS0gR2VuZXJhdG9yOiBTa2V0Y2ggNTYuMiAoODE2NzIpIC0gaHR0cHM6Ly9za2V0Y2guY29tIC0tPgogICAgPHRpdGxlPnNwZWxsaW5nX3NxdWlnZ2xlPC90aXRsZT4KICAgIDxkZXNjPkNyZWF0ZWQgd2l0aCBTa2V0Y2guPC9kZXNjPgogICAgPGcgaWQ9IkZsYWdzIiBzdHJva2U9Im5vbmUiIHN0cm9rZS13aWR0aD0iMSIgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIj4KICAgICAgICA8ZyB0cmFuc2Zvcm09InRyYW5zbGF0ZSgtMTAxMC4wMDAwMDAsIC0yOTYuMDAwMDAwKSIgaWQ9InNwZWxsaW5nX3NxdWlnZ2xlIj4KICAgICAgICAgICAgPGcgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMTAxMC4wMDAwMDAsIDI5Ni4wMDAwMDApIj4KICAgICAgICAgICAgICAgIDxwYXRoIGQ9Ik0wLDMgQzEuMjUsMyAxLjI1LDEgMi41LDEgQzMuNzUsMSAzLjc1LDMgNSwzIiBpZD0iUGF0aCIgc3Ryb2tlPSIjRUIwMDAwIiBzdHJva2Utd2lkdGg9IjEiPjwvcGF0aD4KICAgICAgICAgICAgICAgIDxyZWN0IGlkPSJSZWN0YW5nbGUiIHg9IjAiIHk9IjAiIHdpZHRoPSI1IiBoZWlnaHQ9IjQiPjwvcmVjdD4KICAgICAgICAgICAgPC9nPgogICAgICAgIDwvZz4KICAgIDwvZz4KPC9zdmc+"); background-position: 0% 100%; background-repeat: repeat-x; border-bottom: 1px solid transparent; line-height: 2; margin: 0px; padding: 0px; user-select: text;">NuGet</span><span class="NormalTextRun SCXW3906706 BCX0" style="-webkit-tap-highlight-color: transparent; -webkit-user-drag: none; background-color: inherit; line-height: 2; margin: 0px; padding: 0px; user-select: text;"> Packages” >> in the new dialog, top right corner
search “</span><span class="NormalTextRun SpellingErrorV2 SCXW3906706 BCX0" style="-webkit-tap-highlight-color: transparent; -webkit-user-drag: none; background-color: inherit; background-image: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB3aWR0aD0iNXB4IiBoZWlnaHQ9IjRweCIgdmlld0JveD0iMCAwIDUgNCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIj4KICAgIDwhLS0gR2VuZXJhdG9yOiBTa2V0Y2ggNTYuMiAoODE2NzIpIC0gaHR0cHM6Ly9za2V0Y2guY29tIC0tPgogICAgPHRpdGxlPnNwZWxsaW5nX3NxdWlnZ2xlPC90aXRsZT4KICAgIDxkZXNjPkNyZWF0ZWQgd2l0aCBTa2V0Y2guPC9kZXNjPgogICAgPGcgaWQ9IkZsYWdzIiBzdHJva2U9Im5vbmUiIHN0cm9rZS13aWR0aD0iMSIgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIj4KICAgICAgICA8ZyB0cmFuc2Zvcm09InRyYW5zbGF0ZSgtMTAxMC4wMDAwMDAsIC0yOTYuMDAwMDAwKSIgaWQ9InNwZWxsaW5nX3NxdWlnZ2xlIj4KICAgICAgICAgICAgPGcgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMTAxMC4wMDAwMDAsIDI5Ni4wMDAwMDApIj4KICAgICAgICAgICAgICAgIDxwYXRoIGQ9Ik0wLDMgQzEuMjUsMyAxLjI1LDEgMi41LDEgQzMuNzUsMSAzLjc1LDMgNSwzIiBpZD0iUGF0aCIgc3Ryb2tlPSIjRUIwMDAwIiBzdHJva2Utd2lkdGg9IjEiPjwvcGF0aD4KICAgICAgICAgICAgICAgIDxyZWN0IGlkPSJSZWN0YW5nbGUiIHg9IjAiIHk9IjAiIHdpZHRoPSI1IiBoZWlnaHQ9IjQiPjwvcmVjdD4KICAgICAgICAgICAgPC9nPgogICAgICAgIDwvZz4KICAgIDwvZz4KPC9zdmc+"); background-position: 0% 100%; background-repeat: repeat-x; border-bottom: 1px solid transparent; line-height: 2; margin: 0px; padding: 0px; user-select: text;">Xamarin.Forms.DataGrid</span><span class="NormalTextRun SCXW3906706 BCX0" style="-webkit-tap-highlight-color: transparent; -webkit-user-drag: none; background-color: inherit; line-height: 2; margin: 0px; padding: 0px; user-select: text;">” and Install it.</span></span><span class="EOP SCXW3906706 BCX0" data-ccp-props="{"201341983":0,"335551550":1,"335551620":1,"335559739":160,"335559740":259}" style="-webkit-tap-highlight-color: transparent; -webkit-user-drag: none; color: rgba(0, 0, 0, 0.847); font-family: calibri, calibri_embeddedfont, calibri_msfontservice, sans-serif; font-size: 11pt; line-height: 2; margin: 0px; padding: 0px; user-select: text;"> </span>
</p>
<p class="Paragraph SCXW152171131 BCX0" lang="EN-US" paraeid="{50c6d90c-2f59-4d16-a459-311db21eccc7}{45}" paraid="126897420" style="-webkit-tap-highlight-color: transparent; -webkit-user-drag: none; background-color: transparent; line-height: 2; margin: 0px; overflow-wrap: break-word; padding: 0px; text-align: left; user-select: text; vertical-align: baseline;" xml:lang="EN-US"></p>
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto;">
<tbody>
<tr>
<td style="text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjctPiz8WoVJ_MEqE76kEhNGhExw9HANoZBERgQvwATcjeBvMfCXcPfJTBtqPeT6dA45mVwX2b1u_JEb4v6Gh5t8jBYdPVptaEMhByFW06RRW5IgDoQtOKKDwhDO-k0jFTZod3DSWxgxxTF/" style="margin-left: auto; margin-right: auto;"><img border="0" data-original-height="554" data-original-width="844" height="263" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjctPiz8WoVJ_MEqE76kEhNGhExw9HANoZBERgQvwATcjeBvMfCXcPfJTBtqPeT6dA45mVwX2b1u_JEb4v6Gh5t8jBYdPVptaEMhByFW06RRW5IgDoQtOKKDwhDO-k0jFTZod3DSWxgxxTF/w400-h263/Screenshot+2020-05-14+at+9.59.30+PM.png" width="400" /></a>
</td>
</tr>
<tr>
<td class="tr-caption" style="text-align: center;">
Nuget Package Install
</td>
</tr>
</tbody>
</table>
<span class="EOP SCXW3906706 BCX0" data-ccp-props="{"201341983":0,"335551550":1,"335551620":1,"335559739":160,"335559740":259}" style="-webkit-tap-highlight-color: transparent; -webkit-user-drag: none; color: rgba(0, 0, 0, 0.847); font-family: calibri, calibri_embeddedfont, calibri_msfontservice, sans-serif; font-size: 11pt; line-height: 2; margin: 0px; padding: 0px; user-select: text;"><span class="TextRun SCXW234734949 BCX0" data-contrast="auto" lang="EN-US" style="-webkit-tap-highlight-color: transparent; -webkit-user-drag: none; font-kerning: none; font-size: 11pt; font-variant-ligatures: none !important; line-height: 2; margin: 0px; padding: 0px; user-select: text;" xml:lang="EN-US"><span class="NormalTextRun SCXW234734949 BCX0" style="-webkit-tap-highlight-color: transparent; -webkit-user-drag: none; background-color: inherit; line-height: 2; margin: 0px; padding: 0px; user-select: text;">Create an MVVM folder structure, create a </span><span class="NormalTextRun SpellingErrorV2 SCXW234734949 BCX0" style="-webkit-tap-highlight-color: transparent; -webkit-user-drag: none; background-color: inherit; background-image: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB3aWR0aD0iNXB4IiBoZWlnaHQ9IjRweCIgdmlld0JveD0iMCAwIDUgNCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIj4KICAgIDwhLS0gR2VuZXJhdG9yOiBTa2V0Y2ggNTYuMiAoODE2NzIpIC0gaHR0cHM6Ly9za2V0Y2guY29tIC0tPgogICAgPHRpdGxlPnNwZWxsaW5nX3NxdWlnZ2xlPC90aXRsZT4KICAgIDxkZXNjPkNyZWF0ZWQgd2l0aCBTa2V0Y2guPC9kZXNjPgogICAgPGcgaWQ9IkZsYWdzIiBzdHJva2U9Im5vbmUiIHN0cm9rZS13aWR0aD0iMSIgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIj4KICAgICAgICA8ZyB0cmFuc2Zvcm09InRyYW5zbGF0ZSgtMTAxMC4wMDAwMDAsIC0yOTYuMDAwMDAwKSIgaWQ9InNwZWxsaW5nX3NxdWlnZ2xlIj4KICAgICAgICAgICAgPGcgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMTAxMC4wMDAwMDAsIDI5Ni4wMDAwMDApIj4KICAgICAgICAgICAgICAgIDxwYXRoIGQ9Ik0wLDMgQzEuMjUsMyAxLjI1LDEgMi41LDEgQzMuNzUsMSAzLjc1LDMgNSwzIiBpZD0iUGF0aCIgc3Ryb2tlPSIjRUIwMDAwIiBzdHJva2Utd2lkdGg9IjEiPjwvcGF0aD4KICAgICAgICAgICAgICAgIDxyZWN0IGlkPSJSZWN0YW5nbGUiIHg9IjAiIHk9IjAiIHdpZHRoPSI1IiBoZWlnaHQ9IjQiPjwvcmVjdD4KICAgICAgICAgICAgPC9nPgogICAgICAgIDwvZz4KICAgIDwvZz4KPC9zdmc+"); background-position: 0% 100%; background-repeat: repeat-x; border-bottom: 1px solid transparent; line-height: 2; margin: 0px; padding: 0px; user-select: text;">Professional.cs</span><span class="NormalTextRun SCXW234734949 BCX0" style="-webkit-tap-highlight-color: transparent; -webkit-user-drag: none; background-color: inherit; line-height: 2; margin: 0px; padding: 0px; user-select: text;"> model class under the Model folder. For that, open
Solution Explorer >> right-click the Model folder and
select Add > new class and give name as </span><span class="NormalTextRun SpellingErrorV2 SCXW234734949 BCX0" style="-webkit-tap-highlight-color: transparent; -webkit-user-drag: none; background-color: inherit; background-image: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB3aWR0aD0iNXB4IiBoZWlnaHQ9IjRweCIgdmlld0JveD0iMCAwIDUgNCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIj4KICAgIDwhLS0gR2VuZXJhdG9yOiBTa2V0Y2ggNTYuMiAoODE2NzIpIC0gaHR0cHM6Ly9za2V0Y2guY29tIC0tPgogICAgPHRpdGxlPnNwZWxsaW5nX3NxdWlnZ2xlPC90aXRsZT4KICAgIDxkZXNjPkNyZWF0ZWQgd2l0aCBTa2V0Y2guPC9kZXNjPgogICAgPGcgaWQ9IkZsYWdzIiBzdHJva2U9Im5vbmUiIHN0cm9rZS13aWR0aD0iMSIgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIj4KICAgICAgICA8ZyB0cmFuc2Zvcm09InRyYW5zbGF0ZSgtMTAxMC4wMDAwMDAsIC0yOTYuMDAwMDAwKSIgaWQ9InNwZWxsaW5nX3NxdWlnZ2xlIj4KICAgICAgICAgICAgPGcgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMTAxMC4wMDAwMDAsIDI5Ni4wMDAwMDApIj4KICAgICAgICAgICAgICAgIDxwYXRoIGQ9Ik0wLDMgQzEuMjUsMyAxLjI1LDEgMi41LDEgQzMuNzUsMSAzLjc1LDMgNSwzIiBpZD0iUGF0aCIgc3Ryb2tlPSIjRUIwMDAwIiBzdHJva2Utd2lkdGg9IjEiPjwvcGF0aD4KICAgICAgICAgICAgICAgIDxyZWN0IGlkPSJSZWN0YW5nbGUiIHg9IjAiIHk9IjAiIHdpZHRoPSI1IiBoZWlnaHQ9IjQiPjwvcmVjdD4KICAgICAgICAgICAgPC9nPgogICAgICAgIDwvZz4KICAgIDwvZz4KPC9zdmc+"); background-position: 0% 100%; background-repeat: repeat-x; border-bottom: 1px solid transparent; line-height: 2; margin: 0px; padding: 0px; user-select: text;">Professional.cs</span><span class="NormalTextRun SCXW234734949 BCX0" style="-webkit-tap-highlight-color: transparent; -webkit-user-drag: none; background-color: inherit; line-height: 2; margin: 0px; padding: 0px; user-select: text;">. The class code is given below.</span></span><span class="EOP SCXW234734949 BCX0" data-ccp-props="{"201341983":0,"335551550":1,"335551620":1,"335559739":160,"335559740":259}" style="-webkit-tap-highlight-color: transparent; -webkit-user-drag: none; font-size: 11pt; line-height: 2; margin: 0px; padding: 0px; user-select: text;"> </span></span>
</div>
<br />
<script src="https://gist.github.com/logeshpalani98/11dab70feabca4d06beee2753e5c3725.js"></script>
<div class="OutlineElement Ltr SCXW152171131 BCX0" style="-webkit-tap-highlight-color: transparent; -webkit-user-drag: none; clear: both; cursor: text; direction: ltr; line-height: 2; margin: 0px; overflow: visible; padding: 0px; position: relative; user-select: text;">
<br />
</div>
<div class="OutlineElement Ltr SCXW152171131 BCX0" style="-webkit-tap-highlight-color: transparent; -webkit-user-drag: none; clear: both; cursor: text; direction: ltr; line-height: 2; margin: 0px; overflow: visible; padding: 0px; position: relative; user-select: text;">
<span class="EOP SCXW3906706 BCX0" data-ccp-props="{"201341983":0,"335551550":1,"335551620":1,"335559739":160,"335559740":259}" style="-webkit-tap-highlight-color: transparent; -webkit-user-drag: none; color: rgba(0, 0, 0, 0.847); font-family: calibri, calibri_embeddedfont, calibri_msfontservice, sans-serif; font-size: 11pt; line-height: 2; margin: 0px; padding: 0px; user-select: text;"><span class="EOP SCXW234734949 BCX0" data-ccp-props="{"201341983":0,"335551550":1,"335551620":1,"335559739":160,"335559740":259}" style="-webkit-tap-highlight-color: transparent; -webkit-user-drag: none; font-size: 11pt; line-height: 2; margin: 0px; padding: 0px; user-select: text;"><span class="TextRun SCXW220760581 BCX0" data-contrast="auto" lang="EN-US" style="-webkit-tap-highlight-color: transparent; -webkit-user-drag: none; font-family: calibri, calibri_embeddedfont, calibri_msfontservice, sans-serif; font-kerning: none; font-size: 11pt; font-variant-ligatures: none !important; line-height: 2; margin: 0px; padding: 0px; user-select: text;" xml:lang="EN-US"><span class="NormalTextRun SCXW220760581 BCX0" style="-webkit-tap-highlight-color: transparent; -webkit-user-drag: none; background-color: inherit; line-height: 2; margin: 0px; padding: 0px; user-select: text;"><div class="OutlineElement Ltr BCX0 SCXW110534261" style="-webkit-tap-highlight-color: transparent; -webkit-user-drag: none; clear: both; cursor: text; direction: ltr; font-family: "segoe ui", "segoe ui web", arial, verdana, sans-serif; font-size: 12px; font-variant-ligatures: normal; line-height: 2; margin: 0px; overflow: visible; padding: 0px; position: relative; user-select: text;">
<p class="Paragraph SCXW110534261 BCX0" lang="EN-US" paraeid="{01d8b134-b659-44c3-9164-9e970a31ff53}{85}" paraid="1240705158" style="-webkit-tap-highlight-color: transparent; -webkit-user-drag: none; background-color: transparent; color: windowtext; line-height: 2; margin: 0px; overflow-wrap: break-word; padding: 0px; user-select: text; vertical-align: baseline;" xml:lang="EN-US">
<span class="TextRun SCXW110534261 BCX0" data-contrast="auto" lang="EN-US" style="-webkit-tap-highlight-color: transparent; -webkit-user-drag: none; font-family: calibri, calibri_embeddedfont, calibri_msfontservice, sans-serif; font-kerning: none; font-size: 11pt; font-variant-ligatures: none !important; line-height: 2; margin: 0px; padding: 0px; user-select: text;" xml:lang="EN-US"><span class="NormalTextRun SCXW110534261 BCX0" style="-webkit-tap-highlight-color: transparent; -webkit-user-drag: none; background-color: inherit; line-height: 2; margin: 0px; padding: 0px; user-select: text;">Now, create another </span><span class="NormalTextRun SpellingErrorV2 SCXW110534261 BCX0" style="-webkit-tap-highlight-color: transparent; -webkit-user-drag: none; background-color: inherit; background-image: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB3aWR0aD0iNXB4IiBoZWlnaHQ9IjRweCIgdmlld0JveD0iMCAwIDUgNCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIj4KICAgIDwhLS0gR2VuZXJhdG9yOiBTa2V0Y2ggNTYuMiAoODE2NzIpIC0gaHR0cHM6Ly9za2V0Y2guY29tIC0tPgogICAgPHRpdGxlPnNwZWxsaW5nX3NxdWlnZ2xlPC90aXRsZT4KICAgIDxkZXNjPkNyZWF0ZWQgd2l0aCBTa2V0Y2guPC9kZXNjPgogICAgPGcgaWQ9IkZsYWdzIiBzdHJva2U9Im5vbmUiIHN0cm9rZS13aWR0aD0iMSIgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIj4KICAgICAgICA8ZyB0cmFuc2Zvcm09InRyYW5zbGF0ZSgtMTAxMC4wMDAwMDAsIC0yOTYuMDAwMDAwKSIgaWQ9InNwZWxsaW5nX3NxdWlnZ2xlIj4KICAgICAgICAgICAgPGcgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMTAxMC4wMDAwMDAsIDI5Ni4wMDAwMDApIj4KICAgICAgICAgICAgICAgIDxwYXRoIGQ9Ik0wLDMgQzEuMjUsMyAxLjI1LDEgMi41LDEgQzMuNzUsMSAzLjc1LDMgNSwzIiBpZD0iUGF0aCIgc3Ryb2tlPSIjRUIwMDAwIiBzdHJva2Utd2lkdGg9IjEiPjwvcGF0aD4KICAgICAgICAgICAgICAgIDxyZWN0IGlkPSJSZWN0YW5nbGUiIHg9IjAiIHk9IjAiIHdpZHRoPSI1IiBoZWlnaHQ9IjQiPjwvcmVjdD4KICAgICAgICAgICAgPC9nPgogICAgICAgIDwvZz4KICAgIDwvZz4KPC9zdmc+"); background-position: 0% 100%; background-repeat: repeat-x; border-bottom: 1px solid transparent; line-height: 2; margin: 0px; padding: 0px; user-select: text;">DummyProfessionalData.cs</span><span class="NormalTextRun SCXW110534261 BCX0" style="-webkit-tap-highlight-color: transparent; -webkit-user-drag: none; background-color: inherit; line-height: 2; margin: 0px; padding: 0px; user-select: text;"> class under the </span><span class="NormalTextRun SpellingErrorV2 SCXW110534261 BCX0" style="-webkit-tap-highlight-color: transparent; -webkit-user-drag: none; background-color: inherit; background-image: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB3aWR0aD0iNXB4IiBoZWlnaHQ9IjRweCIgdmlld0JveD0iMCAwIDUgNCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIj4KICAgIDwhLS0gR2VuZXJhdG9yOiBTa2V0Y2ggNTYuMiAoODE2NzIpIC0gaHR0cHM6Ly9za2V0Y2guY29tIC0tPgogICAgPHRpdGxlPnNwZWxsaW5nX3NxdWlnZ2xlPC90aXRsZT4KICAgIDxkZXNjPkNyZWF0ZWQgd2l0aCBTa2V0Y2guPC9kZXNjPgogICAgPGcgaWQ9IkZsYWdzIiBzdHJva2U9Im5vbmUiIHN0cm9rZS13aWR0aD0iMSIgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIj4KICAgICAgICA8ZyB0cmFuc2Zvcm09InRyYW5zbGF0ZSgtMTAxMC4wMDAwMDAsIC0yOTYuMDAwMDAwKSIgaWQ9InNwZWxsaW5nX3NxdWlnZ2xlIj4KICAgICAgICAgICAgPGcgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMTAxMC4wMDAwMDAsIDI5Ni4wMDAwMDApIj4KICAgICAgICAgICAgICAgIDxwYXRoIGQ9Ik0wLDMgQzEuMjUsMyAxLjI1LDEgMi41LDEgQzMuNzUsMSAzLjc1LDMgNSwzIiBpZD0iUGF0aCIgc3Ryb2tlPSIjRUIwMDAwIiBzdHJva2Utd2lkdGg9IjEiPjwvcGF0aD4KICAgICAgICAgICAgICAgIDxyZWN0IGlkPSJSZWN0YW5nbGUiIHg9IjAiIHk9IjAiIHdpZHRoPSI1IiBoZWlnaHQ9IjQiPjwvcmVjdD4KICAgICAgICAgICAgPC9nPgogICAgICAgIDwvZz4KICAgIDwvZz4KPC9zdmc+"); background-position: 0% 100%; background-repeat: repeat-x; border-bottom: 1px solid transparent; line-height: 2; margin: 0px; padding: 0px; user-select: text;">Utils</span><span class="NormalTextRun SCXW110534261 BCX0" style="-webkit-tap-highlight-color: transparent; -webkit-user-drag: none; background-color: inherit; line-height: 2; margin: 0px; padding: 0px; user-select: text;"> folder for dummy data. This class used for
creating dummy data and code is given here.</span></span><span class="EOP SCXW110534261 BCX0" data-ccp-props="{"201341983":0,"335551550":1,"335551620":1,"335559739":160,"335559740":259}" style="-webkit-tap-highlight-color: transparent; -webkit-user-drag: none; font-family: calibri, calibri_embeddedfont, calibri_msfontservice, sans-serif; font-size: 11pt; line-height: 2; margin: 0px; padding: 0px; user-select: text;"> </span>
</p>
</div>
<br />
<script src="https://gist.github.com/logeshpalani98/c37cccef8e6bcf368c1cdf9d08737355.js"></script>
<br />
<div class="OutlineElement Ltr BCX0 SCXW110534261" style="-webkit-tap-highlight-color: transparent; -webkit-user-drag: none; clear: both; cursor: text; direction: ltr; font-family: "segoe ui", "segoe ui web", arial, verdana, sans-serif; font-size: 12px; font-variant-ligatures: normal; line-height: 2; margin: 0px; overflow: visible; padding: 0px; position: relative; user-select: text;">
<p class="Paragraph SCXW110534261 BCX0" paraeid="{ff9217ce-4ecd-4452-a9b4-14630278026a}{225}" paraid="1309624891" style="-webkit-tap-highlight-color: transparent; -webkit-user-drag: none; background-color: transparent; color: windowtext; line-height: 2; margin: 0px; overflow-wrap: break-word; padding: 0px; user-select: text; vertical-align: baseline;">
<span class="TextRun SCXW110534261 BCX0" data-contrast="auto" lang="EN-US" style="-webkit-tap-highlight-color: transparent; -webkit-user-drag: none; font-family: calibri, calibri_embeddedfont, calibri_msfontservice, sans-serif; font-kerning: none; font-size: 11pt; font-variant-ligatures: none !important; line-height: 2; margin: 0px; padding: 0px; user-select: text;" xml:lang="EN-US"><span class="NormalTextRun SCXW110534261 BCX0" style="-webkit-tap-highlight-color: transparent; -webkit-user-drag: none; background-color: inherit; margin: 0px; padding: 0px; user-select: text;"></span></span><span class="EOP SCXW110534261 BCX0" data-ccp-props="{"201341983":0,"335551550":1,"335551620":1,"335559739":160,"335559740":259}" style="-webkit-tap-highlight-color: transparent; -webkit-user-drag: none; font-family: calibri, calibri_embeddedfont, calibri_msfontservice, sans-serif; font-size: 11pt; line-height: 2; margin: 0px; padding: 0px; user-select: text;"> </span>
</p>
</div>
<div class="OutlineElement Ltr BCX0 SCXW110534261" style="-webkit-tap-highlight-color: transparent; -webkit-user-drag: none; clear: both; cursor: text; direction: ltr; font-family: "segoe ui", "segoe ui web", arial, verdana, sans-serif; font-size: 12px; font-variant-ligatures: normal; line-height: 2; margin: 0px; overflow: visible; padding: 0px; position: relative; user-select: text;">
<p class="Paragraph SCXW110534261 BCX0" lang="EN-US" paraeid="{01d8b134-b659-44c3-9164-9e970a31ff53}{160}" paraid="1637299660" style="-webkit-tap-highlight-color: transparent; -webkit-user-drag: none; background-color: transparent; color: windowtext; line-height: 2; margin: 0px; overflow-wrap: break-word; padding: 0px; user-select: text; vertical-align: baseline;" xml:lang="EN-US">
<span class="TextRun SCXW110534261 BCX0" data-contrast="auto" lang="EN-US" style="-webkit-tap-highlight-color: transparent; -webkit-user-drag: none; font-family: calibri, calibri_embeddedfont, calibri_msfontservice, sans-serif; font-kerning: none; font-size: 11pt; font-variant-ligatures: none !important; line-height: 2; margin: 0px; padding: 0px; user-select: text;" xml:lang="EN-US"><span class="NormalTextRun SCXW110534261 BCX0" style="-webkit-tap-highlight-color: transparent; -webkit-user-drag: none; background-color: inherit; line-height: 2; margin: 0px; padding: 0px; user-select: text;">Next, Create </span><span class="NormalTextRun SpellingErrorV2 SCXW110534261 BCX0" style="-webkit-tap-highlight-color: transparent; -webkit-user-drag: none; background-color: inherit; background-image: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB3aWR0aD0iNXB4IiBoZWlnaHQ9IjRweCIgdmlld0JveD0iMCAwIDUgNCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIj4KICAgIDwhLS0gR2VuZXJhdG9yOiBTa2V0Y2ggNTYuMiAoODE2NzIpIC0gaHR0cHM6Ly9za2V0Y2guY29tIC0tPgogICAgPHRpdGxlPnNwZWxsaW5nX3NxdWlnZ2xlPC90aXRsZT4KICAgIDxkZXNjPkNyZWF0ZWQgd2l0aCBTa2V0Y2guPC9kZXNjPgogICAgPGcgaWQ9IkZsYWdzIiBzdHJva2U9Im5vbmUiIHN0cm9rZS13aWR0aD0iMSIgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIj4KICAgICAgICA8ZyB0cmFuc2Zvcm09InRyYW5zbGF0ZSgtMTAxMC4wMDAwMDAsIC0yOTYuMDAwMDAwKSIgaWQ9InNwZWxsaW5nX3NxdWlnZ2xlIj4KICAgICAgICAgICAgPGcgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMTAxMC4wMDAwMDAsIDI5Ni4wMDAwMDApIj4KICAgICAgICAgICAgICAgIDxwYXRoIGQ9Ik0wLDMgQzEuMjUsMyAxLjI1LDEgMi41LDEgQzMuNzUsMSAzLjc1LDMgNSwzIiBpZD0iUGF0aCIgc3Ryb2tlPSIjRUIwMDAwIiBzdHJva2Utd2lkdGg9IjEiPjwvcGF0aD4KICAgICAgICAgICAgICAgIDxyZWN0IGlkPSJSZWN0YW5nbGUiIHg9IjAiIHk9IjAiIHdpZHRoPSI1IiBoZWlnaHQ9IjQiPjwvcmVjdD4KICAgICAgICAgICAgPC9nPgogICAgICAgIDwvZz4KICAgIDwvZz4KPC9zdmc+"); background-position: 0% 100%; background-repeat: repeat-x; border-bottom: 1px solid transparent; line-height: 2; margin: 0px; padding: 0px; user-select: text;">MainPageViewModel.cs</span><span class="NormalTextRun SCXW110534261 BCX0" style="-webkit-tap-highlight-color: transparent; -webkit-user-drag: none; background-color: inherit; line-height: 2; margin: 0px; padding: 0px; user-select: text;"> class under </span><span class="NormalTextRun SpellingErrorV2 SCXW110534261 BCX0" style="-webkit-tap-highlight-color: transparent; -webkit-user-drag: none; background-color: inherit; background-image: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB3aWR0aD0iNXB4IiBoZWlnaHQ9IjRweCIgdmlld0JveD0iMCAwIDUgNCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIj4KICAgIDwhLS0gR2VuZXJhdG9yOiBTa2V0Y2ggNTYuMiAoODE2NzIpIC0gaHR0cHM6Ly9za2V0Y2guY29tIC0tPgogICAgPHRpdGxlPnNwZWxsaW5nX3NxdWlnZ2xlPC90aXRsZT4KICAgIDxkZXNjPkNyZWF0ZWQgd2l0aCBTa2V0Y2guPC9kZXNjPgogICAgPGcgaWQ9IkZsYWdzIiBzdHJva2U9Im5vbmUiIHN0cm9rZS13aWR0aD0iMSIgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIj4KICAgICAgICA8ZyB0cmFuc2Zvcm09InRyYW5zbGF0ZSgtMTAxMC4wMDAwMDAsIC0yOTYuMDAwMDAwKSIgaWQ9InNwZWxsaW5nX3NxdWlnZ2xlIj4KICAgICAgICAgICAgPGcgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMTAxMC4wMDAwMDAsIDI5Ni4wMDAwMDApIj4KICAgICAgICAgICAgICAgIDxwYXRoIGQ9Ik0wLDMgQzEuMjUsMyAxLjI1LDEgMi41LDEgQzMuNzUsMSAzLjc1LDMgNSwzIiBpZD0iUGF0aCIgc3Ryb2tlPSIjRUIwMDAwIiBzdHJva2Utd2lkdGg9IjEiPjwvcGF0aD4KICAgICAgICAgICAgICAgIDxyZWN0IGlkPSJSZWN0YW5nbGUiIHg9IjAiIHk9IjAiIHdpZHRoPSI1IiBoZWlnaHQ9IjQiPjwvcmVjdD4KICAgICAgICAgICAgPC9nPgogICAgICAgIDwvZz4KICAgIDwvZz4KPC9zdmc+"); background-position: 0% 100%; background-repeat: repeat-x; border-bottom: 1px solid transparent; line-height: 2; margin: 0px; padding: 0px; user-select: text;">ViewModel</span><span class="NormalTextRun SCXW110534261 BCX0" style="-webkit-tap-highlight-color: transparent; -webkit-user-drag: none; background-color: inherit; line-height: 2; margin: 0px; padding: 0px; user-select: text;"> folder and write given below code. Here, List
and </span><span class="NormalTextRun SpellingErrorV2 SCXW110534261 BCX0" style="-webkit-tap-highlight-color: transparent; -webkit-user-drag: none; background-color: inherit; background-image: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB3aWR0aD0iNXB4IiBoZWlnaHQ9IjRweCIgdmlld0JveD0iMCAwIDUgNCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIj4KICAgIDwhLS0gR2VuZXJhdG9yOiBTa2V0Y2ggNTYuMiAoODE2NzIpIC0gaHR0cHM6Ly9za2V0Y2guY29tIC0tPgogICAgPHRpdGxlPnNwZWxsaW5nX3NxdWlnZ2xlPC90aXRsZT4KICAgIDxkZXNjPkNyZWF0ZWQgd2l0aCBTa2V0Y2guPC9kZXNjPgogICAgPGcgaWQ9IkZsYWdzIiBzdHJva2U9Im5vbmUiIHN0cm9rZS13aWR0aD0iMSIgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIj4KICAgICAgICA8ZyB0cmFuc2Zvcm09InRyYW5zbGF0ZSgtMTAxMC4wMDAwMDAsIC0yOTYuMDAwMDAwKSIgaWQ9InNwZWxsaW5nX3NxdWlnZ2xlIj4KICAgICAgICAgICAgPGcgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMTAxMC4wMDAwMDAsIDI5Ni4wMDAwMDApIj4KICAgICAgICAgICAgICAgIDxwYXRoIGQ9Ik0wLDMgQzEuMjUsMyAxLjI1LDEgMi41LDEgQzMuNzUsMSAzLjc1LDMgNSwzIiBpZD0iUGF0aCIgc3Ryb2tlPSIjRUIwMDAwIiBzdHJva2Utd2lkdGg9IjEiPjwvcGF0aD4KICAgICAgICAgICAgICAgIDxyZWN0IGlkPSJSZWN0YW5nbGUiIHg9IjAiIHk9IjAiIHdpZHRoPSI1IiBoZWlnaHQ9IjQiPjwvcmVjdD4KICAgICAgICAgICAgPC9nPgogICAgICAgIDwvZz4KICAgIDwvZz4KPC9zdmc+"); background-position: 0% 100%; background-repeat: repeat-x; border-bottom: 1px solid transparent; line-height: 2; margin: 0px; padding: 0px; user-select: text;">IsRefreshing</span><span class="NormalTextRun SCXW110534261 BCX0" style="-webkit-tap-highlight-color: transparent; -webkit-user-drag: none; background-color: inherit; line-height: 2; margin: 0px; padding: 0px; user-select: text;"> properties and refresh commend are written,
and when the user swipe top to bottom, the refresh
command will execute and refresh the UI with updated
data. </span><span class="NormalTextRun SpellingErrorV2 SCXW110534261 BCX0" style="-webkit-tap-highlight-color: transparent; -webkit-user-drag: none; background-color: inherit; background-image: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB3aWR0aD0iNXB4IiBoZWlnaHQ9IjRweCIgdmlld0JveD0iMCAwIDUgNCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIj4KICAgIDwhLS0gR2VuZXJhdG9yOiBTa2V0Y2ggNTYuMiAoODE2NzIpIC0gaHR0cHM6Ly9za2V0Y2guY29tIC0tPgogICAgPHRpdGxlPnNwZWxsaW5nX3NxdWlnZ2xlPC90aXRsZT4KICAgIDxkZXNjPkNyZWF0ZWQgd2l0aCBTa2V0Y2guPC9kZXNjPgogICAgPGcgaWQ9IkZsYWdzIiBzdHJva2U9Im5vbmUiIHN0cm9rZS13aWR0aD0iMSIgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIj4KICAgICAgICA8ZyB0cmFuc2Zvcm09InRyYW5zbGF0ZSgtMTAxMC4wMDAwMDAsIC0yOTYuMDAwMDAwKSIgaWQ9InNwZWxsaW5nX3NxdWlnZ2xlIj4KICAgICAgICAgICAgPGcgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMTAxMC4wMDAwMDAsIDI5Ni4wMDAwMDApIj4KICAgICAgICAgICAgICAgIDxwYXRoIGQ9Ik0wLDMgQzEuMjUsMyAxLjI1LDEgMi41LDEgQzMuNzUsMSAzLjc1LDMgNSwzIiBpZD0iUGF0aCIgc3Ryb2tlPSIjRUIwMDAwIiBzdHJva2Utd2lkdGg9IjEiPjwvcGF0aD4KICAgICAgICAgICAgICAgIDxyZWN0IGlkPSJSZWN0YW5nbGUiIHg9IjAiIHk9IjAiIHdpZHRoPSI1IiBoZWlnaHQ9IjQiPjwvcmVjdD4KICAgICAgICAgICAgPC9nPgogICAgICAgIDwvZz4KICAgIDwvZz4KPC9zdmc+"); background-position: 0% 100%; background-repeat: repeat-x; border-bottom: 1px solid transparent; line-height: 2; margin: 0px; padding: 0px; user-select: text;">INotifyPropertyChanged</span><span class="NormalTextRun SCXW110534261 BCX0" style="-webkit-tap-highlight-color: transparent; -webkit-user-drag: none; background-color: inherit; line-height: 2; margin: 0px; padding: 0px; user-select: text;"> property also implemented to invoke the UI
with new Data. The Professional Property for single
data selection. </span></span><span class="EOP SCXW110534261 BCX0" data-ccp-props="{"201341983":0,"335551550":1,"335551620":1,"335559739":160,"335559740":259}" style="-webkit-tap-highlight-color: transparent; -webkit-user-drag: none; font-family: calibri, calibri_embeddedfont, calibri_msfontservice, sans-serif; font-size: 11pt; line-height: 2; margin: 0px; padding: 0px; user-select: text;"> </span>
</p>
</div>
<div class="OutlineElement Ltr BCX0 SCXW110534261" style="-webkit-tap-highlight-color: transparent; -webkit-user-drag: none; clear: both; cursor: text; direction: ltr; font-family: "segoe ui", "segoe ui web", arial, verdana, sans-serif; font-size: 12px; font-variant-ligatures: normal; line-height: 2; margin: 0px; overflow: visible; padding: 0px; position: relative; user-select: text;">
<p class="Paragraph SCXW110534261 BCX0" lang="EN-US" paraeid="{01d8b134-b659-44c3-9164-9e970a31ff53}{167}" paraid="1720362647" style="-webkit-tap-highlight-color: transparent; -webkit-user-drag: none; background-color: transparent; color: windowtext; line-height: 2; margin: 0px; overflow-wrap: break-word; padding: 0px; user-select: text; vertical-align: baseline;" xml:lang="EN-US">
<span class="TextRun SCXW110534261 BCX0" data-contrast="auto" lang="EN-US" style="-webkit-tap-highlight-color: transparent; -webkit-user-drag: none; font-family: calibri, calibri_embeddedfont, calibri_msfontservice, sans-serif; font-kerning: none; font-size: 11pt; font-variant-ligatures: none !important; line-height: 2; margin: 0px; padding: 0px; user-select: text;" xml:lang="EN-US"> </span><span class="EOP SCXW110534261 BCX0" data-ccp-props="{"201341983":0,"335551550":1,"335551620":1,"335559739":160,"335559740":259}" style="-webkit-tap-highlight-color: transparent; -webkit-user-drag: none; font-family: calibri, calibri_embeddedfont, calibri_msfontservice, sans-serif; font-size: 11pt; line-height: 2; margin: 0px; padding: 0px; user-select: text;"> </span>
</p>
</div>
<br />
<script src="https://gist.github.com/logeshpalani98/aee34adea55ccad3b503431f3dd43ea9.js"></script>
<br />
<div class="OutlineElement Ltr BCX0 SCXW110534261" style="-webkit-tap-highlight-color: transparent; -webkit-user-drag: none; clear: both; cursor: text; direction: ltr; font-family: "segoe ui", "segoe ui web", arial, verdana, sans-serif; font-size: 12px; font-variant-ligatures: normal; line-height: 2; margin: 0px; overflow: visible; padding: 0px; position: relative; user-select: text;">
<p class="Paragraph SCXW110534261 BCX0" lang="EN-US" paraeid="{01d8b134-b659-44c3-9164-9e970a31ff53}{174}" paraid="1235937884" style="-webkit-tap-highlight-color: transparent; -webkit-user-drag: none; background-color: transparent; color: windowtext; line-height: 2; margin: 0px; overflow-wrap: break-word; padding: 0px; user-select: text; vertical-align: baseline;" xml:lang="EN-US">
<span class="TextRun SCXW110534261 BCX0" data-contrast="auto" lang="EN-US" style="-webkit-tap-highlight-color: transparent; -webkit-user-drag: none; font-family: calibri, calibri_embeddedfont, calibri_msfontservice, sans-serif; font-kerning: none; font-size: 11pt; font-variant-ligatures: none !important; line-height: 2; margin: 0px; padding: 0px; user-select: text;" xml:lang="EN-US"><span class="NormalTextRun SCXW110534261 BCX0" style="-webkit-tap-highlight-color: transparent; -webkit-user-drag: none; background-color: inherit; line-height: 2; margin: 0px; padding: 0px; user-select: text;">After that open </span><span class="NormalTextRun SpellingErrorV2 SCXW110534261 BCX0" style="-webkit-tap-highlight-color: transparent; -webkit-user-drag: none; background-color: inherit; background-image: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB3aWR0aD0iNXB4IiBoZWlnaHQ9IjRweCIgdmlld0JveD0iMCAwIDUgNCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIj4KICAgIDwhLS0gR2VuZXJhdG9yOiBTa2V0Y2ggNTYuMiAoODE2NzIpIC0gaHR0cHM6Ly9za2V0Y2guY29tIC0tPgogICAgPHRpdGxlPnNwZWxsaW5nX3NxdWlnZ2xlPC90aXRsZT4KICAgIDxkZXNjPkNyZWF0ZWQgd2l0aCBTa2V0Y2guPC9kZXNjPgogICAgPGcgaWQ9IkZsYWdzIiBzdHJva2U9Im5vbmUiIHN0cm9rZS13aWR0aD0iMSIgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIj4KICAgICAgICA8ZyB0cmFuc2Zvcm09InRyYW5zbGF0ZSgtMTAxMC4wMDAwMDAsIC0yOTYuMDAwMDAwKSIgaWQ9InNwZWxsaW5nX3NxdWlnZ2xlIj4KICAgICAgICAgICAgPGcgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMTAxMC4wMDAwMDAsIDI5Ni4wMDAwMDApIj4KICAgICAgICAgICAgICAgIDxwYXRoIGQ9Ik0wLDMgQzEuMjUsMyAxLjI1LDEgMi41LDEgQzMuNzUsMSAzLjc1LDMgNSwzIiBpZD0iUGF0aCIgc3Ryb2tlPSIjRUIwMDAwIiBzdHJva2Utd2lkdGg9IjEiPjwvcGF0aD4KICAgICAgICAgICAgICAgIDxyZWN0IGlkPSJSZWN0YW5nbGUiIHg9IjAiIHk9IjAiIHdpZHRoPSI1IiBoZWlnaHQ9IjQiPjwvcmVjdD4KICAgICAgICAgICAgPC9nPgogICAgICAgIDwvZz4KICAgIDwvZz4KPC9zdmc+"); background-position: 0% 100%; background-repeat: repeat-x; border-bottom: 1px solid transparent; line-height: 2; margin: 0px; padding: 0px; user-select: text;">MainPage.xaml</span><span class="NormalTextRun SCXW110534261 BCX0" style="-webkit-tap-highlight-color: transparent; -webkit-user-drag: none; background-color: inherit; line-height: 2; margin: 0px; padding: 0px; user-select: text;"> page and start our UI design. First, we call
DataGrid namespace as dg and design our columns with
Title, bind the </span><span class="NormalTextRun SpellingErrorV2 SCXW110534261 BCX0" style="-webkit-tap-highlight-color: transparent; -webkit-user-drag: none; background-color: inherit; background-image: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB3aWR0aD0iNXB4IiBoZWlnaHQ9IjRweCIgdmlld0JveD0iMCAwIDUgNCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIj4KICAgIDwhLS0gR2VuZXJhdG9yOiBTa2V0Y2ggNTYuMiAoODE2NzIpIC0gaHR0cHM6Ly9za2V0Y2guY29tIC0tPgogICAgPHRpdGxlPnNwZWxsaW5nX3NxdWlnZ2xlPC90aXRsZT4KICAgIDxkZXNjPkNyZWF0ZWQgd2l0aCBTa2V0Y2guPC9kZXNjPgogICAgPGcgaWQ9IkZsYWdzIiBzdHJva2U9Im5vbmUiIHN0cm9rZS13aWR0aD0iMSIgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIj4KICAgICAgICA8ZyB0cmFuc2Zvcm09InRyYW5zbGF0ZSgtMTAxMC4wMDAwMDAsIC0yOTYuMDAwMDAwKSIgaWQ9InNwZWxsaW5nX3NxdWlnZ2xlIj4KICAgICAgICAgICAgPGcgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMTAxMC4wMDAwMDAsIDI5Ni4wMDAwMDApIj4KICAgICAgICAgICAgICAgIDxwYXRoIGQ9Ik0wLDMgQzEuMjUsMyAxLjI1LDEgMi41LDEgQzMuNzUsMSAzLjc1LDMgNSwzIiBpZD0iUGF0aCIgc3Ryb2tlPSIjRUIwMDAwIiBzdHJva2Utd2lkdGg9IjEiPjwvcGF0aD4KICAgICAgICAgICAgICAgIDxyZWN0IGlkPSJSZWN0YW5nbGUiIHg9IjAiIHk9IjAiIHdpZHRoPSI1IiBoZWlnaHQ9IjQiPjwvcmVjdD4KICAgICAgICAgICAgPC9nPgogICAgICAgIDwvZz4KICAgIDwvZz4KPC9zdmc+"); background-position: 0% 100%; background-repeat: repeat-x; border-bottom: 1px solid transparent; line-height: 2; margin: 0px; padding: 0px; user-select: text;">PropertyName</span><span class="NormalTextRun SCXW110534261 BCX0" style="-webkit-tap-highlight-color: transparent; -webkit-user-drag: none; background-color: inherit; line-height: 2; margin: 0px; padding: 0px; user-select: text;">, width size. Bind </span><span class="NormalTextRun SpellingErrorV2 SCXW110534261 BCX0" style="-webkit-tap-highlight-color: transparent; -webkit-user-drag: none; background-color: inherit; background-image: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB3aWR0aD0iNXB4IiBoZWlnaHQ9IjRweCIgdmlld0JveD0iMCAwIDUgNCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIj4KICAgIDwhLS0gR2VuZXJhdG9yOiBTa2V0Y2ggNTYuMiAoODE2NzIpIC0gaHR0cHM6Ly9za2V0Y2guY29tIC0tPgogICAgPHRpdGxlPnNwZWxsaW5nX3NxdWlnZ2xlPC90aXRsZT4KICAgIDxkZXNjPkNyZWF0ZWQgd2l0aCBTa2V0Y2guPC9kZXNjPgogICAgPGcgaWQ9IkZsYWdzIiBzdHJva2U9Im5vbmUiIHN0cm9rZS13aWR0aD0iMSIgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIj4KICAgICAgICA8ZyB0cmFuc2Zvcm09InRyYW5zbGF0ZSgtMTAxMC4wMDAwMDAsIC0yOTYuMDAwMDAwKSIgaWQ9InNwZWxsaW5nX3NxdWlnZ2xlIj4KICAgICAgICAgICAgPGcgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMTAxMC4wMDAwMDAsIDI5Ni4wMDAwMDApIj4KICAgICAgICAgICAgICAgIDxwYXRoIGQ9Ik0wLDMgQzEuMjUsMyAxLjI1LDEgMi41LDEgQzMuNzUsMSAzLjc1LDMgNSwzIiBpZD0iUGF0aCIgc3Ryb2tlPSIjRUIwMDAwIiBzdHJva2Utd2lkdGg9IjEiPjwvcGF0aD4KICAgICAgICAgICAgICAgIDxyZWN0IGlkPSJSZWN0YW5nbGUiIHg9IjAiIHk9IjAiIHdpZHRoPSI1IiBoZWlnaHQ9IjQiPjwvcmVjdD4KICAgICAgICAgICAgPC9nPgogICAgICAgIDwvZz4KICAgIDwvZz4KPC9zdmc+"); background-position: 0% 100%; background-repeat: repeat-x; border-bottom: 1px solid transparent; line-height: 2; margin: 0px; padding: 0px; user-select: text;">ItemSource</span><span class="NormalTextRun SCXW110534261 BCX0" style="-webkit-tap-highlight-color: transparent; -webkit-user-drag: none; background-color: inherit; line-height: 2; margin: 0px; padding: 0px; user-select: text;">, </span><span class="NormalTextRun SpellingErrorV2 SCXW110534261 BCX0" style="-webkit-tap-highlight-color: transparent; -webkit-user-drag: none; background-color: inherit; background-image: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB3aWR0aD0iNXB4IiBoZWlnaHQ9IjRweCIgdmlld0JveD0iMCAwIDUgNCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIj4KICAgIDwhLS0gR2VuZXJhdG9yOiBTa2V0Y2ggNTYuMiAoODE2NzIpIC0gaHR0cHM6Ly9za2V0Y2guY29tIC0tPgogICAgPHRpdGxlPnNwZWxsaW5nX3NxdWlnZ2xlPC90aXRsZT4KICAgIDxkZXNjPkNyZWF0ZWQgd2l0aCBTa2V0Y2guPC9kZXNjPgogICAgPGcgaWQ9IkZsYWdzIiBzdHJva2U9Im5vbmUiIHN0cm9rZS13aWR0aD0iMSIgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIj4KICAgICAgICA8ZyB0cmFuc2Zvcm09InRyYW5zbGF0ZSgtMTAxMC4wMDAwMDAsIC0yOTYuMDAwMDAwKSIgaWQ9InNwZWxsaW5nX3NxdWlnZ2xlIj4KICAgICAgICAgICAgPGcgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMTAxMC4wMDAwMDAsIDI5Ni4wMDAwMDApIj4KICAgICAgICAgICAgICAgIDxwYXRoIGQ9Ik0wLDMgQzEuMjUsMyAxLjI1LDEgMi41LDEgQzMuNzUsMSAzLjc1LDMgNSwzIiBpZD0iUGF0aCIgc3Ryb2tlPSIjRUIwMDAwIiBzdHJva2Utd2lkdGg9IjEiPjwvcGF0aD4KICAgICAgICAgICAgICAgIDxyZWN0IGlkPSJSZWN0YW5nbGUiIHg9IjAiIHk9IjAiIHdpZHRoPSI1IiBoZWlnaHQ9IjQiPjwvcmVjdD4KICAgICAgICAgICAgPC9nPgogICAgICAgIDwvZz4KICAgIDwvZz4KPC9zdmc+"); background-position: 0% 100%; background-repeat: repeat-x; border-bottom: 1px solid transparent; line-height: 2; margin: 0px; padding: 0px; user-select: text;">SelectedItem</span><span class="NormalTextRun SCXW110534261 BCX0" style="-webkit-tap-highlight-color: transparent; -webkit-user-drag: none; background-color: inherit; line-height: 2; margin: 0px; padding: 0px; user-select: text;">, </span><span class="NormalTextRun SpellingErrorV2 SCXW110534261 BCX0" style="-webkit-tap-highlight-color: transparent; -webkit-user-drag: none; background-color: inherit; background-image: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB3aWR0aD0iNXB4IiBoZWlnaHQ9IjRweCIgdmlld0JveD0iMCAwIDUgNCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIj4KICAgIDwhLS0gR2VuZXJhdG9yOiBTa2V0Y2ggNTYuMiAoODE2NzIpIC0gaHR0cHM6Ly9za2V0Y2guY29tIC0tPgogICAgPHRpdGxlPnNwZWxsaW5nX3NxdWlnZ2xlPC90aXRsZT4KICAgIDxkZXNjPkNyZWF0ZWQgd2l0aCBTa2V0Y2guPC9kZXNjPgogICAgPGcgaWQ9IkZsYWdzIiBzdHJva2U9Im5vbmUiIHN0cm9rZS13aWR0aD0iMSIgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIj4KICAgICAgICA8ZyB0cmFuc2Zvcm09InRyYW5zbGF0ZSgtMTAxMC4wMDAwMDAsIC0yOTYuMDAwMDAwKSIgaWQ9InNwZWxsaW5nX3NxdWlnZ2xlIj4KICAgICAgICAgICAgPGcgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMTAxMC4wMDAwMDAsIDI5Ni4wMDAwMDApIj4KICAgICAgICAgICAgICAgIDxwYXRoIGQ9Ik0wLDMgQzEuMjUsMyAxLjI1LDEgMi41LDEgQzMuNzUsMSAzLjc1LDMgNSwzIiBpZD0iUGF0aCIgc3Ryb2tlPSIjRUIwMDAwIiBzdHJva2Utd2lkdGg9IjEiPjwvcGF0aD4KICAgICAgICAgICAgICAgIDxyZWN0IGlkPSJSZWN0YW5nbGUiIHg9IjAiIHk9IjAiIHdpZHRoPSI1IiBoZWlnaHQ9IjQiPjwvcmVjdD4KICAgICAgICAgICAgPC9nPgogICAgICAgIDwvZz4KICAgIDwvZz4KPC9zdmc+"); background-position: 0% 100%; background-repeat: repeat-x; border-bottom: 1px solid transparent; line-height: 2; margin: 0px; padding: 0px; user-select: text;">refershCommand</span><span class="NormalTextRun SCXW110534261 BCX0" style="-webkit-tap-highlight-color: transparent; -webkit-user-drag: none; background-color: inherit; line-height: 2; margin: 0px; padding: 0px; user-select: text;">. This page design code is given below. </span></span><span class="EOP SCXW110534261 BCX0" data-ccp-props="{"201341983":0,"335551550":1,"335551620":1,"335559739":160,"335559740":259}" style="-webkit-tap-highlight-color: transparent; -webkit-user-drag: none; font-family: calibri, calibri_embeddedfont, calibri_msfontservice, sans-serif; font-size: 11pt; line-height: 2; margin: 0px; padding: 0px; user-select: text;"> </span>
</p>
</div>
<div class="OutlineElement Ltr BCX0 SCXW110534261" style="-webkit-tap-highlight-color: transparent; -webkit-user-drag: none; clear: both; cursor: text; direction: ltr; font-family: "segoe ui", "segoe ui web", arial, verdana, sans-serif; font-size: 12px; font-variant-ligatures: normal; line-height: 2; margin: 0px; overflow: visible; padding: 0px; position: relative; user-select: text;">
<p class="Paragraph SCXW110534261 BCX0" lang="EN-US" paraeid="{01d8b134-b659-44c3-9164-9e970a31ff53}{181}" paraid="1359486919" style="-webkit-tap-highlight-color: transparent; -webkit-user-drag: none; background-color: transparent; color: windowtext; line-height: 2; margin: 0px; overflow-wrap: break-word; padding: 0px; user-select: text; vertical-align: baseline;" xml:lang="EN-US">
<span class="TextRun SCXW110534261 BCX0" data-contrast="auto" lang="EN-US" style="-webkit-tap-highlight-color: transparent; -webkit-user-drag: none; font-family: calibri, calibri_embeddedfont, calibri_msfontservice, sans-serif; font-kerning: none; font-size: 11pt; font-variant-ligatures: none !important; line-height: 2; margin: 0px; padding: 0px; user-select: text;" xml:lang="EN-US"> </span><span class="EOP SCXW110534261 BCX0" data-ccp-props="{"201341983":0,"335551550":1,"335551620":1,"335559739":160,"335559740":259}" style="-webkit-tap-highlight-color: transparent; -webkit-user-drag: none; font-family: calibri, calibri_embeddedfont, calibri_msfontservice, sans-serif; font-size: 11pt; line-height: 2; margin: 0px; padding: 0px; user-select: text;"> </span>
</p>
</div>
<br />
<script src="https://gist.github.com/logeshpalani98/1e525b4b0a4854f27dc3f23fd3538150.js"></script>
<br />
<div class="OutlineElement Ltr BCX0 SCXW110534261" style="-webkit-tap-highlight-color: transparent; -webkit-user-drag: none; clear: both; cursor: text; direction: ltr; font-family: "segoe ui", "segoe ui web", arial, verdana, sans-serif; font-size: 12px; font-variant-ligatures: normal; line-height: 2; margin: 0px; overflow: visible; padding: 0px; position: relative; user-select: text;">
<p class="Paragraph SCXW110534261 BCX0" lang="EN-US" paraeid="{01d8b134-b659-44c3-9164-9e970a31ff53}{188}" paraid="695224498" style="-webkit-tap-highlight-color: transparent; -webkit-user-drag: none; background-color: transparent; color: windowtext; line-height: 2; margin: 0px; overflow-wrap: break-word; padding: 0px; user-select: text; vertical-align: baseline;" xml:lang="EN-US">
<span class="TextRun SCXW110534261 BCX0" data-contrast="auto" lang="EN-US" style="-webkit-tap-highlight-color: transparent; -webkit-user-drag: none; font-family: calibri, calibri_embeddedfont, calibri_msfontservice, sans-serif; font-kerning: none; font-size: 11pt; font-variant-ligatures: none !important; line-height: 2; margin: 0px; padding: 0px; user-select: text;" xml:lang="EN-US"><span class="NormalTextRun SCXW110534261 BCX0" style="-webkit-tap-highlight-color: transparent; -webkit-user-drag: none; background-color: inherit; line-height: 2; margin: 0px; padding: 0px; user-select: text;">Next open </span><span class="NormalTextRun SpellingErrorV2 SCXW110534261 BCX0" style="-webkit-tap-highlight-color: transparent; -webkit-user-drag: none; background-color: inherit; background-image: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB3aWR0aD0iNXB4IiBoZWlnaHQ9IjRweCIgdmlld0JveD0iMCAwIDUgNCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIj4KICAgIDwhLS0gR2VuZXJhdG9yOiBTa2V0Y2ggNTYuMiAoODE2NzIpIC0gaHR0cHM6Ly9za2V0Y2guY29tIC0tPgogICAgPHRpdGxlPnNwZWxsaW5nX3NxdWlnZ2xlPC90aXRsZT4KICAgIDxkZXNjPkNyZWF0ZWQgd2l0aCBTa2V0Y2guPC9kZXNjPgogICAgPGcgaWQ9IkZsYWdzIiBzdHJva2U9Im5vbmUiIHN0cm9rZS13aWR0aD0iMSIgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIj4KICAgICAgICA8ZyB0cmFuc2Zvcm09InRyYW5zbGF0ZSgtMTAxMC4wMDAwMDAsIC0yOTYuMDAwMDAwKSIgaWQ9InNwZWxsaW5nX3NxdWlnZ2xlIj4KICAgICAgICAgICAgPGcgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMTAxMC4wMDAwMDAsIDI5Ni4wMDAwMDApIj4KICAgICAgICAgICAgICAgIDxwYXRoIGQ9Ik0wLDMgQzEuMjUsMyAxLjI1LDEgMi41LDEgQzMuNzUsMSAzLjc1LDMgNSwzIiBpZD0iUGF0aCIgc3Ryb2tlPSIjRUIwMDAwIiBzdHJva2Utd2lkdGg9IjEiPjwvcGF0aD4KICAgICAgICAgICAgICAgIDxyZWN0IGlkPSJSZWN0YW5nbGUiIHg9IjAiIHk9IjAiIHdpZHRoPSI1IiBoZWlnaHQ9IjQiPjwvcmVjdD4KICAgICAgICAgICAgPC9nPgogICAgICAgIDwvZz4KICAgIDwvZz4KPC9zdmc+"); background-position: 0% 100%; background-repeat: repeat-x; border-bottom: 1px solid transparent; line-height: 2; margin: 0px; padding: 0px; user-select: text;">MainPage.xaml.cs</span><span class="NormalTextRun SCXW110534261 BCX0" style="-webkit-tap-highlight-color: transparent; -webkit-user-drag: none; background-color: inherit; line-height: 2; margin: 0px; padding: 0px; user-select: text;"> and set </span><span class="NormalTextRun SpellingErrorV2 SCXW110534261 BCX0" style="-webkit-tap-highlight-color: transparent; -webkit-user-drag: none; background-color: inherit; background-image: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB3aWR0aD0iNXB4IiBoZWlnaHQ9IjRweCIgdmlld0JveD0iMCAwIDUgNCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIj4KICAgIDwhLS0gR2VuZXJhdG9yOiBTa2V0Y2ggNTYuMiAoODE2NzIpIC0gaHR0cHM6Ly9za2V0Y2guY29tIC0tPgogICAgPHRpdGxlPnNwZWxsaW5nX3NxdWlnZ2xlPC90aXRsZT4KICAgIDxkZXNjPkNyZWF0ZWQgd2l0aCBTa2V0Y2guPC9kZXNjPgogICAgPGcgaWQ9IkZsYWdzIiBzdHJva2U9Im5vbmUiIHN0cm9rZS13aWR0aD0iMSIgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIj4KICAgICAgICA8ZyB0cmFuc2Zvcm09InRyYW5zbGF0ZSgtMTAxMC4wMDAwMDAsIC0yOTYuMDAwMDAwKSIgaWQ9InNwZWxsaW5nX3NxdWlnZ2xlIj4KICAgICAgICAgICAgPGcgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMTAxMC4wMDAwMDAsIDI5Ni4wMDAwMDApIj4KICAgICAgICAgICAgICAgIDxwYXRoIGQ9Ik0wLDMgQzEuMjUsMyAxLjI1LDEgMi41LDEgQzMuNzUsMSAzLjc1LDMgNSwzIiBpZD0iUGF0aCIgc3Ryb2tlPSIjRUIwMDAwIiBzdHJva2Utd2lkdGg9IjEiPjwvcGF0aD4KICAgICAgICAgICAgICAgIDxyZWN0IGlkPSJSZWN0YW5nbGUiIHg9IjAiIHk9IjAiIHdpZHRoPSI1IiBoZWlnaHQ9IjQiPjwvcmVjdD4KICAgICAgICAgICAgPC9nPgogICAgICAgIDwvZz4KICAgIDwvZz4KPC9zdmc+"); background-position: 0% 100%; background-repeat: repeat-x; border-bottom: 1px solid transparent; line-height: 2; margin: 0px; padding: 0px; user-select: text;">BindingContext</span><span class="NormalTextRun SCXW110534261 BCX0" style="-webkit-tap-highlight-color: transparent; -webkit-user-drag: none; background-color: inherit; line-height: 2; margin: 0px; padding: 0px; user-select: text;"> is </span><span class="NormalTextRun SpellingErrorV2 SCXW110534261 BCX0" style="-webkit-tap-highlight-color: transparent; -webkit-user-drag: none; background-color: inherit; background-image: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB3aWR0aD0iNXB4IiBoZWlnaHQ9IjRweCIgdmlld0JveD0iMCAwIDUgNCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIj4KICAgIDwhLS0gR2VuZXJhdG9yOiBTa2V0Y2ggNTYuMiAoODE2NzIpIC0gaHR0cHM6Ly9za2V0Y2guY29tIC0tPgogICAgPHRpdGxlPnNwZWxsaW5nX3NxdWlnZ2xlPC90aXRsZT4KICAgIDxkZXNjPkNyZWF0ZWQgd2l0aCBTa2V0Y2guPC9kZXNjPgogICAgPGcgaWQ9IkZsYWdzIiBzdHJva2U9Im5vbmUiIHN0cm9rZS13aWR0aD0iMSIgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIj4KICAgICAgICA8ZyB0cmFuc2Zvcm09InRyYW5zbGF0ZSgtMTAxMC4wMDAwMDAsIC0yOTYuMDAwMDAwKSIgaWQ9InNwZWxsaW5nX3NxdWlnZ2xlIj4KICAgICAgICAgICAgPGcgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMTAxMC4wMDAwMDAsIDI5Ni4wMDAwMDApIj4KICAgICAgICAgICAgICAgIDxwYXRoIGQ9Ik0wLDMgQzEuMjUsMyAxLjI1LDEgMi41LDEgQzMuNzUsMSAzLjc1LDMgNSwzIiBpZD0iUGF0aCIgc3Ryb2tlPSIjRUIwMDAwIiBzdHJva2Utd2lkdGg9IjEiPjwvcGF0aD4KICAgICAgICAgICAgICAgIDxyZWN0IGlkPSJSZWN0YW5nbGUiIHg9IjAiIHk9IjAiIHdpZHRoPSI1IiBoZWlnaHQ9IjQiPjwvcmVjdD4KICAgICAgICAgICAgPC9nPgogICAgICAgIDwvZz4KICAgIDwvZz4KPC9zdmc+"); background-position: 0% 100%; background-repeat: repeat-x; border-bottom: 1px solid transparent; line-height: 2; margin: 0px; padding: 0px; user-select: text;">MainPageViewModel</span><span class="NormalTextRun SCXW110534261 BCX0" style="-webkit-tap-highlight-color: transparent; -webkit-user-drag: none; background-color: inherit; line-height: 2; margin: 0px; padding: 0px; user-select: text;"> as we done already. The source code
here. </span></span><span class="EOP SCXW110534261 BCX0" data-ccp-props="{"201341983":0,"335551550":1,"335551620":1,"335559739":160,"335559740":259}" style="-webkit-tap-highlight-color: transparent; -webkit-user-drag: none; font-family: calibri, calibri_embeddedfont, calibri_msfontservice, sans-serif; font-size: 11pt; line-height: 2; margin: 0px; padding: 0px; user-select: text;"> </span>
</p>
</div>
<div class="OutlineElement Ltr BCX0 SCXW110534261" style="-webkit-tap-highlight-color: transparent; -webkit-user-drag: none; clear: both; cursor: text; direction: ltr; font-family: "segoe ui", "segoe ui web", arial, verdana, sans-serif; font-size: 12px; font-variant-ligatures: normal; line-height: 2; margin: 0px; overflow: visible; padding: 0px; position: relative; user-select: text;">
<p class="Paragraph SCXW110534261 BCX0" lang="EN-US" paraeid="{01d8b134-b659-44c3-9164-9e970a31ff53}{195}" paraid="289944783" style="-webkit-tap-highlight-color: transparent; -webkit-user-drag: none; background-color: transparent; color: windowtext; line-height: 2; margin: 0px; overflow-wrap: break-word; padding: 0px; user-select: text; vertical-align: baseline;" xml:lang="EN-US">
<span class="TextRun SCXW110534261 BCX0" data-contrast="auto" lang="EN-US" style="-webkit-tap-highlight-color: transparent; -webkit-user-drag: none; font-family: calibri, calibri_embeddedfont, calibri_msfontservice, sans-serif; font-kerning: none; font-size: 11pt; font-variant-ligatures: none !important; line-height: 2; margin: 0px; padding: 0px; user-select: text;" xml:lang="EN-US"> </span><span class="EOP SCXW110534261 BCX0" data-ccp-props="{"201341983":0,"335551550":1,"335551620":1,"335559739":160,"335559740":259}" style="-webkit-tap-highlight-color: transparent; -webkit-user-drag: none; font-family: calibri, calibri_embeddedfont, calibri_msfontservice, sans-serif; font-size: 11pt; line-height: 2; margin: 0px; padding: 0px; user-select: text;"> </span>
</p>
</div>
<br />
<script src="https://gist.github.com/logeshpalani98/af71b25a8ff635e18dee9b519b965530.js"></script>
<br />
<div class="OutlineElement Ltr BCX0 SCXW110534261" style="-webkit-tap-highlight-color: transparent; -webkit-user-drag: none; clear: both; cursor: text; direction: ltr; font-family: "segoe ui", "segoe ui web", arial, verdana, sans-serif; font-size: 12px; font-variant-ligatures: normal; line-height: 2; margin: 0px; overflow: visible; padding: 0px; position: relative; user-select: text;">
<p class="Paragraph SCXW110534261 BCX0" lang="EN-US" paraeid="{01d8b134-b659-44c3-9164-9e970a31ff53}{202}" paraid="1267832881" style="-webkit-tap-highlight-color: transparent; -webkit-user-drag: none; background-color: transparent; color: windowtext; line-height: 2; margin: 0px; overflow-wrap: break-word; padding: 0px; user-select: text; vertical-align: baseline;" xml:lang="EN-US">
<span class="TextRun SCXW110534261 BCX0" data-contrast="auto" lang="EN-US" style="-webkit-tap-highlight-color: transparent; -webkit-user-drag: none; font-family: calibri, calibri_embeddedfont, calibri_msfontservice, sans-serif; font-kerning: none; font-size: 11pt; font-variant-ligatures: none !important; line-height: 2; margin: 0px; padding: 0px; user-select: text;" xml:lang="EN-US"><span class="NormalTextRun SCXW110534261 BCX0" style="-webkit-tap-highlight-color: transparent; -webkit-user-drag: none; background-color: inherit; line-height: 2; margin: 0px; padding: 0px; user-select: text;">Finally, initialize </span><span class="NormalTextRun SpellingErrorV2 SCXW110534261 BCX0" style="-webkit-tap-highlight-color: transparent; -webkit-user-drag: none; background-color: inherit; background-image: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB3aWR0aD0iNXB4IiBoZWlnaHQ9IjRweCIgdmlld0JveD0iMCAwIDUgNCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIj4KICAgIDwhLS0gR2VuZXJhdG9yOiBTa2V0Y2ggNTYuMiAoODE2NzIpIC0gaHR0cHM6Ly9za2V0Y2guY29tIC0tPgogICAgPHRpdGxlPnNwZWxsaW5nX3NxdWlnZ2xlPC90aXRsZT4KICAgIDxkZXNjPkNyZWF0ZWQgd2l0aCBTa2V0Y2guPC9kZXNjPgogICAgPGcgaWQ9IkZsYWdzIiBzdHJva2U9Im5vbmUiIHN0cm9rZS13aWR0aD0iMSIgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIj4KICAgICAgICA8ZyB0cmFuc2Zvcm09InRyYW5zbGF0ZSgtMTAxMC4wMDAwMDAsIC0yOTYuMDAwMDAwKSIgaWQ9InNwZWxsaW5nX3NxdWlnZ2xlIj4KICAgICAgICAgICAgPGcgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMTAxMC4wMDAwMDAsIDI5Ni4wMDAwMDApIj4KICAgICAgICAgICAgICAgIDxwYXRoIGQ9Ik0wLDMgQzEuMjUsMyAxLjI1LDEgMi41LDEgQzMuNzUsMSAzLjc1LDMgNSwzIiBpZD0iUGF0aCIgc3Ryb2tlPSIjRUIwMDAwIiBzdHJva2Utd2lkdGg9IjEiPjwvcGF0aD4KICAgICAgICAgICAgICAgIDxyZWN0IGlkPSJSZWN0YW5nbGUiIHg9IjAiIHk9IjAiIHdpZHRoPSI1IiBoZWlnaHQ9IjQiPjwvcmVjdD4KICAgICAgICAgICAgPC9nPgogICAgICAgIDwvZz4KICAgIDwvZz4KPC9zdmc+"); background-position: 0% 100%; background-repeat: repeat-x; border-bottom: 1px solid transparent; line-height: 2; margin: 0px; padding: 0px; user-select: text;">DataComponent</span><span class="NormalTextRun SCXW110534261 BCX0" style="-webkit-tap-highlight-color: transparent; -webkit-user-drag: none; background-color: inherit; line-height: 2; margin: 0px; padding: 0px; user-select: text;"> in App Startup of </span><span class="NormalTextRun SpellingErrorV2 SCXW110534261 BCX0" style="-webkit-tap-highlight-color: transparent; -webkit-user-drag: none; background-color: inherit; background-image: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB3aWR0aD0iNXB4IiBoZWlnaHQ9IjRweCIgdmlld0JveD0iMCAwIDUgNCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIj4KICAgIDwhLS0gR2VuZXJhdG9yOiBTa2V0Y2ggNTYuMiAoODE2NzIpIC0gaHR0cHM6Ly9za2V0Y2guY29tIC0tPgogICAgPHRpdGxlPnNwZWxsaW5nX3NxdWlnZ2xlPC90aXRsZT4KICAgIDxkZXNjPkNyZWF0ZWQgd2l0aCBTa2V0Y2guPC9kZXNjPgogICAgPGcgaWQ9IkZsYWdzIiBzdHJva2U9Im5vbmUiIHN0cm9rZS13aWR0aD0iMSIgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIj4KICAgICAgICA8ZyB0cmFuc2Zvcm09InRyYW5zbGF0ZSgtMTAxMC4wMDAwMDAsIC0yOTYuMDAwMDAwKSIgaWQ9InNwZWxsaW5nX3NxdWlnZ2xlIj4KICAgICAgICAgICAgPGcgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMTAxMC4wMDAwMDAsIDI5Ni4wMDAwMDApIj4KICAgICAgICAgICAgICAgIDxwYXRoIGQ9Ik0wLDMgQzEuMjUsMyAxLjI1LDEgMi41LDEgQzMuNzUsMSAzLjc1LDMgNSwzIiBpZD0iUGF0aCIgc3Ryb2tlPSIjRUIwMDAwIiBzdHJva2Utd2lkdGg9IjEiPjwvcGF0aD4KICAgICAgICAgICAgICAgIDxyZWN0IGlkPSJSZWN0YW5nbGUiIHg9IjAiIHk9IjAiIHdpZHRoPSI1IiBoZWlnaHQ9IjQiPjwvcmVjdD4KICAgICAgICAgICAgPC9nPgogICAgICAgIDwvZz4KICAgIDwvZz4KPC9zdmc+"); background-position: 0% 100%; background-repeat: repeat-x; border-bottom: 1px solid transparent; line-height: 2; margin: 0px; padding: 0px; user-select: text;">App.xaml.cs</span><span class="NormalTextRun SCXW110534261 BCX0" style="-webkit-tap-highlight-color: transparent; -webkit-user-drag: none; background-color: inherit; line-height: 2; margin: 0px; padding: 0px; user-select: text;"> class as below code. </span></span><span class="EOP SCXW110534261 BCX0" data-ccp-props="{"201341983":0,"335551550":1,"335551620":1,"335559739":160,"335559740":259}" style="-webkit-tap-highlight-color: transparent; -webkit-user-drag: none; font-family: calibri, calibri_embeddedfont, calibri_msfontservice, sans-serif; font-size: 11pt; line-height: 2; margin: 0px; padding: 0px; user-select: text;"> </span>
</p>
</div>
<div class="OutlineElement Ltr BCX0 SCXW110534261" style="-webkit-tap-highlight-color: transparent; -webkit-user-drag: none; clear: both; cursor: text; direction: ltr; font-family: "segoe ui", "segoe ui web", arial, verdana, sans-serif; font-size: 12px; font-variant-ligatures: normal; line-height: 2; margin: 0px; overflow: visible; padding: 0px; position: relative; user-select: text;">
<p class="Paragraph SCXW110534261 BCX0" lang="EN-US" paraeid="{01d8b134-b659-44c3-9164-9e970a31ff53}{209}" paraid="985480226" style="-webkit-tap-highlight-color: transparent; -webkit-user-drag: none; background-color: transparent; color: windowtext; line-height: 2; margin: 0px; overflow-wrap: break-word; padding: 0px; user-select: text; vertical-align: baseline;" xml:lang="EN-US">
<span class="TextRun SCXW110534261 BCX0" data-contrast="auto" lang="EN-US" style="-webkit-tap-highlight-color: transparent; -webkit-user-drag: none; font-family: calibri, calibri_embeddedfont, calibri_msfontservice, sans-serif; font-kerning: none; font-size: 11pt; font-variant-ligatures: none !important; line-height: 2; margin: 0px; padding: 0px; user-select: text;" xml:lang="EN-US"> </span><span class="EOP SCXW110534261 BCX0" data-ccp-props="{"201341983":0,"335551550":1,"335551620":1,"335559739":160,"335559740":259}" style="-webkit-tap-highlight-color: transparent; -webkit-user-drag: none; font-family: calibri, calibri_embeddedfont, calibri_msfontservice, sans-serif; font-size: 11pt; line-height: 2; margin: 0px; padding: 0px; user-select: text;"> </span>
</p>
</div>
<br />
<script src="https://gist.github.com/logeshpalani98/a2ee5b8391b113568684ea88c91f6545.js"></script>
<br />
<div class="OutlineElement Ltr BCX0 SCXW110534261" style="-webkit-tap-highlight-color: transparent; -webkit-user-drag: none; clear: both; cursor: text; direction: ltr; font-family: "segoe ui", "segoe ui web", arial, verdana, sans-serif; font-size: 12px; font-variant-ligatures: normal; line-height: 2; margin: 0px; overflow: visible; padding: 0px; position: relative; user-select: text;">
<p class="Paragraph SCXW110534261 BCX0" lang="EN-US" paraeid="{01d8b134-b659-44c3-9164-9e970a31ff53}{216}" paraid="735378449" style="-webkit-tap-highlight-color: transparent; -webkit-user-drag: none; background-color: transparent; color: windowtext; line-height: 2; margin: 0px; overflow-wrap: break-word; padding: 0px; user-select: text; vertical-align: baseline;" xml:lang="EN-US">
<span class="TextRun SCXW110534261 BCX0" data-contrast="auto" lang="EN-US" style="-webkit-tap-highlight-color: transparent; -webkit-user-drag: none; font-family: calibri, calibri_embeddedfont, calibri_msfontservice, sans-serif; font-kerning: none; font-size: 11pt; font-variant-ligatures: none !important; line-height: 2; margin: 0px; padding: 0px; user-select: text;" xml:lang="EN-US">Now, run your application and output like the below screenshot.</span><span class="EOP SCXW110534261 BCX0" data-ccp-props="{"201341983":0,"335551550":1,"335551620":1,"335559739":160,"335559740":259}" style="-webkit-tap-highlight-color: transparent; -webkit-user-drag: none; font-family: calibri, calibri_embeddedfont, calibri_msfontservice, sans-serif; font-size: 11pt; line-height: 2; margin: 0px; padding: 0px; user-select: text;"> </span>
</p><p class="Paragraph SCXW110534261 BCX0" lang="EN-US" paraeid="{01d8b134-b659-44c3-9164-9e970a31ff53}{216}" paraid="735378449" style="-webkit-tap-highlight-color: transparent; -webkit-user-drag: none; background-color: transparent; color: windowtext; line-height: 2; margin: 0px; overflow-wrap: break-word; padding: 0px; user-select: text; vertical-align: baseline;" xml:lang="EN-US"><span class="EOP SCXW110534261 BCX0" data-ccp-props="{"201341983":0,"335551550":1,"335551620":1,"335559739":160,"335559740":259}" style="-webkit-tap-highlight-color: transparent; -webkit-user-drag: none; font-family: calibri, calibri_embeddedfont, calibri_msfontservice, sans-serif; font-size: 11pt; line-height: 2; margin: 0px; padding: 0px; user-select: text;"><br /></span></p>
</div></span></span></span></span>
</div>
<div class="OutlineElement Ltr SCXW152171131 BCX0" style="-webkit-tap-highlight-color: transparent; -webkit-user-drag: none; clear: both; cursor: text; direction: ltr; line-height: 2; margin: 0px; overflow: visible; padding: 0px; position: relative; user-select: text;">
<span class="EOP SCXW3906706 BCX0" data-ccp-props="{"201341983":0,"335551550":1,"335551620":1,"335559739":160,"335559740":259}" style="-webkit-tap-highlight-color: transparent; -webkit-user-drag: none; color: rgba(0, 0, 0, 0.847); font-family: calibri, calibri_embeddedfont, calibri_msfontservice, sans-serif; font-size: 11pt; line-height: 2; margin: 0px; padding: 0px; user-select: text;"><div class="separator" style="clear: both; font-size: 11pt; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjqGkwZuJGugFKUPjDm4Iq-0tBykuTTH67QMQD1EF8N98_5K362ZP4bJlsz2AI5HAw-AK0SZknNT7I-KEID7afuqoE1RE4Yi641IFN_dsYALw0aD7cfeqerA8B4FqTOE0eRdL1Ym6PGf339/" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="1080" data-original-width="540" height="400" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjqGkwZuJGugFKUPjDm4Iq-0tBykuTTH67QMQD1EF8N98_5K362ZP4bJlsz2AI5HAw-AK0SZknNT7I-KEID7afuqoE1RE4Yi641IFN_dsYALw0aD7cfeqerA8B4FqTOE0eRdL1Ym6PGf339/w200-h400/WhatsApp+Image+2020-05-14+at+10.54.29+PM.jpeg" width="200" /></a></div><div class="separator" style="clear: both; font-size: 11pt; text-align: center;"><br /></div><div class="separator" style="clear: both; font-size: 11pt; text-align: left;"> The Full Source Code is here - <a href="https://github.com/logeshpalani98/Xamarin.Forms-Samples" target="_blank">GitHub</a></div><div class="separator" style="clear: both; font-size: 11pt; text-align: center;"><br /></div><div class="separator" style="clear: both; text-align: left;"><b><font size="4">Conclusion</font></b></div><div class="separator" style="clear: both; font-size: 11pt; text-align: left;"><span> </span><span> </span><span> </span><span> </span>I hope you all understand how to use DataGrid in Xamarin.Forms and this blog is helpful for all and thanks for reading</div><span class="EOP SCXW234734949 BCX0" data-ccp-props="{"201341983":0,"335551550":1,"335551620":1,"335559739":160,"335559740":259}" style="-webkit-tap-highlight-color: transparent; -webkit-user-drag: none; font-size: 11pt; line-height: 19.425px; margin: 0px; padding: 0px; user-select: text;"><br /></span></span></div></span></span></span></span>
</div>
<style type="text/css">
p.p1 {margin: 0.0px 0.0px 0.0px 0.0px; font: 12.0px 'Helvetica Neue'; color: #dca10d}
</style>
Logesh Palanihttp://www.blogger.com/profile/11572235997627400122noreply@blogger.com1tag:blogger.com,1999:blog-4259075105540267115.post-9674042575634657252020-04-03T22:57:00.005+05:302020-05-09T11:29:21.213+05:30C# Corner Most Valuable Professional in 2020 AprilFirst, I would like to thank C# Corner community for selecting me as Most Valuable Professional and I'm 2nd time in the row of C# Corner MVP.<div><br /></div><div>Again, thanks to the community to appreciate to share my know across the world. Special thanks to @Preveen and @MaheshChange to creating this opportunity.</div><div><br /></div><span></span><div style="text-align: left;"> </div>
<blockquote class="twitter-tweet"><p dir="ltr" lang="en">C# Corner Q1, 2020 <a href="https://twitter.com/hashtag/MVPs?src=hash&ref_src=twsrc%5Etfw">#MVPs</a> Announced <a href="https://t.co/4BxSmOZgfP">https://t.co/4BxSmOZgfP</a> cc <a href="https://twitter.com/mcbeniwal?ref_src=twsrc%5Etfw">@mcbeniwal</a> <a href="https://twitter.com/prvn_13?ref_src=twsrc%5Etfw">@prvn_13</a> <a href="https://twitter.com/dbeniwal21?ref_src=twsrc%5Etfw">@dbeniwal21</a> <a href="https://twitter.com/jinalshah999?ref_src=twsrc%5Etfw">@jinalshah999</a> <a href="https://twitter.com/thinkaboutnitin?ref_src=twsrc%5Etfw">@thinkaboutnitin</a> <a href="https://twitter.com/JosephVelliah?ref_src=twsrc%5Etfw">@JosephVelliah</a> <a href="https://twitter.com/kuppurasu360?ref_src=twsrc%5Etfw">@kuppurasu360</a> <a href="https://twitter.com/logeshpalani98?ref_src=twsrc%5Etfw">@logeshpalani98</a> <a href="https://twitter.com/MenakaBasker?ref_src=twsrc%5Etfw">@MenakaBasker</a> <a href="https://twitter.com/StudyLearnShare?ref_src=twsrc%5Etfw">@StudyLearnShare</a> <a href="https://twitter.com/naveenkumarp369?ref_src=twsrc%5Etfw">@naveenkumarp369</a> <a href="https://t.co/qyLjSR8N5n">pic.twitter.com/qyLjSR8N5n</a></p>— C# Corner (@CsharpCorner) <a href="https://twitter.com/CsharpCorner/status/1245330354384146433?ref_src=twsrc%5Etfw">April 1, 2020</a></blockquote><div><br /></div><div><br /></div><div>The Official Announcement link - <a href="https://www.c-sharpcorner.com/news/c-sharp-corner-q1-2020-mvps-announced" target="_blank">https://www.c-sharpcorner.com/news/c-sharp-corner-q1-2020-mvps-announced</a></div><div><br /></div><div>Thanks to all my readers and mentors. </div> <script async="" charset="utf-8" src="https://platform.twitter.com/widgets.js"></script>Logesh Palanihttp://www.blogger.com/profile/11572235997627400122noreply@blogger.com0tag:blogger.com,1999:blog-4259075105540267115.post-81381537645317274922020-02-28T00:50:00.001+05:302020-02-28T00:55:33.742+05:30HotReload with Wi-Fi Debugging gives more power to Xamarin Forms<div dir="ltr" style="text-align: left;" trbidi="on">
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg1CTw8r6CfMlopIcPAqwDE7-_7xzmU9jzwRhP78OXcs3skj7VOIE3hxxKuZiXIEH2GVkh-Zlj31WWkudpR0jtTsenTEAgMjlUS7xH2cNWDNiLOfaq-S62fILFd1Q6LpEQM09oX_Y2tlmfX/s1600/HotReload-min.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="900" data-original-width="1600" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg1CTw8r6CfMlopIcPAqwDE7-_7xzmU9jzwRhP78OXcs3skj7VOIE3hxxKuZiXIEH2GVkh-Zlj31WWkudpR0jtTsenTEAgMjlUS7xH2cNWDNiLOfaq-S62fILFd1Q6LpEQM09oX_Y2tlmfX/s1600/HotReload-min.png" /></a></div>
<br />
<br />
The Wi-Fi debugging is another way to deploy and debug your application in Android and iOS devices. A couple of months back Microsoft released Xamarin HotReload for continuous change the values in the editor, instantly it will reflect in your running device without requiring to rebuild and restarting the application. Now, we going to check this HotReload and Wi-Fi deployment works at the same time. Before starting this, we need to configure our IDE and mobile for Wi-Fi debug configuration.<br />
<br />
<h3 style="text-align: left;">
Configure iOS </h3>
<br />
Open XCode and navigate to Window menu >> select Device and Simulator >> check to Connect via Network checkbox as shown below image.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
</div>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhHCUOabs_DMMXXfi2gHyBQXjX7aMvnYKsW78YPWGC94h3eTtp7BM9JG3EpkgLSr0NzKtwSEL0o4VdCaDB-tg8sHjIAAt1HQALG0gfHOoEaerHG0pSwgz2OmsRugLAoNsgtKA5CF-XbOXu9/s1600/Screenshot+2020-02-27+at+6.36.02+PM.png" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="41" data-original-width="194" height="67" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhHCUOabs_DMMXXfi2gHyBQXjX7aMvnYKsW78YPWGC94h3eTtp7BM9JG3EpkgLSr0NzKtwSEL0o4VdCaDB-tg8sHjIAAt1HQALG0gfHOoEaerHG0pSwgz2OmsRugLAoNsgtKA5CF-XbOXu9/s320/Screenshot+2020-02-27+at+6.36.02+PM.png" width="320" /></a></div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<i><span style="color: orange;">Note: your iPhone and Mac must be in the same network connection.</span></i><br />
<br />
Back to Visual Studio and select dropdown device list, Through Wi-Fi via connected devices will be shown with a small Wi-Fi icon in front of the device name.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjttZWarsq5oDGIoM-NxpudgzqJlXI-7TbhgZB9HNO1csVDqc1Z9HCqaWRr7MuGnaz1UoxBZonjGOZmS8SeMA2v1J4cXMq7JGCpCTrkAn9xp4sofm1DejR7V20LX4NRpX7HESfOlAt7rUhD/s1600/Screenshot+2020-02-25+at+11.01.38+AM.png" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="257" data-original-width="605" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjttZWarsq5oDGIoM-NxpudgzqJlXI-7TbhgZB9HNO1csVDqc1Z9HCqaWRr7MuGnaz1UoxBZonjGOZmS8SeMA2v1J4cXMq7JGCpCTrkAn9xp4sofm1DejR7V20LX4NRpX7HESfOlAt7rUhD/s1600/Screenshot+2020-02-25+at+11.01.38+AM.png" /></a></div>
<br />
<br />
<br />
Now select iPhone that connected via Wi-Fi.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjzsvnYgDt7w0adDIoR_xALkBJLbNlTEGyJv36LqbscmBdxcYn-lbek5CBlJkzv_oBN4sVN5D5kl_xwaRxpsFIQqn51U-ShbtPPYW1zCsqm1xwXz8Gbj6yiHMEVVd1ItQRN3u37SYn0itss/s1600/Screenshot+2020-02-25+at+11.01.46+AM.png" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="45" data-original-width="398" height="36" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjzsvnYgDt7w0adDIoR_xALkBJLbNlTEGyJv36LqbscmBdxcYn-lbek5CBlJkzv_oBN4sVN5D5kl_xwaRxpsFIQqn51U-ShbtPPYW1zCsqm1xwXz8Gbj6yiHMEVVd1ItQRN3u37SYn0itss/s320/Screenshot+2020-02-25+at+11.01.46+AM.png" width="320" /></a></div>
<div class="separator" style="clear: both; text-align: left;">
<b><br /></b></div>
<h3 style="clear: both; text-align: left;">
<b>Configure Android</b></h3>
<div>
Open Terminal in Mac and run the following commands for adding the <i><b>adb </b></i>path.</div>
<div>
<br /></div>
<div>
<table class="highlight tab-size js-file-line-container" data-tab-size="8" style="background-color: white; border-collapse: collapse; border-spacing: 0px; box-sizing: border-box; color: #24292e; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji"; font-size: 14px; tab-size: 8;"><tbody style="box-sizing: border-box;">
<tr style="box-sizing: border-box;"><td class="blob-code blob-code-inner js-file-line" id="file-addadbtoterminalpath-cs-LC1" style="box-sizing: border-box; font-family: SFMono-Regular, Consolas, "Liberation Mono", Menlo, monospace; font-size: 12px; line-height: 20px; overflow-wrap: normal; overflow: visible; padding: 0px 10px; position: relative; vertical-align: top; white-space: pre;"><span style="background-color: black; color: lime;"><span class="pl-smi" style="box-sizing: border-box;">echo</span> <span class="pl-s" style="box-sizing: border-box;">'export PATH=$PATH:/Users/*thisismyaccount*/Library/Android/sdk/platform-tools/'</span> <span class="pl-k" style="box-sizing: border-box;">>></span> <span class="pl-k" style="box-sizing: border-box;">~</span><span class="pl-k" style="box-sizing: border-box;">/</span>.</span><span class="pl-smi" style="box-sizing: border-box;"><span style="background-color: black; color: lime;">bash_profile
source <span class="pl-k" style="box-sizing: border-box;">~</span><span class="pl-k" style="box-sizing: border-box;">/</span>.<span class="pl-smi" style="box-sizing: border-box;">bash_profile</span>
</span>
<span style="color: orange;">Note: first connect your android device via USB
</span>
</span><span class="pl-smi" style="box-sizing: border-box;">After adding the path, enter below command</span><br />
<span class="pl-smi" style="box-sizing: border-box;"><i><b><span style="background-color: black; color: lime;">adb devices
</span></b></i>
Next, execute the <i><b>TCP </b></i>command to say the adb listen to the network port to connect a device.
<span style="background-color: black; color: lime;"><span class="SpellingError SCXW3298003 BCX0" style="-webkit-tap-highlight-color: transparent; -webkit-user-drag: none; background-image: url("data:image/gif; background-position: left bottom; background-repeat: repeat-x; border-bottom: 1px solid transparent; margin: 0px; padding: 0px; user-select: text;">adb</span><span class="NormalTextRun SCXW3298003 BCX0" style="-webkit-tap-highlight-color: transparent; -webkit-user-drag: none; margin: 0px; padding: 0px; user-select: text;"> </span><span class="TextRun SCXW3298003 BCX0" data-contrast="none" lang="EN-US" style="font-family: "arial" , "arial_embeddedfont" , "arial_msfontservice" , sans-serif; font-size: 11pt; line-height: 19.425px; margin: 0px; padding: 0px; white-space: normal;"><span class="SpellingError SCXW3298003 BCX0" style="-webkit-tap-highlight-color: transparent; -webkit-user-drag: none; background-image: url("data:image/gif; background-position: left bottom; background-repeat: repeat-x; border-bottom: 1px solid transparent; margin: 0px; padding: 0px; user-select: text;">tcpip</span></span><span class="TextRun SCXW3298003 BCX0" data-contrast="none" lang="EN-US" style="font-family: "arial" , "arial_embeddedfont" , "arial_msfontservice" , sans-serif; font-size: 11pt; line-height: 19.425px; margin: 0px; padding: 0px; white-space: normal;"><span class="NormalTextRun SCXW3298003 BCX0" style="-webkit-tap-highlight-color: transparent; -webkit-user-drag: none; margin: 0px; padding: 0px; user-select: text;"> 5555</span></span><span class="EOP SCXW3298003 BCX0" data-ccp-props="{"201341983":0,"335559739":160,"335559740":259}" style="font-family: "arial" , "arial_embeddedfont" , "arial_msfontservice" , sans-serif; font-size: 11pt; line-height: 19.425px; margin: 0px; padding: 0px; white-space: normal;"> </span></span>
Copy your Wi-Fi IP from your Android device by doing>> Settings >> Wi-Fi >> Connected Wi-Fi settings >> note the IP address
</span><br />
<div class="separator" style="clear: both; text-align: center;">
<span class="pl-smi" style="box-sizing: border-box;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi55FGNTukj_ax5nDC-OlcKpILcGcz1fCXKsfno0CkX4QRsO1Fj5W0xLlu0mTk-nafxmhwNUk-DGEBwQQcWWS7FejCu0lab_YT1sET8p9iI_s0BiD2IjBOU9QxY7zyTtPNNymO6k9xrKH4t/s1600/Screenshot_20200228_001718_com.android.settings.jpg" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="700" data-original-width="350" height="320" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi55FGNTukj_ax5nDC-OlcKpILcGcz1fCXKsfno0CkX4QRsO1Fj5W0xLlu0mTk-nafxmhwNUk-DGEBwQQcWWS7FejCu0lab_YT1sET8p9iI_s0BiD2IjBOU9QxY7zyTtPNNymO6k9xrKH4t/s320/Screenshot_20200228_001718_com.android.settings.jpg" width="160" /></a></span></div>
<span class="pl-smi" style="box-sizing: border-box;">
Next, connect your <i>adb </i>to an IP address by running below command.
<span style="background-color: black; color: lime;"><span class="SpellingError BCX0 SCXW263628849" style="-webkit-tap-highlight-color: transparent; -webkit-user-drag: none; background-image: url("data:image/gif; background-position: left bottom; background-repeat: repeat-x; border-bottom: 1px solid transparent; margin: 0px; padding: 0px; user-select: text;">adb</span><span class="NormalTextRun BCX0 SCXW263628849" style="-webkit-tap-highlight-color: transparent; -webkit-user-drag: none; margin: 0px; padding: 0px; user-select: text;"> connect 192.165.12.1</span><span class="EOP BCX0 SCXW263628849" data-ccp-props="{"201341983":0,"335559739":160,"335559740":259}" style="font-family: "consolas" , "consolas_embeddedfont" , "consolas_msfontservice" , monospace; font-size: 9.5pt; line-height: 16.1875px; margin: 0px; padding: 0px; white-space: normal;"> </span></span>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh-mEnVovb9Zg_iZWWmlHPXu-T2igB8ja0a_Tz7gR1jqVJifbpRZdfKP629-Gxqz1GoPPc8bQi36l3gAnhcIIWY2veBZ1w0mMRZR0ydIcGbVCKjyOYMR49G0Hx2vRQ3a4v4DiTM0yMNQNvz/s1600/Screenshot+2020-02-25+at+10.55.49+AM.png" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="61" data-original-width="376" height="51" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh-mEnVovb9Zg_iZWWmlHPXu-T2igB8ja0a_Tz7gR1jqVJifbpRZdfKP629-Gxqz1GoPPc8bQi36l3gAnhcIIWY2veBZ1w0mMRZR0ydIcGbVCKjyOYMR49G0Hx2vRQ3a4v4DiTM0yMNQNvz/s320/Screenshot+2020-02-25+at+10.55.49+AM.png" width="320" /></a></div>
The device connected established successfully, unplug your USB and deploy your application over the Wi-Fi.
After the unplug USB this IP device will be shown your ide drop-down list and select and deploy it
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgw-1rXmXWlVy6r0-X_647dBa2EE10EO10BeWlNTvTe9J5NZIdSedlezbUI3Zk5gA3XE220EGykOkrPYjZr4yGYPRl0oJdtSnFKlhQLX5810cHKItDJAqMUNjvEB508aiaHkverDWA4zYR7/s1600/Screenshot+2020-02-25+at+11.40.30+AM.png" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="44" data-original-width="509" height="27" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgw-1rXmXWlVy6r0-X_647dBa2EE10EO10BeWlNTvTe9J5NZIdSedlezbUI3Zk5gA3XE220EGykOkrPYjZr4yGYPRl0oJdtSnFKlhQLX5810cHKItDJAqMUNjvEB508aiaHkverDWA4zYR7/s320/Screenshot+2020-02-25+at+11.40.30+AM.png" width="320" /></a></div>
End of debugging change the adb listen port to USB mode by executing below command.
<span style="background-color: black; color: lime;">adb USB</span></span></td></tr>
</tbody></table>
</div>
<div>
<br /></div>
<div>
<br /></div>
<h3 style="text-align: left;">
<b>HotReload</b></h3>
<div>
Enable your HotReload by going Visual Studio Preferences >> Xamarin Hot Reload left menu and check the Enable Hot Reload checkbox.</div>
<div>
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiGA3iIG-tC17_bWH6Hjn5vqSkGwzhkmp6WWUOvWSmPMcH12IOGa0VjPRg5mz_fMfppWa79R5pJ2EuCQrPcoEjBTD1-hmmwh8PU5q49VZhEHSquh7PgyEcxojn6bIkyghWR8anJlSo4UU6U/s1600/HotReload.png" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="371" data-original-width="564" height="210" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiGA3iIG-tC17_bWH6Hjn5vqSkGwzhkmp6WWUOvWSmPMcH12IOGa0VjPRg5mz_fMfppWa79R5pJ2EuCQrPcoEjBTD1-hmmwh8PU5q49VZhEHSquh7PgyEcxojn6bIkyghWR8anJlSo4UU6U/s320/HotReload.png" width="320" /></a></div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
Now the time to check your HotReload, set your startup project and running the application, you can edit the values and <i style="font-weight: bold;">Save it, </i>instantly your application will flash and loaded into a newly changed design.</div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
That was awesome, thanks to Xamarin Forms Team. </div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
The blog post not good blog post without comment, give a comment</div>
<br /></div>
Logesh Palanihttp://www.blogger.com/profile/11572235997627400122noreply@blogger.com0tag:blogger.com,1999:blog-4259075105540267115.post-7289859868456871092020-02-22T21:15:00.001+05:302020-02-26T14:55:10.061+05:30How To Use Oxyplot Chart in Xamarin iOS<div dir="ltr" style="text-align: left;" trbidi="on"><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgmq6A0MQsVpiBFTQzyhBZED5awNgl3L9kmatoagFsPKzJ0GcfZVX-G_5Ai7fRcsupsO-_MU4uI0DbDMkFPB0DJgcC5pTUtUsNG9arKhTJcjeqyzEr4CDP-OAENUxfoxw6YomJB29WH_3Zw/s1600/Oxyplot+Charts+in+Xamarin+iOS.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="900" data-original-width="1600" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgmq6A0MQsVpiBFTQzyhBZED5awNgl3L9kmatoagFsPKzJ0GcfZVX-G_5Ai7fRcsupsO-_MU4uI0DbDMkFPB0DJgcC5pTUtUsNG9arKhTJcjeqyzEr4CDP-OAENUxfoxw6YomJB29WH_3Zw/s1600/Oxyplot+Charts+in+Xamarin+iOS.png" /></a></div><div><br />
</div><h3 style="text-align: left;">Introduction</h3><div>Showing data in a chart/graph is much easier to understand. In Xamarin iOS no default option to show the chart. We must use a third-party plugin to show charts. A lot of third-party plugins are paid like Syncfusion, Telerik. I recommend using Oxyplot charts because it's full of open-source and easy to use this in your project. In this article, we are going to learn how to use and understand the Oxyplot chart in Xamarin.iOS Project.</div><div><br />
</div><div><br />
</div><h3><b>Let's start,</b></h3><div>Create<i> Xamarin iOS Single View Application</i> in Visual Studio for Mac</div><div><br />
</div><div>Before start designing, we must install an<i> Oxyplot</i> chart plugin from<i> NuGet Manager </i>in your project<i>.</i></div><div><br />
</div><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjBzyB1BGi8lHXolHRWD7IARtSYkTEOzuwfwDqZe76PiQ_axBt5F2b94hTzdihIJnlAom_1vSSSAThL4qJ6M8Dgq2nO_V9-9_gxwTmxSEdIXerkehxie-1vzcbUfoczDburHqyGyTxJpMD2/s1600/OTP+View+in+Xamarin+iOS.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="302" data-original-width="864" height="111" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjBzyB1BGi8lHXolHRWD7IARtSYkTEOzuwfwDqZe76PiQ_axBt5F2b94hTzdihIJnlAom_1vSSSAThL4qJ6M8Dgq2nO_V9-9_gxwTmxSEdIXerkehxie-1vzcbUfoczDburHqyGyTxJpMD2/s320/OTP+View+in+Xamarin+iOS.png" width="320" /></a></div><div><br />
</div><div><br />
</div><div>Now, open Main.Storyboard in Visual Studio designer, and drag the View from Toolbox and place as per your requirement and apply class as <i>PlotView</i> in the properties window and set identity Name [Eg - plotview]</div><div><br />
</div><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgh0-UdkAaU7S5LN6hJHwHglamr8vru6bRUqSdnmscwqJuXTag-0jQHzslW3R5C2dGOHwVEbsOi7JwomEdRVCnRWuUZnOAS3yq6WQ75MGibZ6VkpKU8H_Kmm6yvVCaPRvXYYUSdnIUU5ipF/s1600/Class+Apply.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="155" data-original-width="269" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgh0-UdkAaU7S5LN6hJHwHglamr8vru6bRUqSdnmscwqJuXTag-0jQHzslW3R5C2dGOHwVEbsOi7JwomEdRVCnRWuUZnOAS3yq6WQ75MGibZ6VkpKU8H_Kmm6yvVCaPRvXYYUSdnIUU5ipF/s1600/Class+Apply.png" /></a></div><div><br />
</div><div><br />
</div><div>Next, write your code in ViewController.cs file. Here the many different types of chart API will be available for use like Bar, Stack, Function, Pie Chart and etc,. Create PlotModel and set required properties as per your requirement and create the X, Y-axis, position, labels, zoom, angle, Max, Min, and other properties. The Zoom property for the zoom level of the chart. The Max, Min properties for avoiding more scrolling in the non-data representation in the chart, I mean you set min level is a zero, it will avoid minus(-) side-scrolling, because, we don't have data representation on minus side. Position property used to set the position of chart in the top, bottom, left or right side. Afterward, create Axis and Data Column Series. In the Column series also have different properties like color, width and etc,. Apply this X, Y-Axis and Column series to this PlotModel as we created first. Finally set this plotModel to PlotView as we designed in the Storyboard scene. Here is the full source code.</div><div><br />
</div><div><script src="https://gist.github.com/logeshpalani98/b1c0557bbffc7ca0acc132389a95ac30.js"></script><br />
</div><div>Now, you can execute the project and the output like below.</div><div><br />
</div><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg6wl4EUl-R3ZjIyhT14-dubrIa1xxxtCbO1ja2ixfkAfNFVZWlc9p5gVZYNyHYwQSzSrgARSpdcu9OpE_kXcri2KFFvhiBY29qtJdARkoqWrpMVgYRXcXy6-qbUy6HJrwDTwxsU7ma89O6/s1600/Screenshot+2020-02-11+at+11.10.25+AM.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="581" data-original-width="301" height="320" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg6wl4EUl-R3ZjIyhT14-dubrIa1xxxtCbO1ja2ixfkAfNFVZWlc9p5gVZYNyHYwQSzSrgARSpdcu9OpE_kXcri2KFFvhiBY29qtJdARkoqWrpMVgYRXcXy6-qbUy6HJrwDTwxsU7ma89O6/s320/Screenshot+2020-02-11+at+11.10.25+AM.png" width="165" /></a></div><div><br />
</div><div><br />
</div><div>Next, create another type of chart. Create a new Model named item.cs and write the below-given code. As usual use bar Charts and apply item model values to this plot chart. The code is given below.<br />
<br />
<br />
</div><div><script src="https://gist.github.com/logeshpalani98/6a2cdd23aca23687822bd4fb9ec3f4d6.js"></script><br />
</div><div>Run your project by pressing F5, you will get output like below.</div><div><br />
</div><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEilHxSf0xZkzGmXxl2rsJ4lGL8zVigfhcCM7E0FB_fUlvQZ9LRf6h0LQAYOOvV2Qk0h2BMs2uqrWQ2-PBAa5bZb6-ikoN9T4jb0VYWjIJfvWkBmA6sajAAEItZd8CcIvf-cED8ATSaY7mQ4/s1600/Screenshot+2020-02-11+at+11.10.25+AM.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="581" data-original-width="301" height="320" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEilHxSf0xZkzGmXxl2rsJ4lGL8zVigfhcCM7E0FB_fUlvQZ9LRf6h0LQAYOOvV2Qk0h2BMs2uqrWQ2-PBAa5bZb6-ikoN9T4jb0VYWjIJfvWkBmA6sajAAEItZd8CcIvf-cED8ATSaY7mQ4/s320/Screenshot+2020-02-11+at+11.10.25+AM.png" width="165" /></a></div><div><br />
</div><div><br />
</div><div>The Full source code in <i><b><a href="https://github.com/logeshpalani98/Xamarin.iOS-Samples/blob/master/chartsDemo" target="_blank">Github</a></b></i></div><div><br />
</div><div><br />
</div><div>Summary</div><div><ol style="text-align: left;"><li>Install Xamarin.iOS.Oxtplot Plugin</li>
<li>Place View and apply PlotView class</li>
<li>Create PlotModel, Column Series, X and Y-Axis</li>
<li>Apply to PlotView</li>
</ol><div>Thanks for reading.</div></div></div>Logesh Palanihttp://www.blogger.com/profile/11572235997627400122noreply@blogger.com0tag:blogger.com,1999:blog-4259075105540267115.post-87775129842838275382020-02-15T19:51:00.001+05:302020-02-15T19:51:15.363+05:30SideMenu in Xamarin iOS<div dir="ltr" style="text-align: left;" trbidi="on">
<div class="separator" style="clear: both; text-align: center;">
</div>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiV6N9QKoEXoGl9NzNoslQ_41e2-WvdqPVZ4gqsFwvS1t26ruqefENL6WC7E1W-xqqh7l_JsGNwz6FKZKGfKtNcF4qtopUnhNsqM4fXa3Pkhyo1vhsHOCiMFucFG9S2ZkZdIcJ3wAagzR4c/s1600/Side+Menu+in+Xamarin+iOS.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="315" data-original-width="560" height="180" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiV6N9QKoEXoGl9NzNoslQ_41e2-WvdqPVZ4gqsFwvS1t26ruqefENL6WC7E1W-xqqh7l_JsGNwz6FKZKGfKtNcF4qtopUnhNsqM4fXa3Pkhyo1vhsHOCiMFucFG9S2ZkZdIcJ3wAagzR4c/s320/Side+Menu+in+Xamarin+iOS.png" width="320" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<div>
<b><br />
</b></div>
<div>
<b><br />
</b></div>
<b>Introduction</b><br />
<br />
<div>
This blog demonstrates how to use a sidemenu or navigation drawer in <i>Xamarin iOS</i>. since there is no default future for the sidemenu or navigation drawer view. We can archive this view using <i>Xamarin.Sidemenu </i>NuGet with putting a lot of effort.</div>
<div>
<br /></div>
<div>
<b>Let's start</b></div>
<div>
<b><br />
</b></div>
<div>
Create a new Xamarin iOS<i> Single View Application</i> in Visual Studio for Mac.</div>
<div>
<br /></div>
<div>
After the project creation, install <i>Xamarin.Sidemenu</i> Nuget package by going to Solution Explorer >> right-click and select <i>Manage NuGet Package</i> and search Xamarin.Sidemenu and select install the plugin.</div>
<div>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi4OZlZU_UfHTubX_dFocMJC25IVa2Ip_moq9OYwb2-mCi39rFGWWNXyCZ2DCMtTHDFqV7-y2p1l9GupisRMPZlX2uIUGkSpi5CAbEkFOWU1WXQefXSmxjzw2XXmDDxF_lqyeQ5Wf9Fsipg/s1600/Nuget+Slide+Menu.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="180" data-original-width="854" height="67" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi4OZlZU_UfHTubX_dFocMJC25IVa2Ip_moq9OYwb2-mCi39rFGWWNXyCZ2DCMtTHDFqV7-y2p1l9GupisRMPZlX2uIUGkSpi5CAbEkFOWU1WXQefXSmxjzw2XXmDDxF_lqyeQ5Wf9Fsipg/s320/Nuget+Slide+Menu.PNG" width="320" /></a></div>
<br />
<br /></div>
<div>
Now, open your Main.Storyboard and design two scenes for the right and left navigation drawer as per your required design and one more <i>ViewController </i>for the Main or Root <i>ViewController</i>. Here, I don't want any more design, just gave background color for these scenes and Create two <i>ViewController </i>classes for these scenes and this controller should be inherited from <i>UIViewController</i>.</div>
<div>
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgbf2HAb07syLaaX92NQXeoXY06O6aQGatWdvDxkj8TFfuj2MLrkqN1S2uJh8dpOyPXX0Vk9af5QPgF_AmMEa4EIxjiAIb_xG7BZKGopNEL7TaTJIzVPd0v-NbAQcFO66nJeOPXxtZChZ_d/s1600/Screenshot+2020-02-07+at+4.49.41+PM.png" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="341" data-original-width="600" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgbf2HAb07syLaaX92NQXeoXY06O6aQGatWdvDxkj8TFfuj2MLrkqN1S2uJh8dpOyPXX0Vk9af5QPgF_AmMEa4EIxjiAIb_xG7BZKGopNEL7TaTJIzVPd0v-NbAQcFO66nJeOPXxtZChZ_d/s1600/Screenshot+2020-02-07+at+4.49.41+PM.png" /></a></div>
<div>
<br /></div>
<div>
<br /></div>
<div>
<div style="text-align: left;">
Next, open your View Controller and create SideMenuManager instance and configure right and left side <i>ViewController</i>. Here, I created the <i>ViewController </i>instance and configure these <i>ViewController </i>with <i>SideMenuManager</i>. Now, we can add gestures for these sidemenu controllers. Here, I wrote <i>PanGesture </i>and <i>EdgePanGesture </i>and added these gestures to the direct added into <i>NavigationController</i>, incase you want to add for a specific scene you can. Next, we can set this instance to the toolbar left and right button. By default, the left, and right drawer <i>ViewController </i>scene Navigation bar <i>TitleView </i>is enabled. if you want to disable the <i>NavigationBar </i>title view. First, create an instance for that <i>ViewController </i>and set false for <i>NavigationBarHidden </i>property true. Some cool effects based properties are available for use as a blur, background image. These effects code is given in the <i>SetDefault </i>method. Yah! we have one more useful and lovely effect is available, which is the Sidemenu Navigation Animation type and Its types are Slide In, Slide Out, Dissolve, SlideInOut.</div>
</div>
<div>
<span style="font-size: 18px;"><br />
</span> <br />
<br /></div>
<script src="https://gist.github.com/logeshpalani98/5d890b7963e845460e2e9305ca14b1f8.js"></script><br />
<div>
<br />
Now, run your application, you will get output like below.</div>
<div>
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhfito-Y7qqh7rq93PUKUST6UM7NtTP4AKcYiwhudtvlNsHGrPpo4XcFnDkGfAjI2vYHN2ZuQM7IO1tA-nbg-5-Q0SYgZ521JH7hk_eT-Zf4SgW5nL-PAAo95i2rJWf04K5_O8wTaDpAijI/s1600/Screenshot+2020-02-07+at+4.50.51+PM.png" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="508" data-original-width="280" height="320" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhfito-Y7qqh7rq93PUKUST6UM7NtTP4AKcYiwhudtvlNsHGrPpo4XcFnDkGfAjI2vYHN2ZuQM7IO1tA-nbg-5-Q0SYgZ521JH7hk_eT-Zf4SgW5nL-PAAo95i2rJWf04K5_O8wTaDpAijI/s320/Screenshot+2020-02-07+at+4.50.51+PM.png" width="176" /></a><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh3VuNWRfushAlaALdY2ixcneBLfsGK9fq2U44xiqEaO4wi8bvrRaBpmcakm6JhiMq1ghCduvHj_RwhI8ZPJsY6IanzhPjuz3Efrm525CbjF6CkUmwfWY-QqEaQxsqZ3rNLivay5hejNTvV/s1600/Screenshot+2020-02-07+at+4.50.11+PM.png" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="586" data-original-width="280" height="320" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh3VuNWRfushAlaALdY2ixcneBLfsGK9fq2U44xiqEaO4wi8bvrRaBpmcakm6JhiMq1ghCduvHj_RwhI8ZPJsY6IanzhPjuz3Efrm525CbjF6CkUmwfWY-QqEaQxsqZ3rNLivay5hejNTvV/s320/Screenshot+2020-02-07+at+4.50.11+PM.png" width="152" /></a><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjoEioYbzmklw7G5ry_XWBBwFJLe-oRcXbPJN32lpX2tso8T5011VKLLzIXYPJMlQfrJyDURZNTIVcraYJFWl2aL7fi_loCIhmmOdCofL00_TDVLeNBj3InzLhOGTzf9x0l_P1cr_iPbl9a/s1600/Screenshot+2020-02-07+at+4.51.05+PM.png" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="582" data-original-width="280" height="320" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjoEioYbzmklw7G5ry_XWBBwFJLe-oRcXbPJN32lpX2tso8T5011VKLLzIXYPJMlQfrJyDURZNTIVcraYJFWl2aL7fi_loCIhmmOdCofL00_TDVLeNBj3InzLhOGTzf9x0l_P1cr_iPbl9a/s320/Screenshot+2020-02-07+at+4.51.05+PM.png" width="153" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<br />
<div>
<br /></div>
<div>
<br /></div>
<div>
Source code in <a href="https://github.com/logeshpalani98/Xamarin.iOS-Samples" target="_blank">Github</a><br />
<br /></div>
<div>
Summary</div>
<div>
<ul style="text-align: left;">
<li>Install Xamarin.SideMenu plugin</li>
<li>Configure the left and right view controller scene to SideMenu Manager</li>
<li>Add Gestures </li>
</ul>
<div>
Thanks for reading !!!</div>
</div>
</div>
Logesh Palanihttp://www.blogger.com/profile/11572235997627400122noreply@blogger.com0tag:blogger.com,1999:blog-4259075105540267115.post-90608984411452076762020-02-15T07:32:00.001+05:302020-02-15T08:13:32.385+05:30Custom Table View in Xamarin iOS<div dir="ltr" style="text-align: left;" trbidi="on">
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjMJzdiRvtrbhD6E7r5kTklv9yf1xGZbL9LPeSNZ4QMtkd9wlEl2PYGTvNhin9D8wuwT_psPoydMjed3fXjY9D2IpGpByA96KxPiAD0v0MeKTljo-YZh3GAB0XRMvi6K6PM9snpWQja9v8J/s1600/Custom+Table+View+in+Xamarin+iOS.png" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="315" data-original-width="560" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjMJzdiRvtrbhD6E7r5kTklv9yf1xGZbL9LPeSNZ4QMtkd9wlEl2PYGTvNhin9D8wuwT_psPoydMjed3fXjY9D2IpGpByA96KxPiAD0v0MeKTljo-YZh3GAB0XRMvi6K6PM9snpWQja9v8J/s1600/Custom+Table+View+in+Xamarin+iOS.png" /></a></div>
<br />
<br />
<b>Introduction</b><br />
<br />
In my previous article, we discussed the <span style="background-color: #eeeeee;"><i>TableView </i></span>and their default cell behaviors. Now, we going to learn about how to use a custom table view cell in TableView. I won't like writing a lot of theory we can directly go with code.<br />
<br />
<b>Let's start.</b><br />
<br />
Create Xamarin iOS Single View Application by going Visual Studio >> New >> Project >> Single view Application under iOS section.<br />
<br />
After the project creation open Main.StoryBoard and place <i>UITableView</i>. Set the <i>TableView </i>frame size equal to view size and set constraints.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjydHTN4TUzWwNrRMCmJx1J0qCxiOW9wiAcssZrpfBCaXvnyUNEFeT0bot5phQHUrPDSovPFOLwu0BM3e-O4Y5QCiFuYdv-a5HbbN-K6_KYHe08tN-A31wUmNffcfXTG0nPM1giCnf78Ug4/s1600/Screenshot+2020-02-12+at+12.35.11+PM.png" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="604" data-original-width="332" height="320" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjydHTN4TUzWwNrRMCmJx1J0qCxiOW9wiAcssZrpfBCaXvnyUNEFeT0bot5phQHUrPDSovPFOLwu0BM3e-O4Y5QCiFuYdv-a5HbbN-K6_KYHe08tN-A31wUmNffcfXTG0nPM1giCnf78Ug4/s320/Screenshot+2020-02-12+at+12.35.11+PM.png" width="175" /></a></div>
<br />
<br />
Now, create new Table View Cell by doing, right-click the project and select Add >> followed by select new File. In the dialog window left plane select iOS and center plane select <i>Table View Cell </i>template and give the file a name then click <i>New </i>[Eg- MyTableViewCell].<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiCc-MDvBWpjiEeCQsw5aSMlyWQcE4E-Bu_LaOgLHHDSdbMy9IlYlzFPtDKhOsxgc189RgIc5r1Wx0joWP2h1zkEC6jrxVRrsKEC1AlWuse7sGO4aa2PYgh1LtPcwNoX5mbfhbqYENjti2p/s1600/Screenshot+2020-02-04+at+7.23.04+PM.png" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="545" data-original-width="717" height="243" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiCc-MDvBWpjiEeCQsw5aSMlyWQcE4E-Bu_LaOgLHHDSdbMy9IlYlzFPtDKhOsxgc189RgIc5r1Wx0joWP2h1zkEC6jrxVRrsKEC1AlWuse7sGO4aa2PYgh1LtPcwNoX5mbfhbqYENjti2p/s320/Screenshot+2020-02-04+at+7.23.04+PM.png" width="320" /></a></div>
<br />
<br />
Afterward, the new <i>XIB </i>and <i>cs </i>extension file will be created with your given name. Now, open the XIB file in your designer (my favorite and recommend XCode). Next, the drag a button from the toolbox and place the starting of the cell. As well as place another label after the button. Apply corner radius and other properties in the property window.<br />
<br />
Note - you must give <i>Cell </i>reuse identifier, otherwise you won't have access for the cell<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjdluVb51pJVmCZ6MB9wZ9mD9z4bJCmfC1osRglh-Djg2kMPFP0uCUmNvO5iUcY3PnjDnRsnUu5BoDmUC5SeAxInPwe9XuLK9X57Sad1CGuZmJ4KVWVW-A6F45SJNOMJ0acAYDpCj2sSqAl/s1600/Screenshot+2020-02-12+at+12.34.58+PM.png" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="202" data-original-width="435" height="148" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjdluVb51pJVmCZ6MB9wZ9mD9z4bJCmfC1osRglh-Djg2kMPFP0uCUmNvO5iUcY3PnjDnRsnUu5BoDmUC5SeAxInPwe9XuLK9X57Sad1CGuZmJ4KVWVW-A6F45SJNOMJ0acAYDpCj2sSqAl/s320/Screenshot+2020-02-12+at+12.34.58+PM.png" width="320" /></a></div>
<br />
<br />
Next, open <i>MyTableViewCell.cs</i> file and create a new static method named <i>UpdateData</i>. This method used to update the content of the cell. because we couldn't access the cell subviews from another class<br />
<br />
<script src="https://gist.github.com/logeshpalani98/8c1d4df0753a426997bf544895aa0a7f.js"></script><br />
<br />
Now, create a new Table View Source Class named <i>MyTableViewSource.cs.</i> This class should be inherited from <i>UITableViewSource </i>and override <i>GetCell, RowSelect </i>and <i>RowInSelection </i>method.<br />
<br />
<script src="https://gist.github.com/logeshpalani98/94d51f2e492bd8a0852d7c08ee4d3e8c.js"></script><br />
<br />
Finally, open <i>ViewController </i>class and apply source class to the TableView source. Here, you should call <i>ReloadData </i>static method. Create an array of string and pass-through constructor and apply the values to the cell.<br />
<script src="https://gist.github.com/logeshpalani98/d87bdce5ff5875ef77aacd018a9c8ce3.js"></script><br />
<br />
Here, we have one problem, if the user selects the row, the event will trigger in the source class, but I need to navigate to another view controller based on selection, there is no option to navigate <i>ViewController</i>. So, I need to write an interface and pass it to the source class. now user select row, the view controller method will be invoked using Interface and write your navigate code logics here.<br />
<br />
<script src="https://gist.github.com/logeshpalani98/f501d0475c2b78e7d6ba8e30e0609dfd.js"></script><br />
<br />
It's time to run our application and our application output like below.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjvrv5j2U6bGa7bBNRUL9nq-bCXkLpV3867eOuBq_86IR6oXzM4zPNoTB9E-C6eHmkSUbf8gpjBLpPZmuuTmmF2Q0j33T16KbseVrfl67tPFRnh4xZDFsAaUP6EUL-_-kXSd4ngD9Cvlm-V/s1600/Screenshot+2020-02-12+at+12.22.52+PM.png" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="546" data-original-width="258" height="320" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjvrv5j2U6bGa7bBNRUL9nq-bCXkLpV3867eOuBq_86IR6oXzM4zPNoTB9E-C6eHmkSUbf8gpjBLpPZmuuTmmF2Q0j33T16KbseVrfl67tPFRnh4xZDFsAaUP6EUL-_-kXSd4ngD9Cvlm-V/s320/Screenshot+2020-02-12+at+12.22.52+PM.png" width="151" /></a></div>
<br />
<br />
Source code in <a href="https://github.com/logeshpalani98/Xamarin.iOS-Samples" target="_blank">Github</a><br />
<br />
Summary<br />
<ul style="text-align: left;">
<li>Create a new Table View</li>
<li>Add new Table View Cell and design the cell</li>
<li>Create a TableView source class</li>
<li>Apply source class toTableView </li>
<li>Create a new Navigate interface and use it.</li>
</ul>
<div>
Thanks for reading !!!</div>
<br /></div>
Logesh Palanihttp://www.blogger.com/profile/11572235997627400122noreply@blogger.com0tag:blogger.com,1999:blog-4259075105540267115.post-31112910918059478222020-02-01T14:09:00.001+05:302020-05-09T14:12:08.087+05:30Xamarin Holiday Challenge Winner at Syncfusion <br /><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhPmVBgQWmA3OYvS6H0jD9AbeUjoJrt6hWnum1DyBhh5BogaKVNgCbKkrR4mS3t8tTpkMpxRu9a_k59izX89DScSrVg7UsJUunANe3uCO-fSvgmUJpjW0NUVqT25NfFQg_nwFA6CMQ-Liqh/" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="820" data-original-width="990" height="530" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhPmVBgQWmA3OYvS6H0jD9AbeUjoJrt6hWnum1DyBhh5BogaKVNgCbKkrR4mS3t8tTpkMpxRu9a_k59izX89DScSrVg7UsJUunANe3uCO-fSvgmUJpjW0NUVqT25NfFQg_nwFA6CMQ-Liqh/w640-h530/Screenshot+2020-05-09+at+1.57.34+PM.png" width="640" /></a></div><div class="separator" style="clear: both; text-align: center;"><br /></div><div class="separator" style="clear: both; text-align: center;"><br /></div><div class="separator" style="clear: both; text-align: left;">First, thanks to Syncfusion selected as Challenge Winner and giving opportunity awesome UI Controls. Thanks for excellent support and guidelines to done this challenge well.</div><div class="separator" style="clear: both; text-align: left;"><br /></div><div class="separator" style="clear: both; text-align: left;">Thanks again to Syncfusion and Team</div><div class="separator" style="clear: both; text-align: left;"><br /></div><div class="separator" style="clear: both; text-align: left;">Official Syncfusion link:<a href="https://www.syncfusion.com/blogs/post/announcing-syncfusions-xamarin-holiday-challenge.aspx" target="_blank"> https://www.syncfusion.com/blogs/post/announcing-syncfusions-xamarin-holiday-challenge.aspx</a></div>Logesh Palanihttp://www.blogger.com/profile/11572235997627400122noreply@blogger.com0tag:blogger.com,1999:blog-4259075105540267115.post-19015443272690506572020-01-31T23:54:00.003+05:302020-02-02T22:04:29.904+05:30How To Pick A Document In Xamarin.iOS <div dir="ltr" style="text-align: left;" trbidi="on">
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjnTx-iFoVOWqsJ8kYyNereYgb47HD0-SSn85fm9t98fqbgPYLRlAM_wjxFugu-H5uEyxAZ9Ouij9ttiYlN8YbewJ5s329dicw225_u-6PgjNAPeV-aUqgIm1rS8igxyTKKnzWgCSAgPRZs/s1600/How+to+pick+document+in+Xamarin+iOS.png" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="315" data-original-width="560" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjnTx-iFoVOWqsJ8kYyNereYgb47HD0-SSn85fm9t98fqbgPYLRlAM_wjxFugu-H5uEyxAZ9Ouij9ttiYlN8YbewJ5s329dicw225_u-6PgjNAPeV-aUqgIm1rS8igxyTKKnzWgCSAgPRZs/s1600/How+to+pick+document+in+Xamarin+iOS.png" /></a></div>
<h2 style="text-align: left;">
Introduction </h2>
<div>
This blog demonstrates, how to pick a file in the iOS device in the Xamarin iOS application. In-default must enable the iCloud provisioning certificate, however, I need pick from the local device, not in iOS Cloud, so provisioning profile is not necessary.</div>
<div>
<br /></div>
<div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgs0jsiutqzTPFgSZvnOhywwQ-WnyQsOUFvlmMf13K22BAyl9vlpheWOsFV_mLkx_ZxvouQAgbzp1ARYEZK48GucErg825QDrfjCK6JLQxW_tJ4KWr8NtSTOkNg8GjWtW2uGZavy1aZXFgu/s1600/IMG_0708.jpg" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="692" data-original-width="320" height="320" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgs0jsiutqzTPFgSZvnOhywwQ-WnyQsOUFvlmMf13K22BAyl9vlpheWOsFV_mLkx_ZxvouQAgbzp1ARYEZK48GucErg825QDrfjCK6JLQxW_tJ4KWr8NtSTOkNg8GjWtW2uGZavy1aZXFgu/s320/IMG_0708.jpg" width="147" /></a></div>
<br /></div>
<h2 style="text-align: left;">
<b>Prerequisites</b></h2>
<div>
<ul style="text-align: left;">
<li>Visual Studio for Mac</li>
<li>XCode (optional)</li>
<li>Simulator or Physical Device</li>
</ul>
</div>
<h3 style="text-align: left;">
Step 1:</h3>
<div>
Open<i> Visual Studio for Mac</i> >> New >> In the left plane select App under <i>iOS </i>>></div>
<div>
center plane select <i>Single View App</i> >> click <i>Next</i>.<br />
<br /></div>
<div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhUA_MdG1py594Lc2EjeWzy_OpXGgJvMc0W428lD_iSlBSp_yDNTpCUt93jQ-L6Dt6NlTDGKsKumNPfeEW5GMZnQCNHbtWq1JOKsVbf-Ry9Wv3xMofr_1cbRjxZjxYKr0jjVoXoUGRDMkgo/s1600/Screenshot+2020-01-27+at+6.19.20+PM.png" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="358" data-original-width="500" height="229" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhUA_MdG1py594Lc2EjeWzy_OpXGgJvMc0W428lD_iSlBSp_yDNTpCUt93jQ-L6Dt6NlTDGKsKumNPfeEW5GMZnQCNHbtWq1JOKsVbf-Ry9Wv3xMofr_1cbRjxZjxYKr0jjVoXoUGRDMkgo/s320/Screenshot+2020-01-27+at+6.19.20+PM.png" width="320" /></a></div>
<br /></div>
<h3 style="text-align: left;">
Step 2:</h3>
<div>
Next, give your <i>Application Name</i>, <i>Device type, Identifier</i>, select <i>Target Version </i>and click <i>Ok</i>.</div>
<div>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjbDSIY7snL4e8V1bEiBWmoLflOkdGuMaOyzTgp8m8UIz6N3WkTGxcjzOLJsNLCMKYpQTP3ER_oQEfW5frAIXcZWqYzovXuq0c-AwkCNApNHK3qbUTvoWgajQy7vtXzORY5d5FWhwfu070R/s1600/Screenshot+2020-01-27+at+6.19.55+PM.png" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="360" data-original-width="500" height="230" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjbDSIY7snL4e8V1bEiBWmoLflOkdGuMaOyzTgp8m8UIz6N3WkTGxcjzOLJsNLCMKYpQTP3ER_oQEfW5frAIXcZWqYzovXuq0c-AwkCNApNHK3qbUTvoWgajQy7vtXzORY5d5FWhwfu070R/s320/Screenshot+2020-01-27+at+6.19.55+PM.png" width="320" /></a></div>
<br />
<br /></div>
<div style="text-align: left;">
followed by check the app name and solution name, then click Create.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhUQubiQBBguHcr2ENuO8odq_i-z2hDRdC8e2tbNAsrZ-hFZdR3lHowzA16azYcUtjmj5WOAdDaVqt7ZL0nxFFy5_go2FO8xLGRGYGs0rBCue6Lf7g4P4owSP6ps4xdb2Y3L78s2JP6rja9/s1600/Screenshot+2020-01-23+at+7.55.29+PM.png" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="397" data-original-width="550" height="230" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhUQubiQBBguHcr2ENuO8odq_i-z2hDRdC8e2tbNAsrZ-hFZdR3lHowzA16azYcUtjmj5WOAdDaVqt7ZL0nxFFy5_go2FO8xLGRGYGs0rBCue6Lf7g4P4owSP6ps4xdb2Y3L78s2JP6rja9/s320/Screenshot+2020-01-23+at+7.55.29+PM.png" width="320" /></a></div>
<br /></div>
<h3 style="text-align: left;">
Step 3:</h3>
<div>
Now, open Storyboard in your interface builder using the right click of<i> Main.Storyboard</i> >> in the context menu select <i>Open with</i> >> followed by <i>XCode Interface Builder</i> (because of my favorite designer is XCode). Afterward, drag Button from Toolbox and place in the center of the scene. by doing >> <i>Solution Explorer</i> >> open <i>Main.Storyboard </i>>> drag to place Button in the center of the scene and set perfect constraints and Create a click event for this button.</div>
<div>
<br />
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhVW_beX12m8d93tmb-5gDVrSM6wXrAI4v34pbG1f9CkM2L1weB4HRwFPx6aI8wB30MrcSMhJ1wrF26XDdpiISXiyTAGQ19FtFb1JTV5KHyW2w5F5QHwLBA9JireNUkaXQ3Y5ave8M2VfHN/s1600/Button.png" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="168" data-original-width="200" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhVW_beX12m8d93tmb-5gDVrSM6wXrAI4v34pbG1f9CkM2L1weB4HRwFPx6aI8wB30MrcSMhJ1wrF26XDdpiISXiyTAGQ19FtFb1JTV5KHyW2w5F5QHwLBA9JireNUkaXQ3Y5ave8M2VfHN/s1600/Button.png" /></a></div>
<br />
<br /></div>
<div style="text-align: left;">
Now, open ViewController.cs file and write the code given below, by going to Solution Explorer >> double click and open ViewController.cs file. In the code, I created the Document View Controller and Present in the popview inside the event, we created before. In case the controller was canceled the WasCancelled event will be invoked or DidPickDocumentAturls delegate will be invoked.<br />
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEju3IQPftyGSfq4zzMxoexoE3Ec9NSByft1bTCWAsYA4Vroc8tPLGEIINi3XRKg0tvQBIxVvxeioKeaqzsZwyB8mkw7e5SLlJTWhY-bXYDKulcCaXXJ3XzZeSJ5EHtFvVrvt2SifjQpVI4u/s1600/Screenshot+2020-01-29+at+8.18.40+PM.png" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="279" data-original-width="600" height="148" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEju3IQPftyGSfq4zzMxoexoE3Ec9NSByft1bTCWAsYA4Vroc8tPLGEIINi3XRKg0tvQBIxVvxeioKeaqzsZwyB8mkw7e5SLlJTWhY-bXYDKulcCaXXJ3XzZeSJ5EHtFvVrvt2SifjQpVI4u/s320/Screenshot+2020-01-29+at+8.18.40+PM.png" width="320" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<pre class="hljs" style="background: rgb(39 , 40 , 34); color: rgb(221 , 221 , 221); display: block; overflow-x: auto; padding: 0.5em;"><span class="hljs-function"><span class="hljs-keyword" style="color: rgb(249 , 38 , 114); font-weight: 700;">partial</span> <span class="hljs-keyword" style="color: rgb(249 , 38 , 114); font-weight: 700;">void</span> <span class="hljs-title" style="color: rgb(166 , 226 , 46); font-weight: 700;">BtnDirectPick_TouchUpInside</span>(<span class="hljs-params">UIButton sender</span>)
</span>{
<span class="hljs-keyword" style="color: rgb(249 , 38 , 114); font-weight: 700;">var</span> picker = <span class="hljs-keyword" style="color: rgb(249 , 38 , 114); font-weight: 700;">new</span> UIDocumentPickerViewController(allowedUTIs, UIDocumentPickerMode.Open);
picker.WasCancelled += Picker_WasCancelled;
picker.DidPickDocumentAtUrls += (<span class="hljs-keyword" style="color: rgb(249 , 38 , 114); font-weight: 700;">object</span> s, UIDocumentPickedAtUrlsEventArgs e) =>
{
Console.WriteLine(<span class="hljs-string" style="color: rgb(166 , 226 , 46);">"url = {0}"</span>, e.Urls[<span class="hljs-number">0</span>].AbsoluteString);
<span class="hljs-comment" style="color: rgb(117 , 113 , 94);">//bool success = await MoveFileToApp(didPickDocArgs.Url);</span>
<span class="hljs-keyword" style="color: rgb(249 , 38 , 114); font-weight: 700;">var</span> success = <span class="hljs-literal" style="color: rgb(249 , 38 , 114); font-weight: 700;">true</span>;
<span class="hljs-keyword" style="color: rgb(249 , 38 , 114); font-weight: 700;">string</span> filename = e.Urls[<span class="hljs-number">0</span>].LastPathComponent;
<span class="hljs-keyword" style="color: rgb(249 , 38 , 114); font-weight: 700;">string</span> msg = success ? <span class="hljs-keyword" style="color: rgb(249 , 38 , 114); font-weight: 700;">string</span>.Format(<span class="hljs-string" style="color: rgb(166 , 226 , 46);">"Successfully imported file '{0}'"</span>, filename) : <span class="hljs-keyword" style="color: rgb(249 , 38 , 114); font-weight: 700;">string</span>.Format(<span class="hljs-string" style="color: rgb(166 , 226 , 46);">"Failed to import file '{0}'"</span>, filename);
<span class="hljs-comment" style="color: rgb(117 , 113 , 94);">// Some invaild file url returns null</span>
NSData data = NSData.FromUrl(e.Urls[<span class="hljs-number">0</span>]);
<span class="hljs-keyword" style="color: rgb(249 , 38 , 114); font-weight: 700;">if</span>(data!=<span class="hljs-literal" style="color: rgb(249 , 38 , 114); font-weight: 700;">null</span>){
<span class="hljs-keyword" style="color: rgb(249 , 38 , 114); font-weight: 700;">byte</span>[] dataBytes = <span class="hljs-keyword" style="color: rgb(249 , 38 , 114); font-weight: 700;">new</span> <span class="hljs-keyword" style="color: rgb(249 , 38 , 114); font-weight: 700;">byte</span>[data.Length];
System.Runtime.InteropServices.Marshal.Copy(data.Bytes, dataBytes, <span class="hljs-number">0</span>, Convert.ToInt32(data.Length));
<span class="hljs-keyword" style="color: rgb(249 , 38 , 114); font-weight: 700;">for</span> (<span class="hljs-keyword" style="color: rgb(249 , 38 , 114); font-weight: 700;">int</span> i = <span class="hljs-number">0</span>; i < dataBytes.Length; i++)
{
Console.WriteLine(dataBytes[i]);
}
}
Console.WriteLine(data + <span class="hljs-string" style="color: rgb(166 , 226 , 46);">"Completed"</span>);
<span class="hljs-keyword" style="color: rgb(249 , 38 , 114); font-weight: 700;">var</span> alertController = UIAlertController.Create(<span class="hljs-string" style="color: rgb(166 , 226 , 46);">"import"</span>, msg, UIAlertControllerStyle.Alert);
<span class="hljs-keyword" style="color: rgb(249 , 38 , 114); font-weight: 700;">var</span> okButton = UIAlertAction.Create(<span class="hljs-string" style="color: rgb(166 , 226 , 46);">"OK"</span>, UIAlertActionStyle.Default, (obj) =>
{
alertController.DismissViewController(<span class="hljs-literal" style="color: rgb(249 , 38 , 114); font-weight: 700;">true</span>, <span class="hljs-literal" style="color: rgb(249 , 38 , 114); font-weight: 700;">null</span>);
});
alertController.AddAction(okButton);
PresentViewController(alertController, <span class="hljs-literal" style="color: rgb(249 , 38 , 114); font-weight: 700;">true</span>, <span class="hljs-literal" style="color: rgb(249 , 38 , 114); font-weight: 700;">null</span>);
};
PresentViewController(picker, <span class="hljs-literal" style="color: rgb(249 , 38 , 114); font-weight: 700;">true</span>, <span class="hljs-literal" style="color: rgb(249 , 38 , 114); font-weight: 700;">null</span>);
}</pre>
<pre class="hljs" style="background: rgb(39 , 40 , 34); color: rgb(221 , 221 , 221); display: block; overflow-x: auto; padding: 0.5em;"><span class="hljs-function"><span class="hljs-keyword" style="color: rgb(249 , 38 , 114); font-weight: 700;"> private</span> <span class="hljs-keyword" style="color: rgb(249 , 38 , 114); font-weight: 700;">void</span> <span class="hljs-title" style="color: rgb(166 , 226 , 46); font-weight: 700;">Picker_WasCancelled</span>(<span class="hljs-params"><span class="hljs-keyword" style="color: rgb(249 , 38 , 114); font-weight: 700;">object</span> sender, EventArgs e</span>)
</span>{
Console.WriteLine(<span class="hljs-string" style="color: rgb(166 , 226 , 46);">"Picker was Cancelled"</span>);
}</pre>
<div>
<br />
If you need to filter a specific format file, use below URI filters<br />
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiohIrMRC-Lk7bGfrJUIV49CotYfYy5OIIIizkom8ENudaBQcSuKDVfzZ5KNAXozmRsbJazNJs8lCspW7rPmsa-3UY9C1VUYGyN-CPWOS9X-tkiDaOd5k0rrG7o22H0jEJZIFmhL0qNLxk5/s1600/Screenshot+2020-01-29+at+8.18.45+PM.png" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="166" data-original-width="427" height="124" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiohIrMRC-Lk7bGfrJUIV49CotYfYy5OIIIizkom8ENudaBQcSuKDVfzZ5KNAXozmRsbJazNJs8lCspW7rPmsa-3UY9C1VUYGyN-CPWOS9X-tkiDaOd5k0rrG7o22H0jEJZIFmhL0qNLxk5/s320/Screenshot+2020-01-29+at+8.18.45+PM.png" width="320" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div>
<br /></div>
<pre class="hljs" style="background: rgb(39 , 40 , 34); color: rgb(221 , 221 , 221); display: block; overflow-x: auto; padding: 0.5em;"><span class="hljs-keyword" style="color: rgb(249 , 38 , 114); font-weight: 700;">private</span> <span class="hljs-keyword" style="color: rgb(249 , 38 , 114); font-weight: 700;">string</span>[] allowedUTIs = {
UTType.UTF8PlainText,
UTType.PlainText,
UTType.RTF,
UTType.PNG,
UTType.Text,
UTType.PDF,
UTType.Image
};</pre>
<h3 style="text-align: left;">
<b>Step 4:</b></h3>
<div>
Press F5 or run the project, you will get output like below.</div>
<div>
<br /></div>
<div style="text-align: left;">
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgs0jsiutqzTPFgSZvnOhywwQ-WnyQsOUFvlmMf13K22BAyl9vlpheWOsFV_mLkx_ZxvouQAgbzp1ARYEZK48GucErg825QDrfjCK6JLQxW_tJ4KWr8NtSTOkNg8GjWtW2uGZavy1aZXFgu/s1600/IMG_0708.jpg" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="692" data-original-width="320" height="320" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgs0jsiutqzTPFgSZvnOhywwQ-WnyQsOUFvlmMf13K22BAyl9vlpheWOsFV_mLkx_ZxvouQAgbzp1ARYEZK48GucErg825QDrfjCK6JLQxW_tJ4KWr8NtSTOkNg8GjWtW2uGZavy1aZXFgu/s320/IMG_0708.jpg" width="147" /></a></div>
<br /></div>
<div style="text-align: left;">
<b>Summary</b></div>
<div style="text-align: left;">
</div>
<ul style="text-align: left;">
<li>Create <i><span style="color: #0b5394;">UIDocumentPickerViewController </span></i></li>
<li>Implement picker delegate</li>
<li>Convert <span style="color: #0b5394;"><i>NSData </i></span>to byte.</li>
</ul>
<div>
In this article, we learned how to use the document view controller in Xamarin iOS.</div>
<div>
<br /></div>
</div>
Logesh Palanihttp://www.blogger.com/profile/11572235997627400122noreply@blogger.com0tag:blogger.com,1999:blog-4259075105540267115.post-65562052364499549382020-01-25T00:08:00.000+05:302020-01-31T16:47:23.787+05:30OTP View In Xamarin iOS<div dir="ltr" style="text-align: left;" trbidi="on">
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgzmudqQe4X7TShgJza2pFCcqix9jA_PT-lkGfbvnORh959rp46hDEyvLMkrG4RsboAJYxqRIkW_NQ1vEIWk-DwXHW_3fisKuFDPpbuXODJssZ1405mgO5ZsSs-fR2fGIVNzEBjHywfsyN1/s1600/OTP+View+in+Xamarin+iOS.png" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="315" data-original-width="560" height="360" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgzmudqQe4X7TShgJza2pFCcqix9jA_PT-lkGfbvnORh959rp46hDEyvLMkrG4RsboAJYxqRIkW_NQ1vEIWk-DwXHW_3fisKuFDPpbuXODJssZ1405mgO5ZsSs-fR2fGIVNzEBjHywfsyN1/s640/OTP+View+in+Xamarin+iOS.png" width="640" /></a></div>
<h3 style="text-align: left;">
</h3>
<h3 style="text-align: left;">
Introduction </h3>
<div>
In this demonstration, I will explain how to create OTP View in Xamarin iOS without using third party plugins.</div>
<div>
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgDhvS2TM1TOpPCVS122cOPE8OFnpZkcN_3C9uOa9Iq4eOZK-dPzYFwIUTaHMCa6vXlrjssd-yjio7SJtoj8B8p8QuckBnsTKaLOdAVS9VKNjCOV9lWrTggHHLZMjhWF2SRytm7SOE1f2OB/s1600/ezgif.com-video-to-gif+%25281%2529.gif" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="568" data-original-width="320" height="320" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgDhvS2TM1TOpPCVS122cOPE8OFnpZkcN_3C9uOa9Iq4eOZK-dPzYFwIUTaHMCa6vXlrjssd-yjio7SJtoj8B8p8QuckBnsTKaLOdAVS9VKNjCOV9lWrTggHHLZMjhWF2SRytm7SOE1f2OB/s320/ezgif.com-video-to-gif+%25281%2529.gif" width="180" /></a></div>
<div>
<br /></div>
<h3 style="text-align: left;">
Issue </h3>
<div>
<br /></div>
<div>
First, I'm using a third-party plugin to archive my required view, but there is some issue to customize the view.</div>
<h3 style="text-align: left;">
</h3>
<h2 style="text-align: left;">
Solution </h2>
<div>
<h3>
Prerequisites </h3>
</div>
<div>
<ul style="text-align: left;">
<li>Visual Studio for Mac</li>
<li>XCode ( Optional )</li>
<li>Simulator or Physical Device</li>
</ul>
</div>
<h3 style="text-align: left;">
Step 1:</h3>
<div>
Open Visual Studio for Mac >> New >> In the left plane select App under iOS >> center plane select Single View App >> click Next.</div>
<div>
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjatIuO06jusBMsMBoR0LkwOlK7TeuXq3zjhyIFyP8bPZ4-zaRH3s3Y1FGzh-fYnFSz92Q-Z4x4wWWmv_N8qDVdqsRO-MjnJ-a9wp8Ihl68WwLjUSjfLYOsDIITFxkOqP1uW7Aq3UgYAYLy/s1600/Screenshot+2020-01-23+at+7.55.03+PM.png" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="397" data-original-width="550" height="230" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjatIuO06jusBMsMBoR0LkwOlK7TeuXq3zjhyIFyP8bPZ4-zaRH3s3Y1FGzh-fYnFSz92Q-Z4x4wWWmv_N8qDVdqsRO-MjnJ-a9wp8Ihl68WwLjUSjfLYOsDIITFxkOqP1uW7Aq3UgYAYLy/s320/Screenshot+2020-01-23+at+7.55.03+PM.png" width="320" /></a></div>
<div>
<br /></div>
<h3>
Step 2:</h3>
<div>
Next, give your Application Name, Device type, Identifier, select target Version and click OK.</div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh8OKUjUmnBqaHcn3SiHFGjC_0VBdAmvVK61UG5nk8PhYVLDCwAxLhOekb37sCvb4a_R0FIrWneaDF9PhQwU6lv7tF0Wr5PwO6WEYk0BJjJ1GEWL6AW64SgcqDo046V1IkEqaWNtaCcmZaD/s1600/Screenshot+2020-01-23+at+7.55.16+PM.png" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="397" data-original-width="550" height="230" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh8OKUjUmnBqaHcn3SiHFGjC_0VBdAmvVK61UG5nk8PhYVLDCwAxLhOekb37sCvb4a_R0FIrWneaDF9PhQwU6lv7tF0Wr5PwO6WEYk0BJjJ1GEWL6AW64SgcqDo046V1IkEqaWNtaCcmZaD/s320/Screenshot+2020-01-23+at+7.55.16+PM.png" width="320" /></a></div>
<div>
<br /></div>
<div>
<br /></div>
<div>
Followed by check the app name and solution name, then click Create.</div>
<div>
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjva6-3jR0gFQUfr5FLa0a_EpCEOq80rGdq5Nln9Y3Osg0LHVtUPJaeRihpltMX6fa5KNz_Vpbt1GgASfa_C1RjfTtwMRoZXeF49Zt-meV6QS6eZ0glshqwfJf_xcfno8KxgBg-l9oJx7zI/s1600/Screenshot+2020-01-23+at+7.55.29+PM.png" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="397" data-original-width="550" height="230" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjva6-3jR0gFQUfr5FLa0a_EpCEOq80rGdq5Nln9Y3Osg0LHVtUPJaeRihpltMX6fa5KNz_Vpbt1GgASfa_C1RjfTtwMRoZXeF49Zt-meV6QS6eZ0glshqwfJf_xcfno8KxgBg-l9oJx7zI/s320/Screenshot+2020-01-23+at+7.55.29+PM.png" width="320" /></a></div>
<div>
<br /></div>
<div>
<br /></div>
<h3 style="text-align: left;">
<b>Step 3:</b></h3>
<div>
Now, open Storyboard in your interface builder using the right click of Main.Storyboard >> In the context menu select <i>Open with >> </i>followed by XCode Interface Builder because my favorite designer is Xcode.</div>
<div>
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj0j3S85gM2_EG0noZEN6VWHgIUyMg-g4H9e43GicvOqunnKRxsG3EWFHa9igKYvyiItTOnCehlK4uoyZ7RUuQVd_g2iNYtlM3f0CiVYKnjsHb6uhNIazVAG7yjgeJdGxxOYYVC0N0OD_Gk/s1600/Xamarin+iOS+3.png" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="404" data-original-width="541" height="238" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj0j3S85gM2_EG0noZEN6VWHgIUyMg-g4H9e43GicvOqunnKRxsG3EWFHa9igKYvyiItTOnCehlK4uoyZ7RUuQVd_g2iNYtlM3f0CiVYKnjsHb6uhNIazVAG7yjgeJdGxxOYYVC0N0OD_Gk/s320/Xamarin+iOS+3.png" width="320" /></a></div>
<div>
<br /></div>
<div>
Afterward, Drag Horizontal Stack View from Toolbox and place Storyboard as per your requirement and set perfect Constraint to this view. Next, drag TextField from Toolbox and place inside the StackView and set height and width of TextField. Create an outlet for this TextField to access from code-behind. Here, I set field names are fieldOne, fieldTwo, fieldThree, fieldFour.</div>
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg84xVcvyVpZa6FuVf91PXzVIJXVlrX_9sgqyWaEtBhGb0an4dBHsQKrZ4VYpeB4AGiG7P9txtoHeUdmLNuOJ-Z1DfZl_hcgcPYpTjaJYeQc10ptbQD1-sZh2crDe_pBxwRoisQX6iFKs4_/s1600/Screenshot+2020-01-23+at+8.10.55+PM.png" style="margin-left: auto; margin-right: auto;"><img border="0" data-original-height="271" data-original-width="550" height="157" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg84xVcvyVpZa6FuVf91PXzVIJXVlrX_9sgqyWaEtBhGb0an4dBHsQKrZ4VYpeB4AGiG7P9txtoHeUdmLNuOJ-Z1DfZl_hcgcPYpTjaJYeQc10ptbQD1-sZh2crDe_pBxwRoisQX6iFKs4_/s320/Screenshot+2020-01-23+at+8.10.55+PM.png" width="320" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">Stack View</td></tr>
</tbody></table>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjm_awTisNiUsHAthrTsXrKE3J83b35jMirgfuXCM_6KfCcB8KznkXHmth0ycpcDI8_YEoitTdVR2xYVwUKAArTnIMwIcw_Oqh9lO5QHCaSLKJvhS0c66oK6lwO6Gle_XpmF324nlmbEUwm/s1600/Screenshot+2020-01-23+at+8.11.06+PM.png" style="margin-left: auto; margin-right: auto;"><img border="0" data-original-height="321" data-original-width="550" height="186" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjm_awTisNiUsHAthrTsXrKE3J83b35jMirgfuXCM_6KfCcB8KznkXHmth0ycpcDI8_YEoitTdVR2xYVwUKAArTnIMwIcw_Oqh9lO5QHCaSLKJvhS0c66oK6lwO6Gle_XpmF324nlmbEUwm/s320/Screenshot+2020-01-23+at+8.11.06+PM.png" width="320" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">OTP View Xamarin iOS</td></tr>
</tbody></table>
<br />
<h3 style="text-align: left;">
<b>Step 4:</b></h3>
<div>
Next, open ViewController.cs file by going >> Solution Explorer >> double click ViewController.cs file. Implement the ViewController class in <i>IUITextFieldDelegate</i> interface and override <i>ShouldChangeCharacters</i> method. Here, I did simple logic to change the focus of one field to another field. In case you need to validate input in runtime, you can write your validation code before the ResignResponder method.</div>
<div>
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEixFoJ3wyQGGzh_xv2vYw0VcfQqqY26T5vlheIoZeQcLxrx8lKSJlCrQ8t5ky9d3JFRYxAbpj43QE0CH7c35CtNuDR_GL_uscG-tcwyug7gCTRKbXTCzMcB90KZlwwtaR3HVy_2rqY9olSK/s1600/Screenshot+2020-01-23+at+7.55.52+PM.png" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="442" data-original-width="550" height="257" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEixFoJ3wyQGGzh_xv2vYw0VcfQqqY26T5vlheIoZeQcLxrx8lKSJlCrQ8t5ky9d3JFRYxAbpj43QE0CH7c35CtNuDR_GL_uscG-tcwyug7gCTRKbXTCzMcB90KZlwwtaR3HVy_2rqY9olSK/s320/Screenshot+2020-01-23+at+7.55.52+PM.png" width="320" /></a></div>
<div>
<br /></div>
<div>
<pre class="hljs" style="background: rgb(39 , 40 , 34); color: rgb(221 , 221 , 221); display: block; overflow-x: auto; padding: 0.5em;">using Foundation;
using System;
using UIKit;
namespace OTPSample
{
<span class="hljs-keyword" style="color: rgb(249 , 38 , 114); font-weight: 700;">public</span> partial <span class="hljs-class"><span class="hljs-keyword" style="color: rgb(249 , 38 , 114); font-weight: 700;">class</span> <span class="hljs-title" style="color: rgb(166 , 226 , 46); font-weight: 700;">ViewController</span> : <span class="hljs-type" style="color: rgb(166 , 226 , 46); font-weight: 700;">UIViewController</span>, <span class="hljs-type" style="color: rgb(166 , 226 , 46); font-weight: 700;">IUITextFieldDelegate</span></span>
{
<span class="hljs-keyword" style="color: rgb(249 , 38 , 114); font-weight: 700;">public</span> ViewController(IntPtr handle) : base(handle)
{
}
<span class="hljs-keyword" style="color: rgb(249 , 38 , 114); font-weight: 700;">public</span> <span class="hljs-keyword" style="color: rgb(249 , 38 , 114); font-weight: 700;">override</span> void ViewDidLoad()
{
base.ViewDidLoad();
<span class="hljs-comment" style="color: rgb(117 , 113 , 94);">// Perform any additional setup after loading the view, typically from a nib.</span>
fieldOne.Delegate = <span class="hljs-keyword" style="color: rgb(249 , 38 , 114); font-weight: 700;">this</span>;
fieldTwo.Delegate = <span class="hljs-keyword" style="color: rgb(249 , 38 , 114); font-weight: 700;">this</span>;
fieldThree.Delegate = <span class="hljs-keyword" style="color: rgb(249 , 38 , 114); font-weight: 700;">this</span>;
fieldFour.Delegate = <span class="hljs-keyword" style="color: rgb(249 , 38 , 114); font-weight: 700;">this</span>;
fieldOne.BackgroundColor = UIColor.Clear;
fieldTwo.BackgroundColor = UIColor.Clear;
fieldThree.BackgroundColor = UIColor.Clear;
fieldFour.BackgroundColor = UIColor.Clear;
}
[Export(<span class="hljs-string" style="color: rgb(166 , 226 , 46);">"textField:shouldChangeCharactersInRange:replacementString:"</span>)]
<span class="hljs-keyword" style="color: rgb(249 , 38 , 114); font-weight: 700;">public</span> bool ShouldChangeCharacters(UITextField textField, NSRange range, string replacementString)
{
<span class="hljs-comment" style="color: rgb(117 , 113 , 94);">// Increment Responder change</span>
<span class="hljs-keyword" style="color: rgb(249 , 38 , 114); font-weight: 700;">if</span> (textField.Text?.Length < <span class="hljs-number">1</span> && replacementString.Length > <span class="hljs-number">0</span>)
{
<span class="hljs-keyword" style="color: rgb(249 , 38 , 114); font-weight: 700;">if</span> (textField == fieldOne)
fieldTwo.BecomeFirstResponder();
<span class="hljs-keyword" style="color: rgb(249 , 38 , 114); font-weight: 700;">else</span> <span class="hljs-keyword" style="color: rgb(249 , 38 , 114); font-weight: 700;">if</span> (textField == fieldTwo)
fieldThree.BecomeFirstResponder();
<span class="hljs-keyword" style="color: rgb(249 , 38 , 114); font-weight: 700;">else</span> <span class="hljs-keyword" style="color: rgb(249 , 38 , 114); font-weight: 700;">if</span> (textField == fieldThree)
fieldFour.BecomeFirstResponder();
<span class="hljs-keyword" style="color: rgb(249 , 38 , 114); font-weight: 700;">else</span> <span class="hljs-keyword" style="color: rgb(249 , 38 , 114); font-weight: 700;">if</span> (textField == fieldFour)
fieldFour.ResignFirstResponder();
textField.Text = replacementString;
<span class="hljs-keyword" style="color: rgb(249 , 38 , 114); font-weight: 700;">return</span> <span class="hljs-literal" style="color: rgb(249 , 38 , 114); font-weight: 700;">false</span>;
}
<span class="hljs-comment" style="color: rgb(117 , 113 , 94);">//Decrement Responder change</span>
<span class="hljs-keyword" style="color: rgb(249 , 38 , 114); font-weight: 700;">else</span> <span class="hljs-keyword" style="color: rgb(249 , 38 , 114); font-weight: 700;">if</span> (textField.Text?.Length >= <span class="hljs-number">1</span> && replacementString.Length == <span class="hljs-number">0</span>)
{
<span class="hljs-keyword" style="color: rgb(249 , 38 , 114); font-weight: 700;">if</span> (textField == fieldTwo)
fieldOne.BecomeFirstResponder();
<span class="hljs-keyword" style="color: rgb(249 , 38 , 114); font-weight: 700;">else</span> <span class="hljs-keyword" style="color: rgb(249 , 38 , 114); font-weight: 700;">if</span> (textField == fieldThree)
fieldTwo.BecomeFirstResponder();
<span class="hljs-keyword" style="color: rgb(249 , 38 , 114); font-weight: 700;">else</span> <span class="hljs-keyword" style="color: rgb(249 , 38 , 114); font-weight: 700;">if</span> (textField == fieldFour)
fieldThree.BecomeFirstResponder();
<span class="hljs-keyword" style="color: rgb(249 , 38 , 114); font-weight: 700;">else</span> <span class="hljs-keyword" style="color: rgb(249 , 38 , 114); font-weight: 700;">if</span> (textField == fieldOne)
fieldOne.BecomeFirstResponder();
textField.Text = <span class="hljs-string" style="color: rgb(166 , 226 , 46);">""</span>;
<span class="hljs-keyword" style="color: rgb(249 , 38 , 114); font-weight: 700;">return</span> <span class="hljs-literal" style="color: rgb(249 , 38 , 114); font-weight: 700;">false</span>;
}
<span class="hljs-keyword" style="color: rgb(249 , 38 , 114); font-weight: 700;">else</span> <span class="hljs-keyword" style="color: rgb(249 , 38 , 114); font-weight: 700;">if</span> (textField.Text?.Length >= <span class="hljs-number">1</span>)
{
textField.Text = replacementString;
<span class="hljs-keyword" style="color: rgb(249 , 38 , 114); font-weight: 700;">return</span> <span class="hljs-literal" style="color: rgb(249 , 38 , 114); font-weight: 700;">false</span>;
}
<span class="hljs-keyword" style="color: rgb(249 , 38 , 114); font-weight: 700;">return</span> <span class="hljs-literal" style="color: rgb(249 , 38 , 114); font-weight: 700;">true</span>;
}
<span class="hljs-keyword" style="color: rgb(249 , 38 , 114); font-weight: 700;">public</span> <span class="hljs-keyword" style="color: rgb(249 , 38 , 114); font-weight: 700;">override</span> void DidReceiveMemoryWarning()
{
base.DidReceiveMemoryWarning();
<span class="hljs-comment" style="color: rgb(117 , 113 , 94);">// Release any cached data, images, etc that aren't in use.</span>
}
}
}</pre>
<h3 style="text-align: left;">
Step 5:</h3>
<div>
Let's run your application, you will get output like below.</div>
<div>
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgGyJ9P_OASQmwhUOm41XYLpyIXbUe8Bm0cL3pvdDuTnxEZwt8pKEXycAdZvsAyM5n0jQb8daaZMCLiieJp7LwJ6icr7yjJMFV5l9gx-KGtgJnwGEfih946sAiG_6RSXgcm9Hmg8uUNGCZ5/s1600/ezgif.com-video-to-gif+%25281%2529.gif" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="568" data-original-width="320" height="320" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgGyJ9P_OASQmwhUOm41XYLpyIXbUe8Bm0cL3pvdDuTnxEZwt8pKEXycAdZvsAyM5n0jQb8daaZMCLiieJp7LwJ6icr7yjJMFV5l9gx-KGtgJnwGEfih946sAiG_6RSXgcm9Hmg8uUNGCZ5/s320/ezgif.com-video-to-gif+%25281%2529.gif" width="180" /></a></div>
<div>
<br /></div>
<div>
<br /></div>
<div>
The full source code is <a href="https://github.com/logeshpalani98/Xamarin.iOS-Samples" target="_blank">here</a>.</div>
<div>
<br /></div>
<h3 style="text-align: left;">
Summary</h3>
<div>
<ol style="text-align: left;">
<li>We created StackView</li>
<li>StackView inside placed TextField</li>
<li>Create an outlet for Textfield</li>
<li>Implement IUXTextFieldDelegate to your View Controller and write some logic</li>
</ol>
<div>
Share, your comment below. </div>
</div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div>
<br /></div>
<div>
<b><br />
</b></div>
</div>
</div>
Logesh Palanihttp://www.blogger.com/profile/11572235997627400122noreply@blogger.com0tag:blogger.com,1999:blog-4259075105540267115.post-17556093032784440432020-01-11T23:28:00.000+05:302020-02-26T23:43:46.553+05:30Xamarin Santa Talk Challenge with Azure Functions Winner in Microsoft <div dir="ltr" style="text-align: left;" trbidi="on">
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhzTEfXHgSA8V6qs7cH72AWAKXfcXeD6DBnzUG9GBZxJV3Jq5CBG_GxMwf8mpjOdKAbuP6UJb8YX9rVLG213NgiJtFXy1zypg-4MQ_lrP8c1swIfMyUzP3occN6thPJyQ_4d2NKPwbMKoAr/s1600/Santa+Talk+UI+Chellange+Winner.PNG" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="378" data-original-width="799" height="300" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhzTEfXHgSA8V6qs7cH72AWAKXfcXeD6DBnzUG9GBZxJV3Jq5CBG_GxMwf8mpjOdKAbuP6UJb8YX9rVLG213NgiJtFXy1zypg-4MQ_lrP8c1swIfMyUzP3occN6thPJyQ_4d2NKPwbMKoAr/s640/Santa+Talk+UI+Chellange+Winner.PNG" width="640" /></a></div>
<div>
<br /></div>
<div>
<br /></div>
<div>
I'm very much happy to receive my winner swag from Microsoft. Thanks to this community that I was selected as a member of better usage of Azure Function with Xamarin. I feel very happy and Thanks for your support and guidance. </div>
<div>
<br /></div>
<div>
Here is a link my for PR - <a href="https://github.com/codemillmatt/santa-talk/pull/10" target="_blank">Github Repos PR</a></div>
<div>
<br /></div>
<div>
All the participants PR here - <a href="https://github.com/codemillmatt/santa-talk/pulls">https://github.com/codemillmatt/santa-talk/pulls</a></div>
<div>
<br /></div>
<div>
Once again Thank you</div>
</div>
Logesh Palanihttp://www.blogger.com/profile/11572235997627400122noreply@blogger.com0tag:blogger.com,1999:blog-4259075105540267115.post-31602261075527001652020-01-09T23:00:00.000+05:302020-01-09T23:00:13.751+05:30How to use Multiple View Controller in Single Page in Xamarin iOS<div dir="ltr" style="text-align: left;" trbidi="on">
<div dir="ltr" style="text-align: left;" trbidi="on">
<div dir="ltr" style="text-align: left;" trbidi="on">
<div dir="ltr" style="text-align: left;" trbidi="on">
<div dir="ltr" style="text-align: left;" trbidi="on">
<div dir="ltr" style="text-align: left;" trbidi="on">
<div dir="ltr" style="text-align: left;" trbidi="on">
<div dir="ltr" style="text-align: left;" trbidi="on">
<div dir="ltr" style="text-align: left;" trbidi="on">
<div dir="ltr" style="text-align: left;" trbidi="on">
<div dir="ltr" style="text-align: left;" trbidi="on">
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjODJhi06UiX00UYSEp0uwsQmMH-KiFJM5eZfZHq1EC38urCvdTYS9k2QtW3IAVsIuSS6vtHkZt8coeBhm9ugsHI1IhWGfPnQtrnd903DqRpuBp1DonnkJ4MKf5wkwBTSO7eV5CRy-nccU5/s1600/Blog+Banner.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="431" data-original-width="763" height="360" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjODJhi06UiX00UYSEp0uwsQmMH-KiFJM5eZfZHq1EC38urCvdTYS9k2QtW3IAVsIuSS6vtHkZt8coeBhm9ugsHI1IhWGfPnQtrnd903DqRpuBp1DonnkJ4MKf5wkwBTSO7eV5CRy-nccU5/s640/Blog+Banner.PNG" width="640" /></a></div>
<h2 style="text-align: left;">
<b>Introduction</b></h2>
<div>
In this blog, I will explain how to handle multiple view controllers on a single page in Xamarin iOS. If you're interested in learning this, just read the entire post. Since there is no default functionality for showing multiple view controllers in iOS. Some of the application designs are complicated too. In such circumstances hiding & showing views in single <i>ViewController </i>is really not the smart way. So, we need to separate the views. This sample, I have created multiple <i>ViewController'</i>s and to present on a single page. Here, I will show you to present multiple view controllers in a single page.</div>
<div>
<br /></div>
<h2 style="text-align: left;">
iOS output</h2>
<div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh1qrM_t_KnXVMih8fptb0wljJYxhjvzK1WMQ1ZIxVOzZRaPpXNEUH3bq5jrA8DLMI8YIOycQnAKUG2kgWXCjDON6FHqlyHY_TJ-_pVTwQXUmn7AyTgSJNs9MUx9RLs45FFHJOPxdBV3krw/s1600/ezgif.com-resize.gif" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="800" data-original-width="400" height="320" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh1qrM_t_KnXVMih8fptb0wljJYxhjvzK1WMQ1ZIxVOzZRaPpXNEUH3bq5jrA8DLMI8YIOycQnAKUG2kgWXCjDON6FHqlyHY_TJ-_pVTwQXUmn7AyTgSJNs9MUx9RLs45FFHJOPxdBV3krw/s320/ezgif.com-resize.gif" width="160" /></a></div>
<br /></div>
<h2 style="text-align: left;">
Prerequisites </h2>
<div>
<ul style="text-align: left;">
<li>Visual Studio 2019 </li>
<li>XCode 10.0 or above</li>
<li>Physical device or simulator </li>
<li>This project created in Visual Studio 2019 for Mac</li>
</ul>
<div>
<h2 style="text-align: left;">
Let's start</h2>
</div>
</div>
<h3 style="text-align: left;">
Step 1:</h3>
<div>
Create Xamarin iOS Single View Application by navigating to Visual Studio File Menu >> New Project >> In the dialog window >> select left plane <i>App </i>under <i>iOS </i>and center plane select <i>Single View Application</i> and click <i>Next</i>.<br />
<br /></div>
<div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhmc3NkuVvL-y4-f9uPRPZQaQXGWIiG-u7NK215rJfo6OwYTR9dYPcZAIds4YcoVQKucxmZkmQ5xTQdAh8VxIosHqakVycyObS1ltR_28rK_ac6b8_evu6LtzSFIYFZUe6R0i7WLCsLHQ8w/s1600/Xamarin+iOS+1.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="655" data-original-width="901" height="232" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhmc3NkuVvL-y4-f9uPRPZQaQXGWIiG-u7NK215rJfo6OwYTR9dYPcZAIds4YcoVQKucxmZkmQ5xTQdAh8VxIosHqakVycyObS1ltR_28rK_ac6b8_evu6LtzSFIYFZUe6R0i7WLCsLHQ8w/s320/Xamarin+iOS+1.png" width="320" /></a></div>
<br /></div>
<div>
<br /></div>
<h3 style="text-align: left;">
Step 2:</h3>
<div>
In the next window, give your application a name, target version & device type (tab or mobile), organize & bundle identifier and click <i>OK</i>.</div>
<div>
<br /></div>
<div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjfJiHsaNK1fcf3AvjboIe7yOpubP-uuPnN5vStjpL6onYCvBcx8KcMooRZBEnPB7M3Xa7E4fEIv-Cz-8v3lXNcFOrN9ro8oXSxRAejXjXHvQtimogNh7xpBRCY4oKgVvvuydBo3dU2Zjry/s1600/Xamarin+iOS+2.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="648" data-original-width="903" height="229" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjfJiHsaNK1fcf3AvjboIe7yOpubP-uuPnN5vStjpL6onYCvBcx8KcMooRZBEnPB7M3Xa7E4fEIv-Cz-8v3lXNcFOrN9ro8oXSxRAejXjXHvQtimogNh7xpBRCY4oKgVvvuydBo3dU2Zjry/s320/Xamarin+iOS+2.png" width="320" /></a></div>
<br /></div>
<h3 style="text-align: left;">
Step 3:</h3>
<div>
After the project creation, you will get a folder structure like below.<br />
<br /></div>
<div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiojHT2RPMRIrL5nbB4FuLbhmJY59q6DzcFWMTs__P9bipsJFiF8snFZiwfV9GUAGT1HxbLSQ-tYeeOBH-ks_LouHtmwiskdNvHfhkO1a35uIxYzatDrfblx-1vZIZfvVX3M7sUoReEyYsi/s1600/Xamarin+iOS+Project+Structure.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="406" data-original-width="234" height="320" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiojHT2RPMRIrL5nbB4FuLbhmJY59q6DzcFWMTs__P9bipsJFiF8snFZiwfV9GUAGT1HxbLSQ-tYeeOBH-ks_LouHtmwiskdNvHfhkO1a35uIxYzatDrfblx-1vZIZfvVX3M7sUoReEyYsi/s320/Xamarin+iOS+Project+Structure.png" width="184" /></a></div>
<br /></div>
<div>
<br /></div>
<div>
Now, open storyboard in you interface builder using the right click of Main.Storyboard >> in the context menu select <i>Open with >> </i>forwarded by XCode Interface Builder.</div>
<div>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj0j3S85gM2_EG0noZEN6VWHgIUyMg-g4H9e43GicvOqunnKRxsG3EWFHa9igKYvyiItTOnCehlK4uoyZ7RUuQVd_g2iNYtlM3f0CiVYKnjsHb6uhNIazVAG7yjgeJdGxxOYYVC0N0OD_Gk/s1600/Xamarin+iOS+3.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="404" data-original-width="541" height="238" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj0j3S85gM2_EG0noZEN6VWHgIUyMg-g4H9e43GicvOqunnKRxsG3EWFHa9igKYvyiItTOnCehlK4uoyZ7RUuQVd_g2iNYtlM3f0CiVYKnjsHb6uhNIazVAG7yjgeJdGxxOYYVC0N0OD_Gk/s320/Xamarin+iOS+3.png" width="320" /></a></div>
<br /></div>
<h3 style="text-align: left;">
Step 4:</h3>
<div>
It's time to design our interface. Default one view controller will be there, We should place <i>Navigation Controller</i> in-front of Initial <i>View Controller. </i>Drag and drop the <i>UICollectionView</i> and <i>View. </i> Here, collection view for creating a tabbed page and view for set another controller view to this view. Because there is no default control for the tabbed page and set this collection view height and constraints as per your requirements. Create an outlet for <i>CollectionView and View </i>as <i>collectionView</i> and <i>baseView</i></div>
<div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjfwyshISOuzz_ghyphenhyphenxesW4XB_W7EuxFXfJi3f8NSdQStOa0fvwbSyDdyjkKrMIrt3doURuwVwpPiv4lADmOMpCYOeZnCXT-Nf7fcBo5OPApeNGiVDVdPuuPE1HMKp841J51GUPY-dvvqcL_/s1600/Screenshot+2019-12-13+at+6.35.53+PM.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="829" data-original-width="967" height="274" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjfwyshISOuzz_ghyphenhyphenxesW4XB_W7EuxFXfJi3f8NSdQStOa0fvwbSyDdyjkKrMIrt3doURuwVwpPiv4lADmOMpCYOeZnCXT-Nf7fcBo5OPApeNGiVDVdPuuPE1HMKp841J51GUPY-dvvqcL_/s320/Screenshot+2019-12-13+at+6.35.53+PM.png" width="320" /></a></div>
<br /></div>
<div>
<br /></div>
<div>
Next, select collection view and open properties plane and set the size is <i>None.</i></div>
<div>
<i><br />
</i><br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEitcwJQ81ie6ok4b22zgrKmjsKSHdrzxviHcMcuLODApF_NS5nn4g61ShNqULg04kfUikL0E1k2CIKG4Mk_aBa_i4HzffxL58RBs-seSvxn0nJo-8ZoJ4KhLjv5wQBd1hv37i1HbZG3R0Yp/s1600/Screenshot+2019-12-13+at+6.34.38+PM.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="118" data-original-width="260" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEitcwJQ81ie6ok4b22zgrKmjsKSHdrzxviHcMcuLODApF_NS5nn4g61ShNqULg04kfUikL0E1k2CIKG4Mk_aBa_i4HzffxL58RBs-seSvxn0nJo-8ZoJ4KhLjv5wQBd1hv37i1HbZG3R0Yp/s1600/Screenshot+2019-12-13+at+6.34.38+PM.png" /></a></div>
<i><br /></i></div>
<h2 style="text-align: left;">
Add First View Controller </h2>
<div>
Next, drag and drop the new view controller and set the background color as red and add label view in the center of the page. Create a new <i>ViewController </i>class named as <i>FirstViewController to assign this ViewController.</i><br />
<i><br /></i>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEic-3ZB2tGkByEvulr4MfwsrYF1LXKFHUaZg_AUGwAHjT_pjTlGPuW71CwSe95nULkLT3hjMPtixARRz9jC_KXOuN26GTU86_1JIkbFJbJmcHHdt3vDqHuD7OneaoDv69VJeMjAJ7th3P1f/s1600/Screenshot+2019-12-13+at+6.37.22+PM.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="527" data-original-width="266" height="320" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEic-3ZB2tGkByEvulr4MfwsrYF1LXKFHUaZg_AUGwAHjT_pjTlGPuW71CwSe95nULkLT3hjMPtixARRz9jC_KXOuN26GTU86_1JIkbFJbJmcHHdt3vDqHuD7OneaoDv69VJeMjAJ7th3P1f/s320/Screenshot+2019-12-13+at+6.37.22+PM.png" width="161" /></a></div>
<i><br /></i></div>
<div>
<i><br />
</i></div>
<h2 style="text-align: left;">
Add Second View Controller</h2>
<div>
Similarly, create another view controller and set the background color as yellow and place one label in the center of the page. As well as create another view controller class named <i>SecondViewController </i>to assign to this View Controller.</div>
<div>
<br />
<div class="separator" style="clear: both; text-align: center;">
</div>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiHn3sFm283OYSD6_ROUThET5twHohdOpBwBFq-tffdT1SKrg9JjFGnfAnohq9OHxyYrmV-4lc9-0bcomkfPkVQQrFCCc7RxesSIvIWpr0ww9I1ahH6lr71qQbgRcUd50BLmdIZAdHCIay9/s1600/Screenshot+2019-12-13+at+6.37.28+PM.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="530" data-original-width="272" height="320" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiHn3sFm283OYSD6_ROUThET5twHohdOpBwBFq-tffdT1SKrg9JjFGnfAnohq9OHxyYrmV-4lc9-0bcomkfPkVQQrFCCc7RxesSIvIWpr0ww9I1ahH6lr71qQbgRcUd50BLmdIZAdHCIay9/s320/Screenshot+2019-12-13+at+6.37.28+PM.png" width="164" /></a></div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
finally, your storyboard looks like below</div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgGQjdjAMHxCAFgJNYWBf4K5BsqSi6cox1AY_Qr3REfADmXu3bzTr6BPRM96ABIdE4Q2gifI6A4oZTFWCfNcVklJzs_W_tKoxP0anfYKxQLTa35xfkVrAcUBDz9DM0n6_beonvprJrTNnKk/s1600/Screenshot+2019-12-13+at+6.34.18+PM.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="666" data-original-width="800" height="266" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgGQjdjAMHxCAFgJNYWBf4K5BsqSi6cox1AY_Qr3REfADmXu3bzTr6BPRM96ABIdE4Q2gifI6A4oZTFWCfNcVklJzs_W_tKoxP0anfYKxQLTa35xfkVrAcUBDz9DM0n6_beonvprJrTNnKk/s320/Screenshot+2019-12-13+at+6.34.18+PM.png" width="320" /></a></div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<br /></div>
<h3>
Step 5:</h3>
<div>
Now, add new Collection View Cell for tab design using right-click the solution >> add >> new <i>File</i> >> new dialog window will appear, in the left plane select iOS,>> center plane, select <i>Collection View Cell </i>and give the name as <i>TabCollectionViewCell </i>and then click Add.</div>
<div>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjZhRmtDH6JmMVwF5BxOv32yChwiUvM-LKowv2J2Pl8EzMoMcIUrrdvpW17B3OLMr6TWoMZmZe_85GaajCn82yapL8nRIlNDfGxKgDmV2plFUyKPGTukYI2bNITwvcKeorUtq8gdBjtYL_0/s1600/collection+view+cell.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="57" data-original-width="474" height="47" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjZhRmtDH6JmMVwF5BxOv32yChwiUvM-LKowv2J2Pl8EzMoMcIUrrdvpW17B3OLMr6TWoMZmZe_85GaajCn82yapL8nRIlNDfGxKgDmV2plFUyKPGTukYI2bNITwvcKeorUtq8gdBjtYL_0/s400/collection+view+cell.png" width="400" /></a></div>
<br /></div>
<h2 style="text-align: left;">
<b>Design Collection View Cell</b></h2>
<div>
Next, open this Collection View Cell in an Interface builder. Add the following views in the collection view cell.</div>
<div>
<ul style="text-align: left;">
<li>Label - Tab title</li>
<li>View - Active tab indicator</li>
</ul>
<div>
The label in the center of the cell and view height 5. Set the perfect constraint for this view. If the constraint are missing, no view will be present in the view controller. Create an outlet for this view to access from the code behind.<br />
<br /></div>
</div>
<div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjDStb36EzEc_UKRESLxbjb1Q08G2CMo8u4OximGsmHLPvY8Sim8eYgWp8p8bUvZw5Hqw4b86EFvXmbcZ5n6Ko1-pl_6T2mWb8eq2wWPZSe7ED00iZwHCJ2fPGhMZ1uT8q4kVn9I-NrxZsI/s1600/Screenshot+2020-01-09+at+6.20.02+PM.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="81" data-original-width="367" height="70" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjDStb36EzEc_UKRESLxbjb1Q08G2CMo8u4OximGsmHLPvY8Sim8eYgWp8p8bUvZw5Hqw4b86EFvXmbcZ5n6Ko1-pl_6T2mWb8eq2wWPZSe7ED00iZwHCJ2fPGhMZ1uT8q4kVn9I-NrxZsI/s320/Screenshot+2020-01-09+at+6.20.02+PM.png" width="320" /></a></div>
<br /></div>
<div>
<br /></div>
<div>
There is one problem to apply data to view, you couldn't access this outlet's from any other class, so we can create one method to update data for views<br />
<br /></div>
<div>
<br /></div>
</div>
<pre class="hljs" style="background: rgb(39 , 40 , 34); color: rgb(221 , 221 , 221); display: block; overflow-x: auto; padding: 0.5em;"><span class="hljs-function"><span class="hljs-keyword" style="color: rgb(249 , 38 , 114); font-weight: 700;">internal</span> <span class="hljs-keyword" style="color: rgb(249 , 38 , 114); font-weight: 700;">void</span> <span class="hljs-title" style="color: rgb(166 , 226 , 46); font-weight: 700;">UpdateCell</span>(<span class="hljs-params"><span class="hljs-keyword" style="color: rgb(249 , 38 , 114); font-weight: 700;">string</span> title, <span class="hljs-keyword" style="color: rgb(249 , 38 , 114); font-weight: 700;">bool</span> visible</span>)
</span>{
titleLabel.Text = title;
titleLabel.TextColor = UIColor.White;
<span class="hljs-keyword" style="color: rgb(249 , 38 , 114); font-weight: 700;">if</span> (visible)
indicatorline.Hidden = <span class="hljs-literal" style="color: rgb(249 , 38 , 114); font-weight: 700;">false</span>;
<span class="hljs-keyword" style="color: rgb(249 , 38 , 114); font-weight: 700;">else</span>
indicatorline.Hidden = <span class="hljs-literal" style="color: rgb(249 , 38 , 114); font-weight: 700;">true</span>;
}</pre>
</div>
<br />
<h3 style="text-align: left;">
<br />Step 6:</h3>
<div>
Next moving into the coding part. First, we are going to write a code for the collection view. The view needs <i>CollectionView </i>needs collection view source and delegate class. The collection view there is no way to give input directly, so we need to write source class and pass your data to this class. The delegate class for cell item sizing and handle the item click event. Afterward, apply these two classes to this collection view.</div>
<div>
<br /></div>
<h2 style="text-align: left;">
Add Collection View Source Class</h2>
<div>
First, create a source class named <i>CollectionViewSource </i>and this class should be inherited from <i>UICollectionViewSource </i>and pass the data through the contractor. This page code is given below.<br />
<br />
<br /></div>
</div>
<pre class="hljs" style="background: rgb(39 , 40 , 34); color: rgb(221 , 221 , 221); display: block; overflow-x: auto; padding: 0.5em;"><span class="hljs-keyword" style="color: rgb(249 , 38 , 114); font-weight: 700;">public</span> <span class="hljs-keyword" style="color: rgb(249 , 38 , 114); font-weight: 700;">class</span> <span class="hljs-title" style="color: rgb(166 , 226 , 46); font-weight: 700;">CollectionViewSource</span> : <span class="hljs-title" style="color: rgb(166 , 226 , 46); font-weight: 700;">UICollectionViewSource</span>
{
<span class="hljs-keyword" style="color: rgb(249 , 38 , 114); font-weight: 700;">private</span> List<<span class="hljs-keyword" style="color: rgb(249 , 38 , 114); font-weight: 700;">string</span>> titles;
<span class="hljs-keyword" style="color: rgb(249 , 38 , 114); font-weight: 700;">public</span> <span class="hljs-keyword" style="color: rgb(249 , 38 , 114); font-weight: 700;">static</span> <span class="hljs-keyword" style="color: rgb(249 , 38 , 114); font-weight: 700;">int</span> selectedIndex;
<span class="hljs-function"><span class="hljs-keyword" style="color: rgb(249 , 38 , 114); font-weight: 700;">public</span> <span class="hljs-title" style="color: rgb(166 , 226 , 46); font-weight: 700;">CollectionViewSource</span>(<span class="hljs-params">List<<span class="hljs-keyword" style="color: rgb(249 , 38 , 114); font-weight: 700;">string</span>> titles, <span class="hljs-keyword" style="color: rgb(249 , 38 , 114); font-weight: 700;">int</span> Index</span>)
</span>{
<span class="hljs-keyword" style="color: rgb(249 , 38 , 114); font-weight: 700;">this</span>.titles = titles;
selectedIndex = Index;
}
<span class="hljs-function"><span class="hljs-keyword" style="color: rgb(249 , 38 , 114); font-weight: 700;">public</span> <span class="hljs-keyword" style="color: rgb(249 , 38 , 114); font-weight: 700;">override</span> UICollectionViewCell <span class="hljs-title" style="color: rgb(166 , 226 , 46); font-weight: 700;">GetCell</span>(<span class="hljs-params">UICollectionView collectionView, NSIndexPath indexPath</span>)
</span>{
<span class="hljs-keyword" style="color: rgb(249 , 38 , 114); font-weight: 700;">var</span> cell = collectionView.DequeueReusableCell(<span class="hljs-string" style="color: rgb(166 , 226 , 46);">"TabCollectionViewCell"</span>, indexPath) <span class="hljs-keyword" style="color: rgb(249 , 38 , 114); font-weight: 700;">as</span> TabCollectionViewCell;
<span class="hljs-keyword" style="color: rgb(249 , 38 , 114); font-weight: 700;">if</span> (indexPath.Row == selectedIndex)
cell.UpdateCell(<span class="hljs-keyword" style="color: rgb(249 , 38 , 114); font-weight: 700;">this</span>.titles[indexPath.Row], <span class="hljs-literal" style="color: rgb(249 , 38 , 114); font-weight: 700;">true</span>);
<span class="hljs-keyword" style="color: rgb(249 , 38 , 114); font-weight: 700;">else</span>
cell.UpdateCell(<span class="hljs-keyword" style="color: rgb(249 , 38 , 114); font-weight: 700;">this</span>.titles[indexPath.Row], <span class="hljs-literal" style="color: rgb(249 , 38 , 114); font-weight: 700;">false</span>);
<span class="hljs-keyword" style="color: rgb(249 , 38 , 114); font-weight: 700;">return</span> cell;
}
<span class="hljs-function"><span class="hljs-keyword" style="color: rgb(249 , 38 , 114); font-weight: 700;">public</span> <span class="hljs-keyword" style="color: rgb(249 , 38 , 114); font-weight: 700;">override</span> nint <span class="hljs-title" style="color: rgb(166 , 226 , 46); font-weight: 700;">GetItemsCount</span>(<span class="hljs-params">UICollectionView collectionView, nint section</span>)
</span>{
<span class="hljs-keyword" style="color: rgb(249 , 38 , 114); font-weight: 700;">return</span> titles.Count;
}
}</pre>
</div>
<br />
<br />
<h2 style="text-align: left;">
Add the Collection View Delegate Class</h2>
<div>
Create another delegate class named <i>CollectionViewSourceDelegate </i>and this class should be inherited from <i>UICollectionViewDelegateFlowLayout. </i>In this class, constructor is passing one ITab interface to the view controller.</div>
<div>
<br /></div>
</div>
<pre class="hljs" style="background: rgb(39 , 40 , 34); color: rgb(221 , 221 , 221); display: block; overflow-x: auto; padding: 0.5em;"><span class="hljs-keyword" style="color: rgb(249 , 38 , 114); font-weight: 700;">public</span> <span class="hljs-keyword" style="color: rgb(249 , 38 , 114); font-weight: 700;">class</span> <span class="hljs-title" style="color: rgb(166 , 226 , 46); font-weight: 700;">CollectionViewSourceDelegate</span> : <span class="hljs-title" style="color: rgb(166 , 226 , 46); font-weight: 700;">UICollectionViewDelegateFlowLayout</span>
{
<span class="hljs-keyword" style="color: rgb(249 , 38 , 114); font-weight: 700;">int</span> listCount;
ITab iTab;
<span class="hljs-function"><span class="hljs-keyword" style="color: rgb(249 , 38 , 114); font-weight: 700;">public</span> <span class="hljs-title" style="color: rgb(166 , 226 , 46); font-weight: 700;">CollectionViewSourceDelegate</span>(<span class="hljs-params"><span class="hljs-keyword" style="color: rgb(249 , 38 , 114); font-weight: 700;">int</span> count, ITab iTab</span>)
</span>{
<span class="hljs-keyword" style="color: rgb(249 , 38 , 114); font-weight: 700;">this</span>.listCount = count;
<span class="hljs-keyword" style="color: rgb(249 , 38 , 114); font-weight: 700;">this</span>.iTab = iTab;
}
<span class="hljs-function"><span class="hljs-keyword" style="color: rgb(249 , 38 , 114); font-weight: 700;">public</span> <span class="hljs-keyword" style="color: rgb(249 , 38 , 114); font-weight: 700;">override</span> nfloat <span class="hljs-title" style="color: rgb(166 , 226 , 46); font-weight: 700;">GetMinimumInteritemSpacingForSection</span>(<span class="hljs-params">UICollectionView collectionView, UICollectionViewLayout layout, nint section</span>)
</span>{
<span class="hljs-keyword" style="color: rgb(249 , 38 , 114); font-weight: 700;">return</span> <span class="hljs-number">0</span>;
}
<span class="hljs-function"><span class="hljs-keyword" style="color: rgb(249 , 38 , 114); font-weight: 700;">public</span> <span class="hljs-keyword" style="color: rgb(249 , 38 , 114); font-weight: 700;">override</span> CGSize <span class="hljs-title" style="color: rgb(166 , 226 , 46); font-weight: 700;">GetSizeForItem</span>(<span class="hljs-params">UICollectionView collectionView, UICollectionViewLayout layout, NSIndexPath indexPath</span>)
</span>{
<span class="hljs-keyword" style="color: rgb(249 , 38 , 114); font-weight: 700;">var</span> size = <span class="hljs-keyword" style="color: rgb(249 , 38 , 114); font-weight: 700;">new</span> CGSize();
size.Width = collectionView.Frame.Width / <span class="hljs-number">2</span>;
size.Height = collectionView.Frame.Height;
<span class="hljs-keyword" style="color: rgb(249 , 38 , 114); font-weight: 700;">return</span> size;
}
<span class="hljs-function"><span class="hljs-keyword" style="color: rgb(249 , 38 , 114); font-weight: 700;">public</span> <span class="hljs-keyword" style="color: rgb(249 , 38 , 114); font-weight: 700;">override</span> <span class="hljs-keyword" style="color: rgb(249 , 38 , 114); font-weight: 700;">void</span> <span class="hljs-title" style="color: rgb(166 , 226 , 46); font-weight: 700;">ItemSelected</span>(<span class="hljs-params">UICollectionView collectionView, NSIndexPath indexPath</span>)
</span>{
iTab.OnTabChange(indexPath.Row);
CollectionViewSource.selectedIndex = indexPath.Row;
collectionView.ReloadData();
}
}</pre>
</div>
<br />
<h2 style="text-align: left;">
Create ITab interface</h2>
<div>
Create a new Interface named <i>ITab.cs</i> by going to Solution Explorer >> Add new file >> select Interface and give the name as ITab and click Add. Add one method OntabChange and one integer parameter value.</div>
<div>
<br /></div>
</div>
<pre class="hljs" style="background: rgb(39 , 40 , 34); color: rgb(221 , 221 , 221); display: block; overflow-x: auto; padding: 0.5em;"><span class="hljs-keyword" style="color: rgb(249 , 38 , 114); font-weight: 700;">public</span> <span class="hljs-keyword" style="color: rgb(249 , 38 , 114); font-weight: 700;">interface</span> <span class="hljs-title" style="color: rgb(166 , 226 , 46); font-weight: 700;">ITab</span>
{
<span class="hljs-function"><span class="hljs-keyword" style="color: rgb(249 , 38 , 114); font-weight: 700;">void</span> <span class="hljs-title" style="color: rgb(166 , 226 , 46); font-weight: 700;">OnTabChange</span>(<span class="hljs-params"><span class="hljs-keyword" style="color: rgb(249 , 38 , 114); font-weight: 700;">int</span> indexPath</span>)</span>;
}</pre>
</div>
<br />
Next, open <i>ViewController.cs </i>file. First, we need to setup view controllers and present them into view. Add the <i>FirstViewController </i>and <i>SecondViewController </i>as <i>Child View Controller</i> of this class and set the bounds equal of <i>baseView </i>view. Load the view controller based on Index selection. In the <i>OnTabMethod </i> call the <i>LoadViewMethod </i>and pass the index. create a static string list and pass to collection view source class.</div>
<br />
<pre class="hljs" style="background: rgb(39 , 40 , 34); color: rgb(221 , 221 , 221); display: block; overflow-x: auto; padding: 0.5em;"><span class="hljs-keyword" style="color: rgb(249 , 38 , 114); font-weight: 700;">using</span> Foundation;
<span class="hljs-keyword" style="color: rgb(249 , 38 , 114); font-weight: 700;">using</span> System;
<span class="hljs-keyword" style="color: rgb(249 , 38 , 114); font-weight: 700;">using</span> System.Collections.Generic;
<span class="hljs-keyword" style="color: rgb(249 , 38 , 114); font-weight: 700;">using</span> UIKit;
<span class="hljs-keyword" style="color: rgb(249 , 38 , 114); font-weight: 700;">namespace</span> <span class="hljs-title" style="color: rgb(166 , 226 , 46); font-weight: 700;">ManageChildVC</span>
{
<span class="hljs-keyword" style="color: rgb(249 , 38 , 114); font-weight: 700;">public</span> <span class="hljs-keyword" style="color: rgb(249 , 38 , 114); font-weight: 700;">partial</span> <span class="hljs-keyword" style="color: rgb(249 , 38 , 114); font-weight: 700;">class</span> <span class="hljs-title" style="color: rgb(166 , 226 , 46); font-weight: 700;">ViewController</span> : <span class="hljs-title" style="color: rgb(166 , 226 , 46); font-weight: 700;">UIViewController</span>, <span class="hljs-title" style="color: rgb(166 , 226 , 46); font-weight: 700;">ITab</span>
{
<span class="hljs-keyword" style="color: rgb(249 , 38 , 114); font-weight: 700;">private</span> FirstChildViewController firstController;
<span class="hljs-keyword" style="color: rgb(249 , 38 , 114); font-weight: 700;">private</span> SecondChildViewController secondController;
<span class="hljs-function"><span class="hljs-keyword" style="color: rgb(249 , 38 , 114); font-weight: 700;">public</span> <span class="hljs-title" style="color: rgb(166 , 226 , 46); font-weight: 700;">ViewController</span>(<span class="hljs-params">IntPtr handle</span>) : <span class="hljs-title" style="color: rgb(166 , 226 , 46); font-weight: 700;">base</span>(<span class="hljs-params">handle</span>)
</span>{
}
<span class="hljs-function"><span class="hljs-keyword" style="color: rgb(249 , 38 , 114); font-weight: 700;">public</span> <span class="hljs-keyword" style="color: rgb(249 , 38 , 114); font-weight: 700;">override</span> <span class="hljs-keyword" style="color: rgb(249 , 38 , 114); font-weight: 700;">void</span> <span class="hljs-title" style="color: rgb(166 , 226 , 46); font-weight: 700;">ViewDidLoad</span>(<span class="hljs-params"></span>)
</span>{
<span class="hljs-keyword" style="color: rgb(249 , 38 , 114); font-weight: 700;">base</span>.ViewDidLoad();
<span class="hljs-comment" style="color: rgb(117 , 113 , 94);">// Perform any additional setup after loading the view, typically from a nib.</span>
<span class="hljs-keyword" style="color: rgb(249 , 38 , 114); font-weight: 700;">var</span> tabTitles = <span class="hljs-keyword" style="color: rgb(249 , 38 , 114); font-weight: 700;">new</span> List<<span class="hljs-keyword" style="color: rgb(249 , 38 , 114); font-weight: 700;">string</span>>() { <span class="hljs-string" style="color: rgb(166 , 226 , 46);">"Tab 1 💝"</span>, <span class="hljs-string" style="color: rgb(166 , 226 , 46);">"Tab 2 👨🏻💻"</span> };
SetUpChildViewControllers();
collectionView.RegisterNibForCell(TabCollectionViewCell.Nib, <span class="hljs-string" style="color: rgb(166 , 226 , 46);">"TabCollectionViewCell"</span>);
collectionView.Source = <span class="hljs-keyword" style="color: rgb(249 , 38 , 114); font-weight: 700;">new</span> CollectionViewSource(tabTitles, <span class="hljs-number">0</span>);
collectionView.Delegate = <span class="hljs-keyword" style="color: rgb(249 , 38 , 114); font-weight: 700;">new</span> CollectionViewSourceDelegate(tabTitles.Count, <span class="hljs-keyword" style="color: rgb(249 , 38 , 114); font-weight: 700;">this</span>);
collectionView.ReloadData();
LoadController(<span class="hljs-number">0</span>);
}
<span class="hljs-function"><span class="hljs-keyword" style="color: rgb(249 , 38 , 114); font-weight: 700;">private</span> <span class="hljs-keyword" style="color: rgb(249 , 38 , 114); font-weight: 700;">void</span> <span class="hljs-title" style="color: rgb(166 , 226 , 46); font-weight: 700;">SetUpChildViewControllers</span>(<span class="hljs-params"></span>)
</span>{
AddViewControllerAsChildViewController(FirstTabViewController());
AddViewControllerAsChildViewController(SecondTabViewController());
}
<span class="hljs-function"><span class="hljs-keyword" style="color: rgb(249 , 38 , 114); font-weight: 700;">public</span> UIViewController <span class="hljs-title" style="color: rgb(166 , 226 , 46); font-weight: 700;">FirstTabViewController</span>(<span class="hljs-params"></span>)
</span>{
firstController = <span class="hljs-keyword" style="color: rgb(249 , 38 , 114); font-weight: 700;">this</span>.Storyboard.InstantiateViewController(<span class="hljs-string" style="color: rgb(166 , 226 , 46);">"FirstChildViewController"</span>) <span class="hljs-keyword" style="color: rgb(249 , 38 , 114); font-weight: 700;">as</span> FirstChildViewController;
<span class="hljs-keyword" style="color: rgb(249 , 38 , 114); font-weight: 700;">return</span> firstController;
}
<span class="hljs-function"><span class="hljs-keyword" style="color: rgb(249 , 38 , 114); font-weight: 700;">public</span> UIViewController <span class="hljs-title" style="color: rgb(166 , 226 , 46); font-weight: 700;">SecondTabViewController</span>(<span class="hljs-params"></span>)
</span>{
secondController = <span class="hljs-keyword" style="color: rgb(249 , 38 , 114); font-weight: 700;">this</span>.Storyboard.InstantiateViewController(<span class="hljs-string" style="color: rgb(166 , 226 , 46);">"SecondChildViewController"</span>) <span class="hljs-keyword" style="color: rgb(249 , 38 , 114); font-weight: 700;">as</span> SecondChildViewController;
<span class="hljs-keyword" style="color: rgb(249 , 38 , 114); font-weight: 700;">return</span> secondController;
}
<span class="hljs-function"><span class="hljs-keyword" style="color: rgb(249 , 38 , 114); font-weight: 700;">private</span> <span class="hljs-keyword" style="color: rgb(249 , 38 , 114); font-weight: 700;">void</span> <span class="hljs-title" style="color: rgb(166 , 226 , 46); font-weight: 700;">AddViewControllerAsChildViewController</span>(<span class="hljs-params">UIViewController viewController</span>)
</span>{
<span class="hljs-keyword" style="color: rgb(249 , 38 , 114); font-weight: 700;">this</span>.AddChildViewController(viewController);
View.AddSubview(viewController.View);
viewController.View.Frame = ViewControllerSpace.Frame;
viewController.DidMoveToParentViewController(<span class="hljs-keyword" style="color: rgb(249 , 38 , 114); font-weight: 700;">this</span>);
viewController.View.Hidden = <span class="hljs-literal" style="color: rgb(249 , 38 , 114); font-weight: 700;">true</span>;
}
<span class="hljs-function"><span class="hljs-keyword" style="color: rgb(249 , 38 , 114); font-weight: 700;">public</span> <span class="hljs-keyword" style="color: rgb(249 , 38 , 114); font-weight: 700;">override</span> <span class="hljs-keyword" style="color: rgb(249 , 38 , 114); font-weight: 700;">void</span> <span class="hljs-title" style="color: rgb(166 , 226 , 46); font-weight: 700;">DidReceiveMemoryWarning</span>(<span class="hljs-params"></span>)
</span>{
<span class="hljs-keyword" style="color: rgb(249 , 38 , 114); font-weight: 700;">base</span>.DidReceiveMemoryWarning();
<span class="hljs-comment" style="color: rgb(117 , 113 , 94);">// Release any cached data, images, etc that aren't in use.</span>
}
<span class="hljs-function"><span class="hljs-keyword" style="color: rgb(249 , 38 , 114); font-weight: 700;">public</span> <span class="hljs-keyword" style="color: rgb(249 , 38 , 114); font-weight: 700;">void</span> <span class="hljs-title" style="color: rgb(166 , 226 , 46); font-weight: 700;">OnTabChange</span>(<span class="hljs-params"><span class="hljs-keyword" style="color: rgb(249 , 38 , 114); font-weight: 700;">int</span> indexPath</span>)
</span>{
LoadController(indexPath);
}
<span class="hljs-function"><span class="hljs-keyword" style="color: rgb(249 , 38 , 114); font-weight: 700;">private</span> <span class="hljs-keyword" style="color: rgb(249 , 38 , 114); font-weight: 700;">void</span> <span class="hljs-title" style="color: rgb(166 , 226 , 46); font-weight: 700;">LoadController</span>(<span class="hljs-params"><span class="hljs-keyword" style="color: rgb(249 , 38 , 114); font-weight: 700;">int</span> indexPath</span>)
</span>{
collectionView.ReloadData();
<span class="hljs-keyword" style="color: rgb(249 , 38 , 114); font-weight: 700;">if</span> (indexPath == <span class="hljs-number">0</span>)
{
firstController.View.Hidden = <span class="hljs-literal" style="color: rgb(249 , 38 , 114); font-weight: 700;">false</span>;
secondController.View.Hidden = <span class="hljs-literal" style="color: rgb(249 , 38 , 114); font-weight: 700;">true</span>;
}
<span class="hljs-function"><span class="hljs-keyword" style="color: rgb(249 , 38 , 114); font-weight: 700;">else</span> <span class="hljs-title" style="color: rgb(166 , 226 , 46); font-weight: 700;">if</span> (<span class="hljs-params">indexPath == <span class="hljs-number">1</span></span>)
</span>{
firstController.View.Hidden = <span class="hljs-literal" style="color: rgb(249 , 38 , 114); font-weight: 700;">true</span>;
secondController.View.Hidden = <span class="hljs-literal" style="color: rgb(249 , 38 , 114); font-weight: 700;">false</span>;
}
}
}
}</pre>
<br /></div>
<br />
<h3 style="text-align: left;">
Step 7:</h3>
Now, run the application, you will get a view like below, select the tabs, based on tab selection the view will change.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhb-IcQgfOYsnNuVxgAe20yevmhZjhziGwfbH-omHknqHBPT5CGcYQ_DWFZsl9rjl9IKbUFlAwc7U4gkr1iT8pTf8ky5e5X1aLHzhdu83sS02DkJ_Q1HOGU3uBwokFa0N8AY0HJunjXrvKs/s1600/ezgif.com-resize.gif" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="800" data-original-width="400" height="320" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhb-IcQgfOYsnNuVxgAe20yevmhZjhziGwfbH-omHknqHBPT5CGcYQ_DWFZsl9rjl9IKbUFlAwc7U4gkr1iT8pTf8ky5e5X1aLHzhdu83sS02DkJ_Q1HOGU3uBwokFa0N8AY0HJunjXrvKs/s320/ezgif.com-resize.gif" width="160" /></a></div>
<br />
The full source code is <a href="https://github.com/logeshpalani98/Xamarin.iOS-Samples" target="_blank">here</a> - <img height="32" src="https://unpkg.com/simple-icons@latest/icons/github.svg" width="32" /><br />
<br />
<h2 style="text-align: left;">
Conclusion</h2>
<div>
In this blog, we learned to handle the view controllers in iOS. Thanks for reading and share your comments.</div>
<div>
<br /></div>
</div>
Logesh Palanihttp://www.blogger.com/profile/11572235997627400122noreply@blogger.com0tag:blogger.com,1999:blog-4259075105540267115.post-71575449477088572022019-12-15T12:28:00.001+05:302019-12-15T12:58:48.068+05:30Table View in Xamarin iOS - Part 2<div dir="ltr" style="text-align: left;" trbidi="on">
<div class="OutlineElement Ltr BCX0 SCXW27041894" style="-webkit-tap-highlight-color: transparent; -webkit-user-drag: none; background-color: white; clear: both; cursor: text; direction: ltr; margin: 0px; overflow: visible; padding: 0px; position: relative; user-select: text;">
<div class="OutlineElement Ltr BCX0 SCXW227678739" style="-webkit-tap-highlight-color: transparent; -webkit-user-drag: none; clear: both; cursor: text; direction: ltr; margin: 0px; overflow: visible; padding: 0px; position: relative; user-select: text;">
<h2 style="-webkit-tap-highlight-color: transparent; -webkit-user-drag: none; background-color: transparent; color: windowtext; overflow-wrap: break-word; padding: 0px; text-align: left; user-select: text; vertical-align: baseline;">
<div class="OutlineElement Ltr BCX0 SCXW140911730" style="-webkit-tap-highlight-color: transparent; -webkit-user-drag: none; clear: both; cursor: text; direction: ltr; font-family: "Segoe UI", "Segoe UI Web", Arial, Verdana, sans-serif; font-size: 12px; margin: 0px; overflow: visible; padding: 0px; position: relative; user-select: text;">
<div class="Paragraph SCXW140911730 BCX0" paraeid="{89a08abc-233e-4edf-90ae-6888cd1ffcc4}{151}" paraid="890436662" style="-webkit-tap-highlight-color: transparent; -webkit-user-drag: none; background-color: transparent; color: windowtext; overflow-wrap: break-word; padding: 0px; user-select: text; vertical-align: baseline;">
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiRYqkWkY2LIoAZ2sM_3iVY7rlY9ZUNYxxKSv4dRnqRco191iGsfCklLzkDuFWFHkiES0Bos4YYO4b1xVH6x_S_qybRML9rpluLRTAKj5tDeyeY-QINRk1sT121sDBqNQeirsHP3HovZERr/s1600/Vintage+Tropics+Etsy+Banner.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="315" data-original-width="560" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiRYqkWkY2LIoAZ2sM_3iVY7rlY9ZUNYxxKSv4dRnqRco191iGsfCklLzkDuFWFHkiES0Bos4YYO4b1xVH6x_S_qybRML9rpluLRTAKj5tDeyeY-QINRk1sT121sDBqNQeirsHP3HovZERr/s1600/Vintage+Tropics+Etsy+Banner.png" /></a></div>
<span class="TextRun SCXW140911730 BCX0" data-contrast="auto" lang="EN-US" style="font-family: "verdana" , "verdana_msfontservice" , sans-serif; font-size: 11pt; line-height: 27px; margin: 0px; padding: 0px;" xml:lang="EN-US"><br /></span>
<span class="TextRun SCXW140911730 BCX0" data-contrast="auto" lang="EN-US" style="font-family: "verdana" , "verdana_msfontservice" , sans-serif; font-size: 11pt; line-height: 27px; margin: 0px; padding: 0px;" xml:lang="EN-US"><br /></span>
<span class="TextRun SCXW140911730 BCX0" data-contrast="auto" lang="EN-US" style="font-family: "verdana" , "verdana_msfontservice" , sans-serif; font-size: 11pt; line-height: 27px; margin: 0px; padding: 0px;" xml:lang="EN-US">Introduction</span><span class="EOP SCXW140911730 BCX0" data-ccp-props="{"201341983":0,"335559739":160,"335559740":360}" style="font-family: "verdana" , "verdana_msfontservice" , sans-serif; font-size: 11pt; line-height: 27px; margin: 0px; padding: 0px;"> </span></div>
</div>
<div class="OutlineElement Ltr BCX0 SCXW140911730" style="-webkit-tap-highlight-color: transparent; -webkit-user-drag: none; clear: both; cursor: text; direction: ltr; font-family: "Segoe UI", "Segoe UI Web", Arial, Verdana, sans-serif; font-size: 12px; font-weight: 400; margin: 0px; overflow: visible; padding: 0px; position: relative; user-select: text;">
<div class="Paragraph SCXW140911730 BCX0" paraeid="{89a08abc-233e-4edf-90ae-6888cd1ffcc4}{157}" paraid="287407563" style="-webkit-tap-highlight-color: transparent; -webkit-user-drag: none; background-color: transparent; color: windowtext; overflow-wrap: break-word; padding: 0px; user-select: text; vertical-align: baseline;">
<span class="TextRun SCXW140911730 BCX0" data-contrast="auto" lang="EN-US" style="font-family: "verdana" , "verdana_msfontservice" , sans-serif; font-size: 11pt; line-height: 27px; margin: 0px; padding: 0px;" xml:lang="EN-US">In this article, we are going take a look into different </span><span class="TextRun SCXW140911730 BCX0" data-contrast="auto" lang="EN-US" style="font-family: "verdana" , "verdana_msfontservice" , sans-serif; font-size: 11pt; font-weight: bold; line-height: 27px; margin: 0px; padding: 0px;" xml:lang="EN-US"><span class="SpellingError SCXW140911730 BCX0" style="-webkit-tap-highlight-color: transparent; -webkit-user-drag: none; background-color: inherit; background-image: url("data:image/gif; background-position: left bottom; background-repeat: repeat-x; border-bottom: 1px solid transparent; margin: 0px; padding: 0px; user-select: text;">UITableViewCell</span></span><span class="TextRun SCXW140911730 BCX0" data-contrast="auto" lang="EN-US" style="font-family: "verdana" , "verdana_msfontservice" , sans-serif; font-size: 11pt; line-height: 27px; margin: 0px; padding: 0px;" xml:lang="EN-US"> built-in styles in given </span><span class="TextRun SCXW140911730 BCX0" data-contrast="auto" lang="EN-US" style="font-family: "verdana" , "verdana_msfontservice" , sans-serif; font-size: 11pt; line-height: 27px; margin: 0px; padding: 0px;" xml:lang="EN-US"><span class="SpellingError SCXW140911730 BCX0" style="-webkit-tap-highlight-color: transparent; -webkit-user-drag: none; background-color: inherit; background-image: url("data:image/gif; background-position: left bottom; background-repeat: repeat-x; border-bottom: 1px solid transparent; margin: 0px; padding: 0px; user-select: text;">Xamarin.iOS</span></span><span class="TextRun SCXW140911730 BCX0" data-contrast="auto" lang="EN-US" style="font-family: "verdana" , "verdana_msfontservice" , sans-serif; font-size: 11pt; line-height: 27px; margin: 0px; padding: 0px;" xml:lang="EN-US">. Before getting started with this post, you should follow the <a href="https://logeshpalani.blogspot.com/2019/10/table-view-in-xamarin-ios.html" target="_blank">Part 1 </a>article instructions completely.</span><span class="EOP SCXW140911730 BCX0" data-ccp-props="{"201341983":0,"335559739":160,"335559740":360}" style="font-family: "verdana" , "verdana_msfontservice" , sans-serif; font-size: 11pt; line-height: 27px; margin: 0px; padding: 0px;"> </span></div>
</div>
<div class="OutlineElement Ltr BCX0 SCXW140911730" style="-webkit-tap-highlight-color: transparent; -webkit-user-drag: none; clear: both; cursor: text; direction: ltr; font-family: "Segoe UI", "Segoe UI Web", Arial, Verdana, sans-serif; font-size: 12px; margin: 0px; overflow: visible; padding: 0px; position: relative; user-select: text;">
<div class="Paragraph SCXW140911730 BCX0" paraeid="{89a08abc-233e-4edf-90ae-6888cd1ffcc4}{171}" paraid="1644373953" style="-webkit-tap-highlight-color: transparent; -webkit-user-drag: none; background-color: transparent; color: windowtext; overflow-wrap: break-word; padding: 0px; user-select: text; vertical-align: baseline;">
<span class="TextRun SCXW140911730 BCX0" data-contrast="auto" lang="EN-US" style="font-family: "verdana" , "verdana_msfontservice" , sans-serif; font-size: 11pt; line-height: 27px; margin: 0px; padding: 0px;" xml:lang="EN-US">Step 1:</span><span class="EOP SCXW140911730 BCX0" data-ccp-props="{"201341983":0,"335559739":160,"335559740":360}" style="font-family: "verdana" , "verdana_msfontservice" , sans-serif; font-size: 11pt; line-height: 27px; margin: 0px; padding: 0px;"> </span><br />
<span class="EOP SCXW140911730 BCX0" data-ccp-props="{"201341983":0,"335559739":160,"335559740":360}" style="font-family: "verdana" , "verdana_msfontservice" , sans-serif; font-size: 11pt; line-height: 27px; margin: 0px; padding: 0px;"><br />
</span></div>
</div>
<div class="OutlineElement Ltr BCX0 SCXW140911730" style="clear: both; cursor: text; direction: ltr; margin: 0px; overflow: visible; padding: 0px; position: relative;">
<div class="Paragraph SCXW140911730 BCX0" paraeid="{89a08abc-233e-4edf-90ae-6888cd1ffcc4}{177}" paraid="1589507456" style="-webkit-tap-highlight-color: transparent; -webkit-user-drag: none; background-color: transparent; color: windowtext; overflow-wrap: break-word; padding: 0px; user-select: text; vertical-align: baseline;">
<span style="font-family: "verdana" , "verdana_msfontservice" , sans-serif;"><span style="font-size: 14.6667px;"><span style="font-weight: 400;">Let's modify the </span>UITableViewCell <span style="font-weight: normal;"> and their properties in </span>GetCell <span style="font-weight: normal;">Implementation </span></span></span><br />
<span style="font-family: "verdana" , "verdana_msfontservice" , sans-serif;"><span style="font-size: 14.6667px;"><span style="font-weight: normal;"><br />
</span></span></span> <span style="font-family: "verdana" , "verdana_msfontservice" , sans-serif;"><span style="font-size: 14.6667px;"><span style="font-weight: normal;">within </span>UITableViewSource <span style="font-weight: normal;">class. Here are the properties of building styles.</span></span></span><br />
<span style="font-family: "verdana" , "verdana_msfontservice" , sans-serif;"><span style="font-size: 14.6667px;"><span style="font-weight: normal;"><br />
</span></span></span></div>
</div>
<div class="OutlineElement Ltr BCX0 SCXW140911730" style="-webkit-tap-highlight-color: transparent; -webkit-user-drag: none; clear: both; cursor: text; direction: ltr; font-family: "Segoe UI", "Segoe UI Web", Arial, Verdana, sans-serif; font-size: 12px; font-weight: 400; margin: 0px; overflow: visible; padding: 0px; position: relative; user-select: text;">
<div class="Paragraph SCXW140911730 BCX0" paraeid="{89a08abc-233e-4edf-90ae-6888cd1ffcc4}{197}" paraid="1707728421" style="-webkit-tap-highlight-color: transparent; -webkit-user-drag: none; background-color: transparent; color: windowtext; overflow-wrap: break-word; padding: 0px; user-select: text; vertical-align: baseline;">
<span class="TextRun SCXW140911730 BCX0" data-contrast="auto" lang="EN-US" style="font-family: "verdana" , "verdana_msfontservice" , sans-serif; font-size: 11pt; line-height: 27px; margin: 0px; padding: 0px;" xml:lang="EN-US">Subject – Title label string.</span><span class="EOP SCXW140911730 BCX0" data-ccp-props="{"201341983":0,"335559739":160,"335559740":360}" style="font-family: "verdana" , "verdana_msfontservice" , sans-serif; font-size: 11pt; line-height: 27px; margin: 0px; padding: 0px;"> </span></div>
</div>
<div class="OutlineElement Ltr BCX0 SCXW140911730" style="-webkit-tap-highlight-color: transparent; -webkit-user-drag: none; clear: both; cursor: text; direction: ltr; font-family: "Segoe UI", "Segoe UI Web", Arial, Verdana, sans-serif; font-size: 12px; font-weight: 400; margin: 0px; overflow: visible; padding: 0px; position: relative; user-select: text;">
<div class="Paragraph SCXW140911730 BCX0" paraeid="{89a08abc-233e-4edf-90ae-6888cd1ffcc4}{203}" paraid="695859367" style="-webkit-tap-highlight-color: transparent; -webkit-user-drag: none; background-color: transparent; color: windowtext; overflow-wrap: break-word; padding: 0px; user-select: text; vertical-align: baseline;">
<span class="TextRun SCXW140911730 BCX0" data-contrast="auto" lang="EN-US" style="font-family: "verdana" , "verdana_msfontservice" , sans-serif; font-size: 11pt; line-height: 27px; margin: 0px; padding: 0px;" xml:lang="EN-US">Body – Detailed title label string.</span><span class="EOP SCXW140911730 BCX0" data-ccp-props="{"201341983":0,"335559739":160,"335559740":360}" style="font-family: "verdana" , "verdana_msfontservice" , sans-serif; font-size: 11pt; line-height: 27px; margin: 0px; padding: 0px;"> </span></div>
</div>
<div class="OutlineElement Ltr BCX0 SCXW140911730" style="-webkit-tap-highlight-color: transparent; -webkit-user-drag: none; clear: both; cursor: text; direction: ltr; font-family: "Segoe UI", "Segoe UI Web", Arial, Verdana, sans-serif; font-size: 12px; font-weight: 400; margin: 0px; overflow: visible; padding: 0px; position: relative; user-select: text;">
<div class="Paragraph SCXW140911730 BCX0" paraeid="{89a08abc-233e-4edf-90ae-6888cd1ffcc4}{209}" paraid="670942774" style="-webkit-tap-highlight-color: transparent; -webkit-user-drag: none; background-color: transparent; color: windowtext; overflow-wrap: break-word; padding: 0px; user-select: text; vertical-align: baseline;">
<span class="TextRun SCXW140911730 BCX0" data-contrast="auto" lang="EN-US" style="font-family: "verdana" , "verdana_msfontservice" , sans-serif; font-size: 11pt; line-height: 27px; margin: 0px; padding: 0px;" xml:lang="EN-US">Image – Set Image</span><span class="EOP SCXW140911730 BCX0" data-ccp-props="{"201341983":0,"335559739":160,"335559740":360}" style="font-family: "verdana" , "verdana_msfontservice" , sans-serif; font-size: 11pt; line-height: 27px; margin: 0px; padding: 0px;"> </span></div>
</div>
<div class="OutlineElement Ltr BCX0 SCXW140911730" style="-webkit-tap-highlight-color: transparent; -webkit-user-drag: none; clear: both; cursor: text; direction: ltr; font-family: "Segoe UI", "Segoe UI Web", Arial, Verdana, sans-serif; font-size: 12px; font-weight: 400; margin: 0px; overflow: visible; padding: 0px; position: relative; user-select: text;">
<div class="Paragraph SCXW140911730 BCX0" paraeid="{89a08abc-233e-4edf-90ae-6888cd1ffcc4}{215}" paraid="307794718" style="-webkit-tap-highlight-color: transparent; -webkit-user-drag: none; background-color: transparent; color: windowtext; overflow-wrap: break-word; padding: 0px; user-select: text; vertical-align: baseline;">
<span class="TextRun SCXW140911730 BCX0" data-contrast="auto" lang="EN-US" style="font-family: "verdana" , "verdana_msfontservice" , sans-serif; font-size: 11pt; line-height: 27px; margin: 0px; padding: 0px;" xml:lang="EN-US">Depending upon your cell selection, you have to fill in different </span><span class="TextRun SCXW140911730 BCX0" data-contrast="auto" lang="EN-US" style="font-family: "verdana" , "verdana_msfontservice" , sans-serif; font-size: 11pt; font-weight: bold; line-height: 27px; margin: 0px; padding: 0px;" xml:lang="EN-US"><span class="SpellingError SCXW140911730 BCX0" style="-webkit-tap-highlight-color: transparent; -webkit-user-drag: none; background-color: inherit; background-image: url("data:image/gif; background-position: left bottom; background-repeat: repeat-x; border-bottom: 1px solid transparent; margin: 0px; padding: 0px; user-select: text;">subviews</span></span><span class="TextRun SCXW140911730 BCX0" data-contrast="auto" lang="EN-US" style="font-family: "verdana" , "verdana_msfontservice" , sans-serif; font-size: 11pt; font-weight: bold; line-height: 27px; margin: 0px; padding: 0px;" xml:lang="EN-US"><span class="NormalTextRun SCXW140911730 BCX0" style="-webkit-tap-highlight-color: transparent; -webkit-user-drag: none; background-color: inherit; margin: 0px; padding: 0px; user-select: text;"> </span></span><span class="TextRun SCXW140911730 BCX0" data-contrast="auto" lang="EN-US" style="font-family: "verdana" , "verdana_msfontservice" , sans-serif; font-size: 11pt; line-height: 27px; margin: 0px; padding: 0px;" xml:lang="EN-US">values.</span><span class="EOP SCXW140911730 BCX0" data-ccp-props="{"201341983":0,"335559739":160,"335559740":360}" style="font-family: "verdana" , "verdana_msfontservice" , sans-serif; font-size: 11pt; line-height: 27px; margin: 0px; padding: 0px;"> </span></div>
</div>
<div class="OutlineElement Ltr BCX0 SCXW140911730" style="-webkit-tap-highlight-color: transparent; -webkit-user-drag: none; clear: both; cursor: text; direction: ltr; font-family: "Segoe UI", "Segoe UI Web", Arial, Verdana, sans-serif; font-size: 12px; font-weight: 400; margin: 0px; overflow: visible; padding: 0px; position: relative; user-select: text;">
<div class="Paragraph SCXW140911730 BCX0" paraeid="{89a08abc-233e-4edf-90ae-6888cd1ffcc4}{225}" paraid="1038908921" style="-webkit-tap-highlight-color: transparent; -webkit-user-drag: none; background-color: transparent; color: windowtext; overflow-wrap: break-word; padding: 0px; user-select: text; vertical-align: baseline;">
<br />
<div class="separator" style="clear: both; text-align: center;">
</div>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjE-bLgZr71naQ58DXi6Rh-U6EMgbarLfI56pcI2JP7qZtWcXulgTZKP_hR-i-V0p4XBC4uLlp1ZGPh2fIO7pT0huOOxo-HMfiQTzt0vAZ46wS15I9Hr4IAYTVsoW1Re7kv__VkKwS1DVwW/s1600/1.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="614" data-original-width="853" height="287" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjE-bLgZr71naQ58DXi6Rh-U6EMgbarLfI56pcI2JP7qZtWcXulgTZKP_hR-i-V0p4XBC4uLlp1ZGPh2fIO7pT0huOOxo-HMfiQTzt0vAZ46wS15I9Hr4IAYTVsoW1Re7kv__VkKwS1DVwW/s400/1.png" width="400" /></a></div>
<br />
<br /></div>
</div>
<div class="OutlineElement Ltr BCX0 SCXW140911730" style="-webkit-tap-highlight-color: transparent; -webkit-user-drag: none; clear: both; cursor: text; direction: ltr; font-family: "Segoe UI", "Segoe UI Web", Arial, Verdana, sans-serif; font-size: 12px; font-weight: 400; margin: 0px; overflow: visible; padding: 0px; position: relative; user-select: text;">
<div class="Paragraph SCXW140911730 BCX0" paraeid="{89a08abc-233e-4edf-90ae-6888cd1ffcc4}{229}" paraid="334503419" style="-webkit-tap-highlight-color: transparent; -webkit-user-drag: none; background-color: transparent; color: windowtext; overflow-wrap: break-word; padding: 0px; user-select: text; vertical-align: baseline;">
<span class="TextRun SCXW140911730 BCX0" data-contrast="auto" lang="EN-US" style="font-family: "verdana" , "verdana_msfontservice" , sans-serif; font-size: 11pt; font-weight: bold; line-height: 27px; margin: 0px; padding: 0px;" xml:lang="EN-US">Step 2:</span><span class="EOP SCXW140911730 BCX0" data-ccp-props="{"201341983":0,"335559739":160,"335559740":360}" style="font-family: "verdana" , "verdana_msfontservice" , sans-serif; font-size: 11pt; line-height: 27px; margin: 0px; padding: 0px;"> </span></div>
</div>
<div class="OutlineElement Ltr BCX0 SCXW140911730" style="-webkit-tap-highlight-color: transparent; -webkit-user-drag: none; clear: both; cursor: text; direction: ltr; font-family: "Segoe UI", "Segoe UI Web", Arial, Verdana, sans-serif; font-size: 12px; font-weight: 400; margin: 0px; overflow: visible; padding: 0px; position: relative; user-select: text;">
<div class="Paragraph SCXW140911730 BCX0" paraeid="{89a08abc-233e-4edf-90ae-6888cd1ffcc4}{235}" paraid="7206459" style="-webkit-tap-highlight-color: transparent; -webkit-user-drag: none; background-color: transparent; color: windowtext; overflow-wrap: break-word; padding: 0px; user-select: text; vertical-align: baseline;">
<span class="TextRun SCXW140911730 BCX0" data-contrast="auto" lang="EN-US" style="background-color: transparent; font-family: "verdana" , "verdana_msfontservice" , sans-serif; font-size: 11pt; line-height: 27px; margin: 0px; padding: 0px;" xml:lang="EN-US">Add profile image file in Assets . To Perform that, open Solution Explorer >> Resources >> Assets >> then, right click to add Image Set >> give the Image Set </span><span class="TextRun SCXW140911730 BCX0" data-contrast="auto" lang="EN-US" style="background-color: transparent; font-family: "verdana" , "verdana_msfontservice" , sans-serif; font-size: 11pt; line-height: 27px; margin: 0px; padding: 0px;" xml:lang="EN-US">name,</span><span class="TextRun SCXW140911730 BCX0" data-contrast="auto" lang="EN-US" style="background-color: transparent; font-family: "verdana" , "verdana_msfontservice" , sans-serif; font-size: 11pt; line-height: 27px; margin: 0px; padding: 0px;" xml:lang="EN-US"> and drag and drop the images.</span><span class="EOP SCXW140911730 BCX0" data-ccp-props="{"201341983":0,"335559739":160,"335559740":360}" style="background-color: transparent; font-family: "verdana" , "verdana_msfontservice" , sans-serif; font-size: 11pt; line-height: 27px; margin: 0px; padding: 0px;"> </span></div>
</div>
<div class="OutlineElement Ltr BCX0 SCXW140911730" style="-webkit-tap-highlight-color: transparent; -webkit-user-drag: none; clear: both; cursor: text; direction: ltr; font-family: "Segoe UI", "Segoe UI Web", Arial, Verdana, sans-serif; font-size: 12px; font-weight: 400; margin: 0px; overflow: visible; padding: 0px; position: relative; user-select: text;">
<div class="Paragraph SCXW140911730 BCX0" paraeid="{89a08abc-233e-4edf-90ae-6888cd1ffcc4}{255}" paraid="1796157348" style="-webkit-tap-highlight-color: transparent; -webkit-user-drag: none; background-color: transparent; color: windowtext; overflow-wrap: break-word; padding: 0px; user-select: text; vertical-align: baseline;">
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhRNzmkaTAEkqs9SP9Gvg9iJ5hmsUHXpAReBSC5F-KAD-NWLp6GMDtakKkXJ_0mmFD5gi9vO5gLbjYgeFICKRew7alitkXUg6Uet_bgHWUWsp5xm5CbI1AMrIjIaSFidLLrrn87QmRa66FF/s1600/2.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="623" data-original-width="1332" height="187" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhRNzmkaTAEkqs9SP9Gvg9iJ5hmsUHXpAReBSC5F-KAD-NWLp6GMDtakKkXJ_0mmFD5gi9vO5gLbjYgeFICKRew7alitkXUg6Uet_bgHWUWsp5xm5CbI1AMrIjIaSFidLLrrn87QmRa66FF/s400/2.png" width="400" /></a></div>
<br />
<br /></div>
</div>
<div class="OutlineElement Ltr BCX0 SCXW140911730" style="-webkit-tap-highlight-color: transparent; -webkit-user-drag: none; clear: both; cursor: text; direction: ltr; font-family: "Segoe UI", "Segoe UI Web", Arial, Verdana, sans-serif; font-size: 12px; font-weight: 400; margin: 0px; overflow: visible; padding: 0px; position: relative; user-select: text;">
<div class="Paragraph SCXW140911730 BCX0" paraeid="{c7724941-b554-4c0b-a08b-42ffdf6964e4}{4}" paraid="1891140251" style="-webkit-tap-highlight-color: transparent; -webkit-user-drag: none; background-color: transparent; color: windowtext; overflow-wrap: break-word; padding: 0px; user-select: text; vertical-align: baseline;">
<span class="TextRun SCXW140911730 BCX0" data-contrast="auto" lang="EN-US" style="font-family: "verdana" , "verdana_msfontservice" , sans-serif; font-size: 11pt; font-weight: bold; line-height: 27px; margin: 0px; padding: 0px;" xml:lang="EN-US">Step 3:</span><span class="EOP SCXW140911730 BCX0" data-ccp-props="{"201341983":0,"335559739":160,"335559740":360}" style="font-family: "verdana" , "verdana_msfontservice" , sans-serif; font-size: 11pt; line-height: 27px; margin: 0px; padding: 0px;"> </span></div>
</div>
<div class="OutlineElement Ltr BCX0 SCXW140911730" style="clear: both; cursor: text; direction: ltr; font-family: "segoe ui", "segoe ui web", arial, verdana, sans-serif; font-size: 12px; margin: 0px; overflow: visible; padding: 0px; position: relative;">
<div class="Paragraph SCXW140911730 BCX0" paraeid="{c7724941-b554-4c0b-a08b-42ffdf6964e4}{10}" paraid="1878428668" style="-webkit-tap-highlight-color: transparent; -webkit-user-drag: none; background-color: transparent; color: windowtext; overflow-wrap: break-word; padding: 0px; user-select: text; vertical-align: baseline;">
<br />
<ul style="text-align: left;">
<li><span class="TextRun SCXW140911730 BCX0" data-contrast="auto" lang="EN-US" style="font-family: "verdana" , "verdana_msfontservice" , sans-serif; font-size: 11pt; font-weight: 400; line-height: 27px; margin: 0px; padding: 0px;" xml:lang="EN-US">Open </span><span class="TextRun SCXW140911730 BCX0" data-contrast="auto" lang="EN-US" style="font-family: "verdana" , "verdana_msfontservice" , sans-serif; font-size: 11pt; font-weight: bold; line-height: 27px; margin: 0px; padding: 0px;" xml:lang="EN-US"><span class="SpellingError SCXW140911730 BCX0" style="-webkit-tap-highlight-color: transparent; -webkit-user-drag: none; background-color: inherit; background-image: url("data:image/gif; background-position: left bottom; background-repeat: repeat-x; border-bottom: 1px solid transparent; margin: 0px; padding: 0px; user-select: text;">TableView</span></span><span class="TextRun SCXW140911730 BCX0" data-contrast="auto" lang="EN-US" style="font-family: "verdana" , "verdana_msfontservice" , sans-serif; font-size: 11pt; font-weight: bold; line-height: 27px; margin: 0px; padding: 0px;" xml:lang="EN-US"><span class="SpellingError SCXW140911730 BCX0" style="-webkit-tap-highlight-color: transparent; -webkit-user-drag: none; background-color: inherit; background-image: url("data:image/gif; background-position: left bottom; background-repeat: repeat-x; border-bottom: 1px solid transparent; margin: 0px; padding: 0px; user-select: text;">Source</span></span><span class="TextRun SCXW140911730 BCX0" data-contrast="auto" lang="EN-US" style="font-family: "verdana" , "verdana_msfontservice" , sans-serif; font-size: 11pt; font-weight: 400; line-height: 27px; margin: 0px; padding: 0px;" xml:lang="EN-US"> class and go to </span><span class="TextRun SCXW140911730 BCX0" data-contrast="auto" lang="EN-US" style="font-family: "verdana" , "verdana_msfontservice" , sans-serif; font-size: 11pt; font-weight: bold; line-height: 27px; margin: 0px; padding: 0px;" xml:lang="EN-US"><span class="SpellingError SCXW140911730 BCX0" style="-webkit-tap-highlight-color: transparent; -webkit-user-drag: none; background-color: inherit; background-image: url("data:image/gif; background-position: left bottom; background-repeat: repeat-x; border-bottom: 1px solid transparent; margin: 0px; padding: 0px; user-select: text;">GetCell</span></span><span class="TextRun SCXW140911730 BCX0" data-contrast="auto" lang="EN-US" style="font-family: "verdana" , "verdana_msfontservice" , sans-serif; font-size: 11pt; font-weight: 400; line-height: 27px; margin: 0px; padding: 0px;" xml:lang="EN-US"> method. All the changes will be made only in </span><span class="TextRun SCXW140911730 BCX0" data-contrast="auto" lang="EN-US" style="font-family: "verdana" , "verdana_msfontservice" , sans-serif; font-size: 11pt; line-height: 27px; margin: 0px; padding: 0px;" xml:lang="EN-US"><span class="SpellingError SCXW140911730 BCX0" style="-webkit-tap-highlight-color: transparent; -webkit-user-drag: none; background-color: inherit; background-image: url("data:image/gif; background-position: left bottom; background-repeat: repeat-x; border-bottom: 1px solid transparent; margin: 0px; padding: 0px; user-select: text;">GetCell</span></span><span class="TextRun SCXW140911730 BCX0" data-contrast="auto" lang="EN-US" style="font-family: "verdana" , "verdana_msfontservice" , sans-serif; font-size: 11pt; line-height: 27px; margin: 0px; padding: 0px;" xml:lang="EN-US"> <span style="font-weight: 400;">method.</span></span><span class="EOP SCXW140911730 BCX0" data-ccp-props="{"201341983":0,"335559739":160,"335559740":360}" style="font-family: "verdana" , "verdana_msfontservice" , sans-serif; font-size: 11pt; font-weight: 400; line-height: 27px; margin: 0px; padding: 0px;"> </span></li>
</ul>
<br />
<div style="font-weight: 400;">
<span class="EOP SCXW140911730 BCX0" data-ccp-props="{"201341983":0,"335559739":160,"335559740":360}" style="font-family: "verdana" , "verdana_msfontservice" , sans-serif; font-size: 11pt; line-height: 27px; margin: 0px; padding: 0px;"><br />
</span></div>
</div>
</div>
<div class="OutlineElement Ltr BCX0 SCXW140911730" style="-webkit-tap-highlight-color: transparent; -webkit-user-drag: none; clear: both; cursor: text; direction: ltr; font-family: "Segoe UI", "Segoe UI Web", Arial, Verdana, sans-serif; font-size: 12px; font-weight: 400; margin: 0px; overflow: visible; padding: 0px; position: relative; user-select: text;">
<div class="Paragraph SCXW140911730 BCX0" paraeid="{c7724941-b554-4c0b-a08b-42ffdf6964e4}{30}" paraid="1208966870" style="-webkit-tap-highlight-color: transparent; -webkit-user-drag: none; background-color: transparent; color: windowtext; overflow-wrap: break-word; padding: 0px; user-select: text; vertical-align: baseline;">
<span class="TextRun SCXW140911730 BCX0" data-contrast="auto" lang="EN-US" style="font-family: "verdana" , "verdana_msfontservice" , sans-serif; font-size: 11pt; font-weight: bold; line-height: 27px; margin: 0px; padding: 0px;" xml:lang="EN-US">Sample A</span><span class="TextRun SCXW140911730 BCX0" data-contrast="auto" lang="EN-US" style="font-family: "verdana" , "verdana_msfontservice" , sans-serif; font-size: 11pt; font-weight: bold; line-height: 27px; margin: 0px; padding: 0px;" xml:lang="EN-US">:</span><span class="TextRun SCXW140911730 BCX0" data-contrast="auto" lang="EN-US" style="font-family: "verdana" , "verdana_msfontservice" , sans-serif; font-size: 11pt; font-weight: bold; line-height: 27px; margin: 0px; padding: 0px;" xml:lang="EN-US"> Default </span><span class="TextRun SCXW140911730 BCX0" data-contrast="auto" lang="EN-US" style="font-family: "verdana" , "verdana_msfontservice" , sans-serif; font-size: 11pt; font-weight: bold; line-height: 27px; margin: 0px; padding: 0px;" xml:lang="EN-US">Style</span><span class="EOP SCXW140911730 BCX0" data-ccp-props="{"201341983":0,"335559739":160,"335559740":360}" style="font-family: "verdana" , "verdana_msfontservice" , sans-serif; font-size: 11pt; line-height: 27px; margin: 0px; padding: 0px;"> </span><br />
<span class="EOP SCXW140911730 BCX0" data-ccp-props="{"201341983":0,"335559739":160,"335559740":360}" style="font-family: "verdana" , "verdana_msfontservice" , sans-serif; font-size: 11pt; line-height: 27px; margin: 0px; padding: 0px;"><br />
</span></div>
</div>
<div class="OutlineElement Ltr BCX0 SCXW140911730" style="-webkit-tap-highlight-color: transparent; -webkit-user-drag: none; clear: both; cursor: text; direction: ltr; margin: 0px; overflow: visible; padding: 0px; position: relative; user-select: text;">
<div class="Paragraph SCXW140911730 BCX0" paraeid="{c7724941-b554-4c0b-a08b-42ffdf6964e4}{42}" paraid="829312086" style="-webkit-tap-highlight-color: transparent; -webkit-user-drag: none; background-color: transparent; color: windowtext; overflow-wrap: break-word; padding: 0px; user-select: text; vertical-align: baseline;">
<span style="font-family: "verdana" , "verdana_msfontservice" , sans-serif;"><span style="font-size: 14.6667px; font-variant-ligatures: none;"><span style="font-weight: 400;">change the constructor of </span>UITableViewCell <span style="font-weight: normal;">is </span></span></span><span style="background-color: inherit; font-family: "verdana" , "verdana_msfontservice" , sans-serif; font-size: 14.6667px;">UITableViewCellStyle.Default. <span style="font-weight: normal;">Both</span></span><br />
<span style="background-color: inherit; font-family: "verdana" , "verdana_msfontservice" , sans-serif; font-size: 14.6667px;"><br />
</span> <span style="background-color: inherit; font-family: "verdana" , "verdana_msfontservice" , sans-serif; font-size: 14.6667px;"><span style="font-weight: normal;"></span>UITableViewCellStyle.Default, string <span style="font-weight: normal;">are the parameters. Here, we can set cell </span></span><br />
<span style="background-color: inherit; font-family: "verdana" , "verdana_msfontservice" , sans-serif; font-size: 14.6667px;"><span style="font-weight: normal;"><br />
</span></span> <span style="background-color: inherit; font-family: "verdana" , "verdana_msfontservice" , sans-serif; font-size: 14.6667px;"><span style="font-weight: normal;">type </span></span><span style="background-color: inherit; font-family: "verdana" , "verdana_msfontservice" , sans-serif; font-size: 14.6667px; font-weight: normal;">as default and string as null. Let's bind the data their properties base on index </span><br />
<span style="background-color: inherit; font-family: "verdana" , "verdana_msfontservice" , sans-serif; font-size: 14.6667px; font-weight: normal;"><br />
</span> <span style="background-color: inherit; font-family: "verdana" , "verdana_msfontservice" , sans-serif; font-size: 14.6667px; font-weight: normal;">and </span><span style="background-color: inherit; font-family: "verdana" , "verdana_msfontservice" , sans-serif; font-size: 14.6667px; font-weight: normal;">your code will look as shown below. </span></div>
</div>
<div class="OutlineElement Ltr BCX0 SCXW140911730" style="-webkit-tap-highlight-color: transparent; -webkit-user-drag: none; clear: both; cursor: text; direction: ltr; font-family: "Segoe UI", "Segoe UI Web", Arial, Verdana, sans-serif; font-size: 12px; font-weight: 400; margin: 0px; overflow: visible; padding: 0px; position: relative; user-select: text;">
<div class="Paragraph SCXW140911730 BCX0" paraeid="{c7724941-b554-4c0b-a08b-42ffdf6964e4}{72}" paraid="1704875081" style="-webkit-tap-highlight-color: transparent; -webkit-user-drag: none; background-color: transparent; color: windowtext; overflow-wrap: break-word; padding: 0px; user-select: text; vertical-align: baseline;">
<br />
<br /></div>
</div>
<!-- HTML generated using hilite.me --><div style="background: #ffffff; background: #ffffff; border-width: 0.1em 0.1em 0.1em 0.8em; border: solid dodgerblue; overflow: auto; overflow: auto; padding: 0.2em 0.6em; width: auto; width: auto;">
<table><tbody>
<tr><td><pre style="line-height: 125%; margin: 0;">1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36</pre>
</td><td><pre style="line-height: 125%; margin: 0;"><span style="color: #008800; font-weight: bold;">using</span> <span style="color: #0e84b5; font-weight: bold;">System</span>;
<span style="color: #008800; font-weight: bold;">using</span> <span style="color: #0e84b5; font-weight: bold;">System.Collections.Generic</span>;
<span style="color: #008800; font-weight: bold;">using</span> <span style="color: #0e84b5; font-weight: bold;">CoreGraphics</span>;
<span style="color: #008800; font-weight: bold;">using</span> <span style="color: #0e84b5; font-weight: bold;">Foundation</span>;
<span style="color: #008800; font-weight: bold;">using</span> <span style="color: #0e84b5; font-weight: bold;">UIKit</span>;
<span style="color: #008800; font-weight: bold;">namespace</span> <span style="color: #0e84b5; font-weight: bold;">TableViewSample</span>
{
<span style="color: #008800; font-weight: bold;">internal</span> <span style="color: #008800; font-weight: bold;">class</span> <span style="color: #bb0066; font-weight: bold;">SampleTableViewSource</span> : UITableViewSource
{
<span style="color: #008800; font-weight: bold;">private</span> IList<ContactModel> data;
<span style="color: #008800; font-weight: bold;">public</span> <span style="color: #0066bb; font-weight: bold;">SampleTableViewSource</span>(List<ContactModel> data)
{
<span style="color: #008800; font-weight: bold;">this</span>.data = data;
}
<span style="color: #008800; font-weight: bold;">public</span> <span style="color: #008800; font-weight: bold;">override</span> UITableViewCell <span style="color: #0066bb; font-weight: bold;">GetCell</span>(UITableView tableView, NSIndexPath indexPath)
{
<span style="color: #333399; font-weight: bold;">var</span> cell = <span style="color: #008800; font-weight: bold;">new</span> UITableViewCell(UITableViewCellStyle.Default, <span style="color: #008800; font-weight: bold;">null</span>);
<span style="color: #333399; font-weight: bold;">var</span> dataSet = data[indexPath.Row];
<span style="color: #008800; font-weight: bold;">if</span> (dataSet != <span style="color: #008800; font-weight: bold;">null</span>)
{
cell.TextLabel.Text = dataSet.Name;
cell.ImageView.Image = UIImage.FromBundle(<span style="background-color: #fff0f0;">"Phineas_Flynn"</span>);
}
<span style="color: #008800; font-weight: bold;">return</span> cell;
}
<span style="color: #008800; font-weight: bold;">public</span> <span style="color: #008800; font-weight: bold;">override</span> nint <span style="color: #0066bb; font-weight: bold;">RowsInSection</span>(UITableView tableview, nint section)
{
<span style="color: #008800; font-weight: bold;">return</span> data.Count;
}
}
}
</pre>
</td></tr>
</tbody></table>
</div>
<br />
<div class="OutlineElement Ltr BCX0 SCXW140911730" style="-webkit-tap-highlight-color: transparent; -webkit-user-drag: none; clear: both; cursor: text; direction: ltr; font-family: "Segoe UI", "Segoe UI Web", Arial, Verdana, sans-serif; font-size: 12px; font-weight: 400; margin: 0px; overflow: visible; padding: 0px; position: relative; user-select: text;">
<div class="Paragraph SCXW140911730 BCX0" paraeid="{c7724941-b554-4c0b-a08b-42ffdf6964e4}{76}" paraid="953805935" style="-webkit-tap-highlight-color: transparent; -webkit-user-drag: none; background-color: transparent; color: windowtext; overflow-wrap: break-word; padding: 0px; user-select: text; vertical-align: baseline;">
<br /></div>
</div>
<div class="OutlineElement Ltr BCX0 SCXW140911730" style="-webkit-tap-highlight-color: transparent; -webkit-user-drag: none; clear: both; cursor: text; direction: ltr; font-family: "Segoe UI", "Segoe UI Web", Arial, Verdana, sans-serif; font-size: 12px; font-weight: 400; margin: 0px; overflow: visible; padding: 0px; position: relative; user-select: text;">
<div class="Paragraph SCXW140911730 BCX0" paraeid="{c7724941-b554-4c0b-a08b-42ffdf6964e4}{84}" paraid="133592381" style="-webkit-tap-highlight-color: transparent; -webkit-user-drag: none; background-color: transparent; color: windowtext; overflow-wrap: break-word; padding: 0px; user-select: text; vertical-align: baseline;">
<span class="TextRun SCXW140911730 BCX0" data-contrast="auto" lang="EN-US" style="font-family: "verdana" , "verdana_msfontservice" , sans-serif; font-size: 11pt; line-height: 27px; margin: 0px; padding: 0px;" xml:lang="EN-US">Run</span><span class="TextRun SCXW140911730 BCX0" data-contrast="auto" lang="EN-US" style="font-family: "verdana" , "verdana_msfontservice" , sans-serif; font-size: 11pt; line-height: 27px; margin: 0px; padding: 0px;" xml:lang="EN-US"> the application, your output like below.</span><span class="EOP SCXW140911730 BCX0" data-ccp-props="{"201341983":0,"335559739":160,"335559740":360}" style="font-family: "verdana" , "verdana_msfontservice" , sans-serif; font-size: 11pt; line-height: 27px; margin: 0px; padding: 0px;"> </span><br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgW28eHo93yL5XS7PzlS_K0_QbvrDXB5NZ2n_OhATAICj-T4Q2LsdnjRIsMlxk_gbtmYky3Kp9Z8UTUqy7N5iqt4EbkVHOSaR6KsIs9vEAPK0WnH1kVwnMhEeGawJOqHdE4XOuIwE7sdodv/s1600/3.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="763" data-original-width="353" height="400" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgW28eHo93yL5XS7PzlS_K0_QbvrDXB5NZ2n_OhATAICj-T4Q2LsdnjRIsMlxk_gbtmYky3Kp9Z8UTUqy7N5iqt4EbkVHOSaR6KsIs9vEAPK0WnH1kVwnMhEeGawJOqHdE4XOuIwE7sdodv/s400/3.png" width="185" /></a></div>
<br /></div>
</div>
<div class="OutlineElement Ltr BCX0 SCXW140911730" style="-webkit-tap-highlight-color: transparent; -webkit-user-drag: none; clear: both; cursor: text; direction: ltr; font-family: "Segoe UI", "Segoe UI Web", Arial, Verdana, sans-serif; font-size: 12px; font-weight: 400; margin: 0px; overflow: visible; padding: 0px; position: relative; user-select: text;">
<div class="Paragraph SCXW140911730 BCX0" paraeid="{c7724941-b554-4c0b-a08b-42ffdf6964e4}{92}" paraid="1464457691" style="-webkit-tap-highlight-color: transparent; -webkit-user-drag: none; background-color: transparent; color: windowtext; overflow-wrap: break-word; padding: 0px; user-select: text; vertical-align: baseline;">
<br /></div>
</div>
<div class="OutlineElement Ltr BCX0 SCXW140911730" style="-webkit-tap-highlight-color: transparent; -webkit-user-drag: none; clear: both; cursor: text; direction: ltr; font-family: "Segoe UI", "Segoe UI Web", Arial, Verdana, sans-serif; font-size: 12px; font-weight: 400; margin: 0px; overflow: visible; padding: 0px; position: relative; user-select: text;">
<div class="Paragraph SCXW140911730 BCX0" paraeid="{c7724941-b554-4c0b-a08b-42ffdf6964e4}{96}" paraid="1989976527" style="-webkit-tap-highlight-color: transparent; -webkit-user-drag: none; background-color: transparent; color: windowtext; overflow-wrap: break-word; padding: 0px; user-select: text; vertical-align: baseline;">
<span class="TextRun SCXW140911730 BCX0" data-contrast="auto" lang="EN-US" style="font-family: "verdana" , "verdana_msfontservice" , sans-serif; font-size: 11pt; font-weight: bold; line-height: 27px; margin: 0px; padding: 0px;" xml:lang="EN-US">Sample B:</span><span class="TextRun SCXW140911730 BCX0" data-contrast="auto" lang="EN-US" style="font-family: "verdana" , "verdana_msfontservice" , sans-serif; font-size: 11pt; line-height: 27px; margin: 0px; padding: 0px;" xml:lang="EN-US"><span class="NormalTextRun SCXW140911730 BCX0" style="-webkit-tap-highlight-color: transparent; -webkit-user-drag: none; background-color: inherit; margin: 0px; padding: 0px; user-select: text;"> </span></span><span class="TextRun SCXW140911730 BCX0" data-contrast="auto" lang="EN-US" style="font-family: "verdana" , "verdana_msfontservice" , sans-serif; font-size: 11pt; font-weight: bold; line-height: 27px; margin: 0px; padding: 0px;" xml:lang="EN-US">Subtitle</span><span class="TextRun SCXW140911730 BCX0" data-contrast="auto" lang="EN-US" style="font-family: "verdana" , "verdana_msfontservice" , sans-serif; font-size: 11pt; font-weight: bold; line-height: 27px; margin: 0px; padding: 0px;" xml:lang="EN-US"> Style</span><span class="EOP SCXW140911730 BCX0" data-ccp-props="{"201341983":0,"335559739":160,"335559740":360}" style="font-family: "verdana" , "verdana_msfontservice" , sans-serif; font-size: 11pt; line-height: 27px; margin: 0px; padding: 0px;"> </span></div>
</div>
<div class="OutlineElement Ltr BCX0 SCXW140911730" style="-webkit-tap-highlight-color: transparent; -webkit-user-drag: none; clear: both; cursor: text; direction: ltr; font-family: "Segoe UI", "Segoe UI Web", Arial, Verdana, sans-serif; font-size: 12px; font-weight: 400; margin: 0px; overflow: visible; padding: 0px; position: relative; user-select: text;">
<div class="Paragraph SCXW140911730 BCX0" paraeid="{c7724941-b554-4c0b-a08b-42ffdf6964e4}{108}" paraid="191372877" style="-webkit-tap-highlight-color: transparent; -webkit-user-drag: none; background-color: transparent; color: windowtext; overflow-wrap: break-word; padding: 0px; user-select: text; vertical-align: baseline;">
<span class="TextRun SCXW140911730 BCX0" data-contrast="auto" lang="EN-US" style="font-family: "verdana" , "verdana_msfontservice" , sans-serif; font-size: 11pt; line-height: 27px; margin: 0px; padding: 0px;" xml:lang="EN-US">Next, try with Subtitle style. Just change a piece of code. </span><span class="EOP SCXW140911730 BCX0" data-ccp-props="{"201341983":0,"335559739":160,"335559740":360}" style="font-family: "verdana" , "verdana_msfontservice" , sans-serif; font-size: 11pt; line-height: 27px; margin: 0px; padding: 0px;"> </span></div>
</div>
<div class="OutlineElement Ltr BCX0 SCXW140911730" style="-webkit-tap-highlight-color: transparent; -webkit-user-drag: none; clear: both; cursor: text; direction: ltr; font-family: "Segoe UI", "Segoe UI Web", Arial, Verdana, sans-serif; font-size: 12px; font-weight: 400; margin: 0px; overflow: visible; padding: 0px; position: relative; user-select: text;">
<div class="Paragraph SCXW140911730 BCX0" paraeid="{c7724941-b554-4c0b-a08b-42ffdf6964e4}{114}" paraid="1551526026" style="-webkit-tap-highlight-color: transparent; -webkit-user-drag: none; background-color: transparent; color: windowtext; overflow-wrap: break-word; padding: 0px; user-select: text; vertical-align: baseline;">
<span class="TextRun SCXW140911730 BCX0" data-contrast="auto" lang="EN-US" style="font-family: "verdana" , "verdana_msfontservice" , sans-serif; font-size: 11pt; line-height: 27px; margin: 0px; padding: 0px;" xml:lang="EN-US">Change cell style type Default into Subtitle, add one more property as Detail and bind the Detail string with this. The code will be shown as given below.</span><span class="EOP SCXW140911730 BCX0" data-ccp-props="{"201341983":0,"335559739":160,"335559740":360}" style="font-family: "verdana" , "verdana_msfontservice" , sans-serif; font-size: 11pt; line-height: 27px; margin: 0px; padding: 0px;"> </span><br />
<span class="EOP SCXW140911730 BCX0" data-ccp-props="{"201341983":0,"335559739":160,"335559740":360}" style="font-family: "verdana" , "verdana_msfontservice" , sans-serif; font-size: 11pt; line-height: 27px; margin: 0px; padding: 0px;"><br />
</span></div>
</div>
<div style="background: #ffffff; background: #ffffff; border-width: 0.1em 0.1em 0.1em 0.8em; border: solid dodgerblue; overflow: auto; overflow: auto; padding: 0.2em 0.6em; width: auto; width: auto;">
<table><tbody>
<tr><td><pre style="line-height: 125%; margin: 0;">1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37</pre>
</td><td><pre style="line-height: 125%; margin: 0;"><span style="color: #008800; font-weight: bold;">using</span> <span style="color: #0e84b5; font-weight: bold;">System</span>;
<span style="color: #008800; font-weight: bold;">using</span> <span style="color: #0e84b5; font-weight: bold;">System.Collections.Generic</span>;
<span style="color: #008800; font-weight: bold;">using</span> <span style="color: #0e84b5; font-weight: bold;">CoreGraphics</span>;
<span style="color: #008800; font-weight: bold;">using</span> <span style="color: #0e84b5; font-weight: bold;">Foundation</span>;
<span style="color: #008800; font-weight: bold;">using</span> <span style="color: #0e84b5; font-weight: bold;">UIKit</span>;
<span style="color: #008800; font-weight: bold;">namespace</span> <span style="color: #0e84b5; font-weight: bold;">TableViewSample</span>
{
<span style="color: #008800; font-weight: bold;">internal</span> <span style="color: #008800; font-weight: bold;">class</span> <span style="color: #bb0066; font-weight: bold;">SampleTableViewSource</span> : UITableViewSource
{
<span style="color: #008800; font-weight: bold;">private</span> IList<ContactModel> data;
<span style="color: #008800; font-weight: bold;">public</span> <span style="color: #0066bb; font-weight: bold;">SampleTableViewSource</span>(List<ContactModel> data)
{
<span style="color: #008800; font-weight: bold;">this</span>.data = data;
}
<span style="color: #008800; font-weight: bold;">public</span> <span style="color: #008800; font-weight: bold;">override</span> UITableViewCell <span style="color: #0066bb; font-weight: bold;">GetCell</span>(UITableView tableView, NSIndexPath indexPath)
{
<span style="color: #333399; font-weight: bold;">var</span> cell = <span style="color: #008800; font-weight: bold;">new</span> UITableViewCell(UITableViewCellStyle.Default, <span style="color: #008800; font-weight: bold;">null</span>);
<span style="color: #333399; font-weight: bold;">var</span> dataSet = data[indexPath.Row];
<span style="color: #008800; font-weight: bold;">if</span> (dataSet != <span style="color: #008800; font-weight: bold;">null</span>)
{
cell.TextLabel.Text = dataSet.Name;
cell.ImageView.Image = UIImage.FromBundle(<span style="background-color: #fff0f0;">"Phineas_Flynn"</span>);
cell.DetailTextLabel.Text = dataSet.MobileNumber;
}
<span style="color: #008800; font-weight: bold;">return</span> cell;
}
<span style="color: #008800; font-weight: bold;">public</span> <span style="color: #008800; font-weight: bold;">override</span> nint <span style="color: #0066bb; font-weight: bold;">RowsInSection</span>(UITableView tableview, nint section)
{
<span style="color: #008800; font-weight: bold;">return</span> data.Count;
}
}
}
</pre>
</td></tr>
</tbody></table>
</div>
<br />
<div class="OutlineElement Ltr BCX0 SCXW140911730" style="-webkit-tap-highlight-color: transparent; -webkit-user-drag: none; clear: both; cursor: text; direction: ltr; font-family: "Segoe UI", "Segoe UI Web", Arial, Verdana, sans-serif; font-size: 12px; font-weight: 400; margin: 0px; overflow: visible; padding: 0px; position: relative; user-select: text;">
<div class="Paragraph SCXW140911730 BCX0" paraeid="{c7724941-b554-4c0b-a08b-42ffdf6964e4}{124}" paraid="461117312" style="-webkit-tap-highlight-color: transparent; -webkit-user-drag: none; background-color: transparent; color: windowtext; overflow-wrap: break-word; padding: 0px; user-select: text; vertical-align: baseline;">
<span class="TextRun SCXW140911730 BCX0" data-contrast="auto" lang="EN-US" style="font-family: "verdana" , "verdana_msfontservice" , sans-serif; font-size: 11pt; line-height: 27px; margin: 0px; padding: 0px;" xml:lang="EN-US">Run the app to see the output.</span><span class="EOP SCXW140911730 BCX0" data-ccp-props="{"201341983":0,"335559739":160,"335559740":360}" style="font-family: "verdana" , "verdana_msfontservice" , sans-serif; font-size: 11pt; line-height: 27px; margin: 0px; padding: 0px;"> </span></div>
</div>
<div class="OutlineElement Ltr BCX0 SCXW140911730" style="-webkit-tap-highlight-color: transparent; -webkit-user-drag: none; clear: both; cursor: text; direction: ltr; font-family: "Segoe UI", "Segoe UI Web", Arial, Verdana, sans-serif; font-size: 12px; font-weight: 400; margin: 0px; overflow: visible; padding: 0px; position: relative; user-select: text;">
<div class="Paragraph SCXW140911730 BCX0" paraeid="{c7724941-b554-4c0b-a08b-42ffdf6964e4}{134}" paraid="691410767" style="-webkit-tap-highlight-color: transparent; -webkit-user-drag: none; background-color: transparent; color: windowtext; overflow-wrap: break-word; padding: 0px; user-select: text; vertical-align: baseline;">
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgh_l95u0TI7zJ5n4x1_Gd5uFw-LLHORZGKU-6MDZLuw9Ol_6lPuCRT5bgJlnqAuDAlM4l6cq_lw2ZkeL2S10wLppFly0e9X5idc2J78Z56TVKAZ4qLyHJeylB1NFoeQH0iqlUITdGyoJEG/s1600/4.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="767" data-original-width="355" height="400" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgh_l95u0TI7zJ5n4x1_Gd5uFw-LLHORZGKU-6MDZLuw9Ol_6lPuCRT5bgJlnqAuDAlM4l6cq_lw2ZkeL2S10wLppFly0e9X5idc2J78Z56TVKAZ4qLyHJeylB1NFoeQH0iqlUITdGyoJEG/s400/4.png" width="185" /></a></div>
<br />
<br />
<span class="TextRun SCXW140911730 BCX0" data-contrast="auto" lang="EN-US" style="font-family: "verdana" , "verdana_msfontservice" , sans-serif; font-size: 11pt; font-weight: bold; line-height: 27px; margin: 0px; padding: 0px;" xml:lang="EN-US">Sample C: </span><span class="TextRun SCXW140911730 BCX0" data-contrast="auto" lang="EN-US" style="font-family: "verdana" , "verdana_msfontservice" , sans-serif; font-size: 11pt; font-weight: bold; line-height: 27px; margin: 0px; padding: 0px;" xml:lang="EN-US">Value Style </span><span class="EOP SCXW140911730 BCX0" data-ccp-props="{"201341983":0,"335559739":160,"335559740":360}" style="font-family: "verdana" , "verdana_msfontservice" , sans-serif; font-size: 11pt; line-height: 27px; margin: 0px; padding: 0px;"> </span></div>
</div>
<div class="OutlineElement Ltr BCX0 SCXW140911730" style="-webkit-tap-highlight-color: transparent; -webkit-user-drag: none; clear: both; cursor: text; direction: ltr; font-family: "Segoe UI", "Segoe UI Web", Arial, Verdana, sans-serif; font-size: 12px; font-weight: 400; margin: 0px; overflow: visible; padding: 0px; position: relative; user-select: text;">
<div class="Paragraph SCXW140911730 BCX0" paraeid="{c7724941-b554-4c0b-a08b-42ffdf6964e4}{142}" paraid="450965949" style="-webkit-tap-highlight-color: transparent; -webkit-user-drag: none; background-color: transparent; color: windowtext; overflow-wrap: break-word; padding: 0px; user-select: text; vertical-align: baseline;">
<br /></div>
</div>
<div class="OutlineElement Ltr BCX0 SCXW140911730" style="-webkit-tap-highlight-color: transparent; -webkit-user-drag: none; clear: both; cursor: text; direction: ltr; font-family: "Segoe UI", "Segoe UI Web", Arial, Verdana, sans-serif; font-size: 12px; font-weight: 400; margin: 0px; overflow: visible; padding: 0px; position: relative; user-select: text;">
<div class="Paragraph SCXW140911730 BCX0" paraeid="{c7724941-b554-4c0b-a08b-42ffdf6964e4}{146}" paraid="1422629050" style="-webkit-tap-highlight-color: transparent; -webkit-user-drag: none; background-color: transparent; color: windowtext; overflow-wrap: break-word; padding: 0px; user-select: text; vertical-align: baseline;">
<span class="TextRun SCXW140911730 BCX0" data-contrast="auto" lang="EN-US" style="font-family: "verdana" , "verdana_msfontservice" , sans-serif; font-size: 11pt; line-height: 27px; margin: 0px; padding: 0px;" xml:lang="EN-US">Finally, look into Value style type as well as change the cell type and properties.</span><span class="EOP SCXW140911730 BCX0" data-ccp-props="{"201341983":0,"335559739":160,"335559740":360}" style="font-family: "verdana" , "verdana_msfontservice" , sans-serif; font-size: 11pt; line-height: 27px; margin: 0px; padding: 0px;"> </span></div>
</div>
<div class="OutlineElement Ltr BCX0 SCXW140911730" style="-webkit-tap-highlight-color: transparent; -webkit-user-drag: none; clear: both; cursor: text; direction: ltr; font-family: "Segoe UI", "Segoe UI Web", Arial, Verdana, sans-serif; font-size: 12px; font-weight: 400; margin: 0px; overflow: visible; padding: 0px; position: relative; user-select: text;">
<div class="Paragraph SCXW140911730 BCX0" paraeid="{c7724941-b554-4c0b-a08b-42ffdf6964e4}{152}" paraid="230409782" style="-webkit-tap-highlight-color: transparent; -webkit-user-drag: none; background-color: transparent; color: windowtext; overflow-wrap: break-word; padding: 0px; user-select: text; vertical-align: baseline;">
<br /></div>
</div>
<div class="OutlineElement Ltr BCX0 SCXW140911730" style="-webkit-tap-highlight-color: transparent; -webkit-user-drag: none; clear: both; cursor: text; direction: ltr; font-family: "Segoe UI", "Segoe UI Web", Arial, Verdana, sans-serif; font-size: 12px; font-weight: 400; margin: 0px; overflow: visible; padding: 0px; position: relative; user-select: text;">
<div class="Paragraph SCXW140911730 BCX0" paraeid="{c7724941-b554-4c0b-a08b-42ffdf6964e4}{156}" paraid="207377776" style="-webkit-tap-highlight-color: transparent; -webkit-user-drag: none; background-color: transparent; color: windowtext; overflow-wrap: break-word; padding: 0px; user-select: text; vertical-align: baseline;">
<span class="TextRun SCXW140911730 BCX0" data-contrast="auto" lang="EN-US" style="font-family: "verdana" , "verdana_msfontservice" , sans-serif; font-size: 11pt; line-height: 27px; margin: 0px; padding: 0px;" xml:lang="EN-US">Change the type Subtitle into Default: here we have only two label properties. This class code will be as shown below.</span><span class="EOP SCXW140911730 BCX0" data-ccp-props="{"201341983":0,"335559739":160,"335559740":360}" style="font-family: "verdana" , "verdana_msfontservice" , sans-serif; font-size: 11pt; line-height: 27px; margin: 0px; padding: 0px;"> </span><br />
<br /></div>
</div>
<contactmodel><contactmodel><br />
<!-- HTML generated using hilite.me --><div style="background: #ffffff; background: #ffffff; border-width: 0.1em 0.1em 0.1em 0.8em; border: solid dodgerblue; overflow: auto; overflow: auto; padding: 0.2em 0.6em; width: auto; width: auto;">
<table><tbody>
<tr><td><pre style="line-height: 125%; margin: 0;">1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37</pre>
</td><td><pre style="line-height: 125%; margin: 0;"><span style="color: #008800; font-weight: bold;">using</span> <span style="color: #0e84b5; font-weight: bold;">System</span>;
<span style="color: #008800; font-weight: bold;">using</span> <span style="color: #0e84b5; font-weight: bold;">System.Collections.Generic</span>;
<span style="color: #008800; font-weight: bold;">using</span> <span style="color: #0e84b5; font-weight: bold;">CoreGraphics</span>;
<span style="color: #008800; font-weight: bold;">using</span> <span style="color: #0e84b5; font-weight: bold;">Foundation</span>;
<span style="color: #008800; font-weight: bold;">using</span> <span style="color: #0e84b5; font-weight: bold;">UIKit</span>;
<span style="color: #008800; font-weight: bold;">namespace</span> <span style="color: #0e84b5; font-weight: bold;">TableViewSample</span>
{
<span style="color: #008800; font-weight: bold;">internal</span> <span style="color: #008800; font-weight: bold;">class</span> <span style="color: #bb0066; font-weight: bold;">SampleTableViewSource</span> : UITableViewSource
{
<span style="color: #008800; font-weight: bold;">private</span> IList<ContactModel> data;
<span style="color: #008800; font-weight: bold;">public</span> <span style="color: #0066bb; font-weight: bold;">SampleTableViewSource</span>(List<ContactModel> data)
{
<span style="color: #008800; font-weight: bold;">this</span>.data = data;
}
<span style="color: #008800; font-weight: bold;">public</span> <span style="color: #008800; font-weight: bold;">override</span> UITableViewCell <span style="color: #0066bb; font-weight: bold;">GetCell</span>(UITableView tableView, NSIndexPath indexPath)
{
<span style="color: #333399; font-weight: bold;">var</span> cell = <span style="color: #008800; font-weight: bold;">new</span> UITableViewCell(UITableViewCellStyle.Default, <span style="color: #008800; font-weight: bold;">null</span>);
<span style="color: #333399; font-weight: bold;">var</span> dataSet = data[indexPath.Row];
<span style="color: #008800; font-weight: bold;">if</span> (dataSet != <span style="color: #008800; font-weight: bold;">null</span>)
{
cell.TextLabel.Text = dataSet.Name;
cell.DetailTextLabel.Text = dataSet.MobileNumber;
}
<span style="color: #008800; font-weight: bold;">return</span> cell;
}
<span style="color: #008800; font-weight: bold;">public</span> <span style="color: #008800; font-weight: bold;">override</span> nint <span style="color: #0066bb; font-weight: bold;">RowsInSection</span>(UITableView tableview, nint section)
{
<span style="color: #008800; font-weight: bold;">return</span> data.Count;
}
}
}
</pre>
</td></tr>
</tbody></table>
</div>
<div class="OutlineElement Ltr BCX0 SCXW140911730" style="-webkit-tap-highlight-color: transparent; -webkit-user-drag: none; clear: both; cursor: text; direction: ltr; font-family: "Segoe UI", "Segoe UI Web", Arial, Verdana, sans-serif; font-size: 12px; font-weight: 400; margin: 0px; overflow: visible; padding: 0px; position: relative; user-select: text;">
<div class="Paragraph SCXW140911730 BCX0" paraeid="{c7724941-b554-4c0b-a08b-42ffdf6964e4}{173}" paraid="344809308" style="-webkit-tap-highlight-color: transparent; -webkit-user-drag: none; background-color: transparent; color: windowtext; overflow-wrap: break-word; padding: 0px; user-select: text; vertical-align: baseline;">
<br /></div>
<div class="Paragraph SCXW140911730 BCX0" paraeid="{c7724941-b554-4c0b-a08b-42ffdf6964e4}{173}" paraid="344809308" style="-webkit-tap-highlight-color: transparent; -webkit-user-drag: none; background-color: transparent; color: windowtext; overflow-wrap: break-word; padding: 0px; user-select: text; vertical-align: baseline;">
<span class="TextRun BCX0 SCXW50923887" data-contrast="auto" lang="EN-US" style="font-family: "verdana" , "verdana_msfontservice" , sans-serif; font-size: 11pt; line-height: 27px; margin: 0px; padding: 0px;" xml:lang="EN-US"><span class="NormalTextRun BCX0 SCXW50923887" style="-webkit-tap-highlight-color: transparent; -webkit-user-drag: none; background-color: inherit; margin: 0px; padding: 0px; user-select: text;"><br />
</span></span></div>
<div class="Paragraph SCXW140911730 BCX0" paraeid="{c7724941-b554-4c0b-a08b-42ffdf6964e4}{173}" paraid="344809308" style="-webkit-tap-highlight-color: transparent; -webkit-user-drag: none; background-color: transparent; color: windowtext; overflow-wrap: break-word; padding: 0px; user-select: text; vertical-align: baseline;">
<span class="TextRun BCX0 SCXW50923887" data-contrast="auto" lang="EN-US" style="font-family: "verdana" , "verdana_msfontservice" , sans-serif; font-size: 11pt; line-height: 27px; margin: 0px; padding: 0px;" xml:lang="EN-US"><span class="NormalTextRun BCX0 SCXW50923887" style="-webkit-tap-highlight-color: transparent; -webkit-user-drag: none; background-color: inherit; margin: 0px; padding: 0px; user-select: text;">Run the app to see the result like below.</span></span><span class="EOP BCX0 SCXW50923887" data-ccp-props="{"201341983":0,"335559739":160,"335559740":360}" style="font-family: "verdana" , "verdana_msfontservice" , sans-serif; font-size: 11pt; line-height: 27px; margin: 0px; padding: 0px;"> </span><br />
<div class="separator" style="clear: both; text-align: center;">
<span class="EOP SCXW140911730 BCX0" data-ccp-props="{"201341983":0,"335559739":160,"335559740":360}" style="font-family: "verdana" , "verdana_msfontservice" , sans-serif; font-size: 11pt; line-height: 27px; margin: 0px; padding: 0px; text-align: left;"><br />
</span></div>
<div class="separator" style="clear: both; text-align: center;">
<span class="EOP SCXW140911730 BCX0" data-ccp-props="{"201341983":0,"335559739":160,"335559740":360}" style="font-family: "verdana" , "verdana_msfontservice" , sans-serif; font-size: 11pt; line-height: 27px; margin: 0px; padding: 0px; text-align: left;"><br />
</span></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjYulkT_aqvlMnEdW48oSjaKajJ-wWZTekSUizLof72NKquZ8clBlTMjkn7KY6DeZGdKPGHp6jRRpdfjAiLVBkFwL2nrjFKREzpZV0vLAKHQnqKLiRoyiSyvBUOEo0Mi4YVReyNacYgT4lw/s1600/5.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="765" data-original-width="361" height="400" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjYulkT_aqvlMnEdW48oSjaKajJ-wWZTekSUizLof72NKquZ8clBlTMjkn7KY6DeZGdKPGHp6jRRpdfjAiLVBkFwL2nrjFKREzpZV0vLAKHQnqKLiRoyiSyvBUOEo0Mi4YVReyNacYgT4lw/s400/5.png" width="188" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<span class="TextRun SCXW20120131 BCX0" data-contrast="auto" lang="EN-US" style="font-family: "verdana" , "verdana_msfontservice" , sans-serif; font-size: 11pt; line-height: 27px; margin: 0px; padding: 0px;" xml:lang="EN-US"><span class="NormalTextRun SCXW20120131 BCX0" style="-webkit-tap-highlight-color: transparent; -webkit-user-drag: none; background-color: inherit; margin: 0px; padding: 0px; user-select: text;">Full source is <a href="https://github.com/logeshpalani98/Xamarin.iOS-Samples" target="_blank">here</a></span></span><span class="EOP SCXW20120131 BCX0" data-ccp-props="{"201341983":0,"335559739":160,"335559740":360}" style="font-family: "verdana" , "verdana_msfontservice" , sans-serif; font-size: 11pt; line-height: 27px; margin: 0px; padding: 0px;"><a href="https://github.com/logeshpalani98/Xamarin.iOS-Samples" target="_blank"> </a></span></div>
</div>
<div class="OutlineElement Ltr BCX0 SCXW140911730" style="-webkit-tap-highlight-color: transparent; -webkit-user-drag: none; clear: both; cursor: text; direction: ltr; font-family: "Segoe UI", "Segoe UI Web", Arial, Verdana, sans-serif; font-size: 12px; font-weight: 400; margin: 0px; overflow: visible; padding: 0px; position: relative; user-select: text;">
<div class="Paragraph SCXW140911730 BCX0" paraeid="{c7724941-b554-4c0b-a08b-42ffdf6964e4}{177}" paraid="1728029882" style="-webkit-tap-highlight-color: transparent; -webkit-user-drag: none; background-color: transparent; color: windowtext; overflow-wrap: break-word; padding: 0px; user-select: text; vertical-align: baseline;">
<br /></div>
</div>
<div class="OutlineElement Ltr BCX0 SCXW140911730" style="clear: both; cursor: text; direction: ltr; font-family: "segoe ui", "segoe ui web", arial, verdana, sans-serif; font-size: 12px; margin: 0px; overflow: visible; padding: 0px; position: relative;">
<div class="Paragraph SCXW140911730 BCX0" paraeid="{c7724941-b554-4c0b-a08b-42ffdf6964e4}{181}" paraid="1362769525" style="-webkit-tap-highlight-color: transparent; -webkit-user-drag: none; background-color: transparent; color: windowtext; overflow-wrap: break-word; padding: 0px; user-select: text; vertical-align: baseline;">
<span class="TextRun SCXW140911730 BCX0" data-contrast="auto" lang="EN-US" style="font-family: "verdana" , "verdana_msfontservice" , sans-serif; font-size: 11pt; font-weight: 400; line-height: 27px; margin: 0px; padding: 0px;" xml:lang="EN-US">I believe by now you’d have understood how to use Default </span><span class="TextRun SCXW140911730 BCX0" data-contrast="auto" lang="EN-US" style="font-family: "verdana" , "verdana_msfontservice" , sans-serif; font-size: 11pt; line-height: 27px; margin: 0px; padding: 0px;" xml:lang="EN-US"><span class="SpellingError SCXW140911730 BCX0" style="-webkit-tap-highlight-color: transparent; -webkit-user-drag: none; background-color: inherit; background-image: url("data:image/gif; background-position: left bottom; background-repeat: repeat-x; border-bottom: 1px solid transparent; margin: 0px; padding: 0px; user-select: text;">Tableview</span></span><span class="TextRun SCXW140911730 BCX0" data-contrast="auto" lang="EN-US" style="font-family: "verdana" , "verdana_msfontservice" , sans-serif; font-size: 11pt; line-height: 27px; margin: 0px; padding: 0px;" xml:lang="EN-US"> <span style="font-weight: 400;">cells. Please share if you have any queries in the comment’s section. </span></span><span class="EOP SCXW140911730 BCX0" data-ccp-props="{"201341983":0,"335559739":160,"335559740":360}" style="font-family: "verdana" , "verdana_msfontservice" , sans-serif; font-size: 11pt; font-weight: 400; line-height: 27px; margin: 0px; padding: 0px;"> </span></div>
</div>
<div class="OutlineElement Ltr BCX0 SCXW140911730" style="-webkit-tap-highlight-color: transparent; -webkit-user-drag: none; clear: both; cursor: text; direction: ltr; font-family: "Segoe UI", "Segoe UI Web", Arial, Verdana, sans-serif; font-size: 12px; font-weight: 400; margin: 0px; overflow: visible; padding: 0px; position: relative; user-select: text;">
<div class="Paragraph SCXW140911730 BCX0" paraeid="{c7724941-b554-4c0b-a08b-42ffdf6964e4}{187}" paraid="954535358" style="-webkit-tap-highlight-color: transparent; -webkit-user-drag: none; background-color: transparent; color: windowtext; overflow-wrap: break-word; padding: 0px; user-select: text; vertical-align: baseline;">
<br /></div>
</div>
</contactmodel></contactmodel></h2>
</div>
</div>
</div>
Logesh Palanihttp://www.blogger.com/profile/11572235997627400122noreply@blogger.com0tag:blogger.com,1999:blog-4259075105540267115.post-77458598664759260722019-12-08T22:50:00.000+05:302019-12-08T22:50:24.851+05:30ASP.NET Web Application To Deploy Microsoft Azure Service, Using Microsoft Visual Studio<div dir="ltr" style="text-align: left;" trbidi="on">
<span style="background-color: white; color: #212121; font-family: "open sans" , sans-serif; font-size: 18.6667px;"><b><br /></b></span>
<span style="background-color: white; color: #212121; font-family: "open sans" , sans-serif; font-size: 18.6667px;"><b>This article covers the topics given below.</b></span><br />
<ul style="background-color: white; box-sizing: border-box; color: #212121; font-family: "open sans", sans-serif; font-size: 16px;">
<li style="box-sizing: border-box;">What is a Web App?</li>
<li style="box-sizing: border-box;">Deployment environment Software packages.</li>
<li style="box-sizing: border-box;">Create Web app.</li>
<li style="box-sizing: border-box;">Azure Resources.</li>
<li style="box-sizing: border-box;">The Azure resources in Visual Studio 2015 Update 3.</li>
<li style="box-sizing: border-box;">Deploy Azure project.</li>
<li style="box-sizing: border-box;">Creating WebpProject.</li>
</ul>
<div>
<div style="background-color: white; box-sizing: border-box; color: #212121; font-family: "open sans", sans-serif; font-size: 16px; line-height: 1.5; margin-bottom: 1em; margin-top: 1em;">
<strong style="box-sizing: border-box;">What is a Web App?</strong></div>
<div style="background-color: white; box-sizing: border-box; color: #212121; font-family: "open sans", sans-serif; font-size: 16px; line-height: 1.5; margin-bottom: 1em; margin-top: 1em;">
Web Application or Web app is a <a href="https://en.wikipedia.org/wiki/Client%E2%80%93server_model" style="box-sizing: border-box; color: #1e88e5; cursor: pointer; text-decoration-line: none;" target="_blank">c</a><a href="https://en.wikipedia.org/wiki/Client%E2%80%93server_model" style="box-sizing: border-box; color: blue; cursor: pointer; text-decoration-line: none;" target="_blank">lient–Server</a> <a href="https://en.wikipedia.org/wiki/Software_application" style="box-sizing: border-box; color: blue; cursor: pointer; text-decoration-line: none;" target="_blank">software Application</a> in which the client or the client interface runs in a <a href="https://en.wikipedia.org/wiki/Web_browser" style="box-sizing: border-box; color: blue; cursor: pointer; text-decoration-line: none;" target="_blank">Web Browser</a>. Common Web Applications are used as a Web Application.</div>
<div style="background-color: white; box-sizing: border-box; color: #212121; font-family: "open sans", sans-serif; font-size: 16px; line-height: 1.5; margin-bottom: 1em; margin-top: 1em;">
<strong style="box-sizing: border-box;">e.g</strong>.<br />
<br style="box-sizing: border-box;" />
<a href="https://en.wikipedia.org/wiki/Webmail" style="box-sizing: border-box; color: blue; cursor: pointer; text-decoration-line: none;" target="_blank">webmail</a>, <a href="https://en.wikipedia.org/wiki/Wiki" style="box-sizing: border-box; color: blue; cursor: pointer; text-decoration-line: none;" target="_blank">wikis</a>, <a href="https://en.wikipedia.org/wiki/Instant_messaging" style="box-sizing: border-box; color: blue; cursor: pointer; text-decoration-line: none;" target="_blank">instant messaging services</a>, <a href="https://www.google.co.in/url?sa=t&rct=j&q=&esrc=s&source=web&cd=1&cad=rja&uact=8&sqi=2&ved=0ahUKEwjeqo2Pvq3RAhXHs48KHY1cD1sQFggmMAA&url=https%3A%2F%2Fwww.flipkart.com%2F&usg=AFQjCNFrELYECqppDBRI-5dWLJOby01swQ&bvm=bv.142059868,d.c2I" style="box-sizing: border-box; color: blue; cursor: pointer; text-decoration-line: none;" target="_blank">Flipkart</a>,<a href="https://www.google.co.in/url?sa=t&rct=j&q=&esrc=s&source=web&cd=1&cad=rja&uact=8&sqi=2&ved=0ahUKEwjeqo2Pvq3RAhXHs48KHY1cD1sQFggmMAA&url=https%3A%2F%2Fwww.flipkart.com%2F&usg=AFQjCNFrELYECqppDBRI-5dWLJOby01swQ&bvm=bv.142059868,d.c2I" style="box-sizing: border-box; color: blue; cursor: pointer; text-decoration-line: none;" target="_blank"> Amazon</a>.</div>
<div style="background-color: white; box-sizing: border-box; color: #212121; font-family: "open sans", sans-serif; font-size: 16px; line-height: 1.5; margin-bottom: 1em; margin-top: 1em;">
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgaQlA_7FTKMjZPaUf6DCzon151dZt7yLfp6_5R7pCA8pkUGonOZM4Wlh3Hn2UBtTEbnjKwE-w29Ccj_T4qdtbbMITpmoZtwHSMDJrThBFLcsc_eWWqOkE1j1LYhFQJ8SZJ5d9CXIyf3MV5/s1600/image002.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="500" data-original-width="494" height="320" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgaQlA_7FTKMjZPaUf6DCzon151dZt7yLfp6_5R7pCA8pkUGonOZM4Wlh3Hn2UBtTEbnjKwE-w29Ccj_T4qdtbbMITpmoZtwHSMDJrThBFLcsc_eWWqOkE1j1LYhFQJ8SZJ5d9CXIyf3MV5/s320/image002.png" width="316" /></a></div>
<div style="box-sizing: border-box; line-height: 1.5; margin-bottom: 1em; margin-top: 1em;">
<strong style="box-sizing: border-box;">Prerequisites</strong></div>
<ul style="box-sizing: border-box;">
<li style="box-sizing: border-box;">Getting started with ASP.NET MVC 5 in<a href="https://www.google.co.in/url?sa=t&rct=j&q=&esrc=s&source=web&cd=1&cad=rja&uact=8&sqi=2&ved=0ahUKEwjM2dHOvq3RAhVFK48KHQIDAGYQFggZMAA&url=https%3A%2F%2Fwww.visualstudio.com%2Fdownloads%2F&usg=AFQjCNFTpGI9K14VoQPLek5L0ABzerlG8w" style="box-sizing: border-box; color: blue; cursor: pointer; text-decoration-line: none;" target="_blank"> Microsoft Visual Studio 2015</a>.</li>
<li style="box-sizing: border-box;">If you have <a href="https://www.google.co.in/url?sa=t&rct=j&q=&esrc=s&source=web&cd=1&cad=rja&uact=8&sqi=2&ved=0ahUKEwjSgLDgvq3RAhVFQI8KHbBMBT8QFggZMAA&url=https%3A%2F%2Fportal.azure.com%2F&usg=AFQjCNG2aFFLoqTdJKXDP0PBLNbLW9WNrA" style="box-sizing: border-box; color: blue; cursor: pointer; text-decoration-line: none;" target="_blank">Microsoft Azure Account</a> & activate Visual studio subscriber benefits.</li>
<li style="box-sizing: border-box;">Sign up with Azure account.</li>
<li style="box-sizing: border-box;">Getting started in <a href="https://www.google.co.in/url?sa=t&rct=j&q=&esrc=s&source=web&cd=1&cad=rja&uact=8&sqi=2&ved=0ahUKEwi1i-Xwvq3RAhVLQ48KHf6vC80QFggZMAA&url=https%3A%2F%2Fazure.microsoft.com%2Fen-in%2Fservices%2Fapp-service%2F&usg=AFQjCNHbm3EMA75rULINQDKqqZnQ3JwbMQ" style="box-sizing: border-box; color: blue; cursor: pointer; text-decoration-line: none;" target="_blank">Azure app Service</a> before</li>
<li style="box-sizing: border-box;"><a href="https://www.google.co.in/url?sa=t&rct=j&q=&esrc=s&source=web&cd=1&cad=rja&uact=8&sqi=2&ved=0ahUKEwipubaEv63RAhVMtY8KHRclCGcQFggZMAA&url=https%3A%2F%2Fazure.microsoft.com%2Fen-in%2Fdownloads%2F&usg=AFQjCNEr9eUbDr8mIpENbl4msiP_map-NA" style="box-sizing: border-box; color: blue; cursor: pointer; text-decoration-line: none;" target="_blank">Azure SDK</a>.</li>
<li style="box-sizing: border-box;"><a href="https://www.google.co.in/url?sa=t&rct=j&q=&esrc=s&source=web&cd=2&cad=rja&uact=8&sqi=2&ved=0ahUKEwiXovCWv63RAhWMtI8KHVD9Cg8QFggfMAE&url=https%3A%2F%2Fwww.visualstudio.com%2Fdownloads%2F&usg=AFQjCNFTpGI9K14VoQPLek5L0ABzerlG8w" style="box-sizing: border-box; color: blue; cursor: pointer; text-decoration-line: none;" target="_blank">Visual Studio 2015 update 3</a>.</li>
</ul>
<div style="box-sizing: border-box; line-height: 1.5; margin-bottom: 1em; margin-top: 1em;">
<strong style="box-sizing: border-box;">Development Environment Software Package</strong></div>
<ul style="box-sizing: border-box;">
<li style="box-sizing: border-box;"><a href="https://www.google.co.in/url?sa=t&rct=j&q=&esrc=s&source=web&cd=1&cad=rja&uact=8&ved=0ahUKEwinmLOnv63RAhWIqo8KHWVZBz8QFggZMAA&url=https%3A%2F%2Fwww.microsoft.com%2Fen-us%2Fdownload%2Fdetails.aspx%3Fid%3D51657&usg=AFQjCNHDcrc3OSLbrYe8_dMnVMJZwDNy2g" style="box-sizing: border-box; color: blue; cursor: pointer; text-decoration-line: none;" target="_blank">Azure SDK for .NET 2.9.</a></li>
<li style="box-sizing: border-box;">Download the latest <a href="https://www.google.co.in/url?sa=t&rct=j&q=&esrc=s&source=web&cd=1&cad=rja&uact=8&ved=0ahUKEwinmLOnv63RAhWIqo8KHWVZBz8QFggZMAA&url=https%3A%2F%2Fwww.microsoft.com%2Fen-us%2Fdownload%2Fdetails.aspx%3Fid%3D51657&usg=AFQjCNHDcrc3OSLbrYe8_dMnVMJZwDNy2g" style="box-sizing: border-box; color: blue; cursor: pointer; text-decoration-line: none;" target="_blank">Azure SDK for Visual Studio 2015</a>, if you don’t have it already.</li>
<li style="box-sizing: border-box;">If you have Visual Studio 2013, you can download the latest <a href="https://www.google.co.in/url?sa=t&rct=j&q=&esrc=s&source=web&cd=2&cad=rja&uact=8&ved=0ahUKEwihqP7Bv63RAhVFp48KHdAsAuAQFggcMAE&url=http%3A%2F%2Fstackoverflow.com%2Fquestions%2F27647895%2Fazure-sdk-for-net-vs2013-2-5-requires-visual-studio-2013-update-3-or-later&usg=AFQjCNGz26-QUiSqTTMIaywzK2RPBwcMkg" style="box-sizing: border-box; color: blue; cursor: pointer; text-decoration-line: none;" target="_blank">Azure SDK for Visual Studio 2013.</a></li>
</ul>
<div style="box-sizing: border-box; line-height: 1.5; margin-bottom: 1em; margin-top: 1em;">
<strong style="box-sizing: border-box; font-size: 14pt;">Create Web app</strong></div>
<div style="box-sizing: border-box; line-height: 1.5; margin-bottom: 1em; margin-top: 1em;">
<strong style="box-sizing: border-box;">Step 1</strong></div>
<div style="box-sizing: border-box; line-height: 1.5; margin-bottom: 1em; margin-top: 1em;">
Open Visual Studio 2015 Update 3 enterprise.</div>
<ul style="box-sizing: border-box;">
<li style="box-sizing: border-box;">Create File>New>Project.</li>
<li style="box-sizing: border-box;">New Project-> click Visual C#> Web> ASP.NET Web app & select .NET Framework 4.5.2.</li>
<li style="box-sizing: border-box;">Selected the Azure Application Insights (Insight Application is used for the monitor and your Web app availability, performance and usage).</li>
<li style="box-sizing: border-box;">Enter your Application name.</li>
<li style="box-sizing: border-box;">Click OK.</li>
</ul>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg7t3uu6DB_wqWJoqrWmz53GurYWcSFsTOO__BXPmIZZIN0mHaH_rtdwLa0Zp6U13xFSCzidFz6wb84iHTMAzFGGjvgOzIcBek0vIh07cdrHv-3PCcyFQfKIQHKD6yznDUkvzstYFpKA8Tf/s1600/image003.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="401" data-original-width="624" height="205" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg7t3uu6DB_wqWJoqrWmz53GurYWcSFsTOO__BXPmIZZIN0mHaH_rtdwLa0Zp6U13xFSCzidFz6wb84iHTMAzFGGjvgOzIcBek0vIh07cdrHv-3PCcyFQfKIQHKD6yznDUkvzstYFpKA8Tf/s320/image003.png" width="320" /></a></div>
<div>
<br /></div>
<div>
<div style="box-sizing: border-box; line-height: 1.5; margin-bottom: 1em; margin-top: 1em;">
<strong style="box-sizing: border-box;">Step 2</strong></div>
<ul style="box-sizing: border-box;">
<li style="box-sizing: border-box;">New NET Project Box-> select MVC and then click Change Authentication.</li>
</ul>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhykVMqNbnk14aQaz8a0g5YFeJgrcfAI-BL4OlwpKOQsfvmAVinPzwNaWWrPwoyE-4YAfHxFCz7qqH2u65DdjqIs1CJIzIjS_ODPmPQfLWQjATG63hex6YyouP2Pn0bEl3gg6R0ksVwG_Hf/s1600/image004.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="497" data-original-width="624" height="254" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhykVMqNbnk14aQaz8a0g5YFeJgrcfAI-BL4OlwpKOQsfvmAVinPzwNaWWrPwoyE-4YAfHxFCz7qqH2u65DdjqIs1CJIzIjS_ODPmPQfLWQjATG63hex6YyouP2Pn0bEl3gg6R0ksVwG_Hf/s320/image004.png" width="320" /></a></div>
<div>
<div style="box-sizing: border-box; line-height: 1.5; margin-bottom: 1em; margin-top: 1em;">
<strong style="box-sizing: border-box;">Step 3</strong></div>
<ul style="box-sizing: border-box;">
<li style="box-sizing: border-box;">Change authentication and click No Authentication.</li>
</ul>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjhBi6lwVaVvwVhU3t1220DlEFuwEbIMWHKCiNJ0_fF8-a4nGjFc5pBVrsEmz3uVbTWlvcTAgBz0jK0RvwKbkJbHcdW8uqrc-YX-6mx5zUG5WMiYGdwCW2Ned1bv-Ah3nCGEKdht1OvWDS3/s1600/image005.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="247" data-original-width="616" height="128" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjhBi6lwVaVvwVhU3t1220DlEFuwEbIMWHKCiNJ0_fF8-a4nGjFc5pBVrsEmz3uVbTWlvcTAgBz0jK0RvwKbkJbHcdW8uqrc-YX-6mx5zUG5WMiYGdwCW2Ned1bv-Ah3nCGEKdht1OvWDS3/s320/image005.png" width="320" /></a></div>
<div>
<div style="box-sizing: border-box; line-height: 1.5; margin-bottom: 1em; margin-top: 1em;">
<strong style="box-sizing: border-box;">Step 4</strong></div>
<ul style="box-sizing: border-box;">
<li style="box-sizing: border-box;">Click Host Azure.</li>
<li style="box-sizing: border-box;">App Service is selected in the dropdown list.</li>
</ul>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj9HDEykCKyXPHNR1YICSbOpclAyjYNMsAXBeLgpWKWnqD1ucoFRMovaJwyIO4XnNBgjB5udGIRvpzeBFxuzQNGVBEuUgI8DcNTCPPAWcSskAb5Z0wpPP2cmWpkC2W_5UqsFtnGZF1JpEmC/s1600/image006.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="155" data-original-width="316" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj9HDEykCKyXPHNR1YICSbOpclAyjYNMsAXBeLgpWKWnqD1ucoFRMovaJwyIO4XnNBgjB5udGIRvpzeBFxuzQNGVBEuUgI8DcNTCPPAWcSskAb5Z0wpPP2cmWpkC2W_5UqsFtnGZF1JpEmC/s1600/image006.png" /></a></div>
<div class="separator" style="clear: both; text-align: left;">
Click OK.</div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhBzheDxYH64DK-iBsEw_zpAU4DfuefegasN8njyoMy1SaP1xSdzcRxrm8jfiteUhqLFZnTrKlXumQtPIhUIdLJDFcn0WOzCtas-E6DE238OeRTWVAL5Q54FVmVxWbAn46MLpZcV51ikTk6/s1600/image007.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="178" data-original-width="242" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhBzheDxYH64DK-iBsEw_zpAU4DfuefegasN8njyoMy1SaP1xSdzcRxrm8jfiteUhqLFZnTrKlXumQtPIhUIdLJDFcn0WOzCtas-E6DE238OeRTWVAL5Q54FVmVxWbAn46MLpZcV51ikTk6/s1600/image007.png" /></a></div>
<div style="box-sizing: border-box; line-height: 1.5; margin-bottom: 1em; margin-top: 1em;">
<strong style="box-sizing: border-box;">Create Azure resources</strong></div>
<ol style="box-sizing: border-box;">
<li style="box-sizing: border-box;">Create the app Service dialog box, followed by clicking Add account and sign in your Microsoft Azure ID & Password. Click Manage your account subscription or if you are already signed in, skip that step.</li>
</ol>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiu6vJ5VqZpDZDv4GsXnD_MnUqLb1IBtgRnAwF6889pi58XgY72yVPHnEL4tGXBXWzNwfm0a0pEGFoG8xuF2FL0mYIaekAvTu_36f_tbnfanvaj-6Fg-n7GIBuEYC1MOZgR5Ha8Jt2yRtUg/s1600/image008.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="469" data-original-width="624" height="240" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiu6vJ5VqZpDZDv4GsXnD_MnUqLb1IBtgRnAwF6889pi58XgY72yVPHnEL4tGXBXWzNwfm0a0pEGFoG8xuF2FL0mYIaekAvTu_36f_tbnfanvaj-6Fg-n7GIBuEYC1MOZgR5Ha8Jt2yRtUg/s320/image008.png" width="320" /></a></div>
<div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<ol style="box-sizing: border-box;">
<li style="box-sizing: border-box;">In your Web app project, give a unique name as uniquein net domain.</li>
<li style="box-sizing: border-box;">Now, you need to enter to create a different project.<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj1i9k6r8Tz-fmU9wH0bzsQ3znA0mHHDbjd6Ttm1co8wvsPg58-4_-fvq2_bZLl5R2yAv-ryusUOSIuFtujim0fTAk6reD3bwGmR4r018TLqE1QySigwy5H3fcsCKc1BqgBdZEGdIi35rHd/s1600/image009.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="55" data-original-width="604" height="29" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj1i9k6r8Tz-fmU9wH0bzsQ3znA0mHHDbjd6Ttm1co8wvsPg58-4_-fvq2_bZLl5R2yAv-ryusUOSIuFtujim0fTAk6reD3bwGmR4r018TLqE1QySigwy5H3fcsCKc1BqgBdZEGdIi35rHd/s320/image009.png" width="320" /></a></div>
</li>
<li style="box-sizing: border-box;">The URL for your Application name plus <em style="box-sizing: border-box;">.azurewebsites.net</em>. For example, if the name is <em style="box-sizing: border-box;">Logesh</em>, the URL is <em style="box-sizing: border-box;">logesh</em><em style="box-sizing: border-box;">.azurewebsites.net.<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiHB3T8BCnN_ZhSawXqgElinIySeuvELQTZyrBk7_Keq88tukEzUxnLXCH8fXMfkN1fCKtrsz2B5VJP-ZbRI5NFe-O0TW1DC_Tsbwhr09VynZucltsgvds1iXmFfZ6QmgdE1cAhwvSTH9nr/s1600/image010.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="66" data-original-width="547" height="38" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiHB3T8BCnN_ZhSawXqgElinIySeuvELQTZyrBk7_Keq88tukEzUxnLXCH8fXMfkN1fCKtrsz2B5VJP-ZbRI5NFe-O0TW1DC_Tsbwhr09VynZucltsgvds1iXmFfZ6QmgdE1cAhwvSTH9nr/s320/image010.png" width="320" /></a></div>
</em></li>
<li style="box-sizing: border-box;">Click New button, which is next to the resource group box and enter your resource group name or if you have already have resource group, select any one.</li>
<li style="box-sizing: border-box;">Click New button, which is next to the app Service plan but don’t create new app Service plan.</li>
<li style="box-sizing: border-box;">To configure app Service plan, dialog and enter your plan name, if you are preferred.<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEibEvEMdZBWQW8kTbBO0KHIBZYIvHQ9z3wR99slHmxkR001Id5Q_ZcMHE863ICXIYK5Un9dnLT6HSrSQ1n_-g3o4VKD1hlMRWmvdNwWn7s1Ncf7o-p-y-0gGTjVO9CQsuNyRLDLLb99L3x-/s1600/image011.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="298" data-original-width="472" height="202" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEibEvEMdZBWQW8kTbBO0KHIBZYIvHQ9z3wR99slHmxkR001Id5Q_ZcMHE863ICXIYK5Un9dnLT6HSrSQ1n_-g3o4VKD1hlMRWmvdNwWn7s1Ncf7o-p-y-0gGTjVO9CQsuNyRLDLLb99L3x-/s320/image011.png" width="320" /></a></div>
</li>
<li style="box-sizing: border-box;">In the location, dropdown list, choose the location, which is close to your location (The setting specifies Azure datacenter and your Application will run at a speed for the closed location (Server and client possible) accessing).</li>
<li style="box-sizing: border-box;">In the size-> drodown click.</li>
<li style="box-sizing: border-box;">In the Configure app Service plan dialog box, click in the Create app Service dialog box, click create.<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgFvGPtliG4X-YJZlgDy_8yeO05Gaj99XwlUUWo15DDwef_x1Qf5MJLI7D7RWLnvLcy2GXtNaprq5YDMbQcbRAAP8QP6ccXKdZAvSvfQpaVrGkQ5q3JTWr1EN2rrO7cG03vvBJC-HzKjPXy/s1600/image012.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="469" data-original-width="624" height="240" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgFvGPtliG4X-YJZlgDy_8yeO05Gaj99XwlUUWo15DDwef_x1Qf5MJLI7D7RWLnvLcy2GXtNaprq5YDMbQcbRAAP8QP6ccXKdZAvSvfQpaVrGkQ5q3JTWr1EN2rrO7cG03vvBJC-HzKjPXy/s320/image012.png" width="320" /></a></div>
</li>
</ol>
<div style="text-align: left;">
<div style="box-sizing: border-box; line-height: 1.5; margin-bottom: 1em; margin-top: 1em;">
<strong style="box-sizing: border-box;">Azure Resources in Visual Studio</strong></div>
Solution Explorer shows your project files, references, JSON file, fonts and Controllers. If you want another page, go to the Web Application right click, followed by clicking Add >Web form or HTML form. Write the Web page name, followed by clicking Add to the link for Main page to New page and New page to Main page.<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiKliAzETtOoRu8MSWwpZOFX_fd9VqOTBCCatdjU-zHXM-QlDOUtOVQ-P6A0-Ux-NLpdEOSRhE4MlrpSeVSSInVwzivQf8bCIu-ZknASWRPt0EYt5Jujl2CtHsQAFmhabmoK3Gst2vyZTDD/s1600/image013.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="374" data-original-width="344" height="320" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiKliAzETtOoRu8MSWwpZOFX_fd9VqOTBCCatdjU-zHXM-QlDOUtOVQ-P6A0-Ux-NLpdEOSRhE4MlrpSeVSSInVwzivQf8bCIu-ZknASWRPt0EYt5Jujl2CtHsQAFmhabmoK3Gst2vyZTDD/s320/image013.png" width="294" /></a></div>
<div style="text-align: left;">
</div>
<ul style="text-align: left;">
<li> Azure app Service activity is shown on app Service resources, which have been credited in Azure and click the link to publish your app immediately.<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj0S6HG1iI-gHkrFSGnphT2rUCvsoPDChvdaGAcse34MWmJatmZNJb1gzxSPdksCQqWqL9vd2Sjd4YTVCtGYteGcwqHw15nVJCMVfZwPhB5hM0TskNm-PLiAxuVh62jG-9Fv6wUeV3RSaN6/s1600/image014.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="111" data-original-width="624" height="56" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj0S6HG1iI-gHkrFSGnphT2rUCvsoPDChvdaGAcse34MWmJatmZNJb1gzxSPdksCQqWqL9vd2Sjd4YTVCtGYteGcwqHw15nVJCMVfZwPhB5hM0TskNm-PLiAxuVh62jG-9Fv6wUeV3RSaN6/s320/image014.png" width="320" /></a></div>
</li>
<li><div class="separator" style="clear: both; text-align: left;">
Go to Cloud Explore Window, manage your Azure resources, including the Web app, which you just created and your app Services will be shown below on Logesh, as your website is there.</div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjFS2yiQaptxdDiRcLC5cfCj815Xn8i0K1_o3O9bKWtED6LJnbociGb2yblxkUl_13A2MhvfyBCObUyIZIiIQzpPCpQ5M4NooOWfgVU2JpGvSpExh4ybJ88QYGCIfU1XfWw-aSzZBAYoCgJ/s1600/image015.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="386" data-original-width="269" height="320" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjFS2yiQaptxdDiRcLC5cfCj815Xn8i0K1_o3O9bKWtED6LJnbociGb2yblxkUl_13A2MhvfyBCObUyIZIiIQzpPCpQ5M4NooOWfgVU2JpGvSpExh4ybJ88QYGCIfU1XfWw-aSzZBAYoCgJ/s320/image015.png" width="223" /></a></div>
</li>
</ul>
</div>
<div>
<div style="box-sizing: border-box; line-height: 1.5; margin-bottom: 1em; margin-top: 1em;">
<strong style="box-sizing: border-box;">Build Azure Web Project</strong></div>
<ul style="box-sizing: border-box;">
<li style="box-sizing: border-box;">In Solution Explorer, choose Publish<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiXQqwtAzLxIxSLxvlef71Tlom6eIetVHV8-b6RomXmOcH4J-48cRC4h8sVWZD-svCFNjtpkI_AWFe_Mq5MoRtHOMxnWYxPLwIRuotATLakrbzVT6_Vg55LQmfVcadlGz-Sk94Nt6q2lNk9/s1600/image016.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="676" data-original-width="618" height="320" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiXQqwtAzLxIxSLxvlef71Tlom6eIetVHV8-b6RomXmOcH4J-48cRC4h8sVWZD-svCFNjtpkI_AWFe_Mq5MoRtHOMxnWYxPLwIRuotATLakrbzVT6_Vg55LQmfVcadlGz-Sk94Nt6q2lNk9/s320/image016.png" width="292" /></a></div>
</li>
<li style="box-sizing: border-box;">Go to <em style="box-sizing: border-box;">Publish Profile, which</em> has setting to deploy Web project.</li>
<li style="box-sizing: border-box;">To establish connection to publish Web, click Next and accessing publishing packages will be uploaded. Before you check your setting, build your API.<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiF-YqEcL5dVBsPTlDUtU8IcodWfUQHp8x70cIbZqIibKL3TyD074W0lKzJz_WSAm-Ic11sd_5n35oYU_UZiK5NvtVOqRYnp1AOFVGuJnNMfD6aEpCCqgWmyx8SBN7SzqfEMMGU4-tqMKIz/s1600/image017.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="488" data-original-width="615" height="253" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiF-YqEcL5dVBsPTlDUtU8IcodWfUQHp8x70cIbZqIibKL3TyD074W0lKzJz_WSAm-Ic11sd_5n35oYU_UZiK5NvtVOqRYnp1AOFVGuJnNMfD6aEpCCqgWmyx8SBN7SzqfEMMGU4-tqMKIz/s320/image017.png" width="320" /></a></div>
</li>
<li style="box-sizing: border-box;"><div class="separator" style="clear: both; text-align: left;">
Click next and check your Publish method. Prior to it, validate the connection, followed by clicking Next and before it, the Server name, site name, user name, password and destination URL are automatically inserted.</div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjdJhOHlnwv6cJAwyEkLFP-lAPQF4EEUCmFadsaOagXYr-IXkgiy3mqq9M8OOlk-enF6wKECSeL2O2HkWIfgfGVhThbs7YBRHx7vgaWW0v2G3d9ridgvyiQMGV4uVndqr4lJ5NSPwsjJU8s/s1600/image019.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="373" data-original-width="624" height="191" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjdJhOHlnwv6cJAwyEkLFP-lAPQF4EEUCmFadsaOagXYr-IXkgiy3mqq9M8OOlk-enF6wKECSeL2O2HkWIfgfGVhThbs7YBRHx7vgaWW0v2G3d9ridgvyiQMGV4uVndqr4lJ5NSPwsjJU8s/s320/image019.jpg" width="320" /></a></div>
</li>
<li style="box-sizing: border-box;"><div class="separator" style="clear: both; text-align: left;">
You may have your Web API Preview, click next and click Preview button. Now, go to Azure Activity Application and the application is created successfully and the local browser automatically opens. See your website and the link will be given below on the activity dialog box and there is no authentication, so no databases are available.</div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhzQhTv0a_V8iTmaJrlxLAwA-yDCjYM6cCfhlq4tNAs0t9iRSPFg91kjrwGLh-Pc7U0rg6YqIwv2nrmXKPMixpFkASPyCd5e6cbwILNDNPHhUSIG7jB46wqEwafvPzRrhwApkDf6oxUhooD/s1600/image020.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="298" data-original-width="598" height="159" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhzQhTv0a_V8iTmaJrlxLAwA-yDCjYM6cCfhlq4tNAs0t9iRSPFg91kjrwGLh-Pc7U0rg6YqIwv2nrmXKPMixpFkASPyCd5e6cbwILNDNPHhUSIG7jB46wqEwafvPzRrhwApkDf6oxUhooD/s320/image020.png" width="320" /></a></div>
</li>
<li style="box-sizing: border-box;"><div style="box-sizing: border-box; line-height: 1.5; margin-bottom: 1em; margin-top: 1em;">
<strong style="box-sizing: border-box;">Web Project is created</strong></div>
</li>
<ul style="box-sizing: border-box;">
<li style="box-sizing: border-box;">It automatically opens your website given below.<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj1ByTzRZ81AjUBeWQH1H4mU12UfIxk-cZA67XJXvk09O8bGUS0hcip89Ka8lTvrOvxqYWvZVE83wh_yoKpnQCRC92DB9tR-qvq7ZtK6m2kR_ReF4mJUIEaw6Vv5qmAD_s4EGDy_DihkOdS/s1600/image021.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="172" data-original-width="562" height="97" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj1ByTzRZ81AjUBeWQH1H4mU12UfIxk-cZA67XJXvk09O8bGUS0hcip89Ka8lTvrOvxqYWvZVE83wh_yoKpnQCRC92DB9tR-qvq7ZtK6m2kR_ReF4mJUIEaw6Vv5qmAD_s4EGDy_DihkOdS/s320/image021.png" width="320" /></a></div>
</li>
</ul>
</ul>
<div style="text-align: left;">
<div style="box-sizing: border-box; line-height: 1.5; margin-bottom: 1em; margin-top: 1em;">
<strong style="box-sizing: border-box;">Conclusion</strong></div>
<ul style="box-sizing: border-box;">
<li style="box-sizing: border-box;">Finally, the Application has been created successfully and I will explain how to host it in Azure portal for the Web Application in my next article.</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
Logesh Palanihttp://www.blogger.com/profile/11572235997627400122noreply@blogger.com1tag:blogger.com,1999:blog-4259075105540267115.post-6314090166744107192019-10-04T01:20:00.001+05:302019-12-13T15:08:10.934+05:30Simple Table View in Xamarin iOS<div dir="ltr" style="text-align: left;" trbidi="on">
<br />
<div class="MsoNormal" style="line-height: 150%;">
<b><span style="font-family: "verdana" , sans-serif; mso-bidi-font-family: Verdana; mso-fareast-font-family: Verdana;">Introduction </span></b><span style="font-family: "verdana" , sans-serif; mso-bidi-font-family: Verdana; mso-fareast-font-family: Verdana;"><o:p></o:p></span></div>
<div class="MsoNormal" style="line-height: 150%;">
<span style="font-family: "verdana" , sans-serif; mso-bidi-font-family: Verdana; mso-fareast-font-family: Verdana;">Hello guys, in this blog, I'll explain you how to create a simple table view in Xamarin iOS. Table View is a view for displaying the list of data in the scroll function. But, Xamarin iOS doesn’t have an option to directly give the data. So we need to create a custom table view Source class and configure row cell view or layout.<o:p></o:p></span></div>
<br />
<div class="MsoNormal" style="line-height: 150%;">
<span style="font-family: "verdana" , sans-serif;"><b>iOS output:</b></span><span style="font-family: "verdana" , sans-serif; mso-bidi-font-family: Verdana; mso-fareast-font-family: Verdana;"><o:p></o:p></span><br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjMjt8fkMZvJ6TDLlyJhVdzRYhVqEpqT0sJShtmnianac9eu4VuL7KdtPr6lhLbMf27aiDD0xK0iX_NACsJRyqazmaucsb83JL3g95TMMYpVl9g7cT-R8dcq-1Os1QxfNcuoRbqEQ3MrEaZ/s1600/Table+View+Output.gif" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="1067" data-original-width="600" height="320" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjMjt8fkMZvJ6TDLlyJhVdzRYhVqEpqT0sJShtmnianac9eu4VuL7KdtPr6lhLbMf27aiDD0xK0iX_NACsJRyqazmaucsb83JL3g95TMMYpVl9g7cT-R8dcq-1Os1QxfNcuoRbqEQ3MrEaZ/s320/Table+View+Output.gif" width="179" /></a></div>
<br /></div>
<div class="MsoNormal" style="line-height: 150%;">
<b><span style="font-family: "verdana" , sans-serif; mso-bidi-font-family: Verdana; mso-fareast-font-family: Verdana;"><o:p><br />
</o:p></span></b></div>
<div class="MsoNormal" style="line-height: 150%;">
<b><span style="font-family: "verdana" , sans-serif; mso-bidi-font-family: Verdana; mso-fareast-font-family: Verdana;">Prerequisites</span></b></div>
<div class="MsoNormal" style="line-height: 150%;">
<br />
<ul style="text-align: left;">
<li><span style="font-family: "verdana" , sans-serif; mso-bidi-font-family: Verdana; mso-fareast-font-family: Verdana;">Visual Studio 2017 or Above</span></li>
<li><span style="font-family: "verdana" , sans-serif; mso-bidi-font-family: Verdana; mso-fareast-font-family: Verdana;">XCode 10.0 or Above </span></li>
<li><span style="font-family: "verdana" , sans-serif; mso-bidi-font-family: Verdana; mso-fareast-font-family: Verdana;">IOS Device or Simulator</span></li>
<li><span style="font-family: "verdana" , sans-serif; mso-bidi-font-family: Verdana; mso-fareast-font-family: Verdana;">This Project created in Visual Studio 2019 with Mac Machine </span></li>
</ul>
</div>
<div class="MsoNormal" style="line-height: 150%;">
<br /></div>
<div class="MsoNormal" style="line-height: 150%;">
<b><span style="font-family: "verdana" , sans-serif; mso-bidi-font-family: Verdana; mso-fareast-font-family: Verdana;">Let’s Start<o:p></o:p></span></b><br />
<b><span style="font-family: "verdana" , sans-serif; mso-bidi-font-family: Verdana; mso-fareast-font-family: Verdana;"><br /></span></b></div>
<div class="MsoNormal" style="line-height: 150%;">
<b><span style="font-family: "verdana" , sans-serif; mso-bidi-font-family: Verdana; mso-fareast-font-family: Verdana;">Step 1:<o:p></o:p></span></b><br />
<b><span style="font-family: "verdana" , sans-serif; mso-bidi-font-family: Verdana; mso-fareast-font-family: Verdana;"><br /></span></b></div>
<div class="MsoNormal" style="line-height: 150%;">
<span style="font-family: "verdana" , sans-serif; mso-bidi-font-family: Verdana; mso-fareast-font-family: Verdana;">Open Visual Studio and create Xamarin iOS<b> Single View Application</b> by going to Visual Studio >> New Solution >> In the dialog </span><span style="font-family: "verdana" , sans-serif;">left side</span><span style="font-family: "verdana" , sans-serif;">, select iOS under App >> forward by select Single View Application and click Next.</span><br />
<span style="font-family: "verdana" , sans-serif; mso-bidi-font-family: Verdana; mso-fareast-font-family: Verdana;"><br /></span></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgZL6tk_586CZ2k2WW5hUHSW8o5Gg8NWAVq41x_YphatL-kZJB9XiicBZLbiHo5mpWGTh6QFxgsQbL-mfhbM0en2HkFFUXDBR0abTxAbnHqGT1GQ1M0dHirGg8VMtN1t2gg2U3z_rM7T8GW/s1600/Xamarin+iOS+1.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="655" data-original-width="901" height="232" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgZL6tk_586CZ2k2WW5hUHSW8o5Gg8NWAVq41x_YphatL-kZJB9XiicBZLbiHo5mpWGTh6QFxgsQbL-mfhbM0en2HkFFUXDBR0abTxAbnHqGT1GQ1M0dHirGg8VMtN1t2gg2U3z_rM7T8GW/s320/Xamarin+iOS+1.png" width="320" /></a></div>
<div class="MsoNormal" style="line-height: 150%;">
<span style="font-family: "verdana" , sans-serif; mso-bidi-font-family: Verdana; mso-fareast-font-family: Verdana;"><br />
</span></div>
<div class="MsoNormal" style="line-height: 150%;">
<b><span style="font-family: "verdana" , sans-serif; mso-bidi-font-family: Verdana; mso-fareast-font-family: Verdana;">Step 2:<o:p></o:p></span></b></div>
<div class="MsoNormal" style="line-height: 150%;">
<span style="font-family: "verdana" , sans-serif;">In the next dialog window, give your app name, organization name, and target version, choose devices then click Next.</span><span style="font-family: "verdana" , sans-serif;"> </span><br />
<span style="font-family: "verdana" , sans-serif;"><br /></span></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgP72zWJnR8tjO2EMEUef0ypWvyR0sqhiLt0S7B5rh_1PFtyfi42SCzeerFezpy3VRLz2ozdxtK_2oU7EhO86gDLToCtDCVElKD3cZ-k4xu4BGImHdiUwce-nGNqBy2ekdHA14afviVNuOD/s1600/Xamarin+iOS+2.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="648" data-original-width="903" height="229" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgP72zWJnR8tjO2EMEUef0ypWvyR0sqhiLt0S7B5rh_1PFtyfi42SCzeerFezpy3VRLz2ozdxtK_2oU7EhO86gDLToCtDCVElKD3cZ-k4xu4BGImHdiUwce-nGNqBy2ekdHA14afviVNuOD/s320/Xamarin+iOS+2.png" width="320" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div style="text-align: justify;">
<span style="font-family: "verdana" , sans-serif;">After a few seconds, the project will be created and you get the solution folder structure as shown below.</span></div>
<br />
<div class="separator" style="clear: both; text-align: center;">
</div>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhyqKjG8LWVHVOy0Ag4Z03J_q1CYahZ9V7UK5b3JICmfUelShCfQZjpL6UbsxdPpSVGmJrRb54kV77aXif67qMjL4euOtAKkaNJsH8oseKZom8B0Jio_1ljYhu3pltDVi7Hm12Bc2B9UGmF/s1600/Xamarin+iOS+Project+Structure.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="406" data-original-width="234" height="320" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhyqKjG8LWVHVOy0Ag4Z03J_q1CYahZ9V7UK5b3JICmfUelShCfQZjpL6UbsxdPpSVGmJrRb54kV77aXif67qMjL4euOtAKkaNJsH8oseKZom8B0Jio_1ljYhu3pltDVi7Hm12Bc2B9UGmF/s320/Xamarin+iOS+Project+Structure.png" width="184" /></a></div>
<div>
<span style="font-family: "verdana" , sans-serif;"><br />
</span></div>
<br />
<div class="MsoNormal" style="line-height: 150%;">
<span style="font-family: "verdana" , sans-serif;"><br />
</span></div>
<br />
<div class="MsoNormal" style="line-height: 150%;">
<b><span style="font-family: "verdana" , sans-serif; mso-bidi-font-family: Verdana; mso-fareast-font-family: Verdana;">Step 3:<o:p></o:p></span></b></div>
<div class="MsoNormal" style="line-height: 150%;">
<span style="font-family: "verdana" , sans-serif; mso-bidi-font-family: Verdana; mso-fareast-font-family: Verdana;">Now, open Main.Storyboard by going to Solution Pad >> Main.StoryBoard >> right-click to select Choose iOS Designer or XCode Interface Builder >> Afterwards, the storyboard will be opened. Here, drag and drop UITableView and set Constraints. Top, Bottom, Leading and Trailing Constraints are Zero. </span><br />
<span style="font-family: "verdana" , sans-serif; mso-bidi-font-family: Verdana; mso-fareast-font-family: Verdana;"><br /></span></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhFJnvXv3qHF9S7hnZ7Jp_SYJwvezSNDxqKqm_uvMn1_9mkDPhyphenhyphenq4FZMQDSCfeMQPzvbxlOhjXjnnkO9Jq5AXcEbG2E1rA9wBl37ssTA0RVLTApRYESFlIvnGWL-WmrGbLvxVTOfKwlJvt_/s1600/Xamarin+iOS+Xcode+4.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="575" data-original-width="685" height="268" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhFJnvXv3qHF9S7hnZ7Jp_SYJwvezSNDxqKqm_uvMn1_9mkDPhyphenhyphenq4FZMQDSCfeMQPzvbxlOhjXjnnkO9Jq5AXcEbG2E1rA9wBl37ssTA0RVLTApRYESFlIvnGWL-WmrGbLvxVTOfKwlJvt_/s320/Xamarin+iOS+Xcode+4.png" width="320" /></a></div>
<div class="MsoNormal" style="line-height: 150%;">
<span style="font-family: "verdana" , sans-serif;"><br />
</span></div>
<div class="MsoNormal" style="line-height: 150%;">
<span style="font-family: "verdana" , sans-serif;">Post setting up constraints, you get a screen as shown below.</span></div>
<div class="MsoNormal" style="line-height: 150%;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiafUdGrowUN3gaNgS8LVQ1MR1WeuKpXJrwZfZreemEDpn5NDji0kvIP4Aizg-FRBkJ2BmEdgvDZVD0iQDJxkR8cSmsFcjXaRjxKDKFku9W3CULS-S4d3cRclPZklubqFEcaOKHpypOfIK7/s1600/Xamarin+iOS+5.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="591" data-original-width="409" height="320" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiafUdGrowUN3gaNgS8LVQ1MR1WeuKpXJrwZfZreemEDpn5NDji0kvIP4Aizg-FRBkJ2BmEdgvDZVD0iQDJxkR8cSmsFcjXaRjxKDKFku9W3CULS-S4d3cRclPZklubqFEcaOKHpypOfIK7/s320/Xamarin+iOS+5.png" width="221" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: justify;">
<span style="font-family: "verdana" , sans-serif; text-align: left;">Now , you can set the UITableView identifier is tableviewId and</span><span style="font-family: "verdana" , sans-serif; text-align: left;"> View Controller is ViewController.Cs. </span><span style="font-family: "verdana" , sans-serif; text-align: left;">We should set Source and all other properties for this layouttableviewId. Otherwise, we can’t access this Table View.</span></div>
<div class="separator" style="clear: both; text-align: justify;">
<span style="font-family: "verdana" , sans-serif; text-align: left;"><br /></span></div>
<div class="MsoNormal" style="line-height: 150%;">
<b><span style="font-family: "verdana" , sans-serif; mso-bidi-font-family: Verdana; mso-fareast-font-family: Verdana;">Step 4:</span></b></div>
<div class="MsoNormal" style="line-height: 150%;">
<span style="font-family: "verdana" , sans-serif; mso-bidi-font-family: Verdana; mso-fareast-font-family: Verdana;">Next, Create a New Class named ListTableViewSource.cs. By going to the right-click Solution and Add >> New File >> Class and give name ListTableViewSource.cs. </span><span style="font-family: "verdana" , sans-serif;">This class is Inherited from UITableViewSource and extracted from the Abstract Class. </span><span style="font-family: "verdana" , sans-serif;">In the first “RowsInSection” lost count and Configure “GetCell” method. </span><span style="font-family: "verdana" , sans-serif;">The page code is given below.</span></div>
<div class="MsoNormal" style="line-height: 150%;">
<span style="font-family: "verdana" , sans-serif;"><br />
</span></div>
<!-- HTML generated using hilite.me --><br />
<div style="background: #ffffff; background: #ffffff; border-width: 0.1em 0.1em 0.1em 0.8em; border: solid dodgerblue; overflow: auto; overflow: auto; padding: 0.2em 0.6em; width: auto; width: auto;">
<table><tbody>
<tr><td><pre style="line-height: 125%; margin: 0;">1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16</pre>
</td><td><pre style="line-height: 125%; margin: 0;"><span style="color: #008800; font-weight: bold;">class</span> <span style="color: #bb0066; font-weight: bold;">TableViewSimpleSource</span> : UITableViewSource
{
<span style="color: #008800; font-weight: bold;">private</span> List<<span style="color: #333399; font-weight: bold;">string</span>> listItems = <span style="color: #008800; font-weight: bold;">new</span> List<<span style="color: #333399; font-weight: bold;">string</span>>() { <span style="background-color: #fff0f0;">"List Item"</span>, <span style="background-color: #fff0f0;">"List Item"</span>, <span style="background-color: #fff0f0;">"List Item"</span>, <span style="background-color: #fff0f0;">"List Item"</span>, <span style="background-color: #fff0f0;">"List Item"</span>, <span style="background-color: #fff0f0;">"List Item"</span>, <span style="background-color: #fff0f0;">"List Item"</span>, <span style="background-color: #fff0f0;">"List Item"</span>, <span style="background-color: #fff0f0;">"List Item"</span>, <span style="background-color: #fff0f0;">"List Item"</span>, <span style="background-color: #fff0f0;">"List Item"</span>, <span style="background-color: #fff0f0;">"List Item"</span>, <span style="background-color: #fff0f0;">"List Item"</span>, <span style="background-color: #fff0f0;">"List Item"</span>, <span style="background-color: #fff0f0;">"List Item"</span>, <span style="background-color: #fff0f0;">"List Item"</span> };
<span style="color: #008800; font-weight: bold;">public</span> <span style="color: #008800; font-weight: bold;">override</span> UITableViewCell <span style="color: #0066bb; font-weight: bold;">GetCell</span>(UITableView tableView, NSIndexPath indexPath)
{
<span style="color: #333399; font-weight: bold;">var</span> cell = <span style="color: #008800; font-weight: bold;">new</span> UITableViewCell(CGRect.Empty);
cell.TextLabel.Text = listItems[indexPath.Row];
<span style="color: #008800; font-weight: bold;">return</span> cell;
}
<span style="color: #008800; font-weight: bold;">public</span> <span style="color: #008800; font-weight: bold;">override</span> nint <span style="color: #0066bb; font-weight: bold;">RowsInSection</span>(UITableView tableview, nint section)
{
<span style="color: #008800; font-weight: bold;">return</span> listItems.Count;
}
}
</pre>
</td></tr>
</tbody></table>
</div>
<br />
<div class="MsoNormal" style="line-height: 150%;">
<b><span style="background: white; color: black; font-family: "verdana" , sans-serif;">Step 5:</span></b></div>
<div class="MsoNormal" style="line-height: 150%;">
<span style="color: black; font-family: "verdana" , sans-serif; mso-bidi-font-family: Verdana; mso-fareast-font-family: Verdana; mso-themecolor: text1;">Now, open ViewController.cs file and set the Table View Source Class to Table View. The Code is given below.</span><br />
<span style="color: black; font-family: "verdana" , sans-serif; mso-bidi-font-family: Verdana; mso-fareast-font-family: Verdana; mso-themecolor: text1;"><br /></span></div>
<!-- HTML generated using hilite.me --><br />
<div style="background: #ffffff; background: #ffffff; border-width: 0.1em 0.1em 0.1em 0.8em; border: solid dodgerblue; overflow: auto; overflow: auto; padding: 0.2em 0.6em; width: auto; width: auto;">
<table><tbody>
<tr><td><pre style="line-height: 125%; margin: 0;">1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29</pre>
</td><td><pre style="line-height: 125%; margin: 0;"><span style="color: #008800; font-weight: bold;">using</span> <span style="color: #0e84b5; font-weight: bold;">System</span>;
<span style="color: #008800; font-weight: bold;">using</span> <span style="color: #0e84b5; font-weight: bold;">System.Collections.Generic</span>;
<span style="color: #008800; font-weight: bold;">using</span> <span style="color: #0e84b5; font-weight: bold;">CoreGraphics</span>;
<span style="color: #008800; font-weight: bold;">using</span> <span style="color: #0e84b5; font-weight: bold;">Foundation</span>;
<span style="color: #008800; font-weight: bold;">using</span> <span style="color: #0e84b5; font-weight: bold;">UIKit</span>;
<span style="color: #008800; font-weight: bold;">namespace</span> <span style="color: #0e84b5; font-weight: bold;">TableViewDemo</span>
{
<span style="color: #008800; font-weight: bold;">public</span> <span style="color: #008800; font-weight: bold;">partial</span> <span style="color: #008800; font-weight: bold;">class</span> <span style="color: #bb0066; font-weight: bold;">ViewController</span> : UIViewController
{
<span style="color: #008800; font-weight: bold;">public</span> <span style="color: #0066bb; font-weight: bold;">ViewController</span>(IntPtr handle) : <span style="color: #008800; font-weight: bold;">base</span>(handle)
{
}
<span style="color: #008800; font-weight: bold;">public</span> <span style="color: #008800; font-weight: bold;">override</span> <span style="color: #008800; font-weight: bold;">void</span> <span style="color: #0066bb; font-weight: bold;">ViewDidLoad</span>()
{
<span style="color: #008800; font-weight: bold;">base</span>.ViewDidLoad();
tableviewId.Source = <span style="color: #008800; font-weight: bold;">new</span> TableViewSimpleSource();
<span style="color: #888888;">// Perform any additional setup after loading the view, typically from a nib.</span>
}
<span style="color: #008800; font-weight: bold;">public</span> <span style="color: #008800; font-weight: bold;">override</span> <span style="color: #008800; font-weight: bold;">void</span> <span style="color: #0066bb; font-weight: bold;">DidReceiveMemoryWarning</span>()
{
<span style="color: #008800; font-weight: bold;">base</span>.DidReceiveMemoryWarning();
<span style="color: #888888;">// Release any cached data, images, etc that aren't in use.</span>
}
}
}
</pre>
</td></tr>
</tbody></table>
</div>
<br />
<br />
<div class="MsoNormal" style="line-height: 150%;">
<b><span style="color: black; font-family: "verdana" , sans-serif; mso-bidi-font-family: Verdana; mso-fareast-font-family: Verdana; mso-themecolor: text1;">Step 6:<o:p></o:p></span></b></div>
<div class="MsoNormal" style="line-height: 150%;">
<span style="color: black; font-family: "verdana" , sans-serif; mso-bidi-font-family: Verdana; mso-fareast-font-family: Verdana; mso-themecolor: text1;">Now, run your Xamarin iOS application and we get output like below.<o:p></o:p></span><br />
<span style="color: black; font-family: "verdana" , sans-serif; mso-bidi-font-family: Verdana; mso-fareast-font-family: Verdana; mso-themecolor: text1;"><br /></span>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgtPHh2ScDEKKmMbExMbJcNAmoX1YyQs2XwXKXP3Wtr2sJqWIcRGVtcV3M4734a01Lhquru7Cn7qpfxfZa1UE24Dz9924HUpCToGUyb04Y8HnT66CYN-QvxCansEc6JaYFveeArEYQ32u9Q/s1600/Table+View+Output.gif" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="1067" data-original-width="600" height="320" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgtPHh2ScDEKKmMbExMbJcNAmoX1YyQs2XwXKXP3Wtr2sJqWIcRGVtcV3M4734a01Lhquru7Cn7qpfxfZa1UE24Dz9924HUpCToGUyb04Y8HnT66CYN-QvxCansEc6JaYFveeArEYQ32u9Q/s320/Table+View+Output.gif" width="179" /></a></div>
<span style="color: black; font-family: "verdana" , sans-serif; mso-bidi-font-family: Verdana; mso-fareast-font-family: Verdana; mso-themecolor: text1;"><br /></span></div>
<div class="MsoNormal" style="line-height: 150%;">
<br /></div>
<div class="MsoNormal" style="line-height: 150%;">
<span style="color: black; font-family: "verdana" , sans-serif; mso-bidi-font-family: Verdana; mso-fareast-font-family: Verdana; mso-themecolor: text1;">Get Source From <a href="https://github.com/logeshpalani98/XamariniOS-TableView">Github</a><o:p></o:p></span></div>
<div class="MsoNormal" style="line-height: 150%;">
<b><span style="color: black; font-family: "verdana" , sans-serif; mso-bidi-font-family: Verdana; mso-fareast-font-family: Verdana; mso-themecolor: text1;">Feedback: </span></b><span style="background: white; color: black; font-family: "verdana" , sans-serif;">Thank you for reading this, if you have any </span><span class="ui"><span style="color: black; font-family: "verdana" , sans-serif; mso-bidi-font-family: Arial; mso-themecolor: text1;"><span id="spans0e0" style="-webkit-text-stroke-width: 0px; cursor: pointer; font-variant-caps: normal; font-variant-ligatures: normal; orphans: 2; text-align: start; widows: 2; word-spacing: 0px;" tooltip="{<b>suggestions, feel</b>}: Accept comma addition<br/> <i>replaces</i><br/> {<b><s style='color:Red;'>suggestions feel</s></b>}: Undo comma addition">suggestions<u>,</u> feel</span></span></span><span style="background: white; color: black; font-family: "verdana" , sans-serif;"><span style="-webkit-text-stroke-width: 0px; float: none; font-variant-caps: normal; font-variant-ligatures: normal; orphans: 2; text-align: start; text-decoration-color: initial; text-decoration-style: initial; widows: 2; word-spacing: 0px;"> free to write in the comment section.</span></span><span style="color: black; font-family: "verdana" , sans-serif; mso-bidi-font-family: Verdana; mso-fareast-font-family: Verdana; mso-themecolor: text1;"><o:p></o:p></span></div>
<br /></div>
Logesh Palanihttp://www.blogger.com/profile/11572235997627400122noreply@blogger.com0tag:blogger.com,1999:blog-4259075105540267115.post-36152247209274637422019-10-02T00:20:00.000+05:302019-10-04T01:23:14.054+05:30Custom Popup Dialog in Xamarin Android<div dir="ltr" style="text-align: left;" trbidi="on">
<div class="OutlineElement Ltr BCX0 SCXW168466292" style="-webkit-tap-highlight-color: transparent; -webkit-user-drag: none; background-color: white; clear: both; cursor: text; direction: ltr; font-family: "Segoe UI", "Segoe UI Web", Arial, Verdana, sans-serif; font-size: 12px; margin: 0px; overflow: visible; padding: 0px; position: relative; user-select: text;">
<div class="OutlineElement Ltr BCX0 SCXW168466292" style="-webkit-tap-highlight-color: transparent; -webkit-user-drag: none; clear: both; cursor: text; direction: ltr; margin: 0px; overflow: visible; padding: 0px; position: relative; user-select: text;">
<div class="Paragraph BCX0 SCXW168466292" lang="EN-US" paraeid="{1bb6c1a5-75c4-43ff-acb4-1184e129306f}{12}" paraid="360127192" style="-webkit-tap-highlight-color: transparent; -webkit-user-drag: none; background-color: transparent; color: windowtext; margin-left: 48px; overflow-wrap: break-word; padding: 0px; user-select: text; vertical-align: baseline;" xml:lang="EN-US">
<br /></div>
</div>
<div class="OutlineElement Ltr BCX0 SCXW168466292" style="-webkit-tap-highlight-color: transparent; -webkit-user-drag: none; clear: both; cursor: text; direction: ltr; margin: 0px; overflow: visible; padding: 0px; position: relative; user-select: text;">
<div class="Paragraph BCX0 SCXW168466292" lang="EN-US" paraeid="{1bb6c1a5-75c4-43ff-acb4-1184e129306f}{14}" paraid="940848355" style="-webkit-tap-highlight-color: transparent; -webkit-user-drag: none; background-color: transparent; color: windowtext; overflow-wrap: break-word; padding: 0px; user-select: text; vertical-align: baseline;" xml:lang="EN-US">
<b><span class="TextRun BCX0 SCXW168466292" data-contrast="auto" lang="EN-US" style="font-family: "verdana" , "verdana_msfontservice" , sans-serif; font-size: 11pt; line-height: 27px; margin: 0px; padding: 0px;" xml:lang="EN-US">Introduction:</span></b><br />
<span class="TextRun BCX0 SCXW256049730" data-contrast="auto" lang="EN-US" style="background-color: transparent; font-family: "verdana" , "verdana_msfontservice" , sans-serif; font-size: 11pt; line-height: 27px; margin: 0px; padding: 0px;" xml:lang="EN-US"><span class="NormalTextRun BCX0 SCXW256049730" style="-webkit-tap-highlight-color: transparent; -webkit-user-drag: none; background-color: inherit; margin: 0px; padding: 0px; user-select: text;"> In this article, we go step by step to build a custom popup dialog for Xamarin android. The popup dialog is just a window that prompts to enter additional details. Where we can use the popup dialog means, in some cases, we want some decision from the user without changing the activity or screen.</span></span><span class="EOP BCX0 SCXW256049730" data-ccp-props="{"201341983":0,"335559685":720,"335559739":160,"335559740":360}" style="background-color: transparent; font-family: "verdana" , "verdana_msfontservice" , sans-serif; font-size: 11pt; line-height: 27px; margin: 0px; padding: 0px;"> </span></div>
<div class="Paragraph BCX0 SCXW168466292" lang="EN-US" paraeid="{1bb6c1a5-75c4-43ff-acb4-1184e129306f}{14}" paraid="940848355" style="-webkit-tap-highlight-color: transparent; -webkit-user-drag: none; background-color: transparent; color: windowtext; overflow-wrap: break-word; padding: 0px; user-select: text; vertical-align: baseline;" xml:lang="EN-US">
<span class="EOP BCX0 SCXW168466292" data-ccp-props="{"201341983":0,"335559739":160,"335559740":360}" style="font-family: "verdana" , "verdana_msfontservice" , sans-serif; font-size: 11pt; line-height: 27px; margin: 0px; padding: 0px;"><span class="EOP BCX0 SCXW256049730" data-ccp-props="{"201341983":0,"335559685":720,"335559739":160,"335559740":360}" style="-webkit-tap-highlight-color: transparent; -webkit-user-drag: none; font-size: 11pt; line-height: 27px; margin: 0px; padding: 0px; user-select: text;"><br />
</span></span></div>
</div>
<div class="OutlineElement Ltr BCX0 SCXW168466292" style="-webkit-tap-highlight-color: transparent; -webkit-user-drag: none; clear: both; cursor: text; direction: ltr; margin: 0px; overflow: visible; padding: 0px; position: relative; user-select: text;">
<div class="Paragraph BCX0 SCXW168466292" lang="EN-US" paraeid="{c924be8a-7c34-448a-9e8e-7ed63445c12d}{184}" paraid="513744199" style="-webkit-tap-highlight-color: transparent; -webkit-user-drag: none; background-color: transparent; color: windowtext; overflow-wrap: break-word; padding: 0px; user-select: text; vertical-align: baseline;" xml:lang="EN-US">
<span class="TextRun BCX0 SCXW168466292" data-contrast="auto" lang="EN-US" style="font-family: "verdana" , "verdana_msfontservice" , sans-serif; font-size: 11pt; line-height: 27px; margin: 0px; padding: 0px;" xml:lang="EN-US"><b>Output:</b></span><br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhBQWx4KkR1bFCKVQmKJpvkWJtwANOW1AJpVizDOOwe7e_tsWqU3kAHRhghyphenhyphenzBkW17sTKoREnnm21KEIIpmecGIxZmZ_LO1lDhHi7cW-fjzq9ZKpiV9bz1csM9vOrLAkZl0B_H6As16vFmQ/s1600/Output.gif" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="1067" data-original-width="600" height="320" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhBQWx4KkR1bFCKVQmKJpvkWJtwANOW1AJpVizDOOwe7e_tsWqU3kAHRhghyphenhyphenzBkW17sTKoREnnm21KEIIpmecGIxZmZ_LO1lDhHi7cW-fjzq9ZKpiV9bz1csM9vOrLAkZl0B_H6As16vFmQ/s320/Output.gif" width="179" /></a></div>
<span class="TextRun BCX0 SCXW168466292" data-contrast="auto" lang="EN-US" style="background-color: transparent; font-family: "verdana" , "verdana_msfontservice" , sans-serif; font-size: 11pt; line-height: 27px; margin: 0px; padding: 0px;" xml:lang="EN-US"><br />
</span> <span class="TextRun BCX0 SCXW168466292" data-contrast="auto" lang="EN-US" style="background-color: transparent; font-family: "verdana" , "verdana_msfontservice" , sans-serif; font-size: 11pt; line-height: 27px; margin: 0px; padding: 0px;" xml:lang="EN-US"> </span><span class="EOP BCX0 SCXW168466292" data-ccp-props="{"201341983":0,"335559739":160,"335559740":360}" style="background-color: transparent; font-family: "verdana" , "verdana_msfontservice" , sans-serif; font-size: 11pt; line-height: 27px; margin: 0px; padding: 0px;"> </span></div>
</div>
<div class="OutlineElement Ltr BCX0 SCXW168466292" style="-webkit-tap-highlight-color: transparent; -webkit-user-drag: none; clear: both; cursor: text; direction: ltr; margin: 0px; overflow: visible; padding: 0px; position: relative; user-select: text;">
<div class="Paragraph BCX0 SCXW168466292" lang="EN-US" paraeid="{c924be8a-7c34-448a-9e8e-7ed63445c12d}{196}" paraid="1193782852" style="-webkit-tap-highlight-color: transparent; -webkit-user-drag: none; background-color: transparent; color: windowtext; overflow-wrap: break-word; padding: 0px; user-select: text; vertical-align: baseline;" xml:lang="EN-US">
<b><span class="TextRun BCX0 SCXW168466292" data-contrast="auto" lang="EN-US" style="font-family: "verdana" , "verdana_msfontservice" , sans-serif; font-size: 11pt; line-height: 27px; margin: 0px; padding: 0px;" xml:lang="EN-US">Let start; </span><span class="EOP BCX0 SCXW168466292" data-ccp-props="{"201341983":0,"335559739":160,"335559740":360}" style="font-family: "verdana" , "verdana_msfontservice" , sans-serif; font-size: 11pt; line-height: 27px; margin: 0px; padding: 0px;"> </span></b></div>
</div>
<div class="OutlineElement Ltr BCX0 SCXW168466292" style="-webkit-tap-highlight-color: transparent; -webkit-user-drag: none; clear: both; cursor: text; direction: ltr; margin: 0px; overflow: visible; padding: 0px; position: relative; user-select: text;">
<div class="Paragraph BCX0 SCXW168466292" lang="EN-US" paraeid="{c924be8a-7c34-448a-9e8e-7ed63445c12d}{202}" paraid="1095265120" style="-webkit-tap-highlight-color: transparent; -webkit-user-drag: none; background-color: transparent; color: windowtext; overflow-wrap: break-word; padding: 0px; user-select: text; vertical-align: baseline;" xml:lang="EN-US">
<b><span class="TextRun BCX0 SCXW168466292" data-contrast="auto" lang="EN-US" style="font-family: "verdana" , "verdana_msfontservice" , sans-serif; font-size: 11pt; line-height: 27px; margin: 0px; padding: 0px;" xml:lang="EN-US">Step 1: </span><span class="EOP BCX0 SCXW168466292" data-ccp-props="{"201341983":0,"335559739":160,"335559740":360}" style="font-family: "verdana" , "verdana_msfontservice" , sans-serif; font-size: 11pt; line-height: 27px; margin: 0px; padding: 0px;"> </span></b></div>
</div>
<div class="OutlineElement Ltr BCX0 SCXW168466292" style="-webkit-tap-highlight-color: transparent; -webkit-user-drag: none; clear: both; cursor: text; direction: ltr; margin: 0px; overflow: visible; padding: 0px; position: relative; user-select: text;">
<div class="Paragraph BCX0 SCXW168466292" lang="EN-US" paraeid="{c3b9ed3b-5a77-4f38-a5d3-daf78b048a68}{216}" paraid="299168402" style="-webkit-tap-highlight-color: transparent; -webkit-user-drag: none; background-color: transparent; color: windowtext; overflow-wrap: break-word; padding: 0px; user-select: text; vertical-align: baseline;" xml:lang="EN-US">
<span class="TextRun BCX0 SCXW168466292" data-contrast="auto" lang="EN-US" style="font-family: "verdana" , "verdana_msfontservice" , sans-serif; font-size: 11pt; line-height: 27px; margin: 0px; padding: 0px;" xml:lang="EN-US"> First, create a simple Xamarin Android Application by going to New >> Select Android >> followed by clicking Next.</span><span class="TextRun BCX0 SCXW168466292" data-contrast="auto" lang="EN-US" style="font-family: "verdana" , "verdana_msfontservice" , sans-serif; font-size: 11pt; line-height: 27px; margin: 0px; padding: 0px;" xml:lang="EN-US"> </span><span class="EOP BCX0 SCXW168466292" data-ccp-props="{"201341983":0,"335559739":160,"335559740":360}" style="font-family: "verdana" , "verdana_msfontservice" , sans-serif; font-size: 11pt; line-height: 27px; margin: 0px; padding: 0px;"> </span><br />
<span class="EOP BCX0 SCXW168466292" data-ccp-props="{"201341983":0,"335559739":160,"335559740":360}" style="font-family: "verdana" , "verdana_msfontservice" , sans-serif; font-size: 11pt; line-height: 27px; margin: 0px; padding: 0px;"><br />
</span></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh7Cc1t37EsO-UfgeK3AkWAJ2jnp9RHO54gggqHiGGPrA5_YCQ8vWxPiuzXzpJQkleuKNwEkW68hIZqQytPNIDbgP_76T2yiv5Pci6qeQB-85ERSfWx26qvX0F7iRKM2Ev9grlBs85Jbddp/s1600/Project+creation.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="436" data-original-width="600" height="232" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh7Cc1t37EsO-UfgeK3AkWAJ2jnp9RHO54gggqHiGGPrA5_YCQ8vWxPiuzXzpJQkleuKNwEkW68hIZqQytPNIDbgP_76T2yiv5Pci6qeQB-85ERSfWx26qvX0F7iRKM2Ev9grlBs85Jbddp/s320/Project+creation.jpg" width="320" /></a></div>
<div class="Paragraph BCX0 SCXW168466292" lang="EN-US" paraeid="{c3b9ed3b-5a77-4f38-a5d3-daf78b048a68}{216}" paraid="299168402" style="-webkit-tap-highlight-color: transparent; -webkit-user-drag: none; background-color: transparent; color: windowtext; overflow-wrap: break-word; padding: 0px; user-select: text; vertical-align: baseline;" xml:lang="EN-US">
<span class="EOP BCX0 SCXW168466292" data-ccp-props="{"201341983":0,"335559739":160,"335559740":360}" style="font-family: "verdana" , "verdana_msfontservice" , sans-serif; font-size: 11pt; line-height: 27px; margin: 0px; padding: 0px;"><br />
</span></div>
</div>
<div class="OutlineElement Ltr BCX0 SCXW168466292" style="-webkit-tap-highlight-color: transparent; -webkit-user-drag: none; clear: both; cursor: text; direction: ltr; margin: 0px; overflow: visible; padding: 0px; position: relative; user-select: text;">
<div class="Paragraph BCX0 SCXW168466292" lang="EN-US" paraeid="{c924be8a-7c34-448a-9e8e-7ed63445c12d}{220}" paraid="241710086" style="-webkit-tap-highlight-color: transparent; -webkit-user-drag: none; background-color: transparent; color: windowtext; overflow-wrap: break-word; padding: 0px; user-select: text; vertical-align: baseline;" xml:lang="EN-US">
<span class="TextRun BCX0 SCXW168466292" data-contrast="auto" lang="EN-US" style="font-family: "verdana" , "verdana_msfontservice" , sans-serif; font-size: 11pt; line-height: 27px; margin: 0px; padding: 0px;" xml:lang="EN-US"> </span><span class="EOP BCX0 SCXW168466292" data-ccp-props="{"201341983":0,"335559739":160,"335559740":360}" style="font-family: "verdana" , "verdana_msfontservice" , sans-serif; font-size: 11pt; line-height: 27px; margin: 0px; padding: 0px;"> </span></div>
</div>
<div class="OutlineElement Ltr BCX0 SCXW168466292" style="-webkit-tap-highlight-color: transparent; -webkit-user-drag: none; clear: both; cursor: text; direction: ltr; margin: 0px; overflow: visible; padding: 0px; position: relative; user-select: text;">
<div class="Paragraph BCX0 SCXW168466292" lang="EN-US" paraeid="{c924be8a-7c34-448a-9e8e-7ed63445c12d}{226}" paraid="240731659" style="-webkit-tap-highlight-color: transparent; -webkit-user-drag: none; background-color: transparent; color: windowtext; overflow-wrap: break-word; padding: 0px; user-select: text; vertical-align: baseline;" xml:lang="EN-US">
<b><span class="TextRun BCX0 SCXW168466292" data-contrast="auto" lang="EN-US" style="font-family: "verdana" , "verdana_msfontservice" , sans-serif; font-size: 11pt; line-height: 27px; margin: 0px; padding: 0px;" xml:lang="EN-US">Step 2: </span><span class="EOP BCX0 SCXW168466292" data-ccp-props="{"201341983":0,"335559739":160,"335559740":360}" style="font-family: "verdana" , "verdana_msfontservice" , sans-serif; font-size: 11pt; line-height: 27px; margin: 0px; padding: 0px;"> </span></b></div>
</div>
<div class="OutlineElement Ltr BCX0 SCXW168466292" style="-webkit-tap-highlight-color: transparent; -webkit-user-drag: none; clear: both; cursor: text; direction: ltr; margin: 0px; overflow: visible; padding: 0px; position: relative; user-select: text;">
<div class="Paragraph BCX0 SCXW168466292" lang="EN-US" paraeid="{c924be8a-7c34-448a-9e8e-7ed63445c12d}{232}" paraid="1456890449" style="-webkit-tap-highlight-color: transparent; -webkit-user-drag: none; background-color: transparent; color: windowtext; overflow-wrap: break-word; padding: 0px; user-select: text; vertical-align: baseline;" xml:lang="EN-US">
<span class="TextRun BCX0 SCXW168466292" data-contrast="auto" lang="EN-US" style="font-family: "verdana" , "verdana_msfontservice" , sans-serif; font-size: 11pt; line-height: 27px; margin: 0px; padding: 0px;" xml:lang="EN-US"> Here gives the project name, organization name, app compatibility, and app theme, then click Create project. </span><span class="EOP BCX0 SCXW168466292" data-ccp-props="{"201341983":0,"335559739":160,"335559740":360}" style="font-family: "verdana" , "verdana_msfontservice" , sans-serif; font-size: 11pt; line-height: 27px; margin: 0px; padding: 0px;"> </span></div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiNuJcCaRhIs3pdSF1VMlgBcCjOMpyi6um9yxxEP87ExueZGRBDN_lddD_SoTkpUcFvHz84j7oOhXCwceEML0dbiW4MMm3Z03VzeXnrH5clyRtCGYL7HbxfIwRV8XcBGVaPFtdlaf20eHNZ/s1600/Screen+Shot+2019-08-09+at+7.17.08+PM.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="656" data-original-width="909" height="230" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiNuJcCaRhIs3pdSF1VMlgBcCjOMpyi6um9yxxEP87ExueZGRBDN_lddD_SoTkpUcFvHz84j7oOhXCwceEML0dbiW4MMm3Z03VzeXnrH5clyRtCGYL7HbxfIwRV8XcBGVaPFtdlaf20eHNZ/s320/Screen+Shot+2019-08-09+at+7.17.08+PM.png" width="320" /></a></div>
<div class="Paragraph BCX0 SCXW168466292" lang="EN-US" paraeid="{c924be8a-7c34-448a-9e8e-7ed63445c12d}{232}" paraid="1456890449" style="-webkit-tap-highlight-color: transparent; -webkit-user-drag: none; background-color: transparent; color: windowtext; overflow-wrap: break-word; padding: 0px; user-select: text; vertical-align: baseline;" xml:lang="EN-US">
<span class="EOP BCX0 SCXW168466292" data-ccp-props="{"201341983":0,"335559739":160,"335559740":360}" style="font-family: "verdana" , "verdana_msfontservice" , sans-serif; font-size: 11pt; line-height: 27px; margin: 0px; padding: 0px;"><br />
</span></div>
</div>
<div class="OutlineElement Ltr BCX0 SCXW168466292" style="-webkit-tap-highlight-color: transparent; -webkit-user-drag: none; clear: both; cursor: text; direction: ltr; margin: 0px; overflow: visible; padding: 0px; position: relative; user-select: text;">
<div class="Paragraph BCX0 SCXW168466292" lang="EN-US" paraeid="{c924be8a-7c34-448a-9e8e-7ed63445c12d}{238}" paraid="1973491379" style="-webkit-tap-highlight-color: transparent; -webkit-user-drag: none; background-color: transparent; color: windowtext; overflow-wrap: break-word; padding: 0px; user-select: text; vertical-align: baseline;" xml:lang="EN-US">
<span class="TextRun BCX0 SCXW168466292" data-contrast="auto" lang="EN-US" style="font-family: "verdana" , "verdana_msfontservice" , sans-serif; font-size: 11pt; line-height: 27px; margin: 0px; padding: 0px;" xml:lang="EN-US"> </span><span class="EOP BCX0 SCXW168466292" data-ccp-props="{"201341983":0,"335559739":160,"335559740":360}" style="font-family: "verdana" , "verdana_msfontservice" , sans-serif; font-size: 11pt; line-height: 27px; margin: 0px; padding: 0px;"> </span></div>
</div>
<div class="OutlineElement Ltr BCX0 SCXW168466292" style="-webkit-tap-highlight-color: transparent; -webkit-user-drag: none; clear: both; cursor: text; direction: ltr; margin: 0px; overflow: visible; padding: 0px; position: relative; user-select: text;">
<div class="Paragraph BCX0 SCXW168466292" lang="EN-US" paraeid="{c924be8a-7c34-448a-9e8e-7ed63445c12d}{244}" paraid="1632990112" style="-webkit-tap-highlight-color: transparent; -webkit-user-drag: none; background-color: transparent; color: windowtext; overflow-wrap: break-word; padding: 0px; user-select: text; vertical-align: baseline;" xml:lang="EN-US">
<b><span class="TextRun BCX0 SCXW168466292" data-contrast="auto" lang="EN-US" style="font-family: "verdana" , "verdana_msfontservice" , sans-serif; font-size: 11pt; line-height: 27px; margin: 0px; padding: 0px;" xml:lang="EN-US">Step 3: </span><span class="EOP BCX0 SCXW168466292" data-ccp-props="{"201341983":0,"335559739":160,"335559740":360}" style="font-family: "verdana" , "verdana_msfontservice" , sans-serif; font-size: 11pt; line-height: 27px; margin: 0px; padding: 0px;"> </span></b></div>
</div>
<div class="OutlineElement Ltr BCX0 SCXW168466292" style="-webkit-tap-highlight-color: transparent; -webkit-user-drag: none; clear: both; cursor: text; direction: ltr; margin: 0px; overflow: visible; padding: 0px; position: relative; user-select: text;">
<div class="Paragraph BCX0 SCXW168466292" lang="EN-US" paraeid="{c924be8a-7c34-448a-9e8e-7ed63445c12d}{250}" paraid="1810415955" style="-webkit-tap-highlight-color: transparent; -webkit-user-drag: none; background-color: transparent; color: windowtext; overflow-wrap: break-word; padding: 0px; user-select: text; vertical-align: baseline;" xml:lang="EN-US">
<span class="TextRun BCX0 SCXW168466292" data-contrast="auto" lang="EN-US" style="font-family: "verdana" , "verdana_msfontservice" , sans-serif; font-size: 11pt; line-height: 27px; margin: 0px; padding: 0px;" xml:lang="EN-US">After the project creation, double click to open Main.</span><span class="TextRun BCX0 SCXW168466292" data-contrast="auto" lang="EN-US" style="font-family: "verdana" , "verdana_msfontservice" , sans-serif; font-size: 11pt; line-height: 27px; margin: 0px; padding: 0px;" xml:lang="EN-US"><span class="SpellingError BCX0 SCXW168466292" style="-webkit-tap-highlight-color: transparent; -webkit-user-drag: none; background-color: inherit; background-image: url("data:image/gif; background-position: left bottom; background-repeat: repeat-x; border-bottom: 1px solid transparent; margin: 0px; padding: 0px; user-select: text;">axml</span></span><span class="TextRun BCX0 SCXW168466292" data-contrast="auto" lang="EN-US" style="font-family: "verdana" , "verdana_msfontservice" , sans-serif; font-size: 11pt; line-height: 27px; margin: 0px; padding: 0px;" xml:lang="EN-US">. For that, Solution Explorer >> expand the Resources folder and Layout folder, double click to open Main.axml. Now, drag and drop to place one button, this page code given below. </span><span class="EOP BCX0 SCXW168466292" data-ccp-props="{"201341983":0,"335559739":160,"335559740":360}" style="font-family: "verdana" , "verdana_msfontservice" , sans-serif; font-size: 11pt; line-height: 27px; margin: 0px; padding: 0px;"> </span></div>
<div class="Paragraph BCX0 SCXW168466292" lang="EN-US" paraeid="{c924be8a-7c34-448a-9e8e-7ed63445c12d}{250}" paraid="1810415955" style="-webkit-tap-highlight-color: transparent; -webkit-user-drag: none; background-color: transparent; color: windowtext; overflow-wrap: break-word; padding: 0px; user-select: text; vertical-align: baseline;" xml:lang="EN-US">
<br /></div>
</div>
<!-- HTML generated using hilite.me --><br />
<div style="background: #ffffff; background: #ffffff; border-width: 0.1em 0.1em 0.1em 0.8em; border: solid dodgerblue; overflow: auto; overflow: auto; padding: 0.2em 0.6em; width: auto; width: auto;">
<table><tbody>
<tr><td><pre style="line-height: 125%; margin: 0;">1
2
3
4
5
6
7
8
9
10
11
12
13</pre>
</td><td><pre style="line-height: 125%; margin: 0;"><span style="color: #557799;"><?xml version="1.0" encoding="utf-8"?></span>
<span style="color: #007700;"><LinearLayout</span> <span style="color: #0000cc;">xmlns:android=</span><span style="background-color: #fff0f0;">"http://schemas.android.com/apk/res/android"</span>
<span style="color: #0000cc;">android:orientation=</span><span style="background-color: #fff0f0;">"vertical"</span>
<span style="color: #0000cc;">android:layout_width=</span><span style="background-color: #fff0f0;">"match_parent"</span>
<span style="color: #0000cc;">android:layout_height=</span><span style="background-color: #fff0f0;">"match_parent"</span><span style="color: #007700;">></span>
<span style="color: #007700;"><Button</span>
<span style="color: #0000cc;">android:text=</span><span style="background-color: #fff0f0;">"Show Popup"</span>
<span style="color: #0000cc;">android:layout_width=</span><span style="background-color: #fff0f0;">"match_parent"</span>
<span style="color: #0000cc;">android:layout_height=</span><span style="background-color: #fff0f0;">"wrap_content"</span>
<span style="color: #0000cc;">android:textAllCaps=</span><span style="background-color: #fff0f0;">"false"</span>
<span style="color: #0000cc;">android:id=</span><span style="background-color: #fff0f0;">"@+id/btnPopup"</span> <span style="color: #007700;">/></span>
<span style="color: #007700;"></LinearLayout></span>
</pre>
</td></tr>
</tbody></table>
</div>
<br />
<div class="OutlineElement Ltr BCX0 SCXW168466292" style="-webkit-tap-highlight-color: transparent; -webkit-user-drag: none; clear: both; cursor: text; direction: ltr; margin: 0px; overflow: visible; padding: 0px; position: relative; user-select: text;">
<div class="Paragraph BCX0 SCXW168466292" lang="EN-US" paraeid="{2f0f007c-98f6-4362-962d-85c30c3da585}{7}" paraid="1206935017" style="-webkit-tap-highlight-color: transparent; -webkit-user-drag: none; background-color: transparent; color: windowtext; overflow-wrap: break-word; padding: 0px; user-select: text; vertical-align: baseline;" xml:lang="EN-US">
<b><span class="TextRun BCX0 SCXW168466292" data-contrast="auto" lang="EN-US" style="font-family: "verdana" , "verdana_msfontservice" , sans-serif; font-size: 11pt; line-height: 27px; margin: 0px; padding: 0px;" xml:lang="EN-US">Step 4: </span><span class="EOP BCX0 SCXW168466292" data-ccp-props="{"201341983":0,"335559739":160,"335559740":360}" style="font-family: "verdana" , "verdana_msfontservice" , sans-serif; font-size: 11pt; line-height: 27px; margin: 0px; padding: 0px;"> </span></b></div>
</div>
<div class="OutlineElement Ltr BCX0 SCXW168466292" style="-webkit-tap-highlight-color: transparent; -webkit-user-drag: none; clear: both; cursor: text; direction: ltr; margin: 0px; overflow: visible; padding: 0px; position: relative; user-select: text;">
<div class="Paragraph BCX0 SCXW168466292" lang="EN-US" paraeid="{2f0f007c-98f6-4362-962d-85c30c3da585}{13}" paraid="816692423" style="-webkit-tap-highlight-color: transparent; -webkit-user-drag: none; background-color: transparent; color: windowtext; overflow-wrap: break-word; padding: 0px; user-select: text; vertical-align: baseline;" xml:lang="EN-US">
<span class="TextRun BCX0 SCXW168466292" data-contrast="auto" lang="EN-US" style="font-family: "verdana" , "verdana_msfontservice" , sans-serif; font-size: 11pt; line-height: 27px; margin: 0px; padding: 0px;" xml:lang="EN-US">Now, add a new Layout named Popup.</span><span class="TextRun BCX0 SCXW168466292" data-contrast="auto" lang="EN-US" style="font-family: "verdana" , "verdana_msfontservice" , sans-serif; font-size: 11pt; line-height: 27px; margin: 0px; padding: 0px;" xml:lang="EN-US"><span class="SpellingError BCX0 SCXW168466292" style="-webkit-tap-highlight-color: transparent; -webkit-user-drag: none; background-color: inherit; background-image: url("data:image/gif; background-position: left bottom; background-repeat: repeat-x; border-bottom: 1px solid transparent; margin: 0px; padding: 0px; user-select: text;">axml</span></span><span class="TextRun BCX0 SCXW168466292" data-contrast="auto" lang="EN-US" style="font-family: "verdana" , "verdana_msfontservice" , sans-serif; font-size: 11pt; line-height: 27px; margin: 0px; padding: 0px;" xml:lang="EN-US">. For that, right-click the Layout Folder and select Add >> New and the new popup window will appear, select Layout and name as Popup.axml and click Add. </span><span class="EOP BCX0 SCXW168466292" data-ccp-props="{"201341983":0,"335559739":160,"335559740":360}" style="font-family: "verdana" , "verdana_msfontservice" , sans-serif; font-size: 11pt; line-height: 27px; margin: 0px; padding: 0px;"> </span><span class="TextRun BCX0 SCXW168466292" data-contrast="auto" lang="EN-US" style="background-color: transparent; font-family: "verdana" , "verdana_msfontservice" , sans-serif; font-size: 11pt; line-height: 27px; margin: 0px; padding: 0px;" xml:lang="EN-US"> </span><span class="EOP BCX0 SCXW168466292" data-ccp-props="{"201341983":0,"335559739":160,"335559740":360}" style="background-color: transparent; font-family: "verdana" , "verdana_msfontservice" , sans-serif; font-size: 11pt; line-height: 27px; margin: 0px; padding: 0px;"> </span></div>
</div>
<br />
<!-- HTML generated using hilite.me --><br />
<div style="background: #ffffff; background: #ffffff; border-width: 0.1em 0.1em 0.1em 0.8em; border: solid dodgerblue; overflow: auto; overflow: auto; padding: 0.2em 0.6em; width: auto; width: auto;">
<table><tbody>
<tr><td><pre style="line-height: 125%; margin: 0;">1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109</pre>
</td><td><pre style="line-height: 125%; margin: 0;"><span style="color: #557799;"><?xml version="1.0" encoding="utf-8"?></span>
<span style="color: #007700;"><FrameLayout</span>
<span style="color: #0000cc;">xmlns:android=</span><span style="background-color: #fff0f0;">"http://schemas.android.com/apk/res/android"</span>
<span style="color: #0000cc;">xmlns:app=</span><span style="background-color: #fff0f0;">"http://schemas.android.com/apk/res-auto"</span>
<span style="color: #0000cc;">android:layout_width=</span><span style="background-color: #fff0f0;">"match_parent"</span>
<span style="color: #0000cc;">android:layout_height=</span><span style="background-color: #fff0f0;">"wrap_content"</span><span style="color: #007700;">></span>
<span style="color: #007700;"><android.support.constraint.ConstraintLayout</span>
<span style="color: #0000cc;">android:layout_width=</span><span style="background-color: #fff0f0;">"match_parent"</span>
<span style="color: #0000cc;">android:layout_height=</span><span style="background-color: #fff0f0;">"wrap_content"</span>
<span style="color: #0000cc;">android:layout_marginLeft=</span><span style="background-color: #fff0f0;">"10dp"</span>
<span style="color: #0000cc;">android:layout_marginRight=</span><span style="background-color: #fff0f0;">"10dp"</span>
<span style="color: #0000cc;">android:background=</span><span style="background-color: #fff0f0;">"@android:color/white"</span><span style="color: #007700;">></span>
<span style="color: #007700;"><TextView</span>
<span style="color: #0000cc;">android:id=</span><span style="background-color: #fff0f0;">"@+id/allocate_collector"</span>
<span style="color: #0000cc;">app:layout_constraintTop_toTopOf=</span><span style="background-color: #fff0f0;">"parent"</span>
<span style="color: #0000cc;">app:layout_constraintStart_toStartOf=</span><span style="background-color: #fff0f0;">"parent"</span>
<span style="color: #0000cc;">android:layout_width=</span><span style="background-color: #fff0f0;">"wrap_content"</span>
<span style="color: #0000cc;">android:layout_height=</span><span style="background-color: #fff0f0;">"18dp"</span>
<span style="color: #0000cc;">android:layout_marginTop=</span><span style="background-color: #fff0f0;">"15dp"</span>
<span style="color: #0000cc;">android:layout_marginLeft=</span><span style="background-color: #fff0f0;">"10dp"</span>
<span style="color: #0000cc;">android:text=</span><span style="background-color: #fff0f0;">"Custom Title"</span>
<span style="color: #0000cc;">android:textStyle=</span><span style="background-color: #fff0f0;">"bold"</span>
<span style="color: #0000cc;">android:textSize=</span><span style="background-color: #fff0f0;">"16dp"</span>
<span style="color: #0000cc;">android:maxLines=</span><span style="background-color: #fff0f0;">"1"</span>
<span style="color: #0000cc;">android:textColor=</span><span style="background-color: #fff0f0;">"@android:color/black"</span><span style="color: #007700;">/></span>
<span style="color: #007700;"><TextView</span>
<span style="color: #0000cc;">android:id=</span><span style="background-color: #fff0f0;">"@+id/patient"</span>
<span style="color: #0000cc;">app:layout_constraintTop_toBottomOf=</span><span style="background-color: #fff0f0;">"@+id/allocate_collector"</span>
<span style="color: #0000cc;">app:layout_constraintStart_toStartOf=</span><span style="background-color: #fff0f0;">"parent"</span>
<span style="color: #0000cc;">android:layout_marginTop=</span><span style="background-color: #fff0f0;">"20dp"</span>
<span style="color: #0000cc;">android:layout_marginLeft=</span><span style="background-color: #fff0f0;">"10dp"</span>
<span style="color: #0000cc;">android:layout_width=</span><span style="background-color: #fff0f0;">"wrap_content"</span>
<span style="color: #0000cc;">android:layout_height=</span><span style="background-color: #fff0f0;">"14dp"</span>
<span style="color: #0000cc;">android:text=</span><span style="background-color: #fff0f0;">"My Name"</span>
<span style="color: #0000cc;">android:textSize=</span><span style="background-color: #fff0f0;">"12dp"</span><span style="color: #007700;">/></span>
<span style="color: #007700;"><android.support.design.widget.TextInputLayout</span>
<span style="color: #0000cc;">android:id=</span><span style="background-color: #fff0f0;">"@+id/collector_name_txt_lyt"</span>
<span style="color: #0000cc;">app:layout_constraintTop_toBottomOf=</span><span style="background-color: #fff0f0;">"@+id/patient"</span>
<span style="color: #0000cc;">app:layout_constraintStart_toStartOf=</span><span style="background-color: #fff0f0;">"parent"</span>
<span style="color: #0000cc;">android:layout_width=</span><span style="background-color: #fff0f0;">"match_parent"</span>
<span style="color: #0000cc;">android:layout_height=</span><span style="background-color: #fff0f0;">"51dp"</span>
<span style="color: #0000cc;">android:layout_marginTop=</span><span style="background-color: #fff0f0;">"15dp"</span>
<span style="color: #0000cc;">android:layout_marginLeft=</span><span style="background-color: #fff0f0;">"10dp"</span>
<span style="color: #0000cc;">android:layout_marginRight=</span><span style="background-color: #fff0f0;">"10dp"</span><span style="color: #007700;">></span>
<span style="color: #007700;"><AutoCompleteTextView</span>
<span style="color: #0000cc;">android:layout_width=</span><span style="background-color: #fff0f0;">"match_parent"</span>
<span style="color: #0000cc;">android:layout_height=</span><span style="background-color: #fff0f0;">"wrap_content"</span>
<span style="color: #0000cc;">android:id=</span><span style="background-color: #fff0f0;">"@+id/autocomplete"</span>
<span style="color: #0000cc;">android:inputType=</span><span style="background-color: #fff0f0;">"textAutoComplete"</span>
<span style="color: #0000cc;">android:completionThreshold=</span><span style="background-color: #fff0f0;">"1"</span>
<span style="color: #0000cc;">android:singleLine=</span><span style="background-color: #fff0f0;">"true"</span>
<span style="color: #0000cc;">android:gravity=</span><span style="background-color: #fff0f0;">"bottom"</span>
<span style="color: #0000cc;">android:hint=</span><span style="background-color: #fff0f0;">"Name"</span>
<span style="color: #0000cc;">android:textSize=</span><span style="background-color: #fff0f0;">"14dp"</span>
<span style="color: #0000cc;">android:paddingRight=</span><span style="background-color: #fff0f0;">"20dp"</span>
<span style="color: #0000cc;">android:textColor=</span><span style="background-color: #fff0f0;">"@android:color/black"</span><span style="color: #007700;">/></span>
<span style="color: #007700;"></android.support.design.widget.TextInputLayout></span>
<span style="color: #007700;"><View</span>
<span style="color: #0000cc;">android:id=</span><span style="background-color: #fff0f0;">"@+id/topview_of_logout"</span>
<span style="color: #0000cc;">app:layout_constraintTop_toBottomOf=</span><span style="background-color: #fff0f0;">"@+id/collector_name_txt_lyt"</span>
<span style="color: #0000cc;">app:layout_constraintStart_toStartOf=</span><span style="background-color: #fff0f0;">"parent"</span>
<span style="color: #0000cc;">app:layout_constraintEnd_toEndOf=</span><span style="background-color: #fff0f0;">"parent"</span>
<span style="color: #0000cc;">android:layout_width=</span><span style="background-color: #fff0f0;">"match_parent"</span>
<span style="color: #0000cc;">android:layout_height=</span><span style="background-color: #fff0f0;">"1dp"</span>
<span style="color: #0000cc;">android:background=</span><span style="background-color: #fff0f0;">"#000000"</span>
<span style="color: #0000cc;">android:layout_marginTop=</span><span style="background-color: #fff0f0;">"30dp"</span><span style="color: #007700;">/></span>
<span style="color: #007700;"><View</span>
<span style="color: #0000cc;">android:id=</span><span style="background-color: #fff0f0;">"@+id/midview_of_logout"</span>
<span style="color: #0000cc;">app:layout_constraintTop_toBottomOf=</span><span style="background-color: #fff0f0;">"@+id/topview_of_logout"</span>
<span style="color: #0000cc;">app:layout_constraintStart_toStartOf=</span><span style="background-color: #fff0f0;">"parent"</span>
<span style="color: #0000cc;">app:layout_constraintEnd_toEndOf=</span><span style="background-color: #fff0f0;">"parent"</span>
<span style="color: #0000cc;">android:layout_width=</span><span style="background-color: #fff0f0;">"1dp"</span>
<span style="color: #0000cc;">android:layout_height=</span><span style="background-color: #fff0f0;">"37dp"</span>
<span style="color: #0000cc;">android:layout_marginLeft=</span><span style="background-color: #fff0f0;">"1dp"</span>
<span style="color: #0000cc;">android:layout_marginRight=</span><span style="background-color: #fff0f0;">"1dp"</span>
<span style="color: #0000cc;">android:background=</span><span style="background-color: #fff0f0;">"@android:color/black"</span><span style="color: #007700;">/></span>
<span style="color: #007700;"><Button</span>
<span style="color: #0000cc;">android:id=</span><span style="background-color: #fff0f0;">"@+id/btnCancel"</span>
<span style="color: #0000cc;">app:layout_constraintTop_toBottomOf=</span><span style="background-color: #fff0f0;">"@+id/topview_of_logout"</span>
<span style="color: #0000cc;">app:layout_constraintStart_toStartOf=</span><span style="background-color: #fff0f0;">"parent"</span>
<span style="color: #0000cc;">app:layout_constraintEnd_toStartOf=</span><span style="background-color: #fff0f0;">"@+id/midview_of_logout"</span>
<span style="color: #0000cc;">android:layout_width=</span><span style="background-color: #fff0f0;">"0dp"</span>
<span style="color: #0000cc;">android:layout_height=</span><span style="background-color: #fff0f0;">"43dp"</span>
<span style="color: #0000cc;">android:background=</span><span style="background-color: #fff0f0;">"@null"</span>
<span style="color: #0000cc;">android:text=</span><span style="background-color: #fff0f0;">"Cancel"</span>
<span style="color: #0000cc;">android:textAllCaps=</span><span style="background-color: #fff0f0;">"false"</span>
<span style="color: #0000cc;">android:textSize=</span><span style="background-color: #fff0f0;">"12dp"</span><span style="color: #007700;">/></span>
<span style="color: #007700;"><Button</span>
<span style="color: #0000cc;">android:id=</span><span style="background-color: #fff0f0;">"@+id/btnOk"</span>
<span style="color: #0000cc;">app:layout_constraintTop_toBottomOf=</span><span style="background-color: #fff0f0;">"@+id/topview_of_logout"</span>
<span style="color: #0000cc;">app:layout_constraintStart_toEndOf=</span><span style="background-color: #fff0f0;">"@+id/midview_of_logout"</span>
<span style="color: #0000cc;">app:layout_constraintEnd_toEndOf=</span><span style="background-color: #fff0f0;">"parent"</span>
<span style="color: #0000cc;">android:layout_width=</span><span style="background-color: #fff0f0;">"0dp"</span>
<span style="color: #0000cc;">android:layout_height=</span><span style="background-color: #fff0f0;">"43dp"</span>
<span style="color: #0000cc;">android:text=</span><span style="background-color: #fff0f0;">"Submit"</span>
<span style="color: #0000cc;">android:textSize=</span><span style="background-color: #fff0f0;">"12dp"</span>
<span style="color: #0000cc;">android:textColor=</span><span style="background-color: #fff0f0;">"@android:color/black"</span>
<span style="color: #0000cc;">android:textAllCaps=</span><span style="background-color: #fff0f0;">"false"</span>
<span style="color: #0000cc;">android:background=</span><span style="background-color: #fff0f0;">"@android:color/white"</span><span style="color: #007700;">/></span>
<span style="color: #007700;"></android.support.constraint.ConstraintLayout></span>
<span style="color: #007700;"></FrameLayout></span>
</pre>
</td></tr>
</tbody></table>
</div>
<br />
<div class="OutlineElement Ltr BCX0 SCXW168466292" style="-webkit-tap-highlight-color: transparent; -webkit-user-drag: none; clear: both; cursor: text; direction: ltr; margin: 0px; overflow: visible; padding: 0px; position: relative; user-select: text;">
<div class="Paragraph BCX0 SCXW168466292" lang="EN-US" paraeid="{2f0f007c-98f6-4362-962d-85c30c3da585}{25}" paraid="1127428141" style="-webkit-tap-highlight-color: transparent; -webkit-user-drag: none; background-color: transparent; color: windowtext; overflow-wrap: break-word; padding: 0px; user-select: text; vertical-align: baseline;" xml:lang="EN-US">
<span class="TextRun BCX0 SCXW168466292" data-contrast="auto" lang="EN-US" style="font-family: "verdana" , "verdana_msfontservice" , sans-serif; font-size: 11pt; line-height: 27px; margin: 0px; padding: 0px;" xml:lang="EN-US"><b><br /></b></span>
<span class="TextRun BCX0 SCXW168466292" data-contrast="auto" lang="EN-US" style="font-family: "verdana" , "verdana_msfontservice" , sans-serif; font-size: 11pt; line-height: 27px; margin: 0px; padding: 0px;" xml:lang="EN-US"><b>Step 5: </b></span><span class="EOP BCX0 SCXW168466292" data-ccp-props="{"201341983":0,"335559739":160,"335559740":360}" style="font-family: "verdana" , "verdana_msfontservice" , sans-serif; font-size: 11pt; line-height: 27px; margin: 0px; padding: 0px;"> </span><br />
<span class="EOP BCX0 SCXW168466292" data-ccp-props="{"201341983":0,"335559739":160,"335559740":360}" style="font-family: "verdana" , "verdana_msfontservice" , sans-serif; font-size: 11pt; line-height: 27px; margin: 0px; padding: 0px;"><span class="TextRun BCX0 SCXW168466292" data-contrast="auto" lang="EN-US" style="font-family: "verdana" , "verdana_msfontservice" , sans-serif; font-size: 11pt; line-height: 27px; margin: 0px; padding: 0px;" xml:lang="EN-US">Next open, </span><span class="TextRun BCX0 SCXW168466292" data-contrast="auto" lang="EN-US" style="font-family: "verdana" , "verdana_msfontservice" , sans-serif; font-size: 11pt; line-height: 27px; margin: 0px; padding: 0px;" xml:lang="EN-US"><span class="SpellingError BCX0 SCXW168466292" style="-webkit-tap-highlight-color: transparent; -webkit-user-drag: none; background-color: inherit; background-image: url("data:image/gif; background-position: left bottom; background-repeat: repeat-x; border-bottom: 1px solid transparent; margin: 0px; padding: 0px; user-select: text;">MainActivity.cs</span></span><span class="TextRun BCX0 SCXW168466292" data-contrast="auto" lang="EN-US" style="font-family: "verdana" , "verdana_msfontservice" , sans-serif; font-size: 11pt; line-height: 27px; margin: 0px; padding: 0px;" xml:lang="EN-US"> and add the following code to Invoke the popup dialog in the UI. For that, open Solution Explorer >> </span><span class="TextRun BCX0 SCXW168466292" data-contrast="auto" lang="EN-US" style="font-family: "verdana" , "verdana_msfontservice" , sans-serif; font-size: 11pt; line-height: 27px; margin: 0px; padding: 0px;" xml:lang="EN-US"><span class="SpellingError BCX0 SCXW168466292" style="-webkit-tap-highlight-color: transparent; -webkit-user-drag: none; background-color: inherit; background-image: url("data:image/gif; background-position: left bottom; background-repeat: repeat-x; border-bottom: 1px solid transparent; margin: 0px; padding: 0px; user-select: text;">MainActivity.cs</span></span><span class="TextRun BCX0 SCXW168466292" data-contrast="auto" lang="EN-US" style="font-family: "verdana" , "verdana_msfontservice" , sans-serif; font-size: 11pt; line-height: 27px; margin: 0px; padding: 0px;" xml:lang="EN-US">. This page code gives below. In that code, we are initializing the Alert Dialog object and set up the layout. We can access the layout widget properties by using the “</span><span class="TextRun BCX0 SCXW168466292" data-contrast="auto" lang="EN-US" style="font-family: "verdana" , "verdana_msfontservice" , sans-serif; font-size: 11pt; line-height: 27px; margin: 0px; padding: 0px;" xml:lang="EN-US"><span class="SpellingError BCX0 SCXW168466292" style="-webkit-tap-highlight-color: transparent; -webkit-user-drag: none; background-color: inherit; background-image: url("data:image/gif; background-position: left bottom; background-repeat: repeat-x; border-bottom: 1px solid transparent; margin: 0px; padding: 0px; user-select: text;">window.FindViewById</span></span><span class="TextRun BCX0 SCXW168466292" data-contrast="auto" lang="EN-US" style="font-family: "verdana" , "verdana_msfontservice" , sans-serif; font-size: 11pt; line-height: 27px; margin: 0px; padding: 0px;" xml:lang="EN-US"><</span><span class="TextRun BCX0 SCXW168466292" data-contrast="auto" lang="EN-US" style="font-family: "verdana" , "verdana_msfontservice" , sans-serif; font-size: 11pt; line-height: 27px; margin: 0px; padding: 0px;" xml:lang="EN-US"><span class="SpellingError BCX0 SCXW168466292" style="-webkit-tap-highlight-color: transparent; -webkit-user-drag: none; background-color: inherit; background-image: url("data:image/gif; background-position: left bottom; background-repeat: repeat-x; border-bottom: 1px solid transparent; margin: 0px; padding: 0px; user-select: text;">TextView</span></span><span class="TextRun BCX0 SCXW168466292" data-contrast="auto" lang="EN-US" style="font-family: "verdana" , "verdana_msfontservice" , sans-serif; font-size: 11pt; line-height: 27px; margin: 0px; padding: 0px;" xml:lang="EN-US">>(</span><span class="TextRun BCX0 SCXW168466292" data-contrast="auto" lang="EN-US" style="font-family: "verdana" , "verdana_msfontservice" , sans-serif; font-size: 11pt; line-height: 27px; margin: 0px; padding: 0px;" xml:lang="EN-US"><span class="SpellingError BCX0 SCXW168466292" style="-webkit-tap-highlight-color: transparent; -webkit-user-drag: none; background-color: inherit; background-image: url("data:image/gif; background-position: left bottom; background-repeat: repeat-x; border-bottom: 1px solid transparent; margin: 0px; padding: 0px; user-select: text;">Resource.Id.widgetId</span></span><span class="TextRun BCX0 SCXW168466292" data-contrast="auto" lang="EN-US" style="font-family: "verdana" , "verdana_msfontservice" , sans-serif; font-size: 11pt; line-height: 27px; margin: 0px; padding: 0px;" xml:lang="EN-US">)”, otherwise you’re trying to access directly, </span><span class="TextRun BCX0 SCXW168466292" data-contrast="auto" lang="EN-US" style="font-family: "verdana" , "verdana_msfontservice" , sans-serif; font-size: 11pt; line-height: 27px; margin: 0px; padding: 0px;" xml:lang="EN-US"><span class="SpellingError BCX0 SCXW168466292" style="-webkit-tap-highlight-color: transparent; -webkit-user-drag: none; background-color: inherit; background-image: url("data:image/gif; background-position: left bottom; background-repeat: repeat-x; border-bottom: 1px solid transparent; margin: 0px; padding: 0px; user-select: text;">NullException</span></span><span class="TextRun BCX0 SCXW168466292" data-contrast="auto" lang="EN-US" style="font-family: "verdana" , "verdana_msfontservice" , sans-serif; font-size: 11pt; line-height: 27px; margin: 0px; padding: 0px;" xml:lang="EN-US"> will be thrown.</span></span><br />
<span class="EOP BCX0 SCXW168466292" data-ccp-props="{"201341983":0,"335559739":160,"335559740":360}" style="font-family: "verdana" , "verdana_msfontservice" , sans-serif; font-size: 11pt; line-height: 27px; margin: 0px; padding: 0px;"><span class="TextRun BCX0 SCXW168466292" data-contrast="auto" lang="EN-US" style="font-family: "verdana" , "verdana_msfontservice" , sans-serif; font-size: 11pt; line-height: 27px; margin: 0px; padding: 0px;" xml:lang="EN-US"><br /></span></span></div>
</div>
<!-- HTML generated using hilite.me --><br />
<div style="background: #ffffff; background: #ffffff; border-width: 0.1em 0.1em 0.1em 0.8em; border: solid dodgerblue; overflow: auto; overflow: auto; padding: 0.2em 0.6em; width: auto; width: auto;">
<table><tbody>
<tr><td><pre style="line-height: 125%; margin: 0;">1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63</pre>
</td><td><pre style="line-height: 125%; margin: 0;"><span style="color: #008800; font-weight: bold;">using</span> <span style="color: #0e84b5; font-weight: bold;">Android.App</span>;
<span style="color: #008800; font-weight: bold;">using</span> <span style="color: #0e84b5; font-weight: bold;">Android.OS</span>;
<span style="color: #008800; font-weight: bold;">using</span> <span style="color: #0e84b5; font-weight: bold;">Android.Support.V7.App</span>;
<span style="color: #008800; font-weight: bold;">using</span> <span style="color: #0e84b5; font-weight: bold;">Android.Views</span>;
<span style="color: #008800; font-weight: bold;">using</span> <span style="color: #0e84b5; font-weight: bold;">Android.Widget</span>;
<span style="color: #008800; font-weight: bold;">using</span> <span style="color: #0e84b5; font-weight: bold;">static</span> Android.App.ActionBar;
<span style="color: #008800; font-weight: bold;">namespace</span> <span style="color: #0e84b5; font-weight: bold;">CustomPopupLayout</span>
{
<span style="color: #0000cc;"> [Activity(Label = "@string/app_name", Theme = "@style/AppTheme", MainLauncher = true)]</span>
<span style="color: #008800; font-weight: bold;">public</span> <span style="color: #008800; font-weight: bold;">class</span> <span style="color: #bb0066; font-weight: bold;">MainActivity</span> : AppCompatActivity
{
<span style="color: #008800; font-weight: bold;">private</span> Button btnshowPopup;
<span style="color: #008800; font-weight: bold;">private</span> Button btnPopupCancel;
<span style="color: #008800; font-weight: bold;">private</span> Button btnPopOk;
<span style="color: #008800; font-weight: bold;">private</span> Dialog popupDialog;
<span style="color: #008800; font-weight: bold;">protected</span> <span style="color: #008800; font-weight: bold;">override</span> <span style="color: #008800; font-weight: bold;">void</span> <span style="color: #0066bb; font-weight: bold;">OnCreate</span>(Bundle savedInstanceState)
{
<span style="color: #008800; font-weight: bold;">base</span>.OnCreate(savedInstanceState);
<span style="color: #888888;">// Set our view from the "main" layout resource</span>
SetContentView(Resource.Layout.Main);
btnshowPopup = FindViewById<Button>(Resource.Id.btnPopup);
btnshowPopup.Click += BtnshowPopup_Click;
}
<span style="color: #008800; font-weight: bold;">private</span> <span style="color: #008800; font-weight: bold;">void</span> <span style="color: #0066bb; font-weight: bold;">BtnshowPopup_Click</span>(<span style="color: #333399; font-weight: bold;">object</span> sender, System.EventArgs e)
{
popupDialog = <span style="color: #008800; font-weight: bold;">new</span> Dialog(<span style="color: #008800; font-weight: bold;">this</span>);
popupDialog.SetContentView(Resource.Layout.activity_main);
popupDialog.Window.SetSoftInputMode(SoftInput.AdjustResize);
popupDialog.Show();
<span style="color: #888888;">// Some Time Layout width not fit with windows size</span>
<span style="color: #888888;">// but Below lines are not necessery</span>
popupDialog.Window.SetLayout(LayoutParams.MatchParent, LayoutParams.WrapContent);
popupDialog.Window.SetBackgroundDrawableResource(Android.Resource.Color.Transparent);
<span style="color: #888888;">// Access Popup layout fields like below</span>
btnPopupCancel = popupDialog.FindViewById<Button>(Resource.Id.btnCancel);
btnPopOk = popupDialog.FindViewById<Button>(Resource.Id.btnOk);
<span style="color: #888888;">// Events for that popup layout</span>
btnPopupCancel.Click += BtnPopupCancel_Click;
btnPopOk.Click += BtnPopOk_Click;
<span style="color: #888888;">// Some Additional Tips </span>
<span style="color: #888888;">// Set the dialog Title Property - popupDialog.Window.SetTitle("Alert Title");</span>
}
<span style="color: #008800; font-weight: bold;">private</span> <span style="color: #008800; font-weight: bold;">void</span> <span style="color: #0066bb; font-weight: bold;">BtnPopOk_Click</span>(<span style="color: #333399; font-weight: bold;">object</span> sender, System.EventArgs e)
{
popupDialog.Dismiss();
popupDialog.Hide();
}
<span style="color: #008800; font-weight: bold;">private</span> <span style="color: #008800; font-weight: bold;">void</span> <span style="color: #0066bb; font-weight: bold;">BtnPopupCancel_Click</span>(<span style="color: #333399; font-weight: bold;">object</span> sender, System.EventArgs e)
{
popupDialog.Dismiss();
popupDialog.Hide();
}
}
}
</pre>
</td></tr>
</tbody></table>
</div>
<br />
<div class="OutlineElement Ltr BCX0 SCXW168466292" style="-webkit-tap-highlight-color: transparent; -webkit-user-drag: none; clear: both; cursor: text; direction: ltr; margin: 0px; overflow: visible; padding: 0px; position: relative; user-select: text;">
<div class="Paragraph BCX0 SCXW168466292" lang="EN-US" paraeid="{2f0f007c-98f6-4362-962d-85c30c3da585}{31}" paraid="1572042438" style="-webkit-tap-highlight-color: transparent; -webkit-user-drag: none; background-color: transparent; color: windowtext; overflow-wrap: break-word; padding: 0px; user-select: text; vertical-align: baseline;" xml:lang="EN-US">
<span class="TextRun BCX0 SCXW168466292" data-contrast="auto" lang="EN-US" style="background-color: transparent; font-family: "verdana" , "verdana_msfontservice" , sans-serif; font-size: 11pt; line-height: 27px; margin: 0px; padding: 0px;" xml:lang="EN-US">Additional Tip:</span><span class="EOP BCX0 SCXW168466292" data-ccp-props="{"201341983":0,"335559739":160,"335559740":360}" style="background-color: transparent; font-family: "verdana" , "verdana_msfontservice" , sans-serif; font-size: 11pt; line-height: 27px; margin: 0px; padding: 0px;"> </span></div>
</div>
<div class="OutlineElement Ltr BCX0 SCXW168466292" style="-webkit-tap-highlight-color: transparent; -webkit-user-drag: none; clear: both; cursor: text; direction: ltr; margin: 0px; overflow: visible; padding: 0px; position: relative; user-select: text;">
<div class="Paragraph BCX0 SCXW168466292" lang="EN-US" paraeid="{4bcb1fd8-6cf1-4ffd-afea-5091eb216dcf}{97}" paraid="1910087721" style="-webkit-tap-highlight-color: transparent; -webkit-user-drag: none; background-color: transparent; color: windowtext; overflow-wrap: break-word; padding: 0px; user-select: text; vertical-align: baseline;" xml:lang="EN-US">
<span class="TextRun BCX0 SCXW168466292" data-contrast="auto" lang="EN-US" style="font-family: "verdana" , "verdana_msfontservice" , sans-serif; font-size: 11pt; line-height: 27px; margin: 0px; padding: 0px;" xml:lang="EN-US">In here, you can easily set alert dialog Title by using “</span><span class="TextRun BCX0 SCXW168466292" data-contrast="auto" lang="EN-US" style="font-family: "verdana" , "verdana_msfontservice" , sans-serif; font-size: 11pt; line-height: 27px; margin: 0px; padding: 0px;" xml:lang="EN-US">AlertDialog.</span><span class="TextRun BCX0 SCXW168466292" data-contrast="auto" lang="EN-US" style="font-family: "verdana" , "verdana_msfontservice" , sans-serif; font-size: 11pt; line-height: 27px; margin: 0px; padding: 0px;" xml:lang="EN-US"><span class="SpellingError BCX0 SCXW168466292" style="-webkit-tap-highlight-color: transparent; -webkit-user-drag: none; background-color: inherit; background-image: url("data:image/gif; background-position: left bottom; background-repeat: repeat-x; border-bottom: 1px solid transparent; margin: 0px; padding: 0px; user-select: text;">SetTitle</span></span><span class="TextRun BCX0 SCXW168466292" data-contrast="auto" lang="EN-US" style="font-family: "verdana" , "verdana_msfontservice" , sans-serif; font-size: 11pt; line-height: 27px; margin: 0px; padding: 0px;" xml:lang="EN-US">” property.</span><span class="EOP BCX0 SCXW168466292" data-ccp-props="{"201341983":0,"335559739":160,"335559740":360}" style="font-family: "verdana" , "verdana_msfontservice" , sans-serif; font-size: 11pt; line-height: 27px; margin: 0px; padding: 0px;"> </span></div>
</div>
<div class="OutlineElement Ltr BCX0 SCXW168466292" style="-webkit-tap-highlight-color: transparent; -webkit-user-drag: none; clear: both; cursor: text; direction: ltr; margin: 0px; overflow: visible; padding: 0px; position: relative; user-select: text;">
<div class="Paragraph BCX0 SCXW168466292" lang="EN-US" paraeid="{36e04820-566d-4834-affd-c29e00ba7af2}{44}" paraid="295594104" style="-webkit-tap-highlight-color: transparent; -webkit-user-drag: none; background-color: transparent; color: windowtext; overflow-wrap: break-word; padding: 0px; user-select: text; vertical-align: baseline;" xml:lang="EN-US">
<br /></div>
</div>
<div class="OutlineElement Ltr BCX0 SCXW168466292" style="-webkit-tap-highlight-color: transparent; -webkit-user-drag: none; clear: both; cursor: text; direction: ltr; margin: 0px; overflow: visible; padding: 0px; position: relative; user-select: text;">
<div class="Paragraph BCX0 SCXW168466292" lang="EN-US" paraeid="{2f0f007c-98f6-4362-962d-85c30c3da585}{49}" paraid="1485881438" style="-webkit-tap-highlight-color: transparent; -webkit-user-drag: none; background-color: transparent; color: windowtext; overflow-wrap: break-word; padding: 0px; user-select: text; vertical-align: baseline;" xml:lang="EN-US">
<b><span class="TextRun BCX0 SCXW168466292" data-contrast="auto" lang="EN-US" style="font-family: "verdana" , "verdana_msfontservice" , sans-serif; font-size: 11pt; line-height: 27px; margin: 0px; padding: 0px;" xml:lang="EN-US">Step 6: </span><span class="EOP BCX0 SCXW168466292" data-ccp-props="{"201341983":0,"335559739":160,"335559740":360}" style="font-family: "verdana" , "verdana_msfontservice" , sans-serif; font-size: 11pt; line-height: 27px; margin: 0px; padding: 0px;"> </span></b></div>
</div>
<div class="OutlineElement Ltr BCX0 SCXW168466292" style="-webkit-tap-highlight-color: transparent; -webkit-user-drag: none; clear: both; cursor: text; direction: ltr; margin: 0px; overflow: visible; padding: 0px; position: relative; user-select: text;">
<div class="Paragraph BCX0 SCXW168466292" lang="EN-US" paraeid="{2f0f007c-98f6-4362-962d-85c30c3da585}{55}" paraid="2028365173" style="-webkit-tap-highlight-color: transparent; -webkit-user-drag: none; background-color: transparent; color: windowtext; overflow-wrap: break-word; padding: 0px; user-select: text; vertical-align: baseline;" xml:lang="EN-US">
<span class="TextRun BCX0 SCXW168466292" data-contrast="auto" lang="EN-US" style="font-family: "verdana" , "verdana_msfontservice" , sans-serif; font-size: 11pt; line-height: 27px; margin: 0px; padding: 0px;" xml:lang="EN-US">Now run your Xamarin android, your output like below. </span><span class="EOP BCX0 SCXW168466292" data-ccp-props="{"201341983":0,"335559739":160,"335559740":360}" style="font-family: "verdana" , "verdana_msfontservice" , sans-serif; font-size: 11pt; line-height: 27px; margin: 0px; padding: 0px;"> </span><br />
<span class="EOP BCX0 SCXW168466292" data-ccp-props="{"201341983":0,"335559739":160,"335559740":360}" style="font-family: "verdana" , "verdana_msfontservice" , sans-serif; font-size: 11pt; line-height: 27px; margin: 0px; padding: 0px;"><br /></span></div>
</div>
<div class="OutlineElement Ltr BCX0 SCXW168466292" style="-webkit-tap-highlight-color: transparent; -webkit-user-drag: none; clear: both; cursor: text; direction: ltr; margin: 0px; overflow: visible; padding: 0px; position: relative; user-select: text;">
<div class="Paragraph BCX0 SCXW168466292" lang="EN-US" paraeid="{2f0f007c-98f6-4362-962d-85c30c3da585}{61}" paraid="2042913557" style="-webkit-tap-highlight-color: transparent; -webkit-user-drag: none; background-color: transparent; color: windowtext; overflow-wrap: break-word; padding: 0px; user-select: text; vertical-align: baseline;" xml:lang="EN-US">
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhnnLBe2o0FWJelAT-ZkFaN018PPF1mAiiu_-Pu-wNjUiRODIbCPuSu3TXOxIxvb6fnTZ0ER0syQFexC3Sv98nyZ8e80tCXnVMfYNj8RCBUnTVuAFWDntOaHrfQ56-OcFmEd6EueZLNbNE-/s1600/Output.gif" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="1067" data-original-width="600" height="320" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhnnLBe2o0FWJelAT-ZkFaN018PPF1mAiiu_-Pu-wNjUiRODIbCPuSu3TXOxIxvb6fnTZ0ER0syQFexC3Sv98nyZ8e80tCXnVMfYNj8RCBUnTVuAFWDntOaHrfQ56-OcFmEd6EueZLNbNE-/s320/Output.gif" width="179" /></a></div>
<span class="EOP BCX0 SCXW168466292" data-ccp-props="{"201341983":0,"335559739":160,"335559740":360}" style="background-color: transparent; font-family: "verdana" , "verdana_msfontservice" , sans-serif; font-size: 11pt; line-height: 27px; margin: 0px; padding: 0px;"><br />
</span> <span class="EOP BCX0 SCXW168466292" data-ccp-props="{"201341983":0,"335559739":160,"335559740":360}" style="background-color: transparent; font-family: "verdana" , "verdana_msfontservice" , sans-serif; font-size: 11pt; line-height: 27px; margin: 0px; padding: 0px;"><br />
</span> <span class="EOP BCX0 SCXW168466292" data-ccp-props="{"201341983":0,"335559739":160,"335559740":360}" style="background-color: transparent; font-family: "verdana" , "verdana_msfontservice" , sans-serif; font-size: 11pt; line-height: 27px; margin: 0px; padding: 0px;">Download Source <a href="https://github.com/logeshpalani98/XamarinAndroid-CustomPopUpLayout">Github</a> </span><br />
<span class="EOP BCX0 SCXW168466292" data-ccp-props="{"201341983":0,"335559739":160,"335559740":360}" style="font-family: "verdana" , "verdana_msfontservice" , sans-serif; font-size: 11pt; line-height: 27px; margin: 0px; padding: 0px;"><br />
</span></div>
</div>
<div class="OutlineElement Ltr BCX0 SCXW168466292" style="-webkit-tap-highlight-color: transparent; -webkit-user-drag: none; clear: both; cursor: text; direction: ltr; margin: 0px; overflow: visible; padding: 0px; position: relative; user-select: text;">
<div class="Paragraph BCX0 SCXW168466292" lang="EN-US" paraeid="{2f0f007c-98f6-4362-962d-85c30c3da585}{67}" paraid="1265340311" style="-webkit-tap-highlight-color: transparent; -webkit-user-drag: none; background-color: transparent; color: windowtext; overflow-wrap: break-word; padding: 0px; user-select: text; vertical-align: baseline;" xml:lang="EN-US">
<span class="TextRun BCX0 SCXW168466292" data-contrast="auto" lang="EN-US" style="font-family: "verdana" , "verdana_msfontservice" , sans-serif; font-size: 11pt; line-height: 27px; margin: 0px; padding: 0px;" xml:lang="EN-US"><b>Conclusion:</b></span></div>
</div>
<div class="OutlineElement Ltr BCX0 SCXW168466292" style="-webkit-tap-highlight-color: transparent; -webkit-user-drag: none; clear: both; cursor: text; direction: ltr; margin: 0px; overflow: visible; padding: 0px; position: relative; user-select: text;">
<div class="Paragraph BCX0 SCXW168466292" lang="EN-US" paraeid="{2f0f007c-98f6-4362-962d-85c30c3da585}{73}" paraid="1037936829" style="-webkit-tap-highlight-color: transparent; -webkit-user-drag: none; background-color: transparent; color: windowtext; overflow-wrap: break-word; padding: 0px; user-select: text; vertical-align: baseline;" xml:lang="EN-US">
<span class="TextRun BCX0 SCXW168466292" data-contrast="auto" lang="EN-US" style="font-family: "verdana" , "verdana_msfontservice" , sans-serif; font-size: 11pt; line-height: 27px; margin: 0px; padding: 0px;" xml:lang="EN-US"> Finally, we have successfully created a custom dialog, I think it helps full for you if you have any suggestions feel free to write in the command section.</span><span class="EOP BCX0 SCXW168466292" data-ccp-props="{"201341983":0,"335559739":160,"335559740":360}" style="font-family: "verdana" , "verdana_msfontservice" , sans-serif; font-size: 11pt; line-height: 27px; margin: 0px; padding: 0px;"> </span></div>
</div>
<div class="OutlineElement Ltr BCX0 SCXW168466292" style="-webkit-tap-highlight-color: transparent; -webkit-user-drag: none; clear: both; cursor: text; direction: ltr; margin: 0px; overflow: visible; padding: 0px; position: relative; user-select: text;">
<div class="Paragraph BCX0 SCXW168466292" lang="EN-US" paraeid="{c924be8a-7c34-448a-9e8e-7ed63445c12d}{162}" paraid="1261742968" style="-webkit-tap-highlight-color: transparent; -webkit-user-drag: none; background-color: transparent; color: windowtext; margin-left: 48px; overflow-wrap: break-word; padding: 0px; user-select: text; vertical-align: baseline;" xml:lang="EN-US">
<br /></div>
</div>
<div class="OutlineElement Ltr BCX0 SCXW168466292" style="-webkit-tap-highlight-color: transparent; -webkit-user-drag: none; clear: both; cursor: text; direction: ltr; margin: 0px; overflow: visible; padding: 0px; position: relative; user-select: text;">
<div class="Paragraph BCX0 SCXW168466292" lang="EN-US" paraeid="{c3b9ed3b-5a77-4f38-a5d3-daf78b048a68}{109}" paraid="651853416" style="-webkit-tap-highlight-color: transparent; -webkit-user-drag: none; background-color: transparent; color: windowtext; margin-left: 48px; overflow-wrap: break-word; padding: 0px; user-select: text; vertical-align: baseline;" xml:lang="EN-US">
<br /></div>
</div>
<div class="OutlineElement Ltr BCX0 SCXW168466292" style="-webkit-tap-highlight-color: transparent; -webkit-user-drag: none; clear: both; cursor: text; direction: ltr; margin: 0px; overflow: visible; padding: 0px; position: relative; user-select: text;">
<div class="Paragraph BCX0 SCXW168466292" lang="EN-US" paraeid="{c3b9ed3b-5a77-4f38-a5d3-daf78b048a68}{116}" paraid="828043081" style="-webkit-tap-highlight-color: transparent; -webkit-user-drag: none; background-color: transparent; color: windowtext; margin-left: 48px; overflow-wrap: break-word; padding: 0px; user-select: text; vertical-align: baseline;" xml:lang="EN-US">
<br /></div>
</div>
</div>
</div>
Logesh Palanihttp://www.blogger.com/profile/11572235997627400122noreply@blogger.com1