show/hide password text using Nativescript via eye icon - nativescript

I want to add the eye-kind of icon to the Password text field.
On clicking that icon it should show the password or hide the password.

You can add a (tap) event on the icon, then toggle the secure property on the TextField in that handler.
Another option is to use a property in your code behind like shouldSeePassword then bind [secure]=shouldSeePassword for the TextField. Then your (tap) event would toggle shouldSeePassword between true and false which will show/hide the text in the TextField.
To put the icon in the TextField you can use a GridLayout like this:
<GridLayout columns='*,auto' rows='auto'>
<TextField col='0' row='0'></TextField>
<Label col='1' row='0' text='icon'></Label>
</GridLayout>

Related

Dropdown is displaying the content above the dropdown control, it is not displaying the content below the control in uwp

I have created a combobox button in uwp and added some items in it, but when i click on that combo box at run time it is showing me content or the list of items above the combo box. It should be shown below the control. Is there any way to implement so in uwp.
`</Grid.RowDefinitions>
<ComboBox Height="30" Width="220" x:Name="dropDown"></ComboBox>
</Grid>`
`code behind:
dropDown.Items.Add("Mobile");
dropDown.Items.Add("Phone");
dropDown.Items.Add("Car");
dropDown.Items.Add("EarPhone");`
Dropdown is displaying the content above the dropdown control, it is not displaying the content below the control in uwp
The display air in above screenshot rendered with Popup control that will set position adaptive. If you do want to make dropdown display in the bottom please try to use DropDownButton control
<DropDownButton Content="Email">
<DropDownButton.Flyout>
<MenuFlyout Placement="Bottom">
<MenuFlyoutItem Text="Send"/>
<MenuFlyoutItem Text="Reply"/>
<MenuFlyoutItem Text="Reply All"/>
</MenuFlyout>
</DropDownButton.Flyout>
</DropDownButton>
Update
If your target min version is 1803, you could install Microsoft.UI.Xaml(version 2.0.181018003) nuget package that contains DropDownButton.
xmlns:muxc="using:Microsoft.UI.Xaml.Controls"
<muxc:DropDownButton Content="Email">
<muxc:DropDownButton.Flyout>
<MenuFlyout Placement="Bottom">
<MenuFlyoutItem Text="Send"/>
<MenuFlyoutItem Text="Reply"/>
<MenuFlyoutItem Text="Reply All"/>
</MenuFlyout>
</muxc:DropDownButton.Flyout>
</muxc:DropDownButton>

NativeScript ActionBar keeps re-appearing on navigation

I have a page with a hidden ActionBar (see below) which works fine normally. However when I navigate to another page and then use back() to get back, the ActionBar is now fully visible.
(Note: I require the ActionBar to be on the page so I can change the status bar colour)
This is for the current version of NativeScript Angular.
<ActionBar visibility="collapsed"></ActionBar>
<GridLayout rows="*, auto" columns="*" *ngIf="pageLoaded">
...
</GridLayout>
You can also add the Page class to your constructor and call this.page.actionBarHidden = true; in your ngOnInit.
This way you can also remove actionbar you have defined in your html template.
I was able to just remove the ActionBar and find a different way to change the text colour on the StatusBar, that doesn't require the ActionBar on the page.

How to display clickable hyperlink

We achieve this behaviour in android using a TextView with the property autoLink set to web.
<TextView android:autoLink="web" ... />
How to do that in NS?
If you would like to have clickable links, you can use HtmlView instead of TextView. The thing is that instead of click, you will have to use long press.

How to add a button to first item in ListView

Greeting,
I'm developing an apps for Windows Phone 8.1 and face some problem with ListView.
I wanted to place a button for the FIRST item in ListView, but it seem like I can't align center the button.
Below is the code I use currently:
<ListView>
<Button Content="Jio!" Height="6" Width="362"/>
<ListViewItem Content="ListViewItem"/>
</ListView>
Adding horizontalalignment='center' just wont work for the button.
The reason I want to do this is because I wanted the button to scroll together with the list, hence I'm placing it inside the ListView.
Please advice what can I do to achieve my purpose, thanks!
I recommend using the ListView.Header content to place such a button instead of adding it as a child directly.
<ListView>
<ListView.Header>
<Button ... HorizontalAlignment="Center" />
</ListView.Header>
</ListView>
By default, the ListViewItems are left-aligned. You will eventually have to replace their Template in order to center-align it (HeaderTemplate Property).

Change Content of a ListFooterTemplate of LongListSelector

Follow -up to the answer of this question :Add a Load More Button at the end of ListBox without losing Virtualization?
With this example :
<toolkit:LongListSelector ItemsSource="{Binding Items}">
<toolkit:LongListSelector.ListFooter>
<Grid>
<Button x:Name="btnReadMore" Content="ReadMore"/>
</Grid>
</toolkit:LongListSelector.ListFooter>
Is there a way to change his Content by the C# ? (= "ReadMore" and when the itemsource=0 "go back") thank you !
You can bind the value of the Content property to some ViewModel property. This is the best way IMHO:
You would also bind the Command property to some ViewModel command and this will ensure that you correctly set the caption and handle the result.
But beware, you are not supposed to have a button saying "Go Back" which, when pressed, acts as a hardware back button. You are not supposed to emulate such system functionality.

Resources