locked
Grid App in C# and XAML RRS feed

  • Question

  • Hey,

    I wanted to know how to re-size the tiles in a Metro Grid App and how to change its text and backgrounds. Is there any documentation on how the SampleDataSource.cs file work and how I can change the tile sizes and backgrounds? 

     Thanks in advance,

    Rahul

    Thursday, December 27, 2012 4:48 AM

Answers

  • Tile Sizes and Backgrounds:

    Look for GridView "ItemTemplate"; it references e.g.

    ItemTemplate="{StaticResource Standard250x250ItemTemplate}"

    located in \Common\StandardStyles.xaml. It can be changed as follows e.g.

        <DataTemplate x:Key="Standard250x250ItemTemplate">
            <Grid HorizontalAlignment="Left" Width="150" Height="150">
                <Border Background="{StaticResource ListViewItemPlaceholderBackgroundThemeBrush}">
                    <Image Source="{Binding Image}" Stretch="UniformToFill" 
                           AutomationProperties.Name="{Binding Title}"/>
                </Border>
                <StackPanel VerticalAlignment="Bottom" Background="Blue">
                    <TextBlock Text="{Binding Title}" 
                               Foreground="{StaticResource ListViewItemOverlayForegroundThemeBrush}"
                               Style="{StaticResource TitleTextStyle}" Height="60" Margin="15,0,15,0"/>
                    <TextBlock Text="{Binding Subtitle}" 
                               Foreground="{StaticResource ListViewItemOverlaySecondaryForegroundThemeBrush}"
                               Style="{StaticResource CaptionTextStyle}" 
                               TextWrapping="NoWrap" Margin="15,0,15,10"/>
                </StackPanel>
            </Grid>
        </DataTemplate>

    ---

    Text:

    The text depends mostly on Class Properties whose values are set in the \DataModel\SampleDataSource.cs: Item Title 1, Item Subtitle 1, etc. Just change by experimenting. Those values are reflected on the presentation layer thru 'binding' using <TextBlock Text={Binding Title} .../>

    ---
    Documentation [not very detailed but an entry point to relevant topics]:

    C#, VB, and C++ project templates for Windows Store apps (Windows)

    • Edited by ForInfo Thursday, December 27, 2012 6:33 AM
    • Marked as answer by Rahul Dominic Thursday, December 27, 2012 4:32 PM
    Thursday, December 27, 2012 6:18 AM
  • Hi Rahul,

    Please check the Data template once. if the Data template is not correct (bindings in the data template with your object properties) then it will not display any thing since the binding is wrong.

    Please check the XAML that you specified correct data template and then the binding in the data template are correct.

    Regards

    Raja PV


    raja

    • Marked as answer by Rahul Dominic Thursday, December 27, 2012 4:33 PM
    Thursday, December 27, 2012 7:54 AM
  •  

    Please check the data source that you are providing in the  main page (load state)

    var sampleDataGroups = SampleDataSource.GetGroups((String)navigationParameter);
                this.DefaultViewModel["Groups"] = sampleDataGroups;

    if you find the above code the data source(sampleDataGroups) that you are providing will be bound to the collection view source("Groups" in the XAML). from which your template will pick the data. Please check them once

    Regards

    Raja PV


    raja

    • Proposed as answer by Raja KPV Thursday, December 27, 2012 12:17 PM
    • Marked as answer by Rahul Dominic Thursday, December 27, 2012 4:33 PM
    Thursday, December 27, 2012 11:34 AM

All replies

  • Tile Sizes and Backgrounds:

    Look for GridView "ItemTemplate"; it references e.g.

    ItemTemplate="{StaticResource Standard250x250ItemTemplate}"

    located in \Common\StandardStyles.xaml. It can be changed as follows e.g.

        <DataTemplate x:Key="Standard250x250ItemTemplate">
            <Grid HorizontalAlignment="Left" Width="150" Height="150">
                <Border Background="{StaticResource ListViewItemPlaceholderBackgroundThemeBrush}">
                    <Image Source="{Binding Image}" Stretch="UniformToFill" 
                           AutomationProperties.Name="{Binding Title}"/>
                </Border>
                <StackPanel VerticalAlignment="Bottom" Background="Blue">
                    <TextBlock Text="{Binding Title}" 
                               Foreground="{StaticResource ListViewItemOverlayForegroundThemeBrush}"
                               Style="{StaticResource TitleTextStyle}" Height="60" Margin="15,0,15,0"/>
                    <TextBlock Text="{Binding Subtitle}" 
                               Foreground="{StaticResource ListViewItemOverlaySecondaryForegroundThemeBrush}"
                               Style="{StaticResource CaptionTextStyle}" 
                               TextWrapping="NoWrap" Margin="15,0,15,10"/>
                </StackPanel>
            </Grid>
        </DataTemplate>

    ---

    Text:

    The text depends mostly on Class Properties whose values are set in the \DataModel\SampleDataSource.cs: Item Title 1, Item Subtitle 1, etc. Just change by experimenting. Those values are reflected on the presentation layer thru 'binding' using <TextBlock Text={Binding Title} .../>

    ---
    Documentation [not very detailed but an entry point to relevant topics]:

    C#, VB, and C++ project templates for Windows Store apps (Windows)

    • Edited by ForInfo Thursday, December 27, 2012 6:33 AM
    • Marked as answer by Rahul Dominic Thursday, December 27, 2012 4:32 PM
    Thursday, December 27, 2012 6:18 AM
  • Hello,

    I want another grouped app page in my project and I added it. I tried to copy and edit the SampleDataSource such that there are no repeated variables. I want the other page to have another design. I updated the data source in the XAML with the new file name and it displays nothing.

    This is urgent, I would appreciate it if you could reply ASAP.

    Regards

    Rahul

    Thursday, December 27, 2012 7:09 AM
  • Hi Rahul,

    Please check the Data template once. if the Data template is not correct (bindings in the data template with your object properties) then it will not display any thing since the binding is wrong.

    Please check the XAML that you specified correct data template and then the binding in the data template are correct.

    Regards

    Raja PV


    raja

    • Marked as answer by Rahul Dominic Thursday, December 27, 2012 4:33 PM
    Thursday, December 27, 2012 7:54 AM
  • Hi Raja,

    Where is the data bound? I fixed the binding issue in StandardStyles.xaml and in the MainPage. it is still showing a blank screen.

    Regards
    Rahul 

    Thursday, December 27, 2012 8:08 AM
  •  

    Please check the data source that you are providing in the  main page (load state)

    var sampleDataGroups = SampleDataSource.GetGroups((String)navigationParameter);
                this.DefaultViewModel["Groups"] = sampleDataGroups;

    if you find the above code the data source(sampleDataGroups) that you are providing will be bound to the collection view source("Groups" in the XAML). from which your template will pick the data. Please check them once

    Regards

    Raja PV


    raja

    • Proposed as answer by Raja KPV Thursday, December 27, 2012 12:17 PM
    • Marked as answer by Rahul Dominic Thursday, December 27, 2012 4:33 PM
    Thursday, December 27, 2012 11:34 AM
  • Thanks a lot.
    It work now.
    Thursday, December 27, 2012 11:44 AM
  • how to bind data to grid app??

    Friday, February 13, 2015 10:11 AM