locked
Larger space between Groups Gridview

    Question

  • Hello!

    I read some similar posts,but i didn't found the "easy" solution.

    My problem is ,i want more space between groups in gridview.

    My XML code :

    <Page
        x:Class="App1.BlankPage2"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:local="using:App1"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        mc:Ignorable="d" Background="Black">
    
    
        <Page.Resources>
            <CollectionViewSource x:Name="cvs1" IsSourceGrouped="true" />
    
        </Page.Resources>
    
        <Grid VerticalAlignment="Stretch" HorizontalAlignment="Stretch" Background="Gray" >
            <GridView x:Name="ItemsByCategory"  VerticalAlignment="Center" 
                                          ItemsSource="{Binding Source={StaticResource cvs1}}"
                                          BorderBrush="{StaticResource ApplicationForegroundThemeBrush}" 
                      
                     
                Padding="116,137,40,46"
                      >
    
                <GridView.ItemsPanel>
                    <ItemsPanelTemplate>
                        <StackPanel Orientation="Horizontal" Margin="100"/>
    
                    </ItemsPanelTemplate>
                </GridView.ItemsPanel>
                
    
                <GridView.ItemTemplate>
                    
                    <DataTemplate>
                       
                        <Grid HorizontalAlignment="Stretch" Background="Green" >
                           
                            <StackPanel Orientation="Horizontal" Margin="1,10,0,0">
                                <Image Source="{Binding Image}" Height="60" Width="60" VerticalAlignment="Center"  Margin="0,0,10,0"/>
                                <StackPanel Margin="0,0,0,0" Orientation="Vertical" Width="100" Height="150">
                                    <TextBlock TextWrapping="Wrap" Width="100" VerticalAlignment="Bottom" Text="{Binding Title}" HorizontalAlignment="Center" FontFamily="Segoe UI" />
                                    
                                </StackPanel>
                                
                            </StackPanel>
    
                        </Grid>
                      
                    </DataTemplate>
                </GridView.ItemTemplate>
                <!--- header   -->
                <GridView.GroupStyle>
                    <GroupStyle>
                        <GroupStyle.HeaderTemplate>
                            <DataTemplate>
    
                                <Grid >
                                    <Button
                                        AutomationProperties.Name="Group Title"
                                        Style="{StaticResource TextPrimaryButtonStyle}">
                                        <StackPanel Orientation="Horizontal">
                                            <TextBlock Text='{Binding Key}'  FontSize="30" Margin="5" Style="{StaticResource GroupHeaderTextStyle}"/>
                                          
                                        </StackPanel>
                                    </Button>
                                </Grid>
                            </DataTemplate>
                        </GroupStyle.HeaderTemplate>
    
                        <GroupStyle.Panel>
                            <ItemsPanelTemplate>
                                <VariableSizedWrapGrid Orientation="Vertical" Height="800" />
                            </ItemsPanelTemplate>
                        </GroupStyle.Panel>
                    </GroupStyle>
    
                </GridView.GroupStyle>
    
            </GridView>
            <TextBlock HorizontalAlignment="Left" Margin="118,60,0,0" TextWrapping="Wrap" Text="Test" VerticalAlignment="Top" FontSize="60" Foreground="White"/>
    
    
    
    
    
    
        </Grid>
    </Page>

    Thx,for any help !

    Monday, October 22, 2012 7:41 AM

Answers

  • you can simply add a margin to your panel in group style:

    <GroupStyle.Panel>
        <ItemsPanelTemplate>
            <VariableSizedWrapGrid Orientation="Vertical" Height="800" Margin="50, 0, 50, 0"/>
        </ItemsPanelTemplate>
    </GroupStyle.Panel>


    Can Bilgin
    Blog CompuSight

    • Marked as answer by EvoxI Monday, October 22, 2012 8:35 AM
    Monday, October 22, 2012 8:08 AM