GridView在WinRT Xaml中被利用

Question

I am using GridView inside SemanticZoom in my WinRT xaml to display set of images in it.

The code I am using is as below

<SemanticZoom>
    <SemanticZoom.ZoomedInView>
        <GridView>
            <ScrollViewer Name="canvas" Height="500" Background="Red" Margin="288,135,222,133">
                <ItemsControl>
                    <Image  Name="img1" Height="577" Canvas.Left="145" Canvas.Top="65" Width="608" Source="Assets/issue mentioned.png" Visibility="Visible"/>
                    <Image Name="img2" Height="577" Canvas.Left="154" Canvas.Top="650" Width="608" Source="Assets/issue mentioned.png" Visibility="Visible"/>
                </ItemsControl>
            </ScrollViewer>
        </GridView>
    </SemanticZoom.ZoomedInView>

</SemanticZoom>

The images are displayed correctly when I run the application. When I touch the images, it gets tapped. How to get rid of this?. I don't need that to be getting tapped.

Answer 1

We can remove the tap visual effect from Grid View by removing the pressed state animation from ItemContainerStyle like below.

<Style x:Key="GridViewItemsStyle" TargetType="GridViewItem">
        <Setter Property="HorizontalAlignment" Value="right"/>
        <Setter Property="IsTabStop" Value="False"/>
        <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"/>
                                <VisualState x:Name="Pressed"/>
                            </VisualStateGroup>
                        </VisualStateManager.VisualStateGroups>
                        <Grid x:Name="ReorderHintContent" Background="Transparent">
                            <Border x:Name="ContentContainer">
                                <Grid>
                                    <Border x:Name="ContentBorder" Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}">
                                        <ContentPresenter x:Name="contentPresenter" ContentTransitions="{TemplateBinding ContentTransitions}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}" Margin="{TemplateBinding Padding}" />
                                    </Border>
                                </Grid>
                            </Border>
                        </Grid>
                    </Border>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>


<GridView ItemContainerStyle="{StaticResource GridViewItemsStyle}"
                      SelectionMode="None">
                <ScrollViewer Name="canvas"
                              Height="500"
                              Background="Red"
                              Margin="288,135,222,133">
                    <ItemsControl>
                        <Image  Name="img1"
                                Height="577"
                                Width="608"
                                Source="Assets/ShowPlaceholder.png"
                                Visibility="Visible" />
                        <Image Name="img2"
                               Height="577"
                               Width="608"
                               Source="Assets/ShowPlaceholder.png"
                               Visibility="Visible" />
                    </ItemsControl>
                </ScrollViewer>
            </GridView>

I hope this will help you.

Santyy