Microsoft UWP app - Set size of window to match background image

0
votes

This is probably simple but I cant figure it out (noob to UWP)...

I have an image I want to use as the background for my app (it is really only for desktop - I am not worried about mobile etc).

I just want to set the size of the window so the app starts at a specific size and the image sits in it without scaling.

Make sense?

Should be easy - I have done it in Windows Forms and its pretty straight forward...

I have tried setting the size of the window (same size as image):

ApplicationView.PreferredLaunchViewSize = new Size(Height = 800, Width = 525);

But the image never seems to sit in it properly no matter what settings I adjust - either the image properties or grid size etc??

In XAML design view it all looks OK (to me):

enter image description here

But when you run the app its not:

enter image description here

XAML CODE AS REQUESTED:

<Page
    x:Class="UWP_Test.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:UWP_Test"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d">

    <Grid>
        <Image Source="Assets/titlescreen.bmp" Opacity="0.5" VerticalAlignment="Center" HorizontalAlignment="Center"></Image>
    </Grid>
</Page>

XAML.CS code

using System;
using System.Collections.Generic;
using System.IO;
using System.Linq;
using System.Runtime.InteropServices.WindowsRuntime;
using Windows.Foundation;
using Windows.Foundation.Collections;
using Windows.UI.ViewManagement;
using Windows.UI.Xaml;
using Windows.UI.Xaml.Controls;
using Windows.UI.Xaml.Controls.Primitives;
using Windows.UI.Xaml.Data;
using Windows.UI.Xaml.Input;
using Windows.UI.Xaml.Media;
using Windows.UI.Xaml.Navigation;

// The Blank Page item template is documented at https://go.microsoft.com/fwlink/?LinkId=402352&clcid=0x409

namespace UWP_Test
{
    /// <summary>
    /// An empty page that can be used on its own or navigated to within a Frame.
    /// </summary>
    public sealed partial class MainPage : Page
    {
        public MainPage()
        {
            this.InitializeComponent();

            // Set the app window preferred launch view size
            ApplicationView.PreferredLaunchViewSize = new Size(Height = 800, Width = 525);

            // Set app window preferred launch windowing mode
            ApplicationView.PreferredLaunchWindowingMode = ApplicationViewWindowingMode.PreferredLaunchViewSize;


    }

        private void button_Click(object sender, RoutedEventArgs e)
        {
            // move to Start page
            this.Frame.Navigate(typeof(Start));
        }
    }
}

I am sure its simple.

I have added some images

Help me stackoverflow.... You're my only hope...

3
c#imagexamluwpuwp-xaml
Do you have any other controls above it (such as grids or anything like that?) it looks as though some control is taking up space above it – Barney Chambers
Could you please add the XAML code to your question? – Herdo
@BarneyChambers - no other controls above - see aded XAML code as requested – pelagos
@Herdo - Code added as requested. Thanks – pelagos
You also have to set the PreferredLaunchWindowingMode property. Do keep in mind that the app scales to match the DPI of the monitor so the bitmap size doesn't mean much. – Hans Passant

3 Answers

1
votes

Though it won't work entirely, why not use the Stretch property set to UniformToFill?

<Grid>
    <Image Source="Assets/titlescreen.bmp" Opacity="0.5" Stretch="UniformToFill"></Image>
</Grid>
0
votes

You could set ImageBrush for Grid's Background like the following code:

<Grid>
    <Grid.Background>
        <ImageBrush ImageSource="Assets/pander.jpg" Stretch="UniformToFill"></ImageBrush>
    </Grid.Background>
</Grid>

enter image description here enter image description here

0
votes

Thanks for all the advice but I found out what was going wrong.

The issue was the brackets in this piece of code I was using to set the window size:

ApplicationView.PreferredLaunchViewSize = new Size(Height = 800, Width = 525);

They needed to be curly braces like this:

ApplicationView.PreferredLaunchViewSize = new Size { Height = 525, Width = 840 };

Once I changed this it is now working fine.

Is it odd that Visual Studio did not highlight these as the wrong sort of braces? The app compiled and ran fine with no errors??

Problem solved

Thanks