I'm trying to port my WP8 app to WP8.1 by creating a new Universal app.
One thing that really drives me crazy is the new scaling behaviours of WP on higher resolution screens.
I just want my XAML to scale up (so everything becomes bigger). Just like it did on WP8. I've tried to do this with a Viewbox but that didn't work out very well either (weird margins all over the place :S).
How do I achieve this?
Kind regards,
Niels
I'm also making use of Viewboxes and had problems with weird margins but setting the Stretch property of the Viewbox to Fill solved it:
<Viewbox Stretch="Fill">
<Grid Height="1280" Width="768">
<Grid> ... </Grid>
</Grid>
</Viewbox>
Hope this helps!
Related
I ran into a little bug while creating a scrollable stackpannel. I used the scrollviewer. I have placed the Stackpannel inside the Scrollviewer but I can't scroll using a emulator.. I don't have a windows phone so I cant check it out on an actual phone. Here is my code:
<ScrollViewer Height="979" Margin="0,100,0,-439" VerticalAlignment="Stretch">
<StackPanel Height="979" VerticalAlignment="Stretch" Width="268">
// things inside the stackpannel
</StackPanel>
</ScrollViewer>
Am I doing something wrong or does the scrollviewer not work in an emulator?
The height of the ScrollViewer is the same as the height of the StackPanel so there is nothing to scroll (it just falls off the end of the screen). Try using VerticalAlignment="Stretch" instead of setting Height on the ScrollViewer which should help (if not, you have some other problem in your layout ;-) but using a fixed, smaller Height for the ScrollViewer will solve this immediate problem).
In which way do I have to investigate if I want to bring some life into the background of my Windows Store App? I thought about something very simple for the beginning like moving the sun depending on time or generating bubbles every 10 seconds or moving a plane in different heights for demonstration purposes.
Background property is of type Brush - you can try some animation on it.
The other solution would be to set MediaElement as the background of your app:
<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
<MediaElement Source="sampleVideo.wmv" IsLooping="True" />
<Grid>
</Grid>
</Grid>
I have layout as described below:
<ScrollViewer>
<StackPanel Orientation="Horizontal">
<!-- ... -->
<ScrollViewer>
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel ScrollViewer.VerticalScrollBarVisibility="Visible" Orientation="Vertical" />
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
</ScrollViewer>
<!-- ... -->
</StackPanel>
</ScrollViewer>
And I would like to achieve that effect that is present in weather app.
In my application, when you're scrolling horizontaly using mouse wheel, when pointer gets over ItemsControl it immediately starts scrolling verticaly wheras in weather application there's fluent horizontal scrolling effect and scrolling verticaly begins when there's some time hover that vertical collection.
Is that behaviour somewhere implemented by default?.
Szymon
Generally, the guideline is that introducing vertical scrolling in a horizontally scrolling repeater is a bad idea. I think you should NOT consider Weather (or any standard Windows 8 app) as a model to emulate. Most of them violate the guidelines in some of the worst ways.
The Weather app accomplishes what you are asking based on the current mouse placement, the motion of the grid, and control with focus. That's a complex way of saying, some developer dreamed up a solution to help make their UI as confusing to the user as possible.
Please, don't.
What I think they do in order to achieve that effect is this:
If the mouse is over the vertical list for a while, they deactivate the horizontal scroll and activate the vertical one. Once the mouse moved outside the list, they switch back (deactivate the vertical scroll and activate the horizontal scroll).
I have not tested this to see if this works, but I think it should.
We have a strange problem with pixel perfect markups. Vs or Blend artboard render pages not similary as device (biggest problem with textblocks). I think picture is better description.
and code for full information
<Grid x:Name="LayoutRoot" Background="Transparent">
<Image
Source="Untitled.png"/>
<TextBlock
Margin="12 7"
FontSize="34"
Text="Segoe UI Super TEST" />
</Grid>
Any help would be appreciated.
Folks, thanks for spended time. Problem wasn't with ghost text, that caused by simple background image. The main issue was that text is lower in device, than in artboard.
Fortunately, we found solution. Somehow I lost Segoe WP on my machine, I don't know why it was not reinstall with sdk. So default FontFamily mapping to PhontFamilyNormal which was mapping to unexisting font. And this cause broke rendering.
I am currently re-templating the ComboBox in a Metro XAML application.
The ItemsPanel is the standard CarouselPanel, which acts like a tumbler, endlessly revolving through the items list - nice !
An added nice detail, is that in the VS/Blend simulator if you 'flick' the items with the touch pointer then the carousel 'spins', rather like the Date tumbler in Windows Phone.
My problem is, when used in Desktop mode (via a mouse) I cant re-created the same spinning effect. there seems to be some kind of failure in the maouse/touch guesture translation.
Doesn anyone have any ideas about how to get this to work ?
At first I thought it might be like the GridView which does not bubble up the mouse wheel events. But then I tried the code below and the mouse wheel does spin it. It doesn't do this in Blend, but it does it at runtime fine.
<Grid Background="Black">
<ComboBox VerticalAlignment="Top">
<x:String>0</x:String>
<x:String>1</x:String>
<x:String>2</x:String>
<x:String>3</x:String>
<x:String>4</x:String>
<x:String>5</x:String>
<x:String>6</x:String>
<x:String>7</x:String>
<x:String>8</x:String>
<x:String>9</x:String>
<x:String>10</x:String>
<x:String>11</x:String>
<x:String>12</x:String>
<x:String>13</x:String>
<x:String>14</x:String>
<x:String>15</x:String>
<x:String>16</x:String>
<x:String>17</x:String>
<x:String>18</x:String>
<x:String>19</x:String>
<x:String>20</x:String>
<x:String>21</x:String>
<x:String>22</x:String>
<x:String>23</x:String>
<x:String>24</x:String>
<x:String>25</x:String>
<x:String>26</x:String>
<x:String>27</x:String>
<x:String>28</x:String>
<x:String>29</x:String>
</ComboBox>
</Grid>
Best of luck!