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!
Related
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!
}
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?
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"
};
So basically I want to have a button with a certain background image.
For example, when the app is loaded you would see a button with it's background image as image1.png and then when it is clicked you see image2.png as the background image. Then when you click again, the background image is switched back to image1.png.
Even though I have done this in C#, I want to do it in XAML because every time you click a button it automatically lights up according to the theme color, and the only way to get rid of that is via XAML.
Here is my code so fa:
<Button x:Name="Buttons" Content="" HorizontalAlignment="Left" Margin="155,0,0,69" BorderBrush="Transparent" Width="140" Click="Button_Click" Height="141" VerticalAlignment="Bottom">
<Button.Background>
<ImageBrush Stretch="Fill" ImageSource="/Assets/image1.png"/>
</Button.Background>
</Button>
Thanks in advance!
Try this,
http://visualstudiomagazine.com/articles/2013/02/15/customize-windows-phone-togglebutton.aspx
Here, the ToggleButton that ships with the SDK has been templated to add a clicked and unclicked image.
Alternate Solution with a checkbox:
Creating own toggle button in WP8?
VisualStudio 2017 "Blank App"
XAML
<Button x:Name="button" Content="Button1" HorizontalAlignment="Left" Margin="400,20,0,0" VerticalAlignment="Top" RenderTransformOrigin="-1.258,-5" Click="Button_Click" Height="80" Width="80"/>
C# (Set the original image in the properties of the button: right-click -> Brush -> image)
private void Button1_Click(object sender, RoutedEventArgs e)
{
button1.Background = new ImageBrush { ImageSource = new BitmapImage(new Uri("ms-appx:/Images/timerg.png", UriKind.RelativeOrAbsolute)) };
}
or C#
private void Button1_Click(object sender, RoutedEventArgs e)
{
BitmapImage bmp = new BitmapImage();
Uri u = new Uri("ms-appx:/Images/timer.png", UriKind.RelativeOrAbsolute);
bmp.UriSource = u;
// NOTE: change starts here
Image i = new Image();
i.Source = bmp;
button1.Content = i;
}
I want to implement auto-complete on a textbox in a Windows 8 UI / Metro UI app using C#/XAML.
At the moment, when the soft / touch keyboard shows, it obscures the auto-complete box. However, on the text box focus, Windows 8 automatically scrolls the entire view up and ensures the text box is in focus.
In reality, all I want is the view to scroll up a little more (in fact, by the height of the auto-complete box).
I realise I can intercept the Showing event of InputPane.GetForCurrentView()
I can set InputPaneVisibilityEventArgs.EnsuredFocusedElementInView to true inside the Showing event fine (so Windows won't try to do anything).... however, how can I invoke the same scrolling functionality that Windows 8 would do, but ask it to scroll a little more!?
Here's the code for the main page:
<Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}">
<StackPanel VerticalAlignment="Center" HorizontalAlignment="Center" Margin="0,200,0,0">
<TextBlock HorizontalAlignment="Center" FontSize="60">App 1</TextBlock>
<TextBlock HorizontalAlignment="Center">Enter text below</TextBlock>
<TextBox HorizontalAlignment="Center" Margin="-10,0,10,0" Width="400" Height="30"/>
<ListBox HorizontalAlignment="Center" Width="400">
<ListBoxItem>Auto complete item 1</ListBoxItem>
<ListBoxItem>Auto complete item 2</ListBoxItem>
<ListBoxItem>Auto complete item 3</ListBoxItem>
<ListBoxItem>Auto complete item 4</ListBoxItem>
<ListBoxItem>Auto complete item 5</ListBoxItem>
</ListBox>
</StackPanel>
</Grid>
If you start up the simulator with the lowest resolution, use the hand to "touch" the textbox, this will bring up the soft keyboard. In the real app, the auto complete list will appear with items as the user enters text.
So in a nutshell, how can I move the screen up a bit more so the user can see the entire autocomplete list?
Bear in mind, in the real app, it'll be worse, as the user may not even notice the autocomplete list appearing "underneath" the keyboard.
I really would appreciate some advice, many thanks!
I have created an AutoCompleteBox for Windows Store apps, the nuget package is available at https://nuget.org/packages/AutoCompleteBoxWinRT
Ok, here is how I would tackle this since I cannot seem to find any way to control the scrolling of the app based on the appearance of the keyboard. I would create a user control that would form the basis for the auto-complete textbox.
<UserControl
x:Class="App6.MyUserControl1"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:App6"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
d:DesignHeight="300"
d:DesignWidth="400">
<Grid>
<TextBox x:Name="textBox" TextWrapping="Wrap" Text="TextBox" VerticalAlignment="Top" GotFocus="textBox_GotFocus" LostFocus="textBox_LostFocus" />
<ListBox x:Name="listBox" Height="150" Margin="0,-150,0,0" VerticalAlignment="Top" Visibility="Collapsed"/>
</Grid>
This is an incredibly basic implementation, so you will have to tweak to meet your needs.
Then, I would add the following code-behind to the user control
public sealed partial class MyUserControl1 : UserControl
{
// Rect occludedRect;
bool hasFocus = false;
public MyUserControl1()
{
this.InitializeComponent();
InputPane.GetForCurrentView().Showing += MyUserControl1_Showing;
}
void MyUserControl1_Showing(InputPane sender, InputPaneVisibilityEventArgs args)
{
if (hasFocus)
{
var occludedRect = args.OccludedRect;
var element = textBox.TransformToVisual(null);
var point = element.TransformPoint(new Point(0, 0));
if (occludedRect.Top < point.Y + textBox.ActualHeight + listBox.ActualHeight)
{
listBox.Margin = new Thickness(0, -listBox.ActualHeight, 0, 0); // Draw above
}
else
{
listBox.Margin = new Thickness(0, textBox.ActualHeight, 0, 0); // draw below
}
}
}
private void textBox_GotFocus(object sender, RoutedEventArgs e)
{
listBox.Visibility = Windows.UI.Xaml.Visibility.Visible;
hasFocus = true;
}
private void textBox_LostFocus(object sender, RoutedEventArgs e)
{
listBox.Visibility = Windows.UI.Xaml.Visibility.Collapsed;
hasFocus = false;
}
}
Next steps would be to expose properties to pass data to be bound to the ListBox. Hard core would be ListBoxItem templating and more, depending on how reusable you wanted it to be.