CODEWITHSUNDEEP
.netwindows-phone-7xamlwindows-phone-8winrt-xaml
Deathspike
Deathspike

Reputation: 8770

Windows Phone 8 fullscreen page

I have the following page defined in XAML for Windows Phone 8

<phone:PhoneApplicationPage x:Class="MangaRack.View.Phone.View.ChapterView"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:phone="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone"
    xmlns:shell="clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone"
    shell:SystemTray.IsVisible="False">
    <Grid Background="White">
        <Button BorderThickness="0" Name="ImageButton" Padding="0">
            <Image Name="Image" />
        </Button>
    </Grid>
</phone:PhoneApplicationPage>

The Grid defines a white background which is applied on the entire screen, however the contents of the Grid are not near the edge of the window, there is an observable margin/padding between the Image and the edge of the window. How can I ensure the image is directly against the window edge?

Upvotes: 2

Views: 2801

Answers (2)

kutty japan
kutty japan

Reputation: 60

you can place your image inside a grid so that it will displayed in the full screen here is the C# coding

    System.Windows.Media.ImageBrush myBrush = new System.Windows.Media.ImageBrush();
        Image image = new Image();
        image.ImageFailed += (s, i) => MessageBox.Show("Failed to load: " + i.ErrorException.Message);
        image.Source = new System.Windows.Media.Imaging.BitmapImage(new Uri(@"/Assets/bg/bg5.jpg/", UriKind.RelativeOrAbsolute));
        myBrush.ImageSource = image.Source;
        grid1.Background = myBrush;

Upvotes: 0

ColinE
ColinE

Reputation: 70142

Try setting your image Stretch property:

<Image Name="Image" Stretch="UniformToFill"/>

For more information see the MSDN pages regarding image stretching.

Also, your button will add some 'padding' around your image. To avoid this, you will have to change its template. I would replace the template with one which simply renders the content:

     <Button>
         <Button.Template>
            <ControlTemplate TargetType="Button">
                <StackPanel x:Name="stackPanel" Orientation="Horizontal">
                    <ContentPresenter VerticalAlignment="Bottom"/>
                </StackPanel>
            </ControlTemplate>
         </Button.Template>
        <Image Name="Image" Stretch="UniformToFill"/>
      </Button>

Although, if you are entirely removing the button 'chrome' you may as well just use the image directly and handle tap / click events on the image.

Upvotes: 3

Related Questions