I am keeping track of a count of number of items. What I'd like to do is place this count in a nicely created circle (ellipse). Two questions; how to first do this, and how to ensure that regardless of whether the count is one or two digits the number remain exactly in the center of the circle?
Just place both items in the grid with the proper Vertical/Horizontal alignment.
This way you can scale the grid and the ellipse will scale as well. And if you are really "clever" you can even set the min and max values of the ellipse so it looks like a "loading bar".
<Grid HorizontalAlignment="Center" VerticalAlignment="Center" Height="200" Width="200">
<Ellipse Stroke="Red" StrokeThickness="10"/>
<TextBlock TextAlignment="Center" Text="100000" VerticalAlignment="Center" HorizontalAlignment="Center" />
</Grid>
Related
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>
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.
When I have an Image with VerticalAlignment="Stretch" inside a container such as a HubSection, the Image expands perfectly from top to bottom in my page. I.e.:
<HubSection>
<DataTemplate>
<Image
Loaded="BigPic_Loaded"
ImageFailed="BigPic_ImageFailed"
x:Name="BigPic"
Source="http://i.imgur.com/hd4tFk0.jpg"
VerticalAlignment="Stretch" />
</DataTemplate>
</HubSection>
Then, I want to be able to zoom into the image, for that purpose I am adding a ScrollViewer around the Image. Then, the VerticalAlignment='Stretch' does not work as I expect, the Height of the Image does not match the Height of the page anymore. I.e.:
<HubSection>
<DataTemplate>
<ScrollViewer
ZoomMode="Enabled"
HorizontalScrollMode="Auto"
HorizontalScrollBarVisibility="Auto"
VerticalScrollMode="Auto"
VerticalScrollBarVisibility="Auto"
VerticalContentAlignment="Stretch"
MinZoomFactor="1"
MaxZoomFactor="4">
<Image
Loaded="BigPic_Loaded"
ImageFailed="BigPic_ImageFailed"
x:Name="BigPic"
Source="http://i.imgur.com/hd4tFk0.jpg"
VerticalAlignment="Stretch" />
</ScrollViewer>
</DataTemplate>
</HubSection>
Is there any fix for this problem?
The fix is to handle the SizeChanged event of your ScrollViewer and set the size of the BigPic to the size of the ScrollViewer.
I am trying to have a parallax moving background of images behind my actual content. I have added a converter according to John's solution:
http://w8isms.blogspot.com/2012/09/parallax-background-in-xaml-revisited.html
The parallax scrolling part is working fine, although I have stumbled upon a following problem - images outside of the initial app's screen area get cut off, so when I scroll to the right, only white area starts to appear instead of the rest of the images, as in the content of those would have to be redrawn. Does anybody have a clue as to what I could do to fix it?
This is my code:
<Grid Background="White">
<StackPanel Orientation="Horizontal">
<StackPanel.RenderTransform>
<CompositeTransform
TranslateX="{Binding ElementName=MyScrollViewer, Path=HorizontalOffset, Converter={StaticResource ParallaxConverter}}" />
</StackPanel.RenderTransform>
<Image Source="1.jpg"/>
<Image Source="2.jpg"/>
<Image Source="3.jpg"/>
</StackPanel>
<ScrollViewer
x:Name="MyScrollViewer"
HorizontalScrollMode="Enabled"
HorizontalScrollBarVisibility="Auto">
<TextBlock
VerticalAlignment="Center"
FontSize="180"
Text="Hello world! This text will extend to the right." />
</ScrollViewer>
</Grid>
Fixed it! Had to wrap my StackPanel inside a Canvas element.
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.