locked
how to set background of grid RRS feed

  • Question

  • I have a `BitmapImage`, and want to set it as `Background` of `Grid`. I have tried this

    xaml:

            <Grid x:Name="ContentPanel">
                <Grid.Background>
                    <ImageBrush x:Name="imgBg" />
                </Grid.Background>
            </Grid>
    c#:
                    BitmapImage bmp = new BitmapImage();
                    bmp.DecodePixelWidth =(int) scrnWidth;
                    bmp.DecodePixelHeight = (int)scrnHeight;
                    bmp.SetSource(e.ChosenPhoto);
    
                    ImageSource iS = bmp;
                    ImageBrush ib = new ImageBrush();
                    ib.ImageSource = iS;
                    imgBg = ib;

    **Output:** Output is just black.

    **Question:** using above code I am unable to set `bitmapimage` as `background` of `Grid` element, Am I missing something?
    Tuesday, November 4, 2014 11:32 AM

Answers

  •         <Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
                <Grid.Background >
                    <ImageBrush x:Name="gridbackgroundbrush"/>
                </Grid.Background>
                <Button Content="choose" Click="Button_Click" Height="80"/>
            </Grid>

            private void task_Completed(object sender, Microsoft.Phone.Tasks.PhotoResult e)
            {           
                if (e.ChosenPhoto != null)
                {
                    BitmapImage image = new BitmapImage();
                    image.SetSource(e.ChosenPhoto);
                    gridbackgroundbrush.ImageSource = image;
                }
            }


    在現實生活中,你和誰在一起的確很重要,甚至能改變你的成長軌跡,決定你的人生成敗。 和什麼樣的人在一起,就會有什麼樣的人生。 和勤奮的人在一起,你不會懶惰; 和積極的人在一起,你不會消沈; 與智者同行,你會不同凡響; 與高人為伍,你能登上巔峰。

    Wednesday, November 5, 2014 12:52 AM

All replies

  • Hello Dev_Enuke,

    This can be done by adding a common grid style which uses Image as background.
    You can find some example code at [1].

    [1] http://stackoverflow.com/questions/22013441/how-to-set-background-image-in-windows-phone-8

    Regards,
    Bo Liu
    Developer-Hotline for MSDN Online Germany

    Disclaimer:
    Please take into consideration, that further inquiries cannot or will be answered with delay.
    For further information please contact us per telephone through the MSDN-Entwickler-Hotline: http://www.msdn-online.de/Hotline
    MSDN-Entwickler-Hotline: Fast and professional help for software developers free of charge!

    For this post by the MSDN-Entwickler-Hotline the following terms and conditions apply: Trademarks, Privacy as well as the separate terms of use for the MSDN-Entwickler-Hotline.

    Tuesday, November 4, 2014 12:33 PM
  •         <Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
                <Grid.Background >
                    <ImageBrush x:Name="gridbackgroundbrush"/>
                </Grid.Background>
                <Button Content="choose" Click="Button_Click" Height="80"/>
            </Grid>

            private void task_Completed(object sender, Microsoft.Phone.Tasks.PhotoResult e)
            {           
                if (e.ChosenPhoto != null)
                {
                    BitmapImage image = new BitmapImage();
                    image.SetSource(e.ChosenPhoto);
                    gridbackgroundbrush.ImageSource = image;
                }
            }


    在現實生活中,你和誰在一起的確很重要,甚至能改變你的成長軌跡,決定你的人生成敗。 和什麼樣的人在一起,就會有什麼樣的人生。 和勤奮的人在一起,你不會懶惰; 和積極的人在一起,你不會消沈; 與智者同行,你會不同凡響; 與高人為伍,你能登上巔峰。

    Wednesday, November 5, 2014 12:52 AM
  • Hi Dev_Enuke,

    Based on your descrpition, I know that you want to set a background image for the Grid element, then the code post by @Bill Chung should work for you.

    Besides, the following code will be your alternative choice, please try to check it:

    BitmapImage bmp = new BitmapImage();
    bmp.DecodePixelWidth =(int) scrnWidth;
    bmp.DecodePixelHeight = (int)scrnHeight;
    bmp.SetSource(e.ChosenPhoto);

    ImageBrush ib = new ImageBrush(); ib.ImageSource = bmp; ContentPanel.Background = ib;

    Best Regards,
    Amy Peng


    We are trying to better understand customer views on social support experience, so your participation in this interview project would be greatly appreciated if you have time. Thanks for helping make community forums a great place.
    Click HERE to participate the survey.


    Wednesday, November 5, 2014 6:07 AM
  • Hi raulliubo,

    In my case user can change background from application bar, how I can achieve this using this way ?

    • Edited by Dev_Enuke Wednesday, November 5, 2014 6:19 AM
    Wednesday, November 5, 2014 6:18 AM
  • by appbar button
    <phone:PhoneApplicationPage
        x:Class="WP80ChoosePhotoTobackground.MainPage"
        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"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        mc:Ignorable="d"
        FontFamily="{StaticResource PhoneFontFamilyNormal}"
        FontSize="{StaticResource PhoneFontSizeNormal}"
        Foreground="{StaticResource PhoneForegroundBrush}"
        SupportedOrientations="Portrait" Orientation="Portrait"
        shell:SystemTray.IsVisible="True">
    
        <!--LayoutRoot is the root grid where all page content is placed-->
        <Grid x:Name="LayoutRoot" Background="Transparent">
            <Grid.RowDefinitions>
                <RowDefinition Height="Auto"/>
                <RowDefinition Height="*"/>
            </Grid.RowDefinitions>
            <StackPanel x:Name="TitlePanel" Grid.Row="0" Margin="12,17,0,28">
                <TextBlock Text="MY APPLICATION" Style="{StaticResource PhoneTextNormalStyle}" Margin="12,0"/>
                <TextBlock Text="page name" Margin="9,-7,0,0" Style="{StaticResource PhoneTextTitle1Style}"/>
            </StackPanel>
    
            <!--ContentPanel - place additional content here-->
            <Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
               
            </Grid>
    
        </Grid>
        <phone:PhoneApplicationPage.ApplicationBar >
            <shell:ApplicationBar IsVisible="True" IsMenuEnabled="True" Opacity="1.0"  Mode="Default">
                <shell:ApplicationBarIconButton Click="OpenImage_Click" IconUri="/Images/open.png" Text="open" />
            </shell:ApplicationBar> 
        </phone:PhoneApplicationPage.ApplicationBar>
    </phone:PhoneApplicationPage>
    using System;
    using System.Collections.Generic;
    using System.Linq;
    using System.Net;
    using System.Windows;
    using System.Windows.Controls;
    using System.Windows.Navigation;
    using Microsoft.Phone.Controls;
    using Microsoft.Phone.Shell;
    using WP80ChoosePhotoTobackground.Resources;
    using System.Windows.Media.Imaging;
    using System.Windows.Media;
    
    namespace WP80ChoosePhotoTobackground
    {
        public partial class MainPage : PhoneApplicationPage
        {
            // Constructor
            public MainPage()
            {
                InitializeComponent();
            }
          
    
            private void task_Completed(object sender, Microsoft.Phone.Tasks.PhotoResult e)
            {
                if (e.ChosenPhoto != null)
                {
                    BitmapImage image = new BitmapImage();
                    image.SetSource(e.ChosenPhoto);
                    ImageBrush brush= new ImageBrush ();
                    brush.ImageSource = image;
                    ContentPanel.Background = brush;
                }
            }
    
            private void OpenImage_Click(object sender, EventArgs e)
            {
                Microsoft.Phone.Tasks.PhotoChooserTask task = new Microsoft.Phone.Tasks.PhotoChooserTask();
                task.Completed += task_Completed;
                task.Show();
            }
    
        }
    }



    在現實生活中,你和誰在一起的確很重要,甚至能改變你的成長軌跡,決定你的人生成敗。 和什麼樣的人在一起,就會有什麼樣的人生。 和勤奮的人在一起,你不會懶惰; 和積極的人在一起,你不會消沈; 與智者同行,你會不同凡響; 與高人為伍,你能登上巔峰。

    Wednesday, November 5, 2014 3:02 PM