I'm developing a small Universal App under Windows 10 and Visual Studio 2015 and one of the first things I need to do is add an AppBar in my XAML code to display the standard bar with button at the top of the screen. But for some reason, when I write the following code, I get an ellipse (3 points) at the right and when I click it, immediately to the left of it, there's a black box that I want to get rid of. All I want is to add buttons to it.
Here is my code:
Here is what the output shows:
There's nothing in the code that displays this black area that overlays my buttons when I click the ellipse. Where is this coming from and how do I get rid of it?
Adding on to Justin XL's excellent response, to hide the ellipse in my BottomAppBar, I had to go to App.xaml. Near the bottom of the newly created AppBar style, set the ExpandButton visibility to collapsed:
<Button x:Name="ExpandButton" ... Visibility="Collapsed" .../>
Related
My goal is to view the content of the bottom page from the top of the other content page. In order to accomplish this, I used PushModalAsync to navigate and set the BackgroundColor property of the navigation page to Transparent. I can view the content on the bottom page on Android. However on the iOS platform, a black color is always displayed and I am unable to read the content of the bottom page. Why is the background color always black even when it is set to be transparent in PushModalAsync?
Note: The iOS platform displays a white screen when I change the navigation to PushAsync.
Expected Behavior:
Background color should not be black and it should be transparent when navigating using PushModalAsync
Actual Behavior:
Background color is always black even when the content page background color is set as transparent when navigating using PushModalAsync
Android Screenshot
iOS Screenshot
The issue reproducing sample is provided below:
DemoSample
If you want to do EXACTLY like that, it is not possible (it will require so much work that you can't expect someone to provide you the solution here).
On iOS that control (ViewController) is drawn that way in that presentation mode. So as long as you use that control and that mode it will work that way irrelevant if you use Xamarin or something else. As ViewControllers are most basic controls it is not realistic to replace them with something else. But you can replace presentation mode. In Xamarin.Forms you can do that this way:
<ContentPage ...
xmlns:ios="clr-namespace:Xamarin.Forms.PlatformConfiguration.iOSSpecific;assembly=Xamarin.Forms.Core"
ios:Page.ModalPresentationStyle="FormSheet">
...
</ContentPage>
This will result in somewhat different visual presentation but that is the only way to have one ViewController drawn over another without going into some deep customization that would require tons of code, especially on Xamarin.Forms.
You can also try some other values, but the default value will not work.
In iOS, the hierarchy is managed by the view controller. Each page has a separate view controller. A page consists of a window, a root view, and a subview. You cannot see the layout of the previous page by setting the background color to be transparent.
For more details, you can refer to the following documents:
User interface | Microsoft
The View Controller Hierarchy | Apple
I would like to create a error bar like the Mail app of Windows 10.
It shows the error and few seconds later, it is hidden with an animation that move the panel to the edge.
I suspect that I could use EdgeUIThemeTransition or PaneThemeTransition but I am not clear how to use it. The image show the error panel (red color). Is must be a StackPanel? a Popup? ...
Its probably made by creating custom Panel (Grid / StackPanel ...), injected into the view by xaml or code behind. The animation can be easily created manually by code.
Use DoubleAnimation to animate the TranslateX of the Transfomer of the panel for example.
Basically, I want to be able to create a menu which on clicking on some button will appear from left (or right) and on clicking anywhere on main screen the user would be able to dissmis the menu. For example the facebook app has something similar on all platforms (so on Windows 8 also).
I have found a solution for Windows phone (http://sviluppomobile.blogspot.cz/2013/08/add-lateral-menus-to-windows-phone.html), which is not the way to go for Windows 8. Maybe I could use some hand made animation for aflyover, which would be in default outside of viewport. However, I guess there must be better or ideally already proofed solution.
Also I found two questions here on SO, which asked for same thing I guess, but no answers there ...
How to do: lateral menu like in "Music" app on Windows 8 / 8.1 and
https://stackoverflow.com/questions/22613421/windows-8-1-apps-left-menu
I know, that it is not the best way on windows platform to implement menu (we have top app bar, right), but our customer just wants this.
I would like to ask for some hints or ideally a code for a native implementation for Windows 8.1 using XAML (C# or VB.NET). Thanks to everybody who will give it a thought.
You'd put a StackPanel with Orientation="Horizontal" in a ScrollViewer. Put three panels in the StackPanel - let's make them Grids and call them: left, middle and right. On SizeChanged events of the ScrollViewer - set the Width and Height of the middle grid to the same values as ActualWidth and ActualHeight of the ScrollViewer and perhaps set the left and right grids to be a little bit narrower to leave space to see a little bit of the middle panel when you scroll to the ends. Make the ScrollViewer scroll horizontally by setting Horizontal/VerticalScrollMode and scroll bar visibilities and make the ScrollViewer snap to your grid panels by setting the HorizontalSnapPointsType and HorizontalSnapPointsAlignment properties. Also set IsHorizontalRailEnabled on the horizontal ScrollViewer to true if you have any vertical ScrollViewers in your panels and make their IsVerticalRailEnabled="true" so only one of them scrolls depending on the manipulation direction. Finally - put a transparent overlay panel as a top child of the middle panel handle the tap events on the overlay to scroll the middle panel back into view when it isn't centered and in the handlers of the menu buttons scroll the horizontal ScrollViewer to the start/end.
i want to make my page scrollable.
as you can see in image that, there are 9 buttons and no room for adding more buttons
so, how can i add more buttons and make page scrollable so that any button can be selected?
i already tried to enclose all these button in scroll viewer but it didn't worked, it scrolls but when i release my finger from screen it quickly goes back i.e. i can see buttons which are at bottom but can't select those.
You have to give a particular height to your scrollviewer because by default s always get to set to the height of the contents in it so no scrolling :).
Just Set the Height Property of your Scrollviewer to some value. Like:-
<ScrollViewer Height="700">
Content..
</ScrollViewer>
cheers :)
I'm build a Mac application in the style of the Lion Mail.app. As part of this I'm attempting to create a simular toolbar to the one in the Mail.app but I can't seem to get the image in my toolbar button centered vertically.
Looking at the Mail.app toolbar I see a nice series of buttons with centered icons:
but when I go interface builder I can't seem to recreate the same button. What I get is:
What I've tried doing is, in Interface Builder:
Create a new window
Add a NSToolbar to that window
Add an NSButton to the toolbar with Style - 'Push', Image - 'Envelope', Position - 'NSImageOnly', Scaling - 'Proportionally Down'
As you can see the icon is clearly not centered vertically on the button like those in the Mail.app toolbar.
Anybody have any ideas???
At the moment I'm using XCode 4.2 and laying out this button with Interface Builder. I'm trying to build the toolbar button by ONLY adding the image to the button and not painting the button for each item, ie drawing the border and icon.
Any help would be greatly appreciated as this has been driving me a little nuts.
Thanks in advance - AYAL
Turns out the answer to this problem was much simpler then I had expected. After a lot of teeth gnashing, hair pulling, and twiddling pixels I came across the solution.
Instead of using a 'Push' button I simply had to switch to a 'Round Textured' button. Once I did that any image I added to the button was nicely centered. Next I just had to manually scale my image to look right.
The recipe then for a Mail.app Toolbar is as follows:
Add a button to your Toolbar
Set the button style to 'Rounded Textured'
Set the image of the button
Set the position to 'NSImageOnly'
Set the button size to 40 x 25 as well as the min and max sizes of the ToolbarItem
The result is a toolbar that can look very simular to the Mail.app toolbar.
Thanks All - AYAL
One way to do it is to have your image actually be the button i.e. take up all of the button's canvas. You will have to use the button's setBordered: method so the button's border is not drawn.
you could make the button image in something like gimp or photoshop then use that as the background or image for the button.
i feel like your going to say "this is what im doing". and maybe you made the little mail icon but i mean for you to make the whole button, outline and everything, then use that for the button image. make sense?
like here, just use this as the background