I have been developing mobile apps within Flex for a long time now and this issue is really annoying. I have an application that I want to use with the Split View Navigation. So when the App is in Landscape the menu will be on the left of the split screen and when in portrait it will appear as a button at the top.
I have gone through the exact steps as I know them on how to achieve this. Below is what I have in my Default Package File:
<s:states>
<s:State name="portrait"/>
<s:State name="landscape"/>
</s:states>
<s:SplitViewNavigator id="svn" width="100%" height="100%" autoHideFirstViewNavigator="true">
<s:ViewNavigator id="leftNav" width="310" height="100%" firstView="views.Menu"/>
<s:ViewNavigator id="rightNav" width="100%" height="100%" firstView="views.Home">
<s:actionContent.portrait>
<s:Button id="NavButton" label="Menu" fontSize="15" click="svn.showFirstViewNavigatorInPopUp(NavButton)"/>
</s:actionContent.portrait>
</s:ViewNavigator>
</s:SplitViewNavigator>
however when I use this code and the app is in landscape I can still see the menu button in the right pane at the top, whats even stranger is if I click this button when in landscape the right hand section will expand to fill the screen and the menu will go into the pop-out box.
Is there something I am missing here or something else I have to set as have tried about 20 different approaches with no luck and its sooooo frustrating? Thanks in advance :-)
I know this is an old question, but it's something that happens to a lot of people!
So the solution is actually very simple, just add visible.landscape="false" to your button and you're done, so you'll end up with the button tag like this:
<s:Button visible.landscape="false" id="NavButton" label="Menu" fontSize="15" click="svn.showFirstViewNavigatorInPopUp(NavButton)"/>
I see on you comments that the states are changing when device rotation is changed, but if for some reason this isn't working, you could add a resize event handler to your application (or view) and then do something like
protected function resizeHandler(event:ResizeEvent):void
{
if( width > height ){
currentState = "landscape";
}else{
currentState = "portrait";
}
}
Again i know you may probably already have solved this, but maybe it'll help someone else!
Related
Silly question, but how do you scroll down in the wp7 design pane for visual studio ?
I have a lot of StackPanel elements in the page and the design pane only shows the first ones who fit the wp screen. i can't find a way to scroll down to the other elemets.
in the capture attached, you can see that after "Units in stock" it doesn't show anything else although i have more elements after.
Have you tried increasing the design height in the statement which somewhat looks like this? You may find it on the top of your XAML page.
<phone:PhoneApplicationPage mc:Ignorable="d" d:DesignWidth="480" d:DesignHeight="1500" />
Unless I'm not understanding the question, just put your StackPanel inside a ScrollViewer. That's what I've done in my apps.
I have a registration form on my layout grid, made out of a stackPanel. Textboxes are taking most of the screen (800px) along with a button. When user is positioned in one of the text boxes, keyboard covers almost half the screen and in order to access boxes below, they first have to click somewhere blank to remove the keyboard and then click another box. It isn't possible to scroll down.
I want to enable same behaviour like when editing name in contacts, but didn't manage yet. How to achieve this?
Try wrapping it into a ListBox or a ScrollViewer (probably easier), like so:
<ScrollViewer>
...
</ScrollViewer>
Also, check to make sure you don't have the same problem described here.
I'm not a WP7 developer but here's what I do in Android and iOS and you may get a hint of what to do.
I wrap my forms in a Scrollable View. This gives easy scrollable features to users without the need of anything else.
I am developing a Firefox addon. I need to create two buttons which exactly looks and operates like back and forward buttons. But the difference is I need to put my own icon inside them. I am completely blank. Any directions will be really helpful.
[Edit]
I am asking for creating two buttons with the look and feel of back/forward button(Although there are two buttons, it seems like one) in the latest Firefox on windows environment.
Thanks.
It's really easy to add your own Image to toolbar buttons. Read these links you'll have your answer & don't forget to link your images for the buttons in CSS file.
https://developer.mozilla.org/en/XUL_School/Adding_Toolbars_and_Toolbar_Buttons
https://developer.mozilla.org/en/XUL_Tutorial/Toolbars
https://developer.mozilla.org/en/CSS/-moz-border-image
https://developer.mozilla.org/en/custom_toolbar_button
https://developer.mozilla.org/en/XUL/Toolbars/Creating_toolbar_buttons
For example:
<window id="main-window">
<toolbox id="navigator-toolbox">
<toolbar id="xulschoolhello-toolbar" toolbarname="&xulschoolhello.toolbarName.label;"
accesskey="&xulschoolhello.toolbar.accesskey;"
customizable="true" mode="icons" context="toolbar-context-menu"
defaultset="xulschoolhello-hello-world-button"
insertbefore="PersonalToolbar" />
</toolbox>
</window>
CSS File:
//LInk you image here//
toolbarbutton.xulschoolhello-toolbarbutton,
window:not([active="true"]) toolbarbutton.xulschoolhello-toolbarbutton,
toolbar[iconsize="small"] toolbarbutton.xulschoolhello-toolbarbutton {
list-style-image: url("chrome://xulschoolhello-os/skin/toolbar.png");
}
I have an inkpresenter inside a scrollviewer for a Windows Phone 7 application. Often when the user starts to draw, the scrollviewer takes over mid stroke, making it hard to actually draw stuff. I tried disabling the ScrollBarVisibility when the inkpresenter needs to be used, but then the scroll viewer automatically pans back up to the top. So how can I prevent the scrollviewer from scrolling when the inkpresenter is in use, while still maintaining the scroll position?
<ScrollViewer Name="ScrollBars" VerticalScrollBarVisibility="{Binding ScrollEnabled}" >
<Canvas Height="2000">
...
<InkPresenter Name="InkCanvas" Strokes="{Binding Strokes}" Canvas.Top="500" />
</ Canvas >
</ScrollViewer >
Edit:
So I tried using the scrolling function in the codebehind to update the vertical offset, where I have a button linked to the following code:
var offset = scrollViewer.VerticalOffset;
ScrollEnabled = ScrollBarVisibility.Disabled;
scrollViewer.ScrollToVerticalOffset(offset);
Again, it just goes back up to the top. Any idea whats wrong?
After disabling the VerticalScrollBarVisibility call Scrollviewer.ScrollToVerticalOffset to manually bring the InkPresenter into view.
When a Button having Content / Text 'ClickMe' is clicked, 'ClickMe' text is automatically arranged to foreground of the button.
But when user clicks the button having image on its background, background image becomes invisible & the foreground of button looks fully white.
Can we see the image on foreground instead of white color.
Is there any chance to change the foreground effect of the button when user clicks on button?
My Code "Button Height="128" HorizontalAlignment="Left" Margin="307,138,0,0" Name="button2" VerticalAlignment="Top" Width="150" BorderThickness="1">
"Button.Background>
ImageBrush ImageSource="/WinApp;component/Icons/camerabtn.png" />
/Button.Background>
/Button>"
Thanks in advance to all.
To do this you need to change the style of the button.
Easiest way to do that is in Expression Blend.
See this answer:
Windows Phone 7 (WP7) Change a button's background color on click
As Mick suggests, it would help to see some code for what you're trying to do, however, it sounds like you may have a change in a value (such as margin) in the Normal and Pressed states of the button resulting in the behavior you are seeing.