Xamarin - Assign textchange and unfocus event to a Textbox (Password) - xaml

My XAML file looks like this
<local:PlainEntry IsPassword="True" Placeholder="Pwd"
x:Name="contrasenaEntry" HorizontalOptions="Fill"
VerticalOptions="Center" Text="{Binding Password, Mode=TwoWay}" Margin="0"/>
Is there a way to fire and Onchange and unfocus event on the text field Password I tried with Password.myElement.IsFocused it doesn't work. I tried
private void PasswordEditText_TextChanged(object sender, TextChangedEventArgs e)
{
Console.WriteLine("text has changed!");
// this is not working!
}

It shows you are binding to the property "Password", this looks like you are using MVVM, BUT then that method you have written looks like it is a code behind method.
If you are using code behind you will want to use something like this..
<local:PlainEntry IsPassword="True" Placeholder="Pwd"
x:Name="contrasenaEntry" HorizontalOptions="Fill"
VerticalOptions="Center" TextChanged="PasswordEditText_TextChanged"
Margin="0"/>
Then call the method you already have
private void PasswordEditText_TextChanged(object sender, TextChangedEventArgs e)
{
Console.WriteLine("text has changed!");
// this is not working!
}

Related

How can I access a property from a ViewModel to a ButtonClickEvent which is inside the CodeBehind of Xaml View?

I want to access the properties created in ViewModel to the xaml code behind file. Please have a look at the attached screenshot for better understanding on my question.
Please Click Here to View the Screenshot of my Xaml code
Click Here for the Properties code
I have bind the "EntryText" property to an Entry field and "LblText" property to a Label. So, now I just want to transfer the value of Entry to the Label on a button click event.
You're on the right track, just need to search slightly differently.
There's multiple ways of doing this. I will tell you the simplest way since that's also suggested in the Xamarin Official Docs. So your Xaml code will look like this
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="ButtonDemos.BasicButtonClickPage"
Title="Basic Button Click">
<StackLayout>
<Label x:Name="label"
Text="Click the Button below"
FontSize="Large"
VerticalOptions="CenterAndExpand"
HorizontalOptions="Center" />
<Button Text="Click to Rotate Text!"
VerticalOptions="CenterAndExpand"
HorizontalOptions="Center"
Clicked="OnButtonClicked" />
</StackLayout>
</ContentPage>
And your C# file would look like this
public partial class BasicButtonClickPage : ContentPage
{
public BasicButtonClickPage ()
{
InitializeComponent ();
}
async void OnButtonClicked(object sender, EventArgs args)
{
await label.RelRotateTo(360, 1000);
}
}
You can use code-behind to invoke a method in the view model. So in that method, you can change the LblText. Refer below code.
<Button x:Name="btn1" Clicked="btnClicked" />
In code-behide
private void btnClicked(object sender, EventArgs e){
_viewModel.ChangeLabelText();
}
In the View Model
public void ChangeLabelText() {
LblText = EntryText;
}
You can use the page's BindingContext and cast it to your model. And, then access the property from there.
var myModel = this.BindingContext as MainPageProperties;
if(myModel!=null)
{
//Access your property here!
var text = myModel.LblText;
}

Show one of multiple items on the page (tab-like interface)

I want to have tab-like interface where I have multiple buttons (tabs) and when the user press one of the button I show corresponding container and hide other ones.
Something like:
<!-- Buttons -->
<StackPanel VerticalAlignment="Stretch" Grid.Column="0">
<Button
Style="{StaticResource DetailSectionButton}"
Content="info" Click="Button_Click"/>
<Button
Style="{StaticResource DetailSectionButton}"
Content="map" Click="Button_Click2"/>
<Button
Style="{StaticResource DetailSectionButton}"
Content="attachment" Click="Button_Click3"/>
</StackPanel>
<!-- Info -->
<ScrollViewer x:Name="SecInfo" Grid.Column="1" Visibility="Collapsed" ...
<!-- Map -->
<Map:MapControl ZoomLevel="6" x:Name="SecMap" Grid.Column="1" Visibility="Collapsed" ...
<!-- Attachments -->
<StackPanel x:Name="SecAttachments" Grid.Column="1" Visibility="Collapsed">
Code:
private void Button_Click(object sender, RoutedEventArgs e)
{
SecInfo.Visibility = Visibility.Visible;
SecMap.Visibility = Visibility.Collapsed;
SecAttachments.Visibility = Visibility.Collapsed;
}
private void Button_Click_1(object sender, RoutedEventArgs e)
{
SecInfo.Visibility = Visibility.Collapsed;
SecMap.Visibility = Visibility.Collapsed;
SecAttachments.Visibility = Visibility.Visible;
}
private void Button_Click_2(object sender, RoutedEventArgs e)
{
SecInfo.Visibility = Visibility.Collapsed;
SecMap.Visibility = Visibility.Visible;
SecAttachments.Visibility = Visibility.Collapsed;
}
Is it a good way to do it or I need to use something different in XAML for this ?
What you have presented should work as you expect it to.
But:
I would strongly recommend that you use some MVVM framework (like mvvmlight and there are other out there) and bindings in you application. If you invest some time to understand the concepts behind your life will become easier later.
Invest some time and understand platform specifics what you already know from desktop development might not apply to this platform (eg: TabControl).
For the specific design that you presented from the top of my head I would consider using HubControl with customization as you presented some buttons to navigate to pages but only if you need rapid access to them and changing page would require a lot of scrolling.

How to change the Button content as CamelCasing in Windows phone 8.1 Message dialog

How to change the Button content as CamelCasing in Windows phone 8.1 Message dialog?
private async void Button_Click(object sender, RoutedEventArgs e)
{
MessageDialog msg = new MessageDialog("Do you want to continue?");
msg.Commands.Add(new UICommand("Ok", (command) => { }));
msg.Commands.Add(new UICommand("Cancel", (command) => { }));
await msg.ShowAsync();
}
I want to change the ok as Ok and cancel as Cancel.
If you want a custom dialog you need to use a different control. The MessageDialog always lower cases the buttons to match the system style and is not generally customizable.
If you use a ContentDialog you can customize it fairly extensively, and it doesn't try to fix the case of its buttons. You'll probably want to create your own ContentDialog class (there's a template under Add.New Item...) with your desired contents, but here's a quick content-free example:
ContentDialog cd = new ContentDialog();
cd.Title = "My Title";
cd.PrimaryButtonText = "CoNtInUe";
cd.SecondaryButtonText = "sToP";
await cd.ShowAsync();
Also note that the guidelines for message dialogs suggest using clear and specific verbs rather than generic OK/Cancel.
Use Content Dialog box like this:
Add this code inside your xaml.
<ContentDialog x:Name="AlertMessage" Background="#363636" IsSecondaryButtonEnabled="True" SecondaryButtonText="Cancel" IsPrimaryButtonEnabled="True" PrimaryButtonText="Ok" >
<ContentDialog.Content>
<StackPanel Name="rootStackPanel" Height="Auto" >
<StackPanel Margin="0">
<StackPanel Margin="0,0,0,10" Orientation="Horizontal">
<TextBlock x:Name="HeadingText" x:FieldModifier="public" Style="{StaticResource ApplicationMessageBoxHeadingStyle}" Text="Alert" />
<Image Margin="10,05,0,0" Source="/Assets/Images/alert.png" Width="35"></Image>
</StackPanel>
<TextBlock x:FieldModifier="public" x:Name="ContentText" Style="{StaticResource ApplicationMessageBoxErrorStyle}" Text="Are you sure you want to log off ?" />
</StackPanel>
</StackPanel>
</ContentDialog.Content>
</ContentDialog>
And call this like that in your code:
private void AppBarButton_Click(object sender, RoutedEventArgs e)
{
MessageBox();
}
private async void MessageBox()
{
ContentDialogResult LogoutDialog = await AlertMessage.ShowAsync();
if (LogoutDialog == ContentDialogResult.Primary)
{
// User pressed Ok.
}
else
{
// User pressed Cancel or the back arrow.
// Terms of use were not accepted.
}
}
Here is the code:
CustomMessageBox messagebox = new CustomMessageBox()
{
Caption = "Do you want to continue?",
LeftButtonContent = "Ok",
RightButtonContent = "Cancel"
};

Search box implementation

I am developing my first app on windows phone 8. In this app I have a search box.For the search box I need to provide the background text as search city(as a hint text for the user) along with the search symbol/ search button within the box,Can I know the best way to do this as I am pretty new in this field.
Thanks in Advance.
Try this for watermark(hint text) on TextBox and search button at the top.
xaml
<Grid x:Name="ContentPanel" Grid.Row="0" Margin="12,0,12,0" Width="440" Height="100">
<TextBox Width="440" Name="txtSearch" Height="153" LostFocus="TextBox_LostFocus" GotFocus="TextBox_GotFocus" Text="This is whatever search..." TextWrapping="Wrap" Foreground="DarkGray" FontSize="18"></TextBox>
<Button x:Name="btnSearch" Click="btnSearch_Click" HorizontalAlignment="Right" Height="70" Margin="0,0,10,0">
<Button.Content>
<Image Source="Images/yoursearchIcon.png"></Image>
</Button.Content>
</Button>
</Grid>
code behind
private void TextBox_LostFocus(object sender, RoutedEventArgs e)
{
if (txtSearch.Text.Trim() == "")
{
txtSearch.Foreground = new SolidColorBrush(Colors.DarkGray);
txtSearch.Text = "This is whatever search...";
}
}
private void TextBox_GotFocus(object sender, RoutedEventArgs e)
{
if (txtSearch.Text == "This is whatever search...")
{
txtSearch.Foreground = new SolidColorBrush(Colors.Black);
txtSearch.Text = "";
}
}
Hope this helps
You could use the AutoCompleteBox where you could implement the search functionality too.
Have a look over here
http://www.geekchamp.com/articles/autocompletebox-for-wp7-in-depth
Hope it helps!

Attaching an Event Handler to a Code Generated DataTemplate

I have a question related to this one: I'm trying to attach an event to my StackPanel but it doesn't appear to connect when using the XamlReader. I can't get the ChildItem_Load method to get called. Does anyone know of a way to do this?
Other than this event the code works fine.
this._listBox.ItemTemplate = (DataTemplate) XamlReader.Load(
#"<DataTemplate xmlns=""http://schemas.microsoft.com/winfx/2006/xaml/presentation"">
<Border>
<StackPanel Loaded=""ChildItem_Loaded"">
<TextBlock Text=""{Binding " + this._displayMemberPath + #"}"" />
</StackPanel>
</Border>
</DataTemplate>"
Ok, I figured out a bit of a 'hack' solution, but it works.
Since it looks like the XamlReader doesn't have any knowledge of the local namespace when creating the DataTemplate I extended the StackPanel and "baked-in" the Load event. It's not exactly ideal, but it works:
this._listBox.ItemTemplate = (DataTemplate) XamlReader.Load(
#"<DataTemplate xmlns=""http://schemas.microsoft.com/winfx/2006/xaml/presentation""
xmlns:foo=""clr-namespace:Foo;assembly=Foo"">
<Border>
<foo:ExtendedStackPanel>
<TextBlock Text=""{Binding " + this._displayMemberPath + #"}"" />
</foo:ExtendedStackPanel>
</Border>
</DataTemplate>"
);
And the extended class:
public class ExtendedStackPanel : StackPanel
{
public ExtendedStackPanel() : base()
{
this.Loaded += new RoutedEventHandler(this.ChildItem_Loaded);
}
private void ChildItem_Loaded(object sender, RoutedEventArgs e)
{
// Logic here...
}
}