I'm using Bing Maps in my Windows Store app, I display some pushpins with some locations on it.
What I want to do is when the user taps on a pushpin, a popup appears with some info related to the location of that push pin. something similar to the popup when the user taps on my location in Microsoft maps application
How can this be done ?
Very easy, you can use the Tapped event of your Pushpin to trigger a popup then use a MapLayer.SetPosition to position your popup see http://msdn.microsoft.com/en-us/library/hh846488.aspx
Like this
currentLocationPushpin.Tapped += Current_location_pushpin_tapped;
then
void Current_location_pushpin_tapped(object sender, TappedRoutedEventArgs e)
{
MapLayer.SetPosition(placesAroundYou,location);
MapLayer.SetPositionAnchor(placesAroundYou, new Point(-200, 40));
BingMap.Children.Add(_mapLayer);
}
Try using a Popup control or fake one like this
You can either use a Popup control (see MSDN documentation here) or toggle visibility of a Border element to fake a Popup using Visibility="Collapsed", try this
<Border Background="#FFC3C2BF" Opacity="50" Margin="38,0,0,376" BorderThickness="1" BorderBrush="Black" CornerRadius="8" HorizontalAlignment="Left" MinWidth="50" Width="126" Height="auto">
<TextBlock x:Name="PushpinText" HorizontalAlignment="Left" TextWrapping="Wrap" VerticalAlignment="Top" Foreground="Black" Padding="10,10,10,10" />
</Border>
Related
I have UWP page and it is using data binding to set content on xaml elements (texts, buttons, image). I am setting the content using async calls (getting content from internet). In the page's c'tor, I subscribed to Loaded event. And obtained button using FindName() method on the control. Got the content on the button and it is coming as empty. I am assuming it is because I am setting content using async calls and when I debugged using breakpoints, it is indeed the case. The content is set after Loaded event is fired.
So my question is - what is the event fired when content on xaml elements becomes available?
Below is my code:
void ValuePropControl::ControlLoaded(Windows::Foundation::IInspectable const& sender, Windows::UI::Xaml::RoutedEventArgs const& e)
{
auto b{ sender.as<ValueProp::ValuePropControl>() };
auto buttttton = b.FindName(L"OpenFamilyAppButton");
auto bbttnn = buttttton.as<Windows::UI::Xaml::Controls::Button>();
auto contentt = bbttnn.Content();
auto texxxt = winrt::unbox_value<hstring>(contentt);
}
Variable 'texxxt' is empty.
<Grid
Grid.Column="0"
CornerRadius="3">
<Button
x:Name="OpenFamilyAppButton"
MinWidth="118"
MinHeight="30"
HorizontalAlignment="Left"
HorizontalContentAlignment="Center"
VerticalContentAlignment="Center"
AutomationProperties.Name="{x:Bind ViewModel.PrimaryActionAutomationName, Mode=OneWay}"
BorderThickness="1"
Click="{x:Bind ViewModel.InvokePrimaryAction}"
Content="{x:Bind ViewModel.PrimaryAction, Mode=OneWay}"
CornerRadius="3"
Style="{StaticResource AccentButtonStyle}" />
</Grid>
In Avalonia Ui,
I have multiple layouts in my ui and I want a very specific tab order,
something like
<TextBox Tabindex="2">
<StackPanel>
<TextBox Tabindex="1">
</StackPanel>
<TextBox Tabindex="0">
that would result in using the tab-key cycling from bottom to top.
Is this possible? I found nothing.
I don't think so. KeyboardNavigation.TabIndex is not implmented yet: https://github.com/AvaloniaUI/Avalonia/issues/3025.
You have some limited Control using the functions provided in KeyboardNavigation and by using another control, for example a DockPanel or a Relative Panel.
Here is a very basic example for how you can use a DockPanel to do what you wish to:
<DockPanel LastChildFill="False"
VerticalAlignment="Top"
Name="TabOrderConatiner">
<TextBox Name="First" Tag="2" DockPanel.Dock="Top"></TextBox>
<TextBox Name="Third" Tag="0" DockPanel.Dock="Bottom"></TextBox>
<TextBox Name="Second" Tag="1" DockPanel.Dock="Top"></TextBox>
</DockPanel>
However it is like I said above limited compared to what TabIndex can provide.
Apart from that you should also be able to set the first TabItem when the container becomes active like that from your code-behind:
var tabOrderContainer = this.FindControl<DockPanel>("TabOrderConatiner");
var initialElement = this.FindControl<TextBox>("Third");
KeyboardNavigation.SetTabOnceActiveElement(tabOrderContainer, initialElement);
but I did not manage to get this to work...
Existing OS version :WinowsPhone 8.1.
Device: Nokia Lumia 925.
XAML code:
<TextBox
x:Name="txtDtpEnd0"
Grid.Row="2"
Grid.Column="0"
Width="130"
Height="30"
Margin="22,0,0,0"
HorizontalAlignment="Stretch"
VerticalAlignment="Top"
BorderBrush="Gray"
BorderThickness="0.5"
FontFamily="Segoe UI"
FontSize="15"
Foreground="Black"
GotFocus="DeclarativeInlineButton_GotFocus">
<FlyoutBase.AttachedFlyout>
<DatePickerFlyout
x:Name="DtpEnd0"
Title="Select a date"
Closed="datePicker_Closed"
DatePicked="datePicker0_DatePicked" />
</FlyoutBase.AttachedFlyout>
</TextBox>
Code in c# :
private void DeclarativeInlineButton_GotFocus(object sender, RoutedEventArgs e)
{
Windows.UI.ViewManagement.InputPane.GetForCurrentView().TryHide();
TextBox TB = (TextBox)sender;
FlyoutBase.ShowAttachedFlyout(TB);
//Windows.UI.ViewManagement.InputPane.GetForCurrentView().TryShow();
}
Functionality in WP8.1
On focusing of this text box datepicker flyout appear an user can select a date from date picker.
Result In WP8.1
User able to select date and functionality work as expected.
Result In WP10
On focus of textbox softkeyboard appear but sometimes datepicker also appear.
easy Case for soft keyboard : when i hold back button for long and resume to app this and try to focus textbox soft keyboard start appearing. to remove softkeyboard i need to close app and relaunch it.
Conclusion:
But sometimes softkeyboard start appearing without back button hold.
Finally after applying latest windows 10 update(10.0.14393.693) this problem resolved without making any changes in app.
I'm trying to have a login page for my app, jus like the windows login account. But this is not a account sign in. Once the user sets a password, every time the user opens the app afresh, it asks for the password.
From this site, I got how to create the login page. But the problem im facing is, once i put the grid inside the ContentControl it does not expand.
I had to specify the height and width of the grid named mainbackground. I do not want to hard code the values because as the resolution changes the height and width may vary.
<Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush }">
<Grid.RowDefinitions>
<RowDefinition/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<ContentControl x:Name="parent" Grid.Row="0" Grid.RowSpan="1">
<Grid x:Name="MainBackground" Height="768" Width="1366">
<!-- rest of the xaml declaration-->
</Grid>
</ContentControl>
<ContentControl x:Name="container" Height="450" Margin="0,194,0,124">
<Popup x:Name="logincontrol1" IsOpen="False" >
</ContentControl>
</Grid>
Few questions,
Is this the correct method to create login page?
Why doesn't the grid expand to the who screen without me having to specify the height and width?
What is the actual use of content control? Didnt find elaborate explanations online.
Thank you
The advice is not to write your own login page, but to use the CredentialPicker control.
In your case, you are not hooking the picker into anything, and that is a valid scenario. Set the picker options up like this...
CredentialPickerOptions opts = new CredentialPickerOptions {
AuthenticationProtocol = AuthenticationProtocol.Basic,
Caption = "My App Login",
Message = "Log in here",
TargetName = "MyApp"
};
var res = await CredentialPicker.PickAsync(opts);
and then you can access the CredentialUserName and CredentialPassword values for your own logic.
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.