I am trying to create <Entry> field with HorizontalTextAlignment="End". When typing more than one word (ex: Burger King), hitting the spacebar between the words does nothing. Once you hit the "K" in King, it will add the space and register the K. This behavior only happens on iOS from what I can tell.
I have tried OnTextChanged Invalidating the size hoping this would redraw the input, but this was not working for me.
Any help would be appreciated.
Here is an example of the code I am working with.
<StackLayout
VerticalOptions="Center">
<!-- Place new controls here -->
<Label Text="Merchant"
VerticalOptions="CenterAndExpand" />
<Entry
HorizontalOptions="EndAndExpand"
HorizontalTextAlignment="End"
Placeholder="Name"
PlaceholderColor="Black"></Entry>
</StackLayout>
I reproduced your problem on Xcode. The Entry control in Forms corresponds to the native UITextField of iOS. On Xcode, I use UITextField to align the text to the right and click the space, but it cannot be displayed, so this is not a Forms problem, it is native to iOS.
Related
Is there a way to customize the "3-dot" button, that shows the Secondary ToolBarItem list in Xamarin.Forms UWP app?
It is possible to do so for iOS and Android, using the custom renderers. However, I was not able to locate the corresponding UIElement from the UWP custom renderer class.
Any ideas of how to access the button and change its appearance (particularly, change the icon)?
Derive from source code, Xamarin toolbar will be rendered as CommandBar within UWP platform. If you want to edit three dot. the easy way is edit the default UWP CommandBar style, find the MoreButton button element, and replace FontIcon glyph property value with you want. The following is CommandBar segment style that replace the three dot with heart.
<Button
x:Name="MoreButton"
Grid.Column="1"
MinHeight="{ThemeResource AppBarThemeCompactHeight}"
Padding="{ThemeResource CommandBarMoreButtonMargin}"
VerticalAlignment="Top"
Control.IsTemplateKeyTipTarget="True"
Foreground="{TemplateBinding Foreground}"
IsAccessKeyScope="True"
Style="{StaticResource EllipsisButtonRevealStyle}"
Visibility="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=CommandBarTemplateSettings.EffectiveOverflowButtonVisibility}">
<FontIcon
x:Name="EllipsisIcon"
Height="15"
VerticalAlignment="Top"
FontFamily="{ThemeResource SymbolThemeFontFamily}"
FontSize="15"
Glyph="" />
</Button>
There are many icons that you can customize. You can refer to Segoe Fluent Icons font
Note: You need to the set the margin of the FontIcon to adjust the icon vertically and horizontally centered.
Scenario 1:
I'm trying to create a mobile application using Xamarin. I want the position of my buttons and design to be in its place. I tried to run it on my smartphone, and the buttons and designs' position looks good, but when I tried to run it on another smartphone, they all got messed up. It changes its position. I used stacklayout here.
Scenario 2:
Then some people say they used grid. So, I tried using a grid in creating my login page. The problem is when I click on the entry box to type a username/password, of course the keyboard will pop up, but the whole UI will go higher/above its original position. When I tried to not type username/password or click the back button from the keyboard, the UI will go back to its original position.
How to fix any of these?
I tried to run it on my smartphone, and the buttons and designs'
position looks good, but when I tried to run it on another smartphone,
they all got messed up. It changes its position.
Xamarin.Forms XAML Support :
Xamarin.Forms use the platform-specific mechanisms to calculate the absolute pixel dimensions. Xamarin.Forms uses xaml as it's base markup language for renderng displays, and converts this into the native counterparts at runtime. Usually, you don't have to care about the resolution, it will adjust the views based on your layout and constraints.
Some useful link about Xamarin.Forms multi-device support :
Bringing Xamarin.Forms Apps to Tablets
Provides a few nice helper methods to extend the app for a better tablet experience
Xamarin.Forms Device Class
The Device class contains a number of properties and methods to help developers customize layout and functionality on a per-platform basis.
Layout for Tablet and Desktop apps
Discuss about the supported device types, and how to optimize layouts for tablets versus phones.
For Scenario 2
The problem is when I click on the entry box to type a
username/password, of course the keyboard will pop up, but the whole
UI will go higher/above its original position. When I tried to not
type username/password or click the back button from the keyboard, the
UI will go back to its original position.
I don't know what's the detail of your app, but you can refer to the following code,which does not present the problem you mentioned.
<Grid Margin="20" >
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<Frame HeightRequest="30" BackgroundColor="White" CornerRadius="10" Grid.Row="0" Grid.ColumnSpan="2" />
<Entry Grid.Row="0" Grid.Column="0" MaxLength="30" Placeholder="User Name:" ClearButtonVisibility="WhileEditing" />
<Image Source="head.png" Scale="0.6" Grid.Row="0" Grid.Column="1"/>
<Frame HeightRequest="30" BackgroundColor="White" CornerRadius="10" Grid.Row="1" Grid.ColumnSpan="2"/>
<Entry Grid.Row="1" Grid.Column="0" MaxLength="30" Placeholder="Password:" ClearButtonVisibility="WhileEditing" IsPassword="True"/>
<Image Source="Lock.png" Scale="0.6" Grid.Row="1" Grid.Column="1"/>
</Grid>
<Button Text="Login"/>
The result is:
Update
Since your controls(e.g. the two Entry ) are at the bottom of the page,when you want to enter something, the keyboard will pop up. The keyboard will surely take up some space on the screen. The system makes a decision as to how it should adjust the visible portion of your UI, but it might not get it right. To ensure the best behavior for your app, you should specify how you'd like the system to display your UI in the remaining space.
From the Android Developer Site link, we know
"adjustResize"
The activity's main window is always resized to make room for the soft
keyboard on screen.
"adjustPan"
The activity's main window is not resized to make room for the soft
keyboard. Rather, the contents of the window are automatically panned
so that the current focus is never obscured by the keyboard and users
can always see what they are typing. This is generally less desirable
than resizing, because the user may need to close the soft keyboard to
get at and interact with obscured parts of the window.
In xamarin, you can change the value of WindowSoftInputModeAdjust in class Application
<Application ...
xmlns:android="clr-namespace:Xamarin.Forms.PlatformConfiguration.AndroidSpecific;assembly=Xamarin.Forms.Core"
android:Application.WindowSoftInputModeAdjust="Resize">
...
</Application>
For more details, you can check:
https://learn.microsoft.com/en-us/xamarin/xamarin-forms/platform/android/soft-keyboard-input-mode .
https://developer.android.com/training/keyboard-input/visibility
I would like to add comments to my settings page. Something that looks like the comment area below "Ask to Join Networks" on the Settings > Wi-Fi page of the iOS Settings.
Can anyone suggest how I can do this and how I can make use of Dynamic Typing so that when the user changes the font size the comment area changes to match that in iOS settings?
Note that I am okay to use an iOS Renderer if needed. At this time I am just concerned with an iOS solution.
Thank you very much
On iOS 11, the background color of a setting page is #EAEAF1 and the text color within a non-control area is #59595F
So add a Label to a ViewCell but place it within another container so you can control the margin of the label otherwise your label text will be flush on the left side vs. vertically aligned to the setting controls.
Something like this will get your started:
<ViewCell>
<StackLayout
Orientation="Horizontal"
BackgroundColor="#EAEAF1">
<Label
Margin="15"
TextColor="#59595F"
HorizontalOptions="CenterAndExpand"
LineBreakMode="WordWrap"
Text="This is a multi-line custom ViewCell-based label, sdfsdfsdfsddf sdfsdf sdf sdf sdf sdf sd fsd fsd fsdf df" />
</StackLayout>
</ViewCell>
I have two buttons. One is an edit button that when clicked allows the editing of other objects on the page. My hope is to have the second button appear only once this "edit state" has been initiated. That part isn't very difficult. However, I don't want to just alter the 1st button's alignment from right to left to make space for the 2nd button (a cancel button) to the 1st button's right - I want to animate this movement, as if to make it appear that the moving of the 1st button to the left, is uncovering the 2nd button.
I've been searching for hours trying to find out how to do this, and there's a multitude of options for WPF, but not many solutions for UWP applications.
So far, I've found this:
<Button x:Name="EoIdButton" Grid.Row="0" Grid.Column="2" view:EventHandlers.Attach="Click" BorderBrush="DarkGray" FontFamily="Segoe MDL2 Assets" Content="{Binding EoIdButtonContent, Mode=TwoWay, Converter={StaticResource SegoeConverter}}" Style="{StaticResource CircleButtonStyle}" Visibility="{Binding EoVis, Mode=TwoWay, Converter={StaticResource BooleanToVisibilityConverter}}">
<interactivity:Interaction.Behaviors>
<core:DataTriggerBehavior Binding="{Binding SomeProperty, Mode=TwoWay}">
<core:ChangePropertyAction></core:ChangePropertyAction>
</core:DataTriggerBehavior>
</interactivity:Interaction.Behaviors>
</Button>
So, while I can change a property using this, I don't see how to create an animation. My guess, based on my searching would be to use a Storyboard, but again, most of the solutions I've found pertain to WPF and/or don't work because the scenario is too different. If someone has a solution for this, it'd be great.
For additionaly clarity
I have button 1:
(EditButton)
When (EditButton) is clicked, I want edit button to rendertransform/animate left and the result to look like so:
(EditButton)(CancelButton)
When either edit button or cancel button are clicked, I want it to return to the original state
I am working on an application which includes a registration form. The form contains multiple text entry boxes, and so a ScrollViewer is used to allow them all to be displayed on one page.
The following is a stripped down example of the XAML code I am using:
<Grid x:Name="LayoutRoot" Background="Transparent">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<StackPanel x:Name="TitlePanel" Grid.Row="0" Margin="12,17,0,28">
<TextBlock x:Name="ApplicationTitle" Text="SCROLLVIEWER TEST" Style="{StaticResource PhoneTextNormalStyle}"/>
<TextBlock x:Name="PageTitle" Text="registration" Margin="9,-7,0,0" Style="{StaticResource PhoneTextTitle1Style}"/>
</StackPanel>
<ScrollViewer Grid.Row="1">
<StackPanel>
<TextBlock Text="Hello" Margin="12,0,0,0"/>
<TextBox />
<TextBlock Text="Hello1" Margin="12,0,0,0"/>
<TextBox />
<TextBlock Text="Hello2" Margin="12,0,0,0"/>
<TextBox />
<TextBlock Text="Hello3" Margin="12,0,0,0"/>
<TextBox />
<TextBlock Text="Hello4" Margin="12,0,0,0"/>
<TextBox />
<TextBlock Text="Hello5" Margin="12,0,0,0"/>
<TextBox />
<TextBlock Text="Hello6" Margin="12,0,0,0"/>
<TextBox />
<TextBlock Text="Hello7" Margin="12,0,0,0"/>
<TextBox />
<TextBlock Text="Hello8" Margin="12,0,0,0"/>
<TextBox />
<TextBlock Text="END" Margin="12,0,0,0"/>
<TextBox />
</StackPanel>
</ScrollViewer>
</Grid>
(Note that the ScrollViewer is inside a grid cell, which means that the title panel should stay OnScreen at all times)
The scrolling works perfectly fine, so that is not an issue. However, when the user selects a TextBox to enter data (i.e. the soft keyboard opens), the system pushes the content of the entire page around (including the registration title panel), which is not expected behaviour.
[See the People app on Windows Phone and try adding a new contact. This contains a similar structure, but the ScrollViewer behaves correctly by only pushing content in the scrollviewer up]
Test Cases
Select a TextBox that is visible near the top of the screen, to open the keyboard.
Attempt to scroll to the bottom of the page with keyboard open.
Items at the bottom of the page are unreachable.
or
Select a TextBox that is visible near the bottom of the screen.
Content of entire page is pushed up.
Attempt to scroll to the top of the page with keyboard open.
Items at the top of the page are unreachable, and title panel never comes back into view until keyboard is closed.
Any help on resolving this issue would be appreciated. Thanks.
The problem is that the ScrollViwer height is not modified after the keyboard appears so it becomes clipped. One solution would be to modify the height of the scrollviwer (according to the keyboard height) and then reposition it (this might give you some headaches).
Another problem is knowing when the keyboard appears - you could register for the GotFocus/LostFocus events on all your TextBoxes but it's not a great solution. This might help you: http://blogs.msdn.com/b/jaimer/archive/2010/11/05/guessing-if-the-sip-is-visible-in-a-windows-phone-application.aspx
Hope this helps a little :)
I think you can solve this by coming at the problem from another angle. The phone will scroll up the page so that the SIP (software keyboard) never covers up the TextBox which has focus.
However you can force the SIP to hide by detecting touch events on the top element contained in your ScrollViewer, e.g.:
<ScrollViewer Grid.Row="1">
<StackPanel ManipulationDelta="OnScrollViewerGridManipulationDelta">`
Then, by giving the focus to a hidden button (0x0 pixels in size) this will force the SIP to close. Then it will be possible for your users to scroll up and down the scrollviewer as expected...
private void OnScrollViewerGridManipulationDelta(object sender, System.Windows.Input.ManipulationDeltaEventArgs e)
{
// This will hide the SIP if it is currently showing.
// We can't do this directly, but we can force this by taking focus away from any of the TextBoxes that may have it.
this.hiddenButton.Focus();
}
I've had the same issue with an app I've developed and the way I dealt with it was to find out the auto height of the panel containing the input textboxs and then manually set the height and add approximately 400 - 500 px to the bottom to make it scroll nicely. The effect is quite smooth and will not make your UI look "hackish" IMHO.
In your case you will have to find out the automatic height of the LayoutRoot Grid and then on RowDefinitionof Row 1 set the height manually - remembering to add an extra 400px (or whatever looks appropriate in your situation).
For ease of input I then handled each OnKeyDown event of each TextBox to change the focus to the next TextBox upon hitting Enter. On the last TextBox I set the focus to this.focus() which sets focus to the Page and hides the SIP.
Have a look at my small library please - https://siphelper.codeplex.com/
It modifies height of scrollviewer and content can be scrolled to the topmost/bottommost point.
If you have any suggestions - feel free to contact me.