I have a Xamarin.Forms screen defined is the core library as below:
Content = new WebView
{
VerticalOptions = LayoutOptions.FillAndExpand,
HorizontalOptions = LayoutOptions.FillAndExpand,
Source = "https://google.com",
};
As a result for iOS the content is overlapped with the system tray (top bar with system icons). You can see them in left top corner. The issue is the same tray is separated from webview for Android and I couldn't just add static top margin. I need to do it on "per platform" basis. Is there a way to accomplish that?
This is possible. You can use the Device.OnPlatform() method. Find out more in the API docs.
Usage could be:
Device.OnPlatform (iOS: () => webView.Padding = new Thickness (0, 20, 0, 0));
20 is the height of the statusbar.
There is also some documentation about platform tweaks here.
Related
I would like to create a solution that will be like an icon on the taskbar and once clicked it will open as a small popup above the taskbar which will not interrupt the user or other windows similar to the Microsoft People app that will show on the bottom right as the following image:
This question has a similar title to my question but it's different subject where the asker was asking for the AppBar of the UWP app which is not my intention.
Other question
Is there a way to do that for normal developers, enterprise companies, or Microsoft partners?
Update 3rd :
Recently I tried to build the App, shared in this repo https://github.com/ejabu/TrayApp
things to note :
WindowStyle
to get Borderless window like People App.
<!-- MainWindow.xaml -->
<Window
....
WindowStyle="None">
<Grid/>
</Window>
ShowInTaskbar
ShowInTaskbar -> False
to prevent it appears on Taskbar
<!-- MainWindow.xaml -->
<Window
....
ShowInTaskbar="False"
...>
<Grid/>
</Window>
Use Hide Method
/// MainWindow.xaml.cs
private void Hide_Window()
{
this.Hide(); /// Minimize Window
}
Adjust Position according to Taskbar
/// MainWindow.xaml.cs
private void AdjustWindowPosition()
{
Screen sc = Screen.FromHandle(new WindowInteropHelper(this).Handle);
if (sc.WorkingArea.Top > 0)
{
Rect desktopWorkingArea = SystemParameters.WorkArea;
Left = desktopWorkingArea.Right - Width;
Top = desktopWorkingArea.Top;
}
else if ((sc.Bounds.Height - sc.WorkingArea.Height) > 0)
{
Rect desktopWorkingArea = SystemParameters.WorkArea;
Left = desktopWorkingArea.Right - Width;
Top = desktopWorkingArea.Bottom - Height;
}
else
{
Rect desktopWorkingArea = SystemParameters.WorkArea;
Left = desktopWorkingArea.Right - Width;
Top = desktopWorkingArea.Bottom - Height;
}
}
Update 2nd :
https://github.com/AronDavis/TwitchBot/blob/master/TwitchBotApp/Notification.xaml
Update:
https://www.youtube.com/watch?v=jdvD55ir1is
original :
this is the good example
Final Result
the Window page has no Close button. And also it cannot be dragged by commenting this line https://github.com/ejabu/AcrylicWindow/blob/343f4f5a6bc23109a97640f9ac35facb31e9ae43/AcrylicWindow/MainWindow.xaml.cs#L30
I found example project here
https://github.com/shenchauhan/MyPeople/tree/master/MyPeople/MyPeople
We may look at MyPeopleCanvas then.
I found also there is new update from Microsoft, that maybe we can replace Icon images with text in System Tray icon in the near future.
https://newswwc.com/technology/dotnet-technologies/personalized-content-at-a-glance-introducing-news-and-interests-on-the-windows-10-taskbar/
This is the closest i got to what i needed.
Although it's using ElectronJS and not WPF or UWP. But since it's doable with ElectronJS then it should also be doable on WPF.
https://github.com/sfatihk/electron-tray-window
Library is not created by me.
I'm writing a Forms app. How to position a view right at the bottom of the screen and when some entry is focused and the keyboard is visible, the view to be right above the keyboard? On android, it is possible to set Window.SetSoftInputMode(SoftInput.AdjustResize) and that will make the Content resize every time the keyboard is appearing/disappearing. However, I need the status bar to be transparent and SoftInput.AdjustResize doesn't work with WindowManagerFlags.TranslucentStatus. My question is, how do I position a view right above the keyboard without setting SoftInput.AdjustResize?
Take this example:
public Page1()
{
InitializeComponent();
var al = new StackLayout
{
HorizontalOptions = LayoutOptions.FillAndExpand,
VerticalOptions = LayoutOptions.FillAndExpand
};
var button = new BoxView {Color = Color.Red, VerticalOptions = LayoutOptions.EndAndExpand};
var entry = new Entry {HorizontalOptions = LayoutOptions.Fill};
al.Children.Add(entry);
al.Children.Add(button);
Content = al;
Content.SizeChanged += (sender, args) =>
{
button.Layout(new Rectangle(0, Content.Height - 120, App.Dimensions.Width, 120));
};
}
If you run this code, when you'll press the input, nothing will change, the "button" will remain on the bottom of the screen not visible because of the overlaying keyboard.
If we add Window.SetSoftInputMode(SoftInput.AdjustResize) in MainActivity's onCreate it works fine, the box is moved above the keyboard on entry's focus.
Also, if we change Content = al; to Content = new ScrollView {Content = al};, it works fine.
However, if we add Window.AddFlags(WindowManagerFlags.TranslucentStatus); in MainActivity's onCreate, none of those methods work anymore.
Thanks in advance.
I'm writing a Forms app. How to position a view right at the bottom of
the screen and when some entry is focused and the keyboard is visible,
the view to be right above the keyboard?
If you are using Xamarin Forms, then wrapping your UI elements in a ScrollView should do the trick. Something like this if you are using XAML:
<ScrollView>
<ScrollView.Content>
// Your Original XAML content here
</ScrollView.Content>
<ScrollView
EDIT:
Looking at the example you just added, I THINK I know what is happening. So, the ScrollView Trick only works for elements that require keyboard input. I.e if you instead had an entry element at the bottom of the screen, and wrapped everything in a ScrollView like I suggested, then the keyboard should push the entry element up for you. However in your case you have a boxview at the bottom of the screen, which the keyboard simply runs over.
What you have for Content.SizedChanged is a good idea, however I don't think the size of the view actually changes when the keyboard pops up (at least, Content.SizeChanged isn't called when the keyboard pops up), so that part of your code is really only called on loading of the page from the MCVE you provided.
HOWEVER, I was able to move the 'button' up when the keyboard appears by doing this:
Replace
Content.SizeChanged += (sender, args) =>
{
button.Layout(new Rectangle(0, Content.Height - 120, App.Dimensions.Width, 120));
};
With
entry.Focused += (sender, e) =>
{
button.TranslationY -= 120;
};
You may have a heck of a time getting that magic translation number for all the different devices and orientations though. When I tested it on the iPhone 6 simulator I had to push way above 120 before I could see it above the keyboard.
Hope that helps!
I am using Xamarin.Form platform to use Map feature in my application. I could able to add an annotation on the map. However, I would like to know is there a way to add disclosure indicator on annotation that enables user to tap to go to DetailViewController.
using Xamarin.Forms.Maps;
Map map;
Title= "MapView";
map = new Map {
IsShowingUser = true,
HeightRequest = 100,
WidthRequest = 960,
VerticalOptions = LayoutOptions.FillAndExpand
};
map.Pins.Add(new Pin {
Position = new Position(29.7,-95.0177232),
Label = "Boardwalk"
});
I want something similar to the following screnshot.
I don't believe this is possible to provide your own views in the current Xamarin.Forms Maps component (v1.2.3x) as it is very locked down.
Update 1:-
Unfortunately not. This is a requested feature for Xamarin.Forms, as of October 24 here.
The only way around at present would be to create your own custom renderer.
I'm new to WP7 and I want to know if there is any way to add items like a TextBlock to
a page dynamically using the .cs part??
Try this
var textBlock = new TextBlock();
// set some properties
YourMainContainer.Children.Add(textBlock); //
If you need more details just comment this
If you know the controls that you'd like to appear on the page dynamically, then I'd approach the problem by including those controls in the XAML and using the Visibility property on the controls to show and hide them. In Silverlight, the Visibility enumeration is limited to the values Visible and Collapsed, so when it isn't visible the it doesn't take up any space. You can control Visibility with data-binding by using a converter (search on "visibility bind converter") if you are intersted in pursuing that avenue. You can show/hide groups of controls by changing the Visibility of their parent control, such as StackPanel or custom control.
Try this one,
TextBlock txtmsg = new TextBlock();
txtmsg.Text = "New Program.";
txtmsg.Margin = new Thickness(10, 20, 10, 10);
txtmsg.TextWrapping = TextWrapping.Wrap;
txtmsg.FontSize = 28;
txtmsg.TextAlignment = TextAlignment.Center;
ContentPanel.Children.Add(txtmsg);
I am trying to design a Blackberry Application and I am wondering if there are any resources on how to create custom user interface elements, skin existing ones and what other possibilities are there?
I have developed a few iPhone applications with custom UI and stuff, so not sure what BB world offers in terms of UI development.
Any tips, suggestions or ideas would be great.
There are no skins in Blackberry, two ways I know to achive skin effect are
create own theme
create custom controls
Create BlackBerry Theme
removed dead Imageshack link - BlackBerry Theme Builder
What can you do with Theme Builder?
Some of its main features allow you
to:
Customize the BlackBerry application icons
Change the Home screen banner image and icon/indicator colors
Create your own buttons
Customize the look of dialog and pop up screens
Customize an idle screen
Customize the look of menus and lists
Customize the phone application screens
Customize fonts used on the BlackBerry device
How To Create Your Own Personal Blackberry Themes by BrileyKenney
bb dev journal - Just Theme It!
BlackBerry Themes & Animated Graphics
Bad news - theme is applied to whole device OS and each application
Althought created theme may be a standalone software design product, I don't think it's a great idea to create own theme for developed application.
Design Mockup
Programming gui may take some time and in case you want to resolve some questions in GUI planning without coding, you may want to draw GUI mockup.
You can use free BlackBerry UI Prototyping Visio Stencils - v1.0 from ArtfulBits.
removed dead Imageshack link
removed dead Imageshack link
Creating custom control
By creating custom control you can configure
control size
control shape
control background (color, image)
control font (size, style, color)
control border (size, style, color)
All of this for states
disabled
normal
focused
active (clicked)
In the end you can simply skinn your control by setting background image
Basics
devsushi.com: Blackberry JDE API - User Interface Field Reference will basically give the idea of existent blackberry ui controls, with codesnippets and screenshots.
SO: Add items to a ListField ( BlackBerry )
SO: Embedded HTML control for Blackberry?
SO: Blackberry - how to get datetime value from DateField?
SO: Styling a BlackBerry Application to Look Like an iPhone
Managers, layout
Even using standard controls, we need to layout and group the way we want, thus we need custom managers:
Thinking BlackBerry: BlackBerry UI - Creating a basic field manager
Thinking BlackBerry: Simple BlackBerry Grid Layout Manager
Thinking BlackBerry: Making a Custom Screen, Vertically Scrolling and more
SO: Scrolling problem in Blackberry application
SO: How to set a ScrollBar to the VerticalFieldManager in Blackberry?
Wireless: Create a custom layout manager for a screen
SO: Blackberry - get all child fields of control
SO: Cancel scrolling in Layout Manager
SO: Creating custom layouts in BlackBerry
SO: Blackberry setting the position of a RichtextField in FullScreen
SO: Fun with Field Managers
SO: BlackBerry - Custom menu toolbar
SO: BlackBerry - Custom centered cyclic HorizontalFieldManager
Custom controls
Set of articles about writing custom controls:
Thinking BlackBerry: BlackBerry UI - A simple custom field
Coderholic: Blackberry Custom Button Field
Wireless: Create your own VirtualKeyboard for BBStorm
Wireless: ListField with check boxes
CodeProject: Creating a XY Chart/Plot as a BlackBerry Custom Field
SO: Blackberry - Custom size EditField
SO: Blackberry - How to add border to BasicEditField?
SO: Blackberry - Setting LabelField background color
SO: Blackberry change color of child fields on horizontal manager focus
SO: Setting background and font colors for RichTextField, TextField
SO: Blackberry Java: TextField without the caret?
SO: Image Map-like Blackberry Control - CLDC Application
SO: Blackberry - single line BasicEditField with large text
SO: Blackberry - custom BubbleChartField
SO: Blackberry - get checked items from list with checkboxes
SO: BlackBerry - Creating custom Date Field
SO: BlackBerry - How to create sub menu?
SO: BlackBerry - How can i show a Label with emoticons??
SO: BlackBerry - Show typing mode indicator programmatically
Graphics, animation
SO: BlackBerry - draw image on the screen
SO: Blackberry - background image/animation RIM OS 4.5.0
SO: Blackberry - Loading screen with animation
SO: How to set Anti Aliasing in Blackberry Storm?
SO: Blackberry setting a clipping region/area
SO: Is it better to use Bitmap or EncodedImage in BlackBerry?
SO: Blackberry - fields layout animation
Fonts
Wireless: Change fonts in a BlackBerry application
Developer Journals: Fonts
SO: How do I create a custom font for a blackberry application
SO: How to set a font to LabelField text in Blackberry?
SO: How to make Blackberry UI more attractive?
SO: How to change the font color of blackberry label field dynamically?
SO: BlackBerry - Unicode text display
Example of standard Media application skin on Bold 9000
removed dead ImageShack link - sliced Media application
removed dead ImageShack link - Sliced images
Use extention of ButtonField to map images with buttons:
class BitmapButtonField extends ButtonField {
Bitmap mNormal;
Bitmap mFocused;
Bitmap mActive;
int mWidth;
int mHeight;
public BitmapButtonField(Bitmap normal, Bitmap focused,
Bitmap active) {
super(CONSUME_CLICK);
mNormal = normal;
mFocused = focused;
mActive = active;
mWidth = mNormal.getWidth();
mHeight = mNormal.getHeight();
setMargin(0, 0, 0, 0);
setPadding(0, 0, 0, 0);
setBorder(BorderFactory
.createSimpleBorder(new XYEdges(0, 0, 0, 0)));
setBorder(VISUAL_STATE_ACTIVE, BorderFactory
.createSimpleBorder(new XYEdges(0, 0, 0, 0)));
}
protected void paint(Graphics graphics) {
Bitmap bitmap = null;
switch (getVisualState()) {
case VISUAL_STATE_NORMAL:
bitmap = mNormal;
break;
case VISUAL_STATE_FOCUS:
bitmap = mFocused;
break;
case VISUAL_STATE_ACTIVE:
bitmap = mActive;
break;
default:
bitmap = mNormal;
}
graphics.drawBitmap(0, 0, bitmap.getWidth(), bitmap.getHeight(),
bitmap, 0, 0);
}
public int getPreferredWidth() {
return mWidth;
}
public int getPreferredHeight() {
return mHeight;
}
protected void layout(int width, int height) {
setExtent(mWidth, mHeight);
}
}
put HorizontalFieldManagers inside VerticalFieldManagers and vice versa
use different images for normal, focused and active states
if you need a custom shaped buttons, you can draw them over in manager paint() method override, after super.paint()
Rest part of code:
class Scr extends MainScreen implements FieldChangeListener {
Bitmap mBmpHeader = Bitmap.getBitmapResource("header.png");
Bitmap mBmpCover = Bitmap.getBitmapResource("cover.png");
Bitmap mBmpTitle = Bitmap.getBitmapResource("title.png");
Bitmap mBmpTimeline = Bitmap.getBitmapResource("timeline.png");
Bitmap mBmpLeftside = Bitmap.getBitmapResource("leftside.png");
Bitmap mBmpPrevNrm = Bitmap.getBitmapResource("btn_prev_normal.png");
Bitmap mBmpPlayNrm = Bitmap.getBitmapResource("btn_play_normal.png");
Bitmap mBmpPauseNrm = Bitmap.getBitmapResource("btn_pause_normal.png");
Bitmap mBmpStopNrm = Bitmap.getBitmapResource("btn_stop_normal.png");
Bitmap mBmpNextNrm = Bitmap.getBitmapResource("btn_next_normal.png");
Bitmap mBmpPrevFcs = Bitmap.getBitmapResource("btn_prev_focused.png");
Bitmap mBmpPlayFcs = Bitmap.getBitmapResource("btn_play_focused.png");
Bitmap mBmpPauseFcs = Bitmap.getBitmapResource("btn_pause_focused.png");
Bitmap mBmpStopFcs = Bitmap.getBitmapResource("btn_stop_focused.png");
Bitmap mBmpNextFcs = Bitmap.getBitmapResource("btn_next_focused.png");
Bitmap mBmpRightside = Bitmap.getBitmapResource("rightside.png");
VerticalFieldManager mMainManager;
HorizontalFieldManager mHeaderManager;
HorizontalFieldManager mCoverManager;
HorizontalFieldManager mTitleManager;
HorizontalFieldManager mTimelineManager;
HorizontalFieldManager mToolbarManager;
BitmapField mHeader;
BitmapField mCover;
BitmapField mTitle;
BitmapField mTimeline;
BitmapField mLeftside;
BitmapField mRightside;
BitmapButtonField mBtnPrev;
BitmapButtonField mBtnPlay;
BitmapButtonField mBtnPause;
BitmapButtonField mBtnStop;
BitmapButtonField mBtnNext;
public Scr() {
add(mMainManager = new VerticalFieldManager());
addHeader();
addCover();
addTitle();
addTimeline();
addToolbar();
}
private void addHeader() {
mMainManager.add(mHeaderManager = new HorizontalFieldManager());
mHeaderManager.add(mHeader = new BitmapField(mBmpHeader));
}
private void addCover() {
mMainManager.add(mCoverManager = new HorizontalFieldManager());
mCoverManager.add(mCover = new BitmapField(mBmpCover));
}
private void addTitle() {
mMainManager.add(mTitleManager = new HorizontalFieldManager());
mTitleManager.add(mTitle = new BitmapField(mBmpTitle));
}
private void addTimeline() {
mMainManager.add(mTimelineManager = new HorizontalFieldManager());
mTimelineManager.add(mTimeline = new BitmapField(mBmpTimeline));
}
private void addToolbar() {
mMainManager.add(mToolbarManager = new HorizontalFieldManager());
mToolbarManager.add(mLeftside = new BitmapField(mBmpLeftside));
mToolbarManager.add(mBtnPrev = new BitmapButtonField(mBmpPrevNrm,
mBmpPrevFcs, mBmpPrevFcs));
mToolbarManager.add(mBtnPlay = new BitmapButtonField(mBmpPlayNrm,
mBmpPlayFcs, mBmpPlayFcs));
mBtnPlay.setChangeListener(this);
mBtnPause = new BitmapButtonField(mBmpPauseNrm, mBmpPauseFcs,
mBmpPauseFcs);
mBtnPause.setChangeListener(this);
mToolbarManager.add(mBtnStop = new BitmapButtonField(mBmpStopNrm,
mBmpStopFcs, mBmpStopFcs));
mToolbarManager.add(mBtnNext = new BitmapButtonField(mBmpNextNrm,
mBmpNextFcs, mBmpNextFcs));
mToolbarManager.add(mRightside = new BitmapField(mBmpRightside));
}
public void fieldChanged(Field field, int context) {
if (mBtnPlay == field)
play();
else if (mBtnPause == field)
pause();
}
private void pause() {
mToolbarManager.replace(mBtnPause, mBtnPlay);
}
private void play() {
mToolbarManager.replace(mBtnPlay, mBtnPause);
}
}
The resources aren't very good unfortunately. The best source of information is usually Google linking to blogs with the specific topic you're looking for.
If you're just beginning to write BB GUI code, I would highly recommend getting to know the Manager and Field classes since you'll probably have to write many custom extensions of them.