I set a background image to my Gird, and it displays correct in the designer, but when I run the app, the image doesn't appear, the background is black, anyone has any ideas? Below is my code.
<Page.Resources>
<ImageBrush x:Key="BackgroundImage" ImageSource="People/Images/Background.jpg"/>
</Page.Resources>
<Grid Background="{StaticResource BackgroundImage}">
</Grid>
I had the same problem. As Jim suggests, you need to have the correct absolute path.
I originally had:
Assets\Quizzes\image.png
It displayed fine in the designer but not at runtime. I switched it to:
ms-appx:///Assets/Quizzes/image.png
Now it displays correctly in the designer and runtime.
Related
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.
I'm creating a NativeScript/Angular mobile application, and trying to include a list-picker in a form.
What is causing the black background above and below the selected item in my list-picker? How can I make the background transparent?
The selected item area is very small - how can I enlarge it?
Screenshot below:
Here's my list-picker code:
<ListPicker #picker class="picker" [items]="viewData.phoneTypes" [selectedIndex]="selectedIndex" verticalAlignment="center" horizontalAlignment="center" (selectedIndexChange)="selectedIndexChanged(picker)"></ListPicker>
Thanks for your help!
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>
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.
I am using Silverlight 4 for a project. I want to know if there is a way I can get the main canvas to stretch to the height and width of the browser window it is hosted in?
I want the controls within to resize in proportion to the main control that hosts all the rest of the controls in the host browser window.
This is a Prism application which has a Shell.xaml and a ContentControl within the shell.
In this prism case I want the content control to span to 100% of the screen height and width.. and when a Page.xaml loads within it I want the Page's usercontrol to fill up the entire content control of the xaml. Similarly, within the Page.xaml if I have a grid I want the grid to grow to a size no more than a fixed number of pixels
The Grid within the Page.xaml's user control seems to be sizing properly. I am having trouble getting the root user control of the Page.xaml to stretch to the entire width of the browser window. Is there a way this can be done using xaml properties only? I dont want to specify the height and width to 800 and 1200 like I have done below.
This is my code
<UserControl x:Class="MyNamespace.MyClass"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
d:DesignHeight="300" d:DesignWidth="400"
xmlns:sdk="http://schemas.microsoft.com/winfx/2006/xaml/presentation/sdk"
Background="#FF2D8543"
Height="800" Width="1200"
>
<Grid x:Name="LayoutRoot" Background="#FFEB0A0A"
VerticalAlignment="Center" HorizontalAlignment="Center"
Height="Auto" Width="Auto"
>
</Grid>
Thanks for your time.
Yes, use Grid instead of Canvas as top level element. Grid takes all the available space by default.
Learn more about Silverlight layout system here and here.
Update:
Just remove Width and Height attributes from the UserControl:
Height="800" Width="1200"
By setting those explicitly you are giving the control fixed size. If you don't specify Width and Height the control will take all the available space.