locked
Changing size and text colour of GridViewItems

    Question

  • How can I change the text colour for each of my GridViewItems a different colour? Also how can I make the items bigger?

            <GridView x:Name="stationchooseritems" HorizontalAlignment="Stretch" Grid.Row="1" VerticalAlignment="Stretch">
                <x:String>Item 1</x:String>
                <x:String>Item 2</x:String>
                <x:String>Item 3</x:String>
            </GridView>
    
    Monday, May 19, 2014 3:16 PM

Answers

  • Hi,

    If you want to make the GridView Items have different color, you can code like below:

    <GridView x:Name="stationchooseritems" HorizontalAlignment="Stretch" Grid.Row="1" VerticalAlignment="Stretch" SelectionChanged="stationchooseritems_SelectionChanged">
                <GridViewItem Background="AliceBlue" Width="300">
                    <TextBlock Text="Item1"></TextBlock>
                </GridViewItem>
                <GridViewItem Background="Aquamarine">
                    <TextBlock Text="Item2"></TextBlock>
                </GridViewItem>
                <GridViewItem Background="Bisque">
                    <TextBlock Text="Item3"></TextBlock>
                </GridViewItem>
            </GridView>

    You can define the one of the GridViewItem Width or Height property to make the item become bigger or smaller. Note that all of the GridViewItem have the same size. If you want to make the Gridview Item have different size, you can refer to the link below:

    http://social.msdn.microsoft.com/Forums/windowsapps/en-US/966aa897-1413-46f0-bef7-663de36f9423/how-to-create-a-variable-sized-grouped-gridview-like-the-store?forum=winappswithcsharp

    Best Wishes!


    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. Thanks<br/> MSDN Community Support<br/> <br/> Please remember to &quot;Mark as Answer&quot; the responses that resolved your issue. It is a common way to recognize those who have helped you, and makes it easier for other visitors to find the resolution later.

    • Marked as answer by m.findlay93 Wednesday, May 21, 2014 11:25 AM
    Tuesday, May 20, 2014 1:21 AM
  • You will find all predefined styles in the XAML files in C:\Program Files (x86)\Windows Kits\8.1\Include\winrt\xaml\design\ but you could define your own one inside <Page.Resources>, <Application.Resources> (App.xaml) or inline depending on the scope in which you want to be able to use the style. To apply the style to all items in the GridView, you just set the ItemContainerStyle property of the GridView to your custom style:

    <Page
        x:Class="Windows81App.MainPage"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x=http://schemas.microsoft.com/winfx/2006/xaml
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        mc:Ignorable="d">
        <Page.Resources>
            <Style x:Key="myStyle" TargetType="GridViewItem">
                <Setter Property="FontSize" Value="40"/>
                <Setter Property="Foreground" Value="Green"/>
            </Style>
        </Page.Resources>
        <Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}">
            <GridView x:Name="stationchooseritems" HorizontalAlignment="Stretch" Grid.Row="1" VerticalAlignment="Stretch"
                      ItemContainerStyle="{StaticResource myStyle}">
                <x:String>Item 1</x:String>
                <x:String>Item 2</x:String>
                <x:String>Item 3</x:String>
            </GridView>
        </Grid>
    </Page>
    

    • Marked as answer by m.findlay93 Wednesday, May 21, 2014 11:25 AM
    Tuesday, May 20, 2014 8:35 PM

All replies

  • Hi,

    If you want to make the GridView Items have different color, you can code like below:

    <GridView x:Name="stationchooseritems" HorizontalAlignment="Stretch" Grid.Row="1" VerticalAlignment="Stretch" SelectionChanged="stationchooseritems_SelectionChanged">
                <GridViewItem Background="AliceBlue" Width="300">
                    <TextBlock Text="Item1"></TextBlock>
                </GridViewItem>
                <GridViewItem Background="Aquamarine">
                    <TextBlock Text="Item2"></TextBlock>
                </GridViewItem>
                <GridViewItem Background="Bisque">
                    <TextBlock Text="Item3"></TextBlock>
                </GridViewItem>
            </GridView>

    You can define the one of the GridViewItem Width or Height property to make the item become bigger or smaller. Note that all of the GridViewItem have the same size. If you want to make the Gridview Item have different size, you can refer to the link below:

    http://social.msdn.microsoft.com/Forums/windowsapps/en-US/966aa897-1413-46f0-bef7-663de36f9423/how-to-create-a-variable-sized-grouped-gridview-like-the-store?forum=winappswithcsharp

    Best Wishes!


    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. Thanks<br/> MSDN Community Support<br/> <br/> Please remember to &quot;Mark as Answer&quot; the responses that resolved your issue. It is a common way to recognize those who have helped you, and makes it easier for other visitors to find the resolution later.

    • Marked as answer by m.findlay93 Wednesday, May 21, 2014 11:25 AM
    Tuesday, May 20, 2014 1:21 AM
  • Hello. This worked so thank you very much. Also I noticed in Windows Phone that there are 'styles' for text

    for example:

    Style="{StaticResource PhoneTextSubtleStyle}"

    Style="{StaticResource PhoneTextMediumStyle}"
    Style="{StaticResource PhoneTextLargeStyle}"

    Style="{StaticResource PhoneTextExtraLargeStyle}"

    and so on.

    Does Windows 8 have something similar to this that I can use that that giving a number to adjust the size of the text?



    Tuesday, May 20, 2014 6:37 PM
  • You will find all predefined styles in the XAML files in C:\Program Files (x86)\Windows Kits\8.1\Include\winrt\xaml\design\ but you could define your own one inside <Page.Resources>, <Application.Resources> (App.xaml) or inline depending on the scope in which you want to be able to use the style. To apply the style to all items in the GridView, you just set the ItemContainerStyle property of the GridView to your custom style:

    <Page
        x:Class="Windows81App.MainPage"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x=http://schemas.microsoft.com/winfx/2006/xaml
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        mc:Ignorable="d">
        <Page.Resources>
            <Style x:Key="myStyle" TargetType="GridViewItem">
                <Setter Property="FontSize" Value="40"/>
                <Setter Property="Foreground" Value="Green"/>
            </Style>
        </Page.Resources>
        <Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}">
            <GridView x:Name="stationchooseritems" HorizontalAlignment="Stretch" Grid.Row="1" VerticalAlignment="Stretch"
                      ItemContainerStyle="{StaticResource myStyle}">
                <x:String>Item 1</x:String>
                <x:String>Item 2</x:String>
                <x:String>Item 3</x:String>
            </GridView>
        </Grid>
    </Page>
    

    • Marked as answer by m.findlay93 Wednesday, May 21, 2014 11:25 AM
    Tuesday, May 20, 2014 8:35 PM