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.
Related
I am writing a UWP 14393 app using mediaplayerelement in xaml file, I am wondering how can I display extra information in text on top of custom transport media control so that when player control is up, the text will show up at the same time?
For example, for a video player showing an online stream, and at the top left corner shows streamer name, view count, etc. The information only shows up when player control shows up.
Obviously, the best way to do this is to put the text inside custom transport media control, is it doable? If not, how can I achieve this?
I am a newbie at UWP, so any help will be welcome, thanks.
You can custom the MediaTransportControls's style, and add your own content to <Border x:Name="ControlPanel_ControlPanelVisibilityStates_Border">. See my test.
First download MediaTransportControls's style from my gist.
Or you can find it in your pc's generic.xaml file.
Then add this style to App.xaml.
<ResourceDictionary.MergedDictionaries>
<ResourceDictionary Source="/MediaTransportControls.xaml"/>
</ResourceDictionary.MergedDictionaries>
Then you can use your style in MediaTransportControls.
<MediaPlayerElement
Width="300" Height="500"
AreTransportControlsEnabled="True"
Source="ms-appx:///Assets/elephantsdream-clip-h264_sd-aac_eng-aac_spa-aac_eng_commentary-srt_eng-srt_por-srt_swe.mkv">
<MediaPlayerElement.TransportControls>
<MediaTransportControls Style="{StaticResource myMediaTransportControlsStyle}">
</MediaTransportControls>
</MediaPlayerElement.TransportControls>
</MediaPlayerElement>
<MediaPlayerElement AreTransportControlsEnabled="True">
<MediaPlayerElement.TransportControls>
<MediaTransportControls>
<Grid>
<...Put any content here like textblocks and buttons all this content will be part of controls so they will appear and disappear along with the controls, this Grid covers all the area on the screen ( above the controls bar )...>
</Grid>
</MediaTransportControls>
</MediaPlayerElement.TransportControls>
</MediaPlayerElement>
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!
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 see that most of the WPF stuff use for example DropShadowEffect, but my xaml in WinRT doesn't recognize that, is there something else to use?
However it's easy to add dropshadow to text. As photoshop dude I immediately released this:
<Grid>
<TextBlock Margin="1,1,0,0" Foreground="<!--Shadow Color-->" Text="Some text"/>
<TextBlock Foreground="<!--Text Color-->" Text="Some text"/>
</Grid>
You are correct, the DropShadowEffect is not available in Windows Store apps.
For now, effects are programmed with DirectX and C++. If you don't want to write your own interop library in C++, check out the sharpdx.org/ library
If you know the Shape of the Control you could create an Image (.png e.g.) with a dropshadow effect towards the outer bounds and include it in the style of the control with the help of Nine-Grid ( http://msdn.microsoft.com/en-us/library/windows/desktop/bb189722.aspx )
(if the dropshadow is 5px wide you can set the margin to -5 and the nine-grid values to 5 to make the shadow appear around the control)
Greetings
You can use DropShadowBitmapEffect to create Shadow effect.
The documentation and an example can be found here.
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.