locked
how to set a background image for split app or grid app in visual studio 2012 using c#?????

Answers

  • Hi,

    If you review the XAML code in Initial display pages of both the apps, you will find that the <Grid> is the parent element of the Pages. You can the set background image through XAML as :

    <Grid.Background>
    <ImageBrush ImageSource="1.png" />
    </Grid.Background>

    Or in C# code, if you name the <Grid> as LayoutRoot, then you can set it as :


    ImageSource image = new BitmapImage(new Uri("ms-appx:///Assets/1.png"));
    ImageBrush ImgBrush = new ImageBrush();
    ImgBrush.ImageSource = image;
    LayoutRoot.Background = ImgBrush;

    Tuesday, May 06, 2014 9:54 AM

All replies

  • Hi,

    If you review the XAML code in Initial display pages of both the apps, you will find that the <Grid> is the parent element of the Pages. You can the set background image through XAML as :

    <Grid.Background>
    <ImageBrush ImageSource="1.png" />
    </Grid.Background>

    Or in C# code, if you name the <Grid> as LayoutRoot, then you can set it as :


    ImageSource image = new BitmapImage(new Uri("ms-appx:///Assets/1.png"));
    ImageBrush ImgBrush = new ImageBrush();
    ImgBrush.ImageSource = image;
    LayoutRoot.Background = ImgBrush;

    Tuesday, May 06, 2014 9:54 AM
  • if i placed the xaml code......i have some error.

    error is key value is neede

    Tuesday, May 06, 2014 10:15 AM
  • <Application.Resources>
            <ResourceDictionary>
                <ResourceDictionary.MergedDictionaries>

                    <!-- 
                        Styles that define common aspects of the platform look and feel
                        Required by Visual Studio project and item templates
                     -->
                    <ResourceDictionary Source="Common/StandardStyles.xaml"/>
                </ResourceDictionary.MergedDictionaries>

                <!-- Application-specific resources -->
                
                <x:String x:Key="AppName">FREEDOM FIGHTERS OF INDIA</x:String>
                <Grid.Background>
                    <ImageBrush ImageSource="1.png" />
                </Grid.Background>
            </ResourceDictionary>
        </Application.Resources>
    </Application>

    This is the code.....whether i placed the code in right place.

    these are three error occur in it

    Error 1 Unknown attachable member 'Grid.Background' on element 'ResourceDictionary'

    Error 2 The member "Background" is not recognized or is not accessible.

    Error 3 The attachable property 'Background' was not found in type 'Grid'.


    Tuesday, May 06, 2014 10:25 AM
  • As a best practice, you should put the ImageBrush code in ResourceDictionary for enhancing accessibility of the App.

    The code in ResourceDictionary should look like this :

    <ResourceDictionary> 
            <x:String x:Key="AppName">BrokenGridApp</x:String> 
            <ResourceDictionary.ThemeDictionaries> 
                
              <ResourceDictionary x:Key="Default"> 
               <ImageBrush x:Key="PageBackground" Stretch="Fill" ImageSource="1.png"/> 
                </ResourceDictionary> 
                < ResourceDictionary x:Key="HighContrast"> 
                    <SolidColorBrush x:Key="PageBackground" Color="{ThemeResource SystemColorWindowColor}" /> 
                </ResourceDictionary> 
            </ResourceDictionary.ThemeDictionaries> 
        </ResourceDictionary> 
    </Page.Resources>

    The code in ItemsPage.xaml should be something like this :

    <Grid Style="{StaticResource LayoutStyle}" Background="{ThemeResource PageBackground}" />
    <--Other code-->

    Sagar


    Tuesday, May 06, 2014 10:34 AM
  • thanks for it.....

    it is very useful for me....

    1.how to i set background for second page in split or grid app

    Tuesday, May 06, 2014 11:11 AM
  • Hi Vignesh,

    You need to follow the same process for the SplitPage.xaml in the project. Here are some links that will help you :

    http://blogs.msdn.com/b/wsdevsol/archive/2014/02/20/accessibility-gotchas-2-high-contrast.aspx 

    http://channel9.msdn.com/coding4fun/blog/Hello-Blog-Reader-Sample-for-the-Windows-Store-in-C-Visual-BasicNet-JavaScript-and-even-C

    http://msdn.microsoft.com/en-in/library/windows/apps/hh768232.aspx#split_project_template

    http://msdn.microsoft.com/en-us/library/windows/apps/dn631757.aspx

    http://msdn.microsoft.com/en-us/library/windows/apps/jj236469.aspx

    Sagar


    Tuesday, May 06, 2014 12:10 PM
  • how to set a background for this page 
    Wednesday, May 07, 2014 6:03 AM
  • how to change the font color and font type
    Wednesday, May 07, 2014 6:04 AM
  • please tell me how to change the font type,font color and font  style,font size in split app


    Wednesday, May 07, 2014 7:18 AM
  • Hello,

    You can modify the Styles in ResourceDictionary in Common/StandardStyles.XAML file to reflect the changes in the UI. You can find the names of Styles by looking at the SplitPage.xaml .

    These links should help :

    XAML overview

    http://channel9.msdn.com/Events/Build/2012/3-116 

    You should also consider targeting Apps for Windows 8.1. More information here.

    Sagar

    Thursday, May 08, 2014 9:37 AM