I'm creating a cross platform app using Xamarin Forms. I did all my testing in iOS and the app looks perfect. When I view the Android project in the Xamarin Previewer, the buttons' images are way too big. Since all my images are hi res, I created some smaller, low res ones and put them in the drawable folder and moved my other images to drawable-hdpi.
I expected the buttons to resize to the images but that's not the case. I remember reading somewhere how to handle this but after 2 days of searching I can't seem to find it.
The button is in a Grid and defined like this:
<Button x:Name="facebookBtn" Grid.Column="1" Grid.Row="5" Image="facebook_btn.png"/>
Here's what the button looks like:
I know at the time of the question probably ImageButton was not available , but now you can use ImageButton instead, this way you will also preserve the click effect of the button as stated in your comment.
<ImageButton x:Name="facebookBtn" Grid.Column="1" Grid.Row="5"
Source="facebook_btn.png" Aspect="AspectFill"/>
Related
I'm using Xamarin Forms picker Control, When the control shows up on Android Device, it has 2 buttons on it the "OK" and "Cancel", on IOS however i Get only the "Done" button, it causes the user to be unable to perform cancel operation to discard its new selection and forces him to scroll back to the original selection, is there is a way to have this button? or some workaround for it?
No, and it's unfortunate because there's nothing inherent to iOS itself that prevents it. In fact many applications allow you to cancel your pick selection.
It's just one of those Xamarin quirks.
You can use
iOSSpecific:Picker.UpdateMode="WhenFinished"
so that the picker value only gets set when the user presses the Done button - Not quite what you asked but as an alternative its not too bad.
You need this name space
xmlns:iOSSpecific="clr-namespace:Xamarin.Forms.PlatformConfiguration.iOSSpecific;assembly=Xamarin.Forms.Core"
and use in your picker like this
<Picker ItemsSource="{Binding Options}"
SelectedItem="{Binding Result}"
ItemDisplayBinding="{Binding Label}"
iOSSpecific:Picker.UpdateMode="WhenFinished" />
I've been trying now for the better part of a day to figure out something that is surely very simple - zooming in a WebView using the pinch gesture in a Caliburn Micro application.
I have a Caliburn Micro app that has several pages, one of which has a WebView on it. I've been trying to get that WebView to zoom without putting it in a separate ScrollViewer b/c the ScrollViewer seems to introduce other behavior oddities. I'm not having any luck getting the WebView to zoom.
EDIT: I'm basing my "it don't work" claim on behavior I'm experiencing when I'm remote debugging on a local Dell Venue tablet.
Here is what my ShellView page looks like in the big Caliburn Micro app (with the non-working WebView):
<Page
x:Class="FooBar.Views.ShellView"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d">
<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}" HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
<WebView x:Name="WebView"
HorizontalAlignment="Stretch"
VerticalAlignment="Stretch" />
</Grid>
</Page>
Despite my best efforts, this doesn't allow me to zoom.
To try to see what I'm doing wrong, I created another project that's a very simple, one-page Caliburn Micro app, with the exact same markup as the multi-page CM app and it works as expected. More specifically, the app starts, creates the first view - ShellView - loads the WebView source and then proceeds to allow me to zoom without issues.
I've added all the styles from the non-working app to the working app, thinking maybe there's something going on there I'm not aware of and the second app still works.
I've tried explicitly setting the Height/Width of the WebView and the containing Grid of the non-working app without any luck. I'm not setting any Heights/Widths of any object in the working app.
I know I've got to be doing something/omitting something very silly, but I can't see it. Please help.
Thanks!
Turns out, it was the website itself I was navigating to. It had the -ms-content-zooming CSS attribute set to none.
I found that CSS attribute from this SO question: How to disable zoom in Windows 8 webviews.
Then I used this SO post to inject it into my WebView: How to create a <style> tag with Javascript.
Worked like a charm and I was able to immediately start zooming. Thanks, SO!!!
I am New to Phonegap Development, I am Using jQuery mobile to create my UI. I have two Issues here,
Response of button for touch event is very slow. Why..?
I have Created a form with some elements like 2 Inputs text type, 2 Button one after another.
M problem is when I click on input, the keyboard popup makes the page move up, that's OK but when I press the keyboard resign button, the page stay little up.
Can you please help me out..!
and how to Optimize the responsiveness of JQuery mobile UI. I have completely avoided the images.
First, you can follow this link to remove the delay (300ms) from the click event.
And for the second one, i hope you are facing this issue for android. if so, then you need some changes to be done on the AndroidManifest.xml
Use below android property in application tag,
android:hardwareAccelerated="false"
android:windowSoftInputMode="adjustPan"
Will look something like
<application android:icon="#drawable/icon" android:label="#string/app_name"
android:hardwareAccelerated="false"
android:windowSoftInputMode="adjustPan">
This should resolve your issue.
I'm developing for Windows Phone 8, I've designed my application and I noticed that there is an "Assignment grid" code that can be uncommented by default on a new project.
Take a look below for the description in the file:
<!--Uncomment to see an alignment grid to help ensure your controls are
aligned on common boundaries. The image has a top margin of -32px to
account for the System Tray. Set this to 0 (or remove the margin altogether)
if the System Tray is hidden.
Before shipping remove this XAML and the image itself.-->
<!--<Image Source="/Assets/AlignmentGrid.png" VerticalAlignment="Top" Height="800" Width="480" Grid.Row="0" Grid.RowSpan="2" IsHitTestVisible="False" />-->
This is the background image that shows when it is uncommented:
I'm confused by this, why are there "common boundaries" determined by an image? Surely the boundaries are determined within the development environment, IE the borders of the phone image? Even on that image shown above, the default "My Application" text doesn't fit within the "alignment image". So they're not abiding by their own alignment rule?
What am I supposed to take from this information? By keeping everything within these boundaries I'm going to be losing half of the screen space!
Why do I have to align my controls within these boundaries, will they end up not being shown? I thought the Windows Phones have the same resolution anyway?
EDIT:
I was hoping to put a notification button and indication of the current logged in username at the very top of my application like so:
The only way that I could have these inside the grid would be if I had them drooping down quite far, it wouldn't look how I want.
Should I definitely be putting everything within the grid image, if not am I heading for trouble with my implementation?
The grids are used as guidelines to make your app look aesthetically pleasing. If your text go all the way to the edges of the screen your app will look ugly. The grids between the boxes is used for aligning elements inside your app. You don't want all your elements to be all sticking together, they will look ugly. Windows Phone development focuses greatly on design.
Hope that helped!
Song
I am trying to get a inputtext area and a submit button attached just to the right of it.
Ideally, the two together will use 100% of the width and be just side by side.
I have been trying to play around with ui-grid-a and similar options but everything fails miserably. You can see some attemps there. They are all equally ugly but the most complicated thing is to get the two elements side by side with one that has a fixed width (the button) and one that should take the rest of the width (hence neither fixed nor a percentage).
Do you have any idea how to render this properly?
In a dream world jQuery would have some built-in function to group those controls (just like <fieldset data-role="controlgroup" data-type="horizontal" data-role="fieldcontain"> for grouping checkboxes. But it does not seem so.
Thanks a lot for your help,
Mad
Hidden within jQuery Mobile's own documentation I found an approach that worked just fine for my search box + search button implementation.
In that page, they are comparing things side-by-side by using a simple <table> layout which inspired me to rely on this as well. While tables are NOT the go-to resource for doing layout/design well, it is extremely effective, simple, and circumvents many of the hassles of the workarounds I'm seeing here. Here is what my approach can do for your jsfiddle you linked. See the fourth iteration.
In other words, due to the complicated nature of how jQuery Mobile builds a page, adds in divs and styling that aren't in your markup, etc., this might be your best option for this particular scenario:
Wanting two columns of items where the second column is a fixed width.
Where the first column expands to fill the width of the screen on resize.
Where you want the elements to encompass the whole width of the device.
(Notably, if you wanted to tweak any of these particular aspects, some simple CSS padding or aligning should do the trick starting with this base solution)
<table style='width:100%'><tr>
<td>
<input type='text' (or type='search') />
</td>
<td style='font-size:80%; width:7em'>
<input type='submit' value='Submit' />
</td>
</tr></table>
Obviously, you should name and give an id to these items if you want to post them somewhere or manipulate them in javascript. Hopefully this proves helpful to someone else who is not put off by the nature of <table>s. I have been unable to see a downside to this approach using jQuery Mobile's simple interface / theming.
Lastly, you may want to stop and ask yourself if a submit button is even necessary. In mobile devices such as mobile safari, there is a button on the keyboard labeled "Go" whenever form input elements are being interacted with. This operates the same as a return key and can submit the search term. I have not vetted this option on other browsers at this time.
(This is not a solution to rival your approach to shift the icon of the search box. That is very clever but doesn't seem to be what your original question was about.)
I found a new answer for those of you that are looking at this thread.
I find it much better in terms of integration with jQuery Mobile. However, it could be vulnerable to upgrades in jQuery Mobile since it relies on how the icon image file is organized.
I simply added this CSS rule :
.ui-icon-searchfield:after {background-position: -252px !important;}
And the icon magically turns into a data-icon="check". Exactly what I was looking for! You can pick whatever icon you want by changing the offset and looking into images/icons-18-white.png for the icon mapping.
Of course you will want to refine the selector so you only target the input boxes you want to change.
Enjoy the hack.
the way I solved this problem was to float the input box next to the button, then have pagebeforeshow set the size of the input box to window width minus the size of the button.
After a fruitful discussion with adamdehaven, it turns out that:
A validate button is most of the time unnecessary and against the logic of mobile applications. It is better to use <input type="search" /> for such problems
The framework does not allow to customize the icon for type="search" content.
To make for the latter, I put together an ugly hack that you can see there. Unless you zoom in quite a lot you won't see a difference with the regular type="search" besides the darker grey. However, I suspect this solution could be vulnerable to minor changes to the framework in the future.
Another solution would be to directly pull out the icon and manually overimpose an home made icon button over the input. It should be slightly more robust (because at least the button would not be based on the framework) but requires a few quick photoshop changes to pull out the icon and put it in a propper file.