Being new to Windows Mobile Development, (not a universal application)
I am making a GUI login page where there are a few TextBlockand TextBox.
How can I position UI elements to fit all screens,
For example, for those who are familiar with Adobe Flash, you can position the anchor point of an object in the middle, and then use
this.x = Stage.stageWithX/2;
this ensures that no matter what the screens with is, the objects x position will be positioned in the middle.
How is this achieved in Windows Mobile, so when tested on different devices I would get similar look and feel.
This question is too broad to answer yet I will try to get you started with windows phone xaml design.
The xaml elements have properties named HorizontalAlignment and VerticalAlignment. If you set the values of the property to stretch the element occupies the available total space.
In your scenario, have a grid with two columns and set the alignment properties of the element. The xaml code:
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="1*" />
<ColumnDefinition Width="1*" />
</Grid.ColumnDefinitions>
<TextBlock Text="Hello"
HorizontalAlignment="Stretch" />
<TextBox Grid.Column="1" Text="World"
HorizontalAlignment="Stretch" />
</Grid>
Related
How do I apply 2 layouts when orientation changes? I have 2 layouts a below it has columns given width using * values. I don't know how to change those values.
I would like to do this using blend with behaviours.
Please let me know any good articles that I should refer.
This is my landscape view
This is the portrait view I want
If I understood you correct you want two columns:
The first uses the complete available space without a fixed pixel width
The second column should always be for example 300px width (the width that column 1 does not use)
In this case you can declare your second column width without the *:
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition /> <!-- implicitly 1* -->
<ColumnDefinition Width="300" />
</Grid.ColumnDefinitions>
<Border Background="lightblue"/>
<Border Background="LimeGreen" Grid.Column="1"/>
</Grid>
Your are able to name these ColumnDefinitons with the x:Name attribute and access them in code behind to change there widths at runtime. You can also create a data binding to do it without a code behind.
I'm moving a Titanium app (for ios and Android) to windows phone 8.1. I'm a newbie at windows applications.
I want to create an app that has the same appearance in different screens, I mean in bigger screen show elements bigger but keeping the aspect of the app. I think I need to define Margin and Width and Height to place elements in the page.
I tried to put some basic elements in MainPage.xaml and see what happens. This is my code:
<Grid>
<Image Source="Assets/ppal/fondoCompleto.png"
Margin="-25, 0, -25, 0"></Image>
<Image Source="Assets/ppal/settings.png"
Margin="10,10,365,612"></Image>
<TextBlock Text="aaa" FontFamily="Arial"
TextAlignment="Center"
Margin="0, 200, 0, 0"
FontSize="22"/>
<Rectangle
Fill="#0098bc"
Margin="30, 50, 30, 450"
RadiusX="5"
RadiusY="5"/>
</Grid>
I've tried it in different Windows phone simulator with different inches and result has been horrible. It shows ok on 4 inch but very bad on 6 inch.
Do you know how I can do this?
Is there a way to use a unit like dip, not pixels?
Or is there a formula to convert a width, height, margin and return a value depending on screen size? (this is what I use in Titanium app: Titanium conversion pixels to dp)
Thank you very much!
"I think I need to define Margin and Width and Height to place elements in the page"
Not necessarily. If you have elements that need to overlap or move around via animation you may need to, but if you're just laying out some form elements you should use the grid (or multiple grids) to arrange them. I'm not going to try an discern your layout from above (it looks like a random test anyway), but it would look something like this:
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="100" />
<RowDefinition Height="*" />
<RowDefinition Height="2*" />
<RowDefinition Height="50" />
</Grid.RowDefinitions>
<Image Source="Assets/ppal/fondoCompleto.png" Grid.Row="0"></Image>
<Image Source="Assets/ppal/settings.png" Grid.Row="1"></Image>
<Rectangle Grid.Row="2" Fill="#0098bc" RadiusX="5" RadiusY="5" />
<TextBlock Grid.Row="3" Text="aaa" FontFamily="Arial" TextAlignment="Center" FontSize="22"/>
</Grid>
This will lay out four rows; the top is 100px high, the bottom is 50px high, and the two middle rows will fill up the rest of the screen space (*), with the second being twice as high as the first (2*). You can do the same with ColumnDefinitions. Images should scale to fit the containing grid cell, and if you need other elements to scale to fit that don't normally, you can use something like a ViewBox.
You can also use a combination of grid layout and margins/horizontal alignment to get the layout you want. The margins will be relative to the containing grid cell. There's also nothing stopping you from having multiple elements inside a single grid cell -- you can have Grid.Row=1 on two items and then use margins etc to lay them out the way you want.
I've seen in some apps where the background, which is a static image, is animated to scroll constantly in a single direction. I've looked but haven't found any resources that would aid me in implementing this sort of feature. I have no problem setting the page background, but my issue is when trying to get the image to continuously scroll, say to the left.
Just make One more Grid Inside the Root container of the page at the same lavel as that of your content Grid.
<Grid x:Name="LayoutRoot" Background="Transparent" >
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Grid Name="GrdBackground" Grid.Row="0" >
// Set this grid background as Image and animate it with animation behavior repeat.
</Grid>
<Grid Name="ContentGrid" Grid.Row="0" Canvas.ZIndex="1">
// do all your UI in this grid.
</Grid>
</Grid>
So now make your UI in ContentGrid and for background animation use GrdBackground. And also there is property called RepeatBehaviour for the Storyboard you can set that to repeat. And it will work.
Hope it give you a clue what has to be done. Cheers :)
I am building a windows phone 8 application with an ApplicationBar to keep the shortcuts and some menu options for the application. I read somewhere that that Height for ApplicationBar is 72px. So I tried with this code
<Grid x:Name="LayoutRoot" Background="Transparent">
<Grid.RowDefinitions>
<RowDefinition Height="*"></RowDefinition>
<RowDefinition Height="72"></RowDefinition>
</Grid.RowDefinitions>
<ScrollViewer Grid.Row="0" Name="scrollViewer" Width="Auto" VerticalAlignment="Top" >
<Grid x:Name="ContentPanel" Background="DarkSeaGreen">
<TextBlock Name="tb" FontSize="100" TextWrapping="Wrap"
Text="Hello eveyone. Need some help with AppBar">
</TextBlock>
</Grid>
</ScrollViewer>
</Grid>
I was expecting the ApplicationBar to fit in space provided in the Grid and not to scroll up my layout. But what happened is this. http://i.stack.imgur.com/cjEXD.png
ApplicationBar pushed up the Layout leaving a blank space. I wish to prevent this thing. I want my Application Bar to be visible but it should not scroll up my layout. Please help if you know of any kind of solution to this.
Thanks
You can achieve this by setting the Opacity of your ApplicationBar to a value < 1. Then it overlays your layout and does not push it up. In my eyes Opacity="0.99" is a good option.
But be careful: The ApplicationBar's height is not always 72px. On a 1080p device for example it differs!
To determine the actual height of your Application Bar you can use ApplicationBar.DefaultSize or respectively ApplicationBar.MiniSize.
For more information the the MSDN documentation.
I am currently working on an app that will work in both a landscape and portrait layout. I am having some trouble dealing with rotating the ads when the orientation changes from portrait to landscape. I'm able to set up a grid and such for the ad to go vertical. I can rotate it but it gets all messed up when I do.
The reason I'm aiming for vertical is it maintains the best real-estate for me.
I'm not sure how much more detail I can offer for my situation, I just want to have the ad rotate 90-degrees so it fits to the "left or right" of the landscape screen. But a rotation forces it's grid to still be a certain width. I then put in some controls in the change function to force the grid to re size, but the add won't sit right in it's Grid after a rotation. Any suggestion or direction in this? Many thanks in advance.
Also, I was thinking to have two ad elements that simply float on the page (not in a grid). And show/hide each depending on the orientation, but that sounded stupid when I thought about it.
Thought I would let you know that I created a control to handle the rotation of the phone and keep ads stationary. Please follow this SO answer for more information.
Use the PubCenter ads with the normal width and height then apply a transform to rotate it 90 degrees.
I wasn't able to find a solution that helped me. I realized what I wanted was as the last commented in my posting realized; to keep an ad's orientation on rotation change.
To accomplish this one could use a LayoutTransform, however they are not available in WP8. Initially I had floating menus that switched on and off on rotation change but would be troublesome on a different sized screen.
The cleanest brute force solution I've found is to make a 3x5 (row-major) grid layout. My main page sits in the center-most grid, ads to the immediate left, right and bottom. And lastly, two filler spaces to the left-most and right-most grid:
<Grid x:Name="LayoutRoot">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
<RowDefinition Height="Auto "/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<Grid Grid.Row="1" Grid.Column="2">
<phone:Pivot x:Name="ContentPanel">
...
</phone:Pivot>
</Grid>
<Grid Name="AdBottom" Grid.Row="2" Grid.Column="2">
...
</Grid>
<Grid Name="AdRight" Grid.Row="1" Grid.Column="3" MaxWidth="80">
<adduplex:AdControl x:Name="adDuplexAdRight" AppId="?????"
RenderTransformOrigin="0.5,0.5"
HorizontalAlignment="Center"
VerticalAlignment="Center"
Margin="-200,0" Visibility="Collapsed">
<adduplex:AdControl.RenderTransform>
<CompositeTransform Rotation="90"/>
</adduplex:AdControl.RenderTransform>
</Grid>
<Grid Name="AdLeft" Grid.Row="1" Grid.Column="1" MaxWidth="80">
... <As Above, just negated>
</Grid>
<Grid Name="FillerLeft" Grid.Row="1" Grid.Column="0" MinWidth="80" Visibility="Collapsed">
</Grid>
<Grid Name="FillerRight" Grid.Row="1" Grid.Column="4" MinWidth="80" Visibility="Collapsed">
</Grid>
</Grid>
The reason for the Filler elements and their minimum width is to help margin overflow. Without it, you could use the Rendertransform to rotate the element, but when you tried to force it's container down to a size you wanted, it came out incorrectly. This is because the rotation happens after render, so without those extra padded columns to allow for overflow the element gets sliced up upon rotation.
So, doing an overflow and extending the ad's margins allows for it to show up locked in a grid instead of floating. Then I manage switching the ads' visibility and the Filler areas on a rotationchanged event.
This is the easiest solution I've had. Others can search for incorporating the Silverlight LayoutTransformer as seen here. Or, if using one from a paid toolkit. This works so far for my simple app.