I am working on a windows phone 8 application and I wish to add a semi transparent layer/page kind of thing over my current page to show some instructions to use the app to the user at start. Do someone know of some element or way with which this can be achieved?
Thanks
You cannot have overlap of two pages. However, for an overlay, you can simply add an extra grid and position everything inside it. Then you can use the Visibility property of your overlay Grid to show/hide the tutorial. Here's an example:
<phone:PhoneApplicationPage>
<Grid x:Name="LayoutRoot"> <!--This is your root grid-->
<Grid x:Name="ContentGrid">
<!--put actual content of the page here-->
</Grid>
<Grid x:Name="OverlayGrid" Visibility="Collapsed">
<!--put content of the overlay here-->
</Grid>
</Grid>
</phone:PhoneApplicationPage>
Now, whenever you want to display the overlay, do this in your code:
OverlayGrid.Visibility = Visibility.Visible;
That should do the trick.
Related
I've a sidebar like this:
Button 1
Button 2
This Starter Application consists of a Toolbar, SideNav (with two buttons), and Content area.
This is the content area!
Current Behaviour - when i remote the md-is-locked-open attribute and start to show the sidebar if the user clicks a button, then the side bar is fullscreen and not inside the content area.
So it differs in the following points form the locked version:
Its over the toolbar
It grays ot the main content
its over the content area
Required Behaviour - what do i have to change to have it inside the content area? So it looks exactly the sameway like it is when its locked .
It should be unter the toolbar
Should not overlap main content (just move it to the right=
Should not gray out other content
Codepen Here
Just change the:
<div layout="row" flex>
above the sidenav for:
<md-content layout="row" flex>
and the corresponding closing tag. And that's it!
The md-toolbar must be sibling to an md-content to get the behaviour you are looking for.
EDIT
For your further requirements please check this Codepen I've made. It does exactly what you want (override the sidenav behaviour to hide the overlay and push the contents to the right): http://codepen.io/anon/pen/pjXYMa
I am trying to align the border to the center of the popup. But it aligns only at the top left corner. can anyone suggest how to align the border to the center of the popup control.
<Grid Name="MainGrid" Background="Green">
<Popup Name="mainpopup" IsOpen="True" >
<Border Name="MainBorder" Background="LightBlue" HorizontalAlignment="Center" VerticalAlignment="Center" Height="100" Width="1300">
</Border>
</Popup>
</Grid>
Additional Details: In My application (winrt application) the border height is set as Auto it takes the height according to its contents height.
thanks in advance.
From my point of view, your screen resolution should be 1366X768 which makes your border appear left aligned. Check with minimizing the width and update if its getting center aligned.
You can achieve by handling popup opened event and sets the vertical offset for the popup as shown below.
var bound = Window.Current.Bounds;
var center = (bound.Height / 2) - (poupChildBorder.ActualHeight / 2);
Mypopup.VerticalOffset = center;
How can I set Column Freeze inside Grid in XAML? I know that DataGrid have FrozenColumnCount, but I must to use Grid (DataGrid is not an option). I had idea that scroll viewer don't effect first (i.e. my "frozen" column), but I dont know how to do that. Some ideas? Please help :-)
As a Grid is just a means of providing layout (i.e it isn't something that directly displays data in the way a DataGrid goes) you will have to roll-your-own version of frozen columns. You should be able to do this easily by placing a ScrollViewer (or layout control of choice) within the section you want to scroll. Then place your content within the ScrollViewer (like another Grid, say)
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="1*"/>
<ColumnDefinition Width="3*"/>
</Grid.ColumnDefinitions>
<ScrollViewer Grid.Column="1"/>
</Grid>
I want to scroll the LongListSelector Horizontally. This LongListSelector is inside a PivotItem.
I tried to put LongListSelector inside a scrollviewer, but not worked.
<ScrollViewer Width="800" HorizontalAlignment="Stretch" VerticalScrollBarVisibility="Disabled" HorizontalScrollBarVisibility="Auto">
<Grid x:Name="ContentPanel" HorizontalAlignment="Stretch" VerticalAlignment="Top">
<phone:LongListSelector Name="AllImagesList" LayoutMode="Grid" GridCellSize="220,230"
ItemsSource="{Binding PhotoCollection}"
DataContext="{StaticResource viewModel}"
ItemTemplate="{StaticResource ImagesItemTemplate}"
SelectionChanged="onImageListSelectionChanged" />
</Grid>
</ScrollViewer>
</controls:PivotItem>
Is it possible to scroll a LongListSelector Horizontally?
If yes, Please help me , How?
Putting something that scrolls horizontally inside a Pivot control is a bad idea.
The Pivot control will be trying to detect horizontal swipe gestures and so these would be competing with your ScrollViewer. How would the framework know which item you wanted to react to the swipe? How would the person using the app know if their swipe gesture would scroll the list or change the selected pivot item?
There is a reason this doesn't work.
As an alternative, if appropriate, you may want to consider using a Panorama control instead as this can have items that are wider than the screen and so support some level of horizontal scrolling. This can't be combined with a vertically scrolling list well though.
A better approach would probably be to reconsider the design of this page.
I have a layout question for Tab Navigators in Adobe Flex 3.
Is it possible to insert a button that invades the grid space of the tabs?
I have a tab navigator component and I am dynamically adding sub components to tab navigator and I want squeeze a button inside the tab space. I don't want the button to be another tab. And I don't want to use a TabBar for the tabs.
This graphic illustrates the problem.
This is the current layout I have
This is a mockup (photoshopped) of the layout I want. I basically want to shave some pixels off the layout.
Is there a way to push the button down or manually override its layout position in MXXML or actionscript?
I would think if you put the elements in a Canvas (which allows you to lay out elements absolutely) rather than a VBox as it appears you are using now, you could force the Home button to display the way you want it to, ie:
<mx:Canvas>
<mx:Button top="5" right="5" />
<mx:TabNavigator top="5" left="5" right="5" />
</mx:Canvas>