locked
What determins the size of GridViewItemPresenter?

    Question

  • I wanna know what determins the size of GridViewItemPresenter.

    I have a GridView which has one item.The size of reperesentation of the item is (24,16).But the size of GridViewItemPresenter contains this item is (40,40).

    What make this difference?I hope the size of GridViewItemPresenter becomes like (28,20) which is item size with slight margin.


    cyclops

    Tuesday, April 15, 2014 6:48 PM

All replies

  • Hi Cyclops,

    Not quite sure if I totally understand your question, let's say we have a GirdView here and I set one GridViewItem as its item, how do you set the representation item size?

            <GridView HorizontalAlignment="Left" Height="355" Margin="858,152,0,0" VerticalAlignment="Top" Width="385" Style="{StaticResource GridViewStyle1}">
                <GridViewItem Style="{StaticResource GridViewItemStyle1}" Width="24" Height="16">ItemOne</GridViewItem>
    --James


    <THE CONTENT IS PROVIDED "AS IS" WITHOUT WARRANTY OF ANY KIND, WHETHER EXPRESS OR IMPLIED>
    Thanks
    MSDN Community Support

    Please remember to "Mark as Answer" 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.

    Wednesday, April 16, 2014 5:28 AM
    Moderator
  • Hi Jamles,thx your reply.

    In my original code I used binding to collection and DataTemplate,but I suppose code like below

        <Grid Background="Black">
            <GridView HorizontalAlignment="Center" VerticalAlignment="Center"
                      Background="DarkGray">
                <GridViewItem Background="LightGray">
                    <Rectangle Width="24" Height="16"
                               Fill="Red"/>
                </GridViewItem>
                <GridViewItem Background="LightGray">
                    <Rectangle Width="24" Height="16"
                               Fill="Red"/>
                </GridViewItem>
            </GridView>
        </Grid>

    With above,you can see LightGray rectangle for each GridViewItem which size is about (40,40).As first question,I wanna know what makes this size (40,40).

    As another question,I wonder what makes DarkGray rectangle of GridView bigger than total of each GridViewItems.Margin or something?Especially top margin and bottom margin is different,why?

    As final question, when learning XAML related technology,I often encountered some problem not easy to search Google. This technology is so wide and difficult to understand whole features including Blend.

    I wanna know  how should I learn and solve this kind problem...

    I recently started to use XAML Spy to learn XAML tech.


    cyclops


    • Edited by cyclops2 Wednesday, April 16, 2014 6:32 AM
    Wednesday, April 16, 2014 6:31 AM
  • Hi cyclops2,

    Take a look at the GridViewItem styles and templates, you should be able to find following code:

                            <Border x:Name="HintGlyphBorder"
                                    Height="40"
                                    Width="40"
                                    HorizontalAlignment="Right"
                                    VerticalAlignment="Top"
                                    Opacity="0"
                                    Margin="4">

    The border make the GirdViewItem size as 40*40.

    The second question, ContentMargin has been set as 4 in GridViewItemPresenter, try to set it as 0 should be fine. Also Margin is set to 0,0,2,2 could be another reason.

    <Setter Property="Margin" Value="0,0,2,2"/>

    The last question, well, ask in forum should help :) or find documentation from MSDN

    --James


    <THE CONTENT IS PROVIDED "AS IS" WITHOUT WARRANTY OF ANY KIND, WHETHER EXPRESS OR IMPLIED>
    Thanks
    MSDN Community Support

    Please remember to "Mark as Answer" 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.


    Wednesday, April 16, 2014 8:13 AM
    Moderator
  • Hi jemles,

    Now I'm developping on Windows 8.1,from 8.1 UI hierarchy seems to have changed for default GridView.

    There is just GridViewItemPresenter on Rectangle UIElement.

    This is the UIElement tree of above XAML by XAML Spy.

    I'm googling,but I didn't find related property which seems to determin size yet.


    cyclops

    Wednesday, April 16, 2014 1:47 PM
  • This works for me,but I don't know why and how.
        <Grid Background="Black">
            <GridView HorizontalAlignment="Center" VerticalAlignment="Center"
                      Background="DarkGray">
                <GridViewItem Background="LightGray">
                    <Rectangle Width="24" Height="16"
                               Fill="Red"/>
                </GridViewItem>
                <GridView.ItemContainerStyle>
                    <Style TargetType="GridViewItem">
                        <Setter Property="Template">
                            <Setter.Value>
                                <ControlTemplate TargetType="GridViewItem">
                                    <GridViewItemPresenter
                                        SelectionCheckMarkVisualEnabled="False"/>
                                </ControlTemplate>
                            </Setter.Value>
                        </Setter>
                    </Style>
                </GridView.ItemContainerStyle>
            </GridView>
        </Grid>
    


    cyclops

    Wednesday, April 16, 2014 2:36 PM
  • Hi cyclops2,

    Could you read my previous post, the default GridViewItem style contains a border, which has a 40px in height and 40px in width, this is the reason that cause your item size as 40*40, however, if you re-write the style as your last post mention, there is no border exist, of course you will get a 24*16 size.

    If you select the GridView item, you should be able to see the purple border, which is 40*40

    Probably I should paste some code here for a better understanding :) I believe the size comes from following code, I Bold the code.

    Note: When the GridView's ItemsPanel is not an ItemsWrapGrid (the default) or ItemsStackPanel, this template is used to show the data items. This template uses a UIElement tree and visual states instead of a GridViewItemPresenter.

    <Style TargetType="GridViewItem" x:Key="GridViewItemExpanded">
        <Setter Property="FontFamily" Value="{ThemeResource ContentControlThemeFontFamily}" />
        <Setter Property="FontSize" Value="{ThemeResource ControlContentThemeFontSize}" />
        <Setter Property="Background" Value="Transparent"/>
        <Setter Property="TabNavigation" Value="Local"/>
        <Setter Property="IsHoldingEnabled" Value="True"/>
        <Setter Property="Margin" Value="0,0,2,2"/>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="GridViewItem">
                    <Border x:Name="OuterContainer">
                        <VisualStateManager.VisualStateGroups>
                            <VisualStateGroup x:Name="CommonStates">
                                <VisualState x:Name="Normal"/>
                                <VisualState x:Name="PointerOver">
                                    <Storyboard>
                                        <DoubleAnimation Storyboard.TargetName="PointerOverBorder"
                                                         Storyboard.TargetProperty="Opacity"
                                                         Duration="0"
                                                         To="1" />
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="SelectionBackground"
                                                                        Storyboard.TargetProperty="Fill">
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ListViewItemSelectedPointerOverBackgroundThemeBrush}" />
                                        </ObjectAnimationUsingKeyFrames>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="SelectedBorder"
                                                                        Storyboard.TargetProperty="Stroke">
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ListViewItemSelectedPointerOverBorderThemeBrush}" />
                                        </ObjectAnimationUsingKeyFrames>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="SelectedEarmark"
                                                                       Storyboard.TargetProperty="Fill">
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ListViewItemSelectedPointerOverBackgroundThemeBrush}" />
                                        </ObjectAnimationUsingKeyFrames>
                                    </Storyboard>
                                </VisualState>
                                <VisualState x:Name="Pressed">
                                    <Storyboard>
                                        <PointerDownThemeAnimation TargetName="ContentContainer" />
                                    </Storyboard>
                                </VisualState>
                                <VisualState x:Name="PointerOverPressed">
                                    <Storyboard>
                                        <PointerDownThemeAnimation TargetName="ContentContainer" />
                                        <DoubleAnimation Storyboard.TargetName="PointerOverBorder"
                                                         Storyboard.TargetProperty="Opacity"
                                                         Duration="0"
                                                         To="1" />
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="SelectionBackground"
                                                                        Storyboard.TargetProperty="Fill">
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ListViewItemSelectedPointerOverBackgroundThemeBrush}" />
                                        </ObjectAnimationUsingKeyFrames>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="SelectedBorder"
                                                                        Storyboard.TargetProperty="Stroke">
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ListViewItemSelectedPointerOverBorderThemeBrush}" />
                                        </ObjectAnimationUsingKeyFrames>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="SelectedEarmark"
                                                                       Storyboard.TargetProperty="Fill">
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ListViewItemSelectedPointerOverBackgroundThemeBrush}" />
                                        </ObjectAnimationUsingKeyFrames>
                                    </Storyboard>
                                </VisualState>
                                <VisualState x:Name="Disabled">
                                    <Storyboard>
                                        <DoubleAnimation Storyboard.TargetName="contentPresenter"
                                                         Storyboard.TargetProperty="Opacity"
                                                         Duration="0"
                                                         To="{ThemeResource ListViewItemDisabledThemeOpacity}" />
                                    </Storyboard>
                                </VisualState>
                            </VisualStateGroup>
                            <VisualStateGroup x:Name="FocusStates">
                                <VisualState x:Name="Focused">
                                    <Storyboard>
                                        <DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="FocusVisual" />
                                    </Storyboard>
                                </VisualState>
                                <VisualState x:Name="Unfocused"/>
                                <VisualState x:Name="PointerFocused"/>
                            </VisualStateGroup>
                            <VisualStateGroup x:Name="SelectionHintStates">
                                <VisualState x:Name="VerticalSelectionHint">
                                    <Storyboard>
                                        <SwipeHintThemeAnimation TargetName="SelectionBackground" ToVerticalOffset="15" ToHorizontalOffset="0" />
                                        <SwipeHintThemeAnimation TargetName="ContentBorder" ToVerticalOffset="15" ToHorizontalOffset="0" />
                                        <SwipeHintThemeAnimation TargetName="SelectedBorder" ToVerticalOffset="15" ToHorizontalOffset="0" />
                                        <SwipeHintThemeAnimation TargetName="SelectedCheckMark" ToVerticalOffset="15" ToHorizontalOffset="0" />
                                        <DoubleAnimationUsingKeyFrames Storyboard.TargetName="HintGlyph"
                                                                       Storyboard.TargetProperty="Opacity"
                                                                       Duration="0:0:0.500">
                                            <DiscreteDoubleKeyFrame Value="0.5" KeyTime="0:0:0" />
                                            <DiscreteDoubleKeyFrame Value="0" KeyTime="0:0:0.500" />
                                        </DoubleAnimationUsingKeyFrames>
                                    </Storyboard>
                                </VisualState>
                                <VisualState x:Name="HorizontalSelectionHint">
                                    <Storyboard>
                                        <SwipeHintThemeAnimation TargetName="SelectionBackground" ToHorizontalOffset="-23" ToVerticalOffset="0" />
                                        <SwipeHintThemeAnimation TargetName="ContentBorder" ToHorizontalOffset="-23" ToVerticalOffset="0" />
                                        <SwipeHintThemeAnimation TargetName="SelectedBorder" ToHorizontalOffset="-23" ToVerticalOffset="0" />
                                        <SwipeHintThemeAnimation TargetName="SelectedCheckMark" ToHorizontalOffset="-23" ToVerticalOffset="0" />
                                        <DoubleAnimationUsingKeyFrames Storyboard.TargetName="HintGlyph"
                                                                       Storyboard.TargetProperty="Opacity"
                                                                       Duration="0:0:0.500">
                                            <DiscreteDoubleKeyFrame Value="0.5" KeyTime="0:0:0" />
                                            <DiscreteDoubleKeyFrame Value="0" KeyTime="0:0:0.500" />
                                        </DoubleAnimationUsingKeyFrames>
                                    </Storyboard>
                                </VisualState>
                                <VisualState x:Name="NoSelectionHint" />
                                <VisualStateGroup.Transitions>
                                    <VisualTransition To="NoSelectionHint" GeneratedDuration="0:0:0.65"/>
                                </VisualStateGroup.Transitions>
                            </VisualStateGroup>
                            <VisualStateGroup x:Name="SelectionStates">
                                <VisualState x:Name="Unselecting">
                                    <Storyboard>
                                        <DoubleAnimation Storyboard.TargetName="HintGlyphBorder"
                                                         Storyboard.TargetProperty="Opacity"
                                                         Duration="0"
                                                         To="1" />
                                    </Storyboard>
                                </VisualState>
                                <VisualState x:Name="Unselected">
                                    <Storyboard>
                                        <DoubleAnimation Storyboard.TargetName="HintGlyphBorder"
                                                         Storyboard.TargetProperty="Opacity"
                                                         Duration="0"
                                                         To="1" />
                                    </Storyboard>
                                </VisualState>
                                <VisualState x:Name="UnselectedPointerOver">
                                    <Storyboard>
                                        <DoubleAnimation Storyboard.TargetName="HintGlyphBorder"
                                                         Storyboard.TargetProperty="Opacity"
                                                         Duration="0"
                                                         To="1" />
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="contentPresenter"
                                                                       Storyboard.TargetProperty="Foreground">
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ListViewItemSelectedForegroundThemeBrush}" />
                                        </ObjectAnimationUsingKeyFrames>
                                    </Storyboard>
                                </VisualState>
                                <VisualState x:Name="UnselectedSwiping">
                                    <Storyboard>
                                        <DoubleAnimation Storyboard.TargetName="SelectingGlyph"
                                                         Storyboard.TargetProperty="Opacity"
                                                         Duration="0"
                                                         To="0.5" />
                                        <DoubleAnimation Storyboard.TargetName="HintGlyphBorder"
                                                         Storyboard.TargetProperty="Opacity"
                                                         Duration="0"
                                                         To="1" />
                                    </Storyboard>
                                </VisualState>
                                <VisualState x:Name="Selecting">
                                    <Storyboard>
                                        <DoubleAnimation Storyboard.TargetName="SelectionBackground"
                                                         Storyboard.TargetProperty="Opacity"
                                                         Duration="0"
                                                         To="1" />
                                        <DoubleAnimation Storyboard.TargetName="SelectedBorder"
                                                         Storyboard.TargetProperty="Opacity"
                                                         Duration="0"
                                                         To="1" />
                                        <DoubleAnimation Storyboard.TargetName="SelectingGlyph"
                                                         Storyboard.TargetProperty="Opacity"
                                                         Duration="0"
                                                         To="1" />
                                        <DoubleAnimation Storyboard.TargetName="HintGlyphBorder"
                                                         Storyboard.TargetProperty="Opacity"
                                                         Duration="0"
                                                         To="1" />
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="contentPresenter"
                                                                       Storyboard.TargetProperty="Foreground">
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ListViewItemSelectedForegroundThemeBrush}" />
                                        </ObjectAnimationUsingKeyFrames>
                                    </Storyboard>
                                </VisualState>
                                <VisualState x:Name="Selected">
                                    <Storyboard>
                                        <DoubleAnimation Storyboard.TargetName="SelectionBackground"
                                                         Storyboard.TargetProperty="Opacity"
                                                         Duration="0"
                                                         To="1" />
                                        <DoubleAnimation Storyboard.TargetName="SelectedBorder"
                                                         Storyboard.TargetProperty="Opacity"
                                                         Duration="0"
                                                         To="1" />
                                        <DoubleAnimation Storyboard.TargetName="SelectedCheckMark"
                                                         Storyboard.TargetProperty="Opacity"
                                                         Duration="0"
                                                         To="1" />
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="contentPresenter"
                                                                       Storyboard.TargetProperty="Foreground">
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ListViewItemSelectedForegroundThemeBrush}" />
                                        </ObjectAnimationUsingKeyFrames>
                                    </Storyboard>
                                </VisualState>
                                <VisualState x:Name="SelectedSwiping">
                                    <Storyboard>
                                        <DoubleAnimation Storyboard.TargetName="SelectionBackground"
                                                         Storyboard.TargetProperty="Opacity"
                                                         Duration="0"
                                                         To="1" />
                                        <DoubleAnimation Storyboard.TargetName="SelectedBorder"
                                                         Storyboard.TargetProperty="Opacity"
                                                         Duration="0"
                                                         To="1" />
                                        <DoubleAnimation Storyboard.TargetName="SelectedCheckMark"
                                                         Storyboard.TargetProperty="Opacity"
                                                         Duration="0"
                                                         To="1" />
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="contentPresenter"
                                                                       Storyboard.TargetProperty="Foreground">
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ListViewItemSelectedForegroundThemeBrush}" />
                                        </ObjectAnimationUsingKeyFrames>
                                    </Storyboard>
                                </VisualState>
                                <VisualState x:Name="SelectedUnfocused">
                                    <Storyboard>
                                        <DoubleAnimation Storyboard.TargetName="SelectionBackground"
                                                         Storyboard.TargetProperty="Opacity"
                                                         Duration="0"
                                                         To="1" />
                                        <DoubleAnimation Storyboard.TargetName="SelectedBorder"
                                                         Storyboard.TargetProperty="Opacity"
                                                         Duration="0"
                                                         To="1" />
                                        <DoubleAnimation Storyboard.TargetName="SelectedCheckMark"
                                                         Storyboard.TargetProperty="Opacity"
                                                         Duration="0"
                                                         To="1" />
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="contentPresenter"
                                                                       Storyboard.TargetProperty="Foreground">
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ListViewItemSelectedForegroundThemeBrush}" />
                                        </ObjectAnimationUsingKeyFrames>
                                    </Storyboard>
                                </VisualState>
                            </VisualStateGroup>
                            <VisualStateGroup x:Name="DragStates">
                                <VisualState x:Name="NotDragging" />
                                <VisualState x:Name="Dragging">
                                    <Storyboard>
                                        <DoubleAnimation Storyboard.TargetName="InnerDragContent"
                                                         Storyboard.TargetProperty="Opacity"
                                                         Duration="0"
                                                         To="{ThemeResource ListViewItemDragThemeOpacity}" />
                                        <DragItemThemeAnimation TargetName="InnerDragContent" />
                                        <FadeOutThemeAnimation TargetName="SelectedCheckMarkOuter" />
                                        <FadeOutThemeAnimation TargetName="SelectedBorder" />
                                    </Storyboard>
                                </VisualState>
                                <VisualState x:Name="DraggingTarget">
                                    <Storyboard>
                                        <DropTargetItemThemeAnimation TargetName="OuterContainer" />
                                    </Storyboard>
                                </VisualState>
                                <VisualState x:Name="MultipleDraggingPrimary">
                                    <Storyboard>
                                        <!-- These two Opacity animations are required - the FadeInThemeAnimations
                                             on the same elements animate an internal Opacity. -->
                                        <DoubleAnimation Storyboard.TargetName="MultiArrangeOverlayBackground"
                                                         Storyboard.TargetProperty="Opacity"
                                                         Duration="0"
                                                         To="1" />
                                        <DoubleAnimation Storyboard.TargetName="MultiArrangeOverlayText"
                                                         Storyboard.TargetProperty="Opacity"
                                                         Duration="0"
                                                         To="1" />
                                        <DoubleAnimation Storyboard.TargetName="ContentBorder"
                                                         Storyboard.TargetProperty="Opacity"
                                                         Duration="0"
                                                         To="{ThemeResource ListViewItemDragThemeOpacity}" />
                                        <FadeInThemeAnimation TargetName="MultiArrangeOverlayBackground" />
                                        <FadeInThemeAnimation TargetName="MultiArrangeOverlayText" />
                                        <DragItemThemeAnimation TargetName="ContentBorder" />
                                        <FadeOutThemeAnimation TargetName="SelectionBackground" />
                                        <FadeOutThemeAnimation TargetName="SelectedCheckMarkOuter" />
                                        <FadeOutThemeAnimation TargetName="SelectedBorder" />
                                        <FadeOutThemeAnimation TargetName="PointerOverBorder" />
                                    </Storyboard>
                                </VisualState>
                                <VisualState x:Name="MultipleDraggingSecondary">
                                    <Storyboard>
                                        <FadeOutThemeAnimation TargetName="ContentContainer" />
                                    </Storyboard>
                                </VisualState>
                                <VisualStateGroup.Transitions>
                                    <VisualTransition To="NotDragging" GeneratedDuration="0:0:0.2"/>
                                </VisualStateGroup.Transitions>
                            </VisualStateGroup>
                            <VisualStateGroup x:Name="ReorderHintStates">
                                <VisualState x:Name="NoReorderHint"/>
                                <VisualState x:Name="BottomReorderHint">
                                    <Storyboard>
                                        <DragOverThemeAnimation TargetName="ReorderHintContent" ToOffset="{ThemeResource ListViewItemReorderHintThemeOffset}" Direction="Bottom" />
                                    </Storyboard>
                                </VisualState>
                                <VisualState x:Name="TopReorderHint">
                                    <Storyboard>
                                        <DragOverThemeAnimation TargetName="ReorderHintContent" ToOffset="{ThemeResource ListViewItemReorderHintThemeOffset}" Direction="Top" />
                                    </Storyboard>
                                </VisualState>
                                <VisualState x:Name="RightReorderHint">
                                    <Storyboard>
                                        <DragOverThemeAnimation TargetName="ReorderHintContent" ToOffset="{ThemeResource ListViewItemReorderHintThemeOffset}" Direction="Right" />
                                    </Storyboard>
                                </VisualState>
                                <VisualState x:Name="LeftReorderHint">
                                    <Storyboard>
                                        <DragOverThemeAnimation TargetName="ReorderHintContent" ToOffset="{ThemeResource ListViewItemReorderHintThemeOffset}" Direction="Left" />
                                    </Storyboard>
                                </VisualState>
                                <VisualStateGroup.Transitions>
                                    <VisualTransition To="NoReorderHint" GeneratedDuration="0:0:0.2"/>
                                </VisualStateGroup.Transitions>
                            </VisualStateGroup>
                            <VisualStateGroup x:Name="DataVirtualizationStates">
                                <VisualState x:Name="DataAvailable"/>
                                <VisualState x:Name="DataPlaceholder">
                                    <Storyboard>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="PlaceholderTextBlock"
                                                                       Storyboard.TargetProperty="Visibility"
                                                                       Duration="0">
                                            <DiscreteObjectKeyFrame KeyTime="0">
                                                <DiscreteObjectKeyFrame.Value>
                                                    <Visibility>Visible</Visibility>
                                                </DiscreteObjectKeyFrame.Value>
                                            </DiscreteObjectKeyFrame>
                                        </ObjectAnimationUsingKeyFrames>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="PlaceholderRect"
                                                                       Storyboard.TargetProperty="Visibility"
                                                                       Duration="0">
                                            <DiscreteObjectKeyFrame KeyTime="0">
                                                <DiscreteObjectKeyFrame.Value>
                                                    <Visibility>Visible</Visibility>
                                                </DiscreteObjectKeyFrame.Value>
                                            </DiscreteObjectKeyFrame>
                                        </ObjectAnimationUsingKeyFrames>
                                    </Storyboard>
                                </VisualState>
                            </VisualStateGroup>
                        </VisualStateManager.VisualStateGroups>
                        <Grid x:Name="ReorderHintContent" Background="Transparent">
                            <Path x:Name="SelectingGlyph" Opacity="0" 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="{ThemeResource ListViewItemCheckSelectingThemeBrush}" Height="13" Stretch="Fill" Width="15" HorizontalAlignment="Right" Margin="0,9.5,9.5,0" VerticalAlignment="Top" FlowDirection="LeftToRight"/>
                            <Border x:Name="HintGlyphBorder"
                                    Height="40"
                                    Width="40"
                                    HorizontalAlignment="Right"
                                    VerticalAlignment="Top"
                                    Opacity="0"
                                    Margin="4">
                                <Path x:Name="HintGlyph" Opacity="0" 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="{ThemeResource ListViewItemCheckHintThemeBrush}" Height="13" Stretch="Fill"  Width="15" HorizontalAlignment="Right" Margin="0,5.5,5.5,0" VerticalAlignment="Top" FlowDirection="LeftToRight"/>
                            </Border>
                            <Border x:Name="ContentContainer">
                                <!-- This extra wrapper grid is necessary because rendertransforms set by the reorder hint animations
                                     will be lost when ContentContainer becomes a LTE -->
                                <Grid x:Name="InnerDragContent">
                                    <Rectangle x:Name="PointerOverBorder"
                                               IsHitTestVisible="False"
                                               Opacity="0"
                                               Fill="{ThemeResource ListViewItemPointerOverBackgroundThemeBrush}"
                                               Margin="1" />
                                    <Rectangle x:Name="FocusVisual"
                                               IsHitTestVisible="False"
                                               Opacity="0"
                                               StrokeThickness="2"
                                               Stroke="{ThemeResource ListViewItemFocusBorderThemeBrush}" />
                                    <Rectangle x:Name="SelectionBackground"
                                               Margin="4"
                                               Fill="{ThemeResource ListViewItemSelectedBackgroundThemeBrush}"
                                               Opacity="0" />
                                    <Border x:Name="ContentBorder"
                                            Background="{TemplateBinding Background}"
                                            BorderBrush="{TemplateBinding BorderBrush}"
                                            BorderThickness="{TemplateBinding BorderThickness}"
                                            Margin="4">
                                        <Grid>
                                            <ContentPresenter x:Name="contentPresenter"
                                                              ContentTransitions="{TemplateBinding ContentTransitions}"
                                                              HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
                                                              VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
                                                              Margin="{TemplateBinding Padding}" />
                                            <!-- The 'Xg' text simulates the amount of space one line of text will occupy.
                                                 In the DataPlaceholder state, the Content is not loaded yet so we
                                                 approximate the size of the item using placeholder text. -->
                                            <TextBlock x:Name="PlaceholderTextBlock"
                                                       Visibility="Collapsed"
                                                       Text="Xg"
                                                       Foreground="{x:Null}"
                                                       Margin="{TemplateBinding Padding}"
                                                       IsHitTestVisible="False"
                                                       AutomationProperties.AccessibilityView="Raw"/>
                                            <Rectangle x:Name="PlaceholderRect"
                                                       Visibility="Collapsed"
                                                       Fill="{ThemeResource ListViewItemPlaceholderBackgroundThemeBrush}"/>
                                            <Rectangle x:Name="MultiArrangeOverlayBackground"
                                                       IsHitTestVisible="False"
                                                       Opacity="0"
                                                       Fill="{ThemeResource ListViewItemDragBackgroundThemeBrush}" />
                                        </Grid>
                                    </Border>
                                    <Rectangle x:Name="SelectedBorder"
                                               IsHitTestVisible="False"
                                               Opacity="0"
                                               Stroke="{ThemeResource ListViewItemSelectedBackgroundThemeBrush}"
                                               StrokeThickness="{ThemeResource GridViewItemSelectedBorderThemeThickness}"
                                               Margin="4"/>
                                    <Border x:Name="SelectedCheckMarkOuter"
                                            IsHitTestVisible="False"
                                            HorizontalAlignment="Right"
                                            VerticalAlignment="Top"
                                            Margin="4">
                                        <Grid x:Name="SelectedCheckMark" Opacity="0" Height="40" Width="40">
                                            <Path x:Name="SelectedEarmark" Data="M0,0 L40,0 L40,40 z"  Fill="{ThemeResource 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="{ThemeResource ListViewItemCheckThemeBrush}" Height="13" Stretch="Fill" Width="15" HorizontalAlignment="Right" Margin="0,5.5,5.5,0" VerticalAlignment="Top" FlowDirection="LeftToRight"/>
                                        </Grid>
                                    </Border>
                                    <TextBlock x:Name="MultiArrangeOverlayText"
                                               Text="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=TemplateSettings.DragItemsCount}"
                                               Foreground="{ThemeResource ListViewItemDragForegroundThemeBrush}"
                                               FontFamily="{ThemeResource ContentControlThemeFontFamily}"
                                               FontSize="26.667"
                                               IsHitTestVisible="False"
                                               Opacity="0"
                                               TextWrapping="Wrap"
                                               TextTrimming="WordEllipsis"
                                               Margin="18,9,0,0" 
                                               AutomationProperties.AccessibilityView="Raw"/>
                                </Grid>
                            </Border>
                        </Grid>
                    </Border>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
    
    

    --James


    <THE CONTENT IS PROVIDED "AS IS" WITHOUT WARRANTY OF ANY KIND, WHETHER EXPRESS OR IMPLIED>
    Thanks
    MSDN Community Support

    Please remember to "Mark as Answer" 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.

    Thursday, April 17, 2014 2:47 AM
    Moderator
  • Hi Jamles,

    Sorry,my above XAML snippet may be misleading.

    I got same UIElement hierarchy without setting ItemContainerStyle.

    In my understanding the style you suggest is applied when ItemsPanel isn't ItemsWrapGrid(this is default).I misunderdtood something?
    I think your suggest is right if ItemsPanel isn't ItemsWrapGrid or under Windows8(not 8.1).Sorry if I misunderstood.

        <Grid Background="Black">
            <GridView HorizontalAlignment="Center" VerticalAlignment="Center"
                      Background="DarkGray">
                <GridViewItem Background="LightGray">
                    <Rectangle Width="24" Height="16"
                               Fill="Red"/>
                </GridViewItem>
                <GridViewItem Background="LightGray">
                    <Rectangle Width="24" Height="16"
                               Fill="Red"/>
                </GridViewItem>
                <GridViewItem Background="LightGray">
                    <Rectangle Width="24" Height="16"
                               Fill="Red"/>
                </GridViewItem>
            </GridView>
        </Grid>
    

    Screenshot below is the result.

    Next screentshot is after modifying SelectionCheckMarkVisualEnabled by XAMLSpy directly.


    cyclops

    Thursday, April 17, 2014 3:27 AM