Visual Studio\blend artboard render differently from device - xaml

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.

Related

How to set a Background image in UNO UWP?

I am trying to put a background image, so far I have this code:
<Grid.Background>
<ImageBrush ImageSource="ms-appx:///Assets/Windows-10-Hero-Ninja-Cat-1024x576-03a71eed2a427425.jpg" Stretch="UniformToFill"/>
</Grid.Background>
Which appears this way on UWP on Windows 10:
But when I Build the WASM or Android, the Background image does not appear.
The file property is set Build action: Content, Copy to output directory: Do not copy.
Uno's WASM target is still experimental and some features are not available yet. The only yet implemented background brush is SolidColorBrush.
It's implemented for iOS (source code here), but not Android.
Since you're already in a <Grid>, you can simply put your image as first element:
<Grid>
<Image Source="ms-appx:///Assets/Windows-10-Hero-Ninja-Cat-1024x576-03a71eed2a427425.jpg" Stretch="UniformToFill" />
[... put your other controls here]
</Grid>
In case you need to use different background approaches for each platform use xaml conditional prefixes.
https://platform.uno/docs/articles/platform-specific-xaml.html#xaml-conditional-prefixes
You can use <wasm:Image ... />
At the end of the day you can have the same result with flexible markup.

How to disable new 'fluid/scaling layout' in WP8.1 apps?

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!

Spinning CarouselPanel in ComboBox via Mouse

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!

Black triangle drawn on grid background instead of grid's contents in WinRT

So I have a grid with a background. Inside the grid is a WebView and then some space on the left hand side of the screen where I have just placed a Button for now.
As the program runs, the left hand bar (that shows the grid with the background and the button laid out on it) doesn't render, instead I get the background, no controls on it and a black triangle (or geometric shape) at the bottom.
I suspect it's an issue with the VM and the video driver. I had a similiar issue with WPF a few years ago and MS's response was that I had an incompatible video driver that was causing the form to not render correctly at all times (this is very much the same behavior).
What can I do to prevent this? I'm including an image.
I'm going to include the small XAML I used and then a screenshot of the behavior (The XAML I rekeyed by hand):
<Grid>
<Grid.Background>
<ImageBrush ImageSource="Media/Background.jpg" />
</Grid.Background>
<TextBlock FontSize="24" Margin="15,15,0,0">Sample Label</TextBlock>
<WebView x:Name="wv1" Margin="250,0,0,0"></WebView>
<Button Content="Do Something" HorizontalAlignment="Left" Height="42" Margin="57,131,0,0" VerticalAlignment="Top" Width="170" Click="Button_Click1" />
</Grid>
VMs don't work well with multimedia. You should expect all sorts of problems with video.

Drop event not firing

I have a grid on which I have set AllowDrop=true.
But the problem is that it is not firing. What can be the reason?
I had exactly the same problem. This is what I've noticed:
When running Silverlight application in debug mode in IE9 (probably applies to other versions too) drag and drop is not working at all. You can see a "denied" cursor when dragging file over the browser.
But when you open an application in IE without debugger attached, dropping files suddenly works.
It could be IE setttings problem, but drag&drop works fine in Chrome, even during the debugging. And that's enough for me ;-).
in my case it worked setting the grid's background to a value, e. g. to transparent.
I had a huge grid with a tiny TextBlock centered vertically and horizontally. Thus it seems there's no active area except the area of the tiny TextBlock.
<UserControl .. AllowDrop="True">
<!-- some other xaml code -->
<Grid AllowDrop="true" Background="Transparent">
<!-- some other grids ... -->
</Grid>
</UserControl>
Have fun,
BlackTuareg