CODEWITHSUNDEEP
c#imagexamluwpuwp-xaml
pelagos
pelagos

Reputation: 1059

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

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...

Upvotes: 0

Views: 1444

Answers (3)

pelagos
pelagos

Reputation: 1059

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

Upvotes: 0

Xie Steven
Xie Steven

Reputation: 8621

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

Upvotes: 0

John Wiese
John Wiese

Reputation: 1681

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>

Upvotes: 1

Related Questions