CODEWITHSUNDEEP
c#xamlwindows-runtimewinrt-xamlwindows-8.1
Sume Rossini
Sume Rossini

Reputation: 77

Line separators in a GridView in a Windows 8.1 app using XAML

I would like to create line separators between GridView items similar to the following screenshot of the Bing news app

enter image description here

GridView XAML. VariableSizedGridView is inherited from GridView but allows items to be of different sizes.

<controls:VariableSizedGridView
                    x:Name="newsGridView"
                    ItemsSource="{Binding TopItems}"
                    Margin="-9,-14,0,0"
                    SelectionMode="None"
                    IsSwipeEnabled="false"
                    IsItemClickEnabled="True"
                    ItemClick="news_ItemClick"
                    ItemTemplateSelector="{StaticResource mySelector}">
                    <GridView.ItemsPanel>
                        <ItemsPanelTemplate>
                            <VariableSizedWrapGrid ItemHeight="232" ItemWidth="320" />
                        </ItemsPanelTemplate>
                    </GridView.ItemsPanel>
                </controls:VariableSizedGridView>

Upvotes: 1

Views: 2428

Answers (1)

Heena
Heena

Reputation: 8634

You need to change gridview itemcontainerstyle If you want line under each Gridview item.for that you need to edit gridviewitem style.

goto gridview item->right click->Edit template->Edit Copy->Ok. and you will get gridview item style

 <Page.Resources>
    <Style x:Name="Gridvieitemstyle" TargetType="GridViewItem">      
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="GridViewItem">
                    <Border x:Name="OuterContainer">                           
                           .
                           .
                        <!--I have removed visualstates.you add it later-->                          
                            .
                            .
                        <Grid x:Name="ReorderHintContent" Background="Transparent">
                            <Path x:Name="SelectingGlyph" Data="F1 M133.1,17.9 L137.2,13.2 L144.6,19.6 L156.4,5.8 L161.2,9.9 L145.6,28.4 z" Fill="{StaticResource ListViewItemCheckSelectingThemeBrush}" FlowDirection="LeftToRight" HorizontalAlignment="Right" Height="13" Margin="0,9.5,9.5,0" Opacity="0" Stretch="Fill" VerticalAlignment="Top" Width="15"/>
                            <Border x:Name="HintGlyphBorder" HorizontalAlignment="Right" Height="40" Margin="4" Opacity="0" VerticalAlignment="Top" Width="40">
                                <Path x:Name="HintGlyph" Data="F1 M133.1,17.9 L137.2,13.2 L144.6,19.6 L156.4,5.8 L161.2,9.9 L145.6,28.4 z" Fill="{StaticResource ListViewItemCheckHintThemeBrush}" FlowDirection="LeftToRight" HorizontalAlignment="Right" Height="13" Margin="0,5.5,5.5,0" Opacity="0" Stretch="Fill" VerticalAlignment="Top" Width="15"/>
                            </Border>
                            <Border x:Name="ContentContainer">
                                <Grid x:Name="InnerDragContent">
                                    <Rectangle x:Name="PointerOverBorder" Fill="{StaticResource ListViewItemPointerOverBackgroundThemeBrush}" IsHitTestVisible="False" Margin="1" Opacity="0"/>
                                    <Rectangle x:Name="FocusVisual" IsHitTestVisible="False" Opacity="0" Stroke="{StaticResource ListViewItemFocusBorderThemeBrush}" StrokeThickness="2"/>
                                    <Rectangle x:Name="SelectionBackground" Fill="{StaticResource ListViewItemSelectedBackgroundThemeBrush}" Margin="4" Opacity="0"/>
                                    <Border x:Name="ContentBorder" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" Margin="4">
                                        <Grid>
                                            <ContentPresenter x:Name="contentPresenter" ContentTransitions="{TemplateBinding ContentTransitions}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
                                            <TextBlock x:Name="PlaceholderTextBlock" Foreground="{x:Null}" IsHitTestVisible="False" Margin="{TemplateBinding Padding}" Text="Xg" Visibility="Collapsed"/>
                                            <Rectangle x:Name="PlaceholderRect" Fill="{StaticResource ListViewItemPlaceholderBackgroundThemeBrush}" IsHitTestVisible="False" Visibility="Collapsed"/>
                                            <Rectangle x:Name="MultiArrangeOverlayBackground" Fill="{StaticResource ListViewItemDragBackgroundThemeBrush}" IsHitTestVisible="False" Opacity="0"/>

                                            <!--I have added this border for each gridview item under line-->
                                            <Border BorderBrush="Red" BorderThickness="0,0,0,1" Margin="5,0,5,5"></Border>

                                        </Grid>
                                    </Border>
                                    <Rectangle x:Name="SelectedBorder" IsHitTestVisible="False" Margin="4" Opacity="0" Stroke="{StaticResource ListViewItemSelectedBackgroundThemeBrush}" StrokeThickness="{StaticResource GridViewItemSelectedBorderThemeThickness}"/>
                                    <Border x:Name="SelectedCheckMarkOuter" HorizontalAlignment="Right" IsHitTestVisible="False" Margin="4" VerticalAlignment="Top">
                                        <Grid x:Name="SelectedCheckMark" Height="40" Opacity="0" Width="40">
                                            <Path x:Name="SelectedEarmark" Data="M0,0 L40,0 L40,40 z" Fill="{StaticResource ListViewItemSelectedBackgroundThemeBrush}" Stretch="Fill"/>
                                            <Path Data="F1 M133.1,17.9 L137.2,13.2 L144.6,19.6 L156.4,5.8 L161.2,9.9 L145.6,28.4 z" Fill="{StaticResource ListViewItemCheckThemeBrush}" FlowDirection="LeftToRight" HorizontalAlignment="Right" Height="13" Margin="0,5.5,5.5,0" Stretch="Fill" VerticalAlignment="Top" Width="15"/>
                                        </Grid>
                                    </Border>
                                    <TextBlock x:Name="MultiArrangeOverlayText" Foreground="{StaticResource ListViewItemDragForegroundThemeBrush}" FontSize="26.667" FontFamily="{StaticResource ContentControlThemeFontFamily}" IsHitTestVisible="False" Margin="18,9,0,0" Opacity="0" TextWrapping="Wrap" Text="{Binding TemplateSettings.DragItemsCount, RelativeSource={RelativeSource Mode=TemplatedParent}}" TextTrimming="WordEllipsis"/>
                                </Grid>
                            </Border>
                        </Grid>
                    </Border>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

</Page.Resources>
 <GridView ItemContainerStyle="{StaticResource Gridvieitemstyle}"></GridView>

Upvotes: 3

Related Questions