locked
Semantic Zoom - zoomed out view bug conflicting with screen resize and default style template

    Question

  • Hi,

    I have a semantic zoom in a page with visual states for the screen resize (portrait, minimum width etc). All works well until I define a style on the semantic zoom.

    I have got the style template from Blend, but have also tried the template from the Dev Center website.

    I am changing the style in portrait and minimum width states (for UI design reasons), but then I get a strange bug.

    If I zoom out on the semantic zoom, then resize/rotate the screen to hit one of my screen visual states, the zoomed out state loses interaction. No scroll bar, no hover states on the GridView items it contains, and they aren't clickable. If I then zoom in and out again, it then works correctly (clickable, scrollable with hover states). But if I then return the screen to full width, that state then loses its interactions.

    I have removed all of the changes to the style template that I have added and just used the default from blend/dev center website, and it does the same. If I comment out the whole template in that style, it works fine. So it looks like there is something in this template that conflicts with resize visual states.

    <Style x:Key="VerticalSemanticZoomStyle" TargetType="SemanticZoom">
            <Setter Property="Padding" Value="3" />
            <Setter Property="Background" Value="Transparent" />
            <Setter Property="BorderThickness" Value="0" />
            <Setter Property="IsTabStop" Value="False" />
            <Setter Property="TabNavigation" Value="Once" />
            <Setter Property="ScrollViewer.HorizontalScrollMode" Value="Enabled" />
            <Setter Property="ScrollViewer.IsHorizontalRailEnabled" Value="False" />
            <Setter Property="ScrollViewer.VerticalScrollMode" Value="Disabled" />
            <Setter Property="ScrollViewer.IsVerticalRailEnabled" Value="False" />
            <!--<Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="SemanticZoom">
                        <Grid>
                            <VisualStateManager.VisualStateGroups>
                                <VisualStateGroup x:Name="SemanticZoomStates">
                                    <VisualState x:Name="ZoomInView">
                                        <Storyboard>
                                            <FadeOutThemeAnimation TargetName="ZoomedOutPresenter" />
                                            <FadeInThemeAnimation TargetName="ZoomedInPresenter" />
                                        </Storyboard>
                                    </VisualState>
                                    <VisualState x:Name="ZoomOutView">
                                        <Storyboard>
                                            <FadeOutThemeAnimation TargetName="ZoomedInPresenter" />
                                            <FadeInThemeAnimation TargetName="ZoomedOutPresenter" />
                                        </Storyboard>
                                    </VisualState>
                                </VisualStateGroup>
                                <VisualStateGroup x:Name="ZoomOutButtonStates">
                                    <VisualStateGroup.Transitions>
                                        <VisualTransition From="ZoomOutButtonVisible"
                                                      To="ZoomOutButtonHidden">
                                            <Storyboard BeginTime="0:0:3">
                                                <FadeOutThemeAnimation TargetName="ZoomOutButton" />
                                                <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="IsHitTestVisible"
                                                                           Storyboard.TargetName="ZoomOutButton">
                                                    <DiscreteObjectKeyFrame KeyTime="0">
                                                        <DiscreteObjectKeyFrame.Value>
                                                            <x:Boolean>False</x:Boolean>
                                                        </DiscreteObjectKeyFrame.Value>
                                                    </DiscreteObjectKeyFrame>
                                                </ObjectAnimationUsingKeyFrames>
                                            </Storyboard>
                                        </VisualTransition>
                                    </VisualStateGroup.Transitions>
                                    <VisualState x:Name="ZoomOutButtonVisible">
                                        <Storyboard>
                                            <FadeInThemeAnimation TargetName="ZoomOutButton" />
                                        </Storyboard>
                                    </VisualState>
                                    <VisualState x:Name="ZoomOutButtonHidden">
                                        <Storyboard>
                                            <FadeOutThemeAnimation TargetName="ZoomOutButton" />
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="IsHitTestVisible"
                                                                       Storyboard.TargetName="ZoomOutButton">
                                                <DiscreteObjectKeyFrame KeyTime="0">
                                                    <DiscreteObjectKeyFrame.Value>
                                                        <x:Boolean>False</x:Boolean>
                                                    </DiscreteObjectKeyFrame.Value>
                                                </DiscreteObjectKeyFrame>
                                            </ObjectAnimationUsingKeyFrames>
                                        </Storyboard>
                                    </VisualState>
                                </VisualStateGroup>
                            </VisualStateManager.VisualStateGroups>
                            <ScrollViewer
                          x:Name="ScrollViewer"
                          HorizontalScrollMode="{TemplateBinding ScrollViewer.HorizontalScrollMode}" 
                          HorizontalScrollBarVisibility="Hidden"
                          VerticalScrollMode="{TemplateBinding ScrollViewer.VerticalScrollMode}"
                          VerticalScrollBarVisibility="Hidden"
                          IsHorizontalRailEnabled="{TemplateBinding ScrollViewer.IsHorizontalRailEnabled}"
                          IsVerticalRailEnabled="{TemplateBinding ScrollViewer.IsVerticalRailEnabled}"
                          ZoomMode="Enabled"
                          IsZoomChainingEnabled="True"
                          IsZoomInertiaEnabled="False"
                          IsScrollInertiaEnabled="True"
                          HorizontalContentAlignment="Center" 
                          VerticalContentAlignment="Center" 
                          MinZoomFactor="0.5"
                          MaxZoomFactor="1.0"
                          AutomationProperties.AccessibilityView="Raw">
                                <ScrollViewer.Template>
                                    <ControlTemplate TargetType="ScrollViewer">
                                        <ScrollContentPresenter
                                      x:Name="ScrollContentPresenter"
                                      ContentTemplate="{TemplateBinding ContentTemplate}"
                                      Margin="{TemplateBinding Padding}" />
                                    </ControlTemplate>
                                </ScrollViewer.Template>
                                <Border
                              RenderTransformOrigin="0, 0"
                              Background="{TemplateBinding Background}"
                              BorderBrush="{TemplateBinding BorderBrush}"
                              BorderThickness="{TemplateBinding BorderThickness}">
                                    <Border.RenderTransform>
                                        <CompositeTransform x:Name="ManipulatedElementTransform" />
                                    </Border.RenderTransform>
                                    <Grid Margin="{TemplateBinding Padding}">
                                        <ContentPresenter
                                      x:Name="ZoomedInPresenter"
                                      RenderTransformOrigin="0.5, 0.5"
                                      Visibility="Collapsed"
                                      IsHitTestVisible="False"
                                      Content="{TemplateBinding ZoomedInView}">
                                            <ContentPresenter.RenderTransform>
                                                <CompositeTransform x:Name="ZoomedInTransform" />
                                            </ContentPresenter.RenderTransform>
                                        </ContentPresenter>
                                        <ContentPresenter
                                      x:Name="ZoomedOutPresenter" 
                                      RenderTransformOrigin="0.5, 0.5"
                                      Content="{TemplateBinding ZoomedOutView}"
                                      IsHitTestVisible="False"
                                      Visibility="Collapsed">
                                            <ContentPresenter.RenderTransform>
                                                <CompositeTransform x:Name="ZoomedOutTransform" />
                                            </ContentPresenter.RenderTransform>
                                        </ContentPresenter>
                                    </Grid>
                                </Border>
                            </ScrollViewer>
                            <Button x:Name="ZoomOutButton"
                                IsTabStop="False"
                                Margin="0,0,7,24"
                                HorizontalAlignment="Right"
                                VerticalAlignment="Bottom">
                                <Button.Template>
                                    <ControlTemplate TargetType="Button">
                                        <Border x:Name="Root"
                                            Height="21"
                                            Width="21"
                                            Background="{ThemeResource SemanticZoomButtonBackgroundThemeBrush}"
                                            BorderBrush="{ThemeResource SemanticZoomButtonBorderThemeBrush}"
                                            BorderThickness="1">
                                            <VisualStateManager.VisualStateGroups>
                                                <VisualStateGroup x:Name="NormalStates">
                                                    <VisualState x:Name="Normal" />
                                                    <VisualState x:Name="PointerOver">
                                                        <Storyboard>
                                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="Root"
                                                                                       Storyboard.TargetProperty="Background">
                                                                <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SemanticZoomButtonPointerOverBackgroundThemeBrush}" />
                                                            </ObjectAnimationUsingKeyFrames>
                                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="Root"
                                                                                       Storyboard.TargetProperty="BorderBrush">
                                                                <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SemanticZoomButtonPointerOverBorderThemeBrush}" />
                                                            </ObjectAnimationUsingKeyFrames>
                                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="Glyph"
                                                                                       Storyboard.TargetProperty="Foreground">
                                                                <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SemanticZoomButtonPointerOverForegroundThemeBrush}" />
                                                            </ObjectAnimationUsingKeyFrames>
                                                        </Storyboard>
                                                    </VisualState>
                                                    <VisualState x:Name="Pressed">
                                                        <Storyboard>
                                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="Root"
                                                                                       Storyboard.TargetProperty="Background">
                                                                <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SemanticZoomButtonPressedBackgroundThemeBrush}" />
                                                            </ObjectAnimationUsingKeyFrames>
                                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="Root"
                                                                                       Storyboard.TargetProperty="BorderBrush">
                                                                <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SemanticZoomButtonPressedBorderThemeBrush}" />
                                                            </ObjectAnimationUsingKeyFrames>
                                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="Glyph"
                                                                                       Storyboard.TargetProperty="Foreground">
                                                                <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SemanticZoomButtonPressedForegroundThemeBrush}" />
                                                            </ObjectAnimationUsingKeyFrames>
                                                        </Storyboard>
                                                    </VisualState>
                                                </VisualStateGroup>
                                            </VisualStateManager.VisualStateGroups>
                                            <TextBlock x:Name="Glyph"
                                                   Text="&#xE0B8;"
                                                   UseLayoutRounding="False"
                                                   Margin="0,0,0,1"
                                                   HorizontalAlignment="Center"
                                                   VerticalAlignment="Center"
                                                   Foreground="{ThemeResource SemanticZoomButtonForegroundThemeBrush}"
                                                   FontFamily="{ThemeResource SymbolThemeFontFamily}"
                                                   FontSize="{ThemeResource SemanticZoomButtonFontSize}"
                                                   IsHitTestVisible="False" 
                                                   AutomationProperties.AccessibilityView="Raw"/>
                                        </Border>
                                    </ControlTemplate>
                                </Button.Template>
                            </Button>
                        </Grid>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>-->
        </Style>


    Friday, March 14, 2014 3:32 PM

Answers

  • Hi,

    I test your project. If you change the ZooedOutPresenter's IsHitTestVisible to true in SemanticZoomStyle , the problem will disappear:

    <ContentPresenter
                                      x:Name="ZoomedOutPresenter" 
                                      RenderTransformOrigin="0.5, 0.5"
                                      Content="{TemplateBinding ZoomedOutView}"
                                      IsHitTestVisible="True"
                                      Visibility="Collapsed">
                                                        <ContentPresenter.RenderTransform>
                                                            <CompositeTransform x:Name="ZoomedOutTransform" />
                                                        </ContentPresenter.RenderTransform>
                                                    </ContentPresenter>

    Please see more information about IsHitTestVisible:

    http://msdn.microsoft.com/en-us/library/windows/apps/windows.ui.xaml.uielement.ishittestvisible.aspx

    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 B13ella Wednesday, March 19, 2014 9:03 AM
    Wednesday, March 19, 2014 5:56 AM

All replies

  • I suspect that there is some transparent background element that stays on top your elements and you get an impression that there is no interaction. In VisualStates you should ensure all elements involved are set with proper values on properties. If you could post a code which can replicate issue then I think me or someone else in forum can really help you.

    -- Vishal Kaushik --

    Please 'Mark as Answer' if my post answers your question and 'Vote as Helpful' if it helps you. Happy Coding!!!



    Sunday, March 16, 2014 9:49 AM
  • Hi Vishal,

    I have made this very simple app with basic visual states in and a semantic zoom. If you put this into a Windows 8.1 app and run, then semantically zoom out, reduce the screen size to the 500-600 pixels (the background will go green, so you will know when you hit that visual state), you will see that the content isn't interactive, or scrollable.

    Simply zoom in and out again, then it works.

    Comment out the style in the visual states (bottom of the page), then run, and it will work correctly.

    Next test, with the visual states uncommented, comment out the template in the actual style (at the top of the page), and it will work correctly.

    Also, I use XAML Spy, and I can't see any transparent layers/elements over the top that would prevent the interaction.

    So to me, this looks like a bug with the semantic zoom style template that I got from Dev Center.

    My sample code:

    <Page
        x:Class="App1.MainPage"
        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">
        <Page.Resources>
            <!-- Semantic Zoom style copied from http://msdn.microsoft.com/en-us/library/windows/apps/jj709928.aspx -->
            <Style x:Key="SemanticZoomStyle" TargetType="SemanticZoom">
                <Setter Property="Padding" Value="3" />
                <Setter Property="Background" Value="Transparent" />
                <Setter Property="BorderThickness" Value="0" />
                <Setter Property="IsTabStop" Value="False" />
                <Setter Property="TabNavigation" Value="Once" />
                <Setter Property="ScrollViewer.HorizontalScrollMode" Value="Enabled" />
                <Setter Property="ScrollViewer.IsHorizontalRailEnabled" Value="False" />
                <Setter Property="ScrollViewer.VerticalScrollMode" Value="Disabled" />
                <Setter Property="ScrollViewer.IsVerticalRailEnabled" Value="False" />
                <!-- Comment out the template below, and then this style will work correctly. -->
                <Setter Property="Template">
                    <Setter.Value>
                        <ControlTemplate TargetType="SemanticZoom">
                            <Grid>
                                <VisualStateManager.VisualStateGroups>
                                    <VisualStateGroup x:Name="SemanticZoomStates">
                                        <VisualState x:Name="ZoomInView">
                                            <Storyboard>
                                                <FadeOutThemeAnimation TargetName="ZoomedOutPresenter" />
                                                <FadeInThemeAnimation TargetName="ZoomedInPresenter" />
                                            </Storyboard>
                                        </VisualState>
                                        <VisualState x:Name="ZoomOutView">
                                            <Storyboard>
                                                <FadeOutThemeAnimation TargetName="ZoomedInPresenter" />
                                                <FadeInThemeAnimation TargetName="ZoomedOutPresenter" />
                                            </Storyboard>
                                        </VisualState>
                                    </VisualStateGroup>
                                    <VisualStateGroup x:Name="ZoomOutButtonStates">
                                        <VisualStateGroup.Transitions>
                                            <VisualTransition From="ZoomOutButtonVisible"
                                                      To="ZoomOutButtonHidden">
                                                <Storyboard BeginTime="0:0:3">
                                                    <FadeOutThemeAnimation TargetName="ZoomOutButton" />
                                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="IsHitTestVisible"
                                                                           Storyboard.TargetName="ZoomOutButton">
                                                        <DiscreteObjectKeyFrame KeyTime="0">
                                                            <DiscreteObjectKeyFrame.Value>
                                                                <x:Boolean>False</x:Boolean>
                                                            </DiscreteObjectKeyFrame.Value>
                                                        </DiscreteObjectKeyFrame>
                                                    </ObjectAnimationUsingKeyFrames>
                                                </Storyboard>
                                            </VisualTransition>
                                        </VisualStateGroup.Transitions>
                                        <VisualState x:Name="ZoomOutButtonVisible">
                                            <Storyboard>
                                                <FadeInThemeAnimation TargetName="ZoomOutButton" />
                                            </Storyboard>
                                        </VisualState>
                                        <VisualState x:Name="ZoomOutButtonHidden">
                                            <Storyboard>
                                                <FadeOutThemeAnimation TargetName="ZoomOutButton" />
                                                <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="IsHitTestVisible"
                                                                       Storyboard.TargetName="ZoomOutButton">
                                                    <DiscreteObjectKeyFrame KeyTime="0">
                                                        <DiscreteObjectKeyFrame.Value>
                                                            <x:Boolean>False</x:Boolean>
                                                        </DiscreteObjectKeyFrame.Value>
                                                    </DiscreteObjectKeyFrame>
                                                </ObjectAnimationUsingKeyFrames>
                                            </Storyboard>
                                        </VisualState>
                                    </VisualStateGroup>
                                </VisualStateManager.VisualStateGroups>
                                <ScrollViewer
                          x:Name="ScrollViewer"
                          HorizontalScrollMode="{TemplateBinding ScrollViewer.HorizontalScrollMode}" 
                          HorizontalScrollBarVisibility="Hidden"
                          VerticalScrollMode="{TemplateBinding ScrollViewer.VerticalScrollMode}"
                          VerticalScrollBarVisibility="Hidden"
                          IsHorizontalRailEnabled="{TemplateBinding ScrollViewer.IsHorizontalRailEnabled}"
                          IsVerticalRailEnabled="{TemplateBinding ScrollViewer.IsVerticalRailEnabled}"
                          ZoomMode="Enabled"
                          IsZoomChainingEnabled="True"
                          IsZoomInertiaEnabled="False"
                          IsScrollInertiaEnabled="True"
                          HorizontalContentAlignment="Center" 
                          VerticalContentAlignment="Center" 
                          MinZoomFactor="0.5"
                          MaxZoomFactor="1.0"
                          AutomationProperties.AccessibilityView="Raw">
                                    <ScrollViewer.Template>
                                        <ControlTemplate TargetType="ScrollViewer">
                                            <ScrollContentPresenter
                                      x:Name="ScrollContentPresenter"
                                      ContentTemplate="{TemplateBinding ContentTemplate}"
                                      Margin="{TemplateBinding Padding}" />
                                        </ControlTemplate>
                                    </ScrollViewer.Template>
                                    <Border
                              RenderTransformOrigin="0, 0"
                              Background="{TemplateBinding Background}"
                              BorderBrush="{TemplateBinding BorderBrush}"
                              BorderThickness="{TemplateBinding BorderThickness}">
                                        <Border.RenderTransform>
                                            <CompositeTransform x:Name="ManipulatedElementTransform" />
                                        </Border.RenderTransform>
                                        <Grid Margin="{TemplateBinding Padding}">
                                            <ContentPresenter
                                      x:Name="ZoomedInPresenter"
                                      RenderTransformOrigin="0.5, 0.5"
                                      Visibility="Collapsed"
                                      IsHitTestVisible="False"
                                      Content="{TemplateBinding ZoomedInView}">
                                                <ContentPresenter.RenderTransform>
                                                    <CompositeTransform x:Name="ZoomedInTransform" />
                                                </ContentPresenter.RenderTransform>
                                            </ContentPresenter>
                                            <ContentPresenter
                                      x:Name="ZoomedOutPresenter" 
                                      RenderTransformOrigin="0.5, 0.5"
                                      Content="{TemplateBinding ZoomedOutView}"
                                      IsHitTestVisible="False"
                                      Visibility="Collapsed">
                                                <ContentPresenter.RenderTransform>
                                                    <CompositeTransform x:Name="ZoomedOutTransform" />
                                                </ContentPresenter.RenderTransform>
                                            </ContentPresenter>
                                        </Grid>
                                    </Border>
                                </ScrollViewer>
                                <Button x:Name="ZoomOutButton"
                                IsTabStop="False"
                                Margin="0,0,7,24"
                                HorizontalAlignment="Right"
                                VerticalAlignment="Bottom">
                                    <Button.Template>
                                        <ControlTemplate TargetType="Button">
                                            <Border x:Name="Root"
                                            Height="21"
                                            Width="21"
                                            Background="{ThemeResource SemanticZoomButtonBackgroundThemeBrush}"
                                            BorderBrush="{ThemeResource SemanticZoomButtonBorderThemeBrush}"
                                            BorderThickness="1">
                                                <VisualStateManager.VisualStateGroups>
                                                    <VisualStateGroup x:Name="NormalStates">
                                                        <VisualState x:Name="Normal" />
                                                        <VisualState x:Name="PointerOver">
                                                            <Storyboard>
                                                                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="Root"
                                                                                       Storyboard.TargetProperty="Background">
                                                                    <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SemanticZoomButtonPointerOverBackgroundThemeBrush}" />
                                                                </ObjectAnimationUsingKeyFrames>
                                                                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="Root"
                                                                                       Storyboard.TargetProperty="BorderBrush">
                                                                    <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SemanticZoomButtonPointerOverBorderThemeBrush}" />
                                                                </ObjectAnimationUsingKeyFrames>
                                                                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="Glyph"
                                                                                       Storyboard.TargetProperty="Foreground">
                                                                    <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SemanticZoomButtonPointerOverForegroundThemeBrush}" />
                                                                </ObjectAnimationUsingKeyFrames>
                                                            </Storyboard>
                                                        </VisualState>
                                                        <VisualState x:Name="Pressed">
                                                            <Storyboard>
                                                                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="Root"
                                                                                       Storyboard.TargetProperty="Background">
                                                                    <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SemanticZoomButtonPressedBackgroundThemeBrush}" />
                                                                </ObjectAnimationUsingKeyFrames>
                                                                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="Root"
                                                                                       Storyboard.TargetProperty="BorderBrush">
                                                                    <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SemanticZoomButtonPressedBorderThemeBrush}" />
                                                                </ObjectAnimationUsingKeyFrames>
                                                                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="Glyph"
                                                                                       Storyboard.TargetProperty="Foreground">
                                                                    <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SemanticZoomButtonPressedForegroundThemeBrush}" />
                                                                </ObjectAnimationUsingKeyFrames>
                                                            </Storyboard>
                                                        </VisualState>
                                                    </VisualStateGroup>
                                                </VisualStateManager.VisualStateGroups>
                                                <TextBlock x:Name="Glyph"
                                                   Text="&#xE0B8;"
                                                   UseLayoutRounding="False"
                                                   Margin="0,0,0,1"
                                                   HorizontalAlignment="Center"
                                                   VerticalAlignment="Center"
                                                   Foreground="{ThemeResource SemanticZoomButtonForegroundThemeBrush}"
                                                   FontFamily="{ThemeResource SymbolThemeFontFamily}"
                                                   FontSize="{ThemeResource SemanticZoomButtonFontSize}"
                                                   IsHitTestVisible="False" 
                                                   AutomationProperties.AccessibilityView="Raw"/>
                                            </Border>
                                        </ControlTemplate>
                                    </Button.Template>
                                </Button>
                            </Grid>
                        </ControlTemplate>
                    </Setter.Value>
                </Setter>
            </Style>
            <!-- Just a bit of spacing for my gridview items -->
            <Style x:Key="GridViewItemStyle" TargetType="GridViewItem">
                <Setter Property="Margin" Value="0,0,8,8"/>
                <Setter Property="Padding" Value="20"/>
                <Setter Property="Width" Value="180" />
            </Style>
        </Page.Resources>
        <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
        	<SemanticZoom x:Name="semanticZoom">
        		<SemanticZoom.ZoomedInView>
                    <GridView x:Name="zoomedInView" Margin="75,110,50,50" ItemContainerStyle="{StaticResource GridViewItemStyle}">
                        <GridViewItem>
                            <TextBlock Text="Zoomed IN 1" />
                        </GridViewItem>
                        <GridViewItem>
                            <TextBlock Text="Zoomed IN 2" />
                        </GridViewItem>
                        <GridViewItem>
                            <TextBlock Text="Zoomed IN 3" />
                        </GridViewItem>
                        <GridViewItem>
                            <TextBlock Text="Zoomed IN 4" />
                        </GridViewItem>
                        <GridViewItem>
                            <TextBlock Text="Zoomed IN 5" />
                        </GridViewItem>
                        <GridViewItem>
                            <TextBlock Text="Zoomed IN 6" />
                        </GridViewItem>
                        <GridViewItem>
                            <TextBlock Text="Zoomed IN 7" />
                        </GridViewItem>
                        <GridViewItem>
                            <TextBlock Text="Zoomed IN 8" />
                        </GridViewItem>
                        <GridViewItem>
                            <TextBlock Text="Zoomed IN 9" />
                        </GridViewItem>
                        <GridViewItem>
                            <TextBlock Text="Zoomed IN 10" />
                        </GridViewItem>
                        <GridViewItem>
                            <TextBlock Text="Zoomed IN 11" />
                        </GridViewItem>
                        <GridViewItem>
                            <TextBlock Text="Zoomed IN 12" />
                        </GridViewItem>
                        <GridViewItem>
                            <TextBlock Text="Zoomed IN 13" />
                        </GridViewItem>
                        <GridViewItem>
                            <TextBlock Text="Zoomed IN 14" />
                        </GridViewItem>
                        <GridViewItem>
                            <TextBlock Text="Zoomed IN 15" />
                        </GridViewItem>
                        <GridViewItem>
                            <TextBlock Text="Zoomed IN 16" />
                        </GridViewItem>
                        <GridViewItem>
                            <TextBlock Text="Zoomed IN 17" />
                        </GridViewItem>
                        <GridViewItem>
                            <TextBlock Text="Zoomed IN 18" />
                        </GridViewItem>
                        <GridViewItem>
                            <TextBlock Text="Zoomed IN 19" />
                        </GridViewItem>
                        <GridViewItem>
                            <TextBlock Text="Zoomed IN 20" />
                        </GridViewItem>
                        <GridViewItem>
                            <TextBlock Text="Zoomed IN 21" />
                        </GridViewItem>
                        <GridViewItem>
                            <TextBlock Text="Zoomed IN 22" />
                        </GridViewItem>
                        <GridViewItem>
                            <TextBlock Text="Zoomed IN 23" />
                        </GridViewItem>
                        <GridViewItem>
                            <TextBlock Text="Zoomed IN 24" />
                        </GridViewItem>
                        <GridViewItem>
                            <TextBlock Text="Zoomed IN 25" />
                        </GridViewItem>
                        <GridViewItem>
                            <TextBlock Text="Zoomed IN 26" />
                        </GridViewItem>
                        <GridViewItem>
                            <TextBlock Text="Zoomed IN 27" />
                        </GridViewItem>
                        <GridViewItem>
                            <TextBlock Text="Zoomed IN 28" />
                        </GridViewItem>
                        <GridViewItem>
                            <TextBlock Text="Zoomed IN 29" />
                        </GridViewItem>
                        <GridViewItem>
                            <TextBlock Text="Zoomed IN 30" />
                        </GridViewItem>
                        <GridViewItem>
                            <TextBlock Text="Zoomed IN 31" />
                        </GridViewItem>
                        <GridViewItem>
                            <TextBlock Text="Zoomed IN 32" />
                        </GridViewItem>
                        <GridViewItem>
                            <TextBlock Text="Zoomed IN 33" />
                        </GridViewItem>
                        <GridViewItem>
                            <TextBlock Text="Zoomed IN 34" />
                        </GridViewItem>
                        <GridViewItem>
                            <TextBlock Text="Zoomed IN 35" />
                        </GridViewItem>
                        <GridViewItem>
                            <TextBlock Text="Zoomed IN 36" />
                        </GridViewItem>
                        <GridViewItem>
                            <TextBlock Text="Zoomed IN 37" />
                        </GridViewItem>
                        <GridViewItem>
                            <TextBlock Text="Zoomed IN 38" />
                        </GridViewItem>
                        <GridViewItem>
                            <TextBlock Text="Zoomed IN 39" />
                        </GridViewItem>
                        <GridViewItem>
                            <TextBlock Text="Zoomed IN 40" />
                        </GridViewItem>
                        <GridViewItem>
                            <TextBlock Text="Zoomed IN 41" />
                        </GridViewItem>
                        <GridViewItem>
                            <TextBlock Text="Zoomed IN 42" />
                        </GridViewItem>
                        <GridViewItem>
                            <TextBlock Text="Zoomed IN 43" />
                        </GridViewItem>
                        <GridViewItem>
                            <TextBlock Text="Zoomed IN 44" />
                        </GridViewItem>
                        <GridViewItem>
                            <TextBlock Text="Zoomed IN 45" />
                        </GridViewItem>
                        <GridViewItem>
                            <TextBlock Text="Zoomed IN 46" />
                        </GridViewItem>
                        <GridViewItem>
                            <TextBlock Text="Zoomed IN 47" />
                        </GridViewItem>
                        <GridViewItem>
                            <TextBlock Text="Zoomed IN 48" />
                        </GridViewItem>
                        <GridViewItem>
                            <TextBlock Text="Zoomed IN 49" />
                        </GridViewItem>
                        <GridViewItem>
                            <TextBlock Text="Zoomed IN 50" />
                        </GridViewItem>
                    </GridView>
                </SemanticZoom.ZoomedInView>
                <SemanticZoom.ZoomedOutView>
                    <GridView x:Name="zoomedOutView" Margin="75,110,50,50" ItemContainerStyle="{StaticResource GridViewItemStyle}">
                        <GridViewItem>
                            <TextBlock Text="Zoomed OUT 1" />
                        </GridViewItem>
                        <GridViewItem>
                            <TextBlock Text="Zoomed OUT 2" />
                        </GridViewItem>
                        <GridViewItem>
                            <TextBlock Text="Zoomed OUT 3" />
                        </GridViewItem>
                        <GridViewItem>
                            <TextBlock Text="Zoomed OUT 4" />
                        </GridViewItem>
                        <GridViewItem>
                            <TextBlock Text="Zoomed OUT 5" />
                        </GridViewItem>
                        <GridViewItem>
                            <TextBlock Text="Zoomed OUT 6" />
                        </GridViewItem>
                        <GridViewItem>
                            <TextBlock Text="Zoomed OUT 7" />
                        </GridViewItem>
                        <GridViewItem>
                            <TextBlock Text="Zoomed OUT 8" />
                        </GridViewItem>
                        <GridViewItem>
                            <TextBlock Text="Zoomed OUT 9" />
                        </GridViewItem>
                        <GridViewItem>
                            <TextBlock Text="Zoomed OUT 10" />
                        </GridViewItem>
                        <GridViewItem>
                            <TextBlock Text="Zoomed OUT 11" />
                        </GridViewItem>
                        <GridViewItem>
                            <TextBlock Text="Zoomed OUT 12" />
                        </GridViewItem>
                        <GridViewItem>
                            <TextBlock Text="Zoomed OUT 13" />
                        </GridViewItem>
                        <GridViewItem>
                            <TextBlock Text="Zoomed OUT 14" />
                        </GridViewItem>
                        <GridViewItem>
                            <TextBlock Text="Zoomed OUT 15" />
                        </GridViewItem>
                        <GridViewItem>
                            <TextBlock Text="Zoomed OUT 16" />
                        </GridViewItem>
                        <GridViewItem>
                            <TextBlock Text="Zoomed OUT 17" />
                        </GridViewItem>
                        <GridViewItem>
                            <TextBlock Text="Zoomed OUT 18" />
                        </GridViewItem>
                        <GridViewItem>
                            <TextBlock Text="Zoomed OUT 19" />
                        </GridViewItem>
                        <GridViewItem>
                            <TextBlock Text="Zoomed OUT 20" />
                        </GridViewItem>
                        <GridViewItem>
                            <TextBlock Text="Zoomed OUT 21" />
                        </GridViewItem>
                        <GridViewItem>
                            <TextBlock Text="Zoomed OUT 22" />
                        </GridViewItem>
                        <GridViewItem>
                            <TextBlock Text="Zoomed OUT 23" />
                        </GridViewItem>
                        <GridViewItem>
                            <TextBlock Text="Zoomed OUT 24" />
                        </GridViewItem>
                        <GridViewItem>
                            <TextBlock Text="Zoomed OUT 25" />
                        </GridViewItem>
                        <GridViewItem>
                            <TextBlock Text="Zoomed OUT 26" />
                        </GridViewItem>
                        <GridViewItem>
                            <TextBlock Text="Zoomed OUT 27" />
                        </GridViewItem>
                        <GridViewItem>
                            <TextBlock Text="Zoomed OUT 28" />
                        </GridViewItem>
                        <GridViewItem>
                            <TextBlock Text="Zoomed OUT 29" />
                        </GridViewItem>
                        <GridViewItem>
                            <TextBlock Text="Zoomed OUT 30" />
                        </GridViewItem>
                        <GridViewItem>
                            <TextBlock Text="Zoomed OUT 31" />
                        </GridViewItem>
                        <GridViewItem>
                            <TextBlock Text="Zoomed OUT 32" />
                        </GridViewItem>
                        <GridViewItem>
                            <TextBlock Text="Zoomed OUT 33" />
                        </GridViewItem>
                        <GridViewItem>
                            <TextBlock Text="Zoomed OUT 34" />
                        </GridViewItem>
                        <GridViewItem>
                            <TextBlock Text="Zoomed OUT 35" />
                        </GridViewItem>
                        <GridViewItem>
                            <TextBlock Text="Zoomed OUT 36" />
                        </GridViewItem>
                        <GridViewItem>
                            <TextBlock Text="Zoomed OUT 37" />
                        </GridViewItem>
                        <GridViewItem>
                            <TextBlock Text="Zoomed OUT 38" />
                        </GridViewItem>
                        <GridViewItem>
                            <TextBlock Text="Zoomed OUT 39" />
                        </GridViewItem>
                        <GridViewItem>
                            <TextBlock Text="Zoomed OUT 40" />
                        </GridViewItem>
                        <GridViewItem>
                            <TextBlock Text="Zoomed OUT 41" />
                        </GridViewItem>
                        <GridViewItem>
                            <TextBlock Text="Zoomed OUT 42" />
                        </GridViewItem>
                        <GridViewItem>
                            <TextBlock Text="Zoomed OUT 43" />
                        </GridViewItem>
                        <GridViewItem>
                            <TextBlock Text="Zoomed OUT 44" />
                        </GridViewItem>
                        <GridViewItem>
                            <TextBlock Text="Zoomed OUT 45" />
                        </GridViewItem>
                        <GridViewItem>
                            <TextBlock Text="Zoomed OUT 46" />
                        </GridViewItem>
                        <GridViewItem>
                            <TextBlock Text="Zoomed OUT 47" />
                        </GridViewItem>
                        <GridViewItem>
                            <TextBlock Text="Zoomed OUT 48" />
                        </GridViewItem>
                        <GridViewItem>
                            <TextBlock Text="Zoomed OUT 49" />
                        </GridViewItem>
                        <GridViewItem>
                            <TextBlock Text="Zoomed OUT 50" />
                        </GridViewItem>
                    </GridView>
                </SemanticZoom.ZoomedOutView>
            </SemanticZoom>
            <VisualStateManager.VisualStateGroups>
                <VisualStateGroup>
                    <VisualState x:Name="MinimalLayout">
                        <Storyboard>
                            <!-- Will change the background colour to green to let me know it has hit this visual state. -->
                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="semanticZoom" Storyboard.TargetProperty="Background">
                                <DiscreteObjectKeyFrame KeyTime="0" Value="Green"/>
                            </ObjectAnimationUsingKeyFrames>
                            <!-- Comment this out, and then the semantic zoom works correctly -->
                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="semanticZoom" Storyboard.TargetProperty="Style">
                                <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource SemanticZoomStyle}"/>
                            </ObjectAnimationUsingKeyFrames>
                        </Storyboard>
                    </VisualState>
                </VisualStateGroup>
            </VisualStateManager.VisualStateGroups>
        </Grid>
    </Page>
    
    using System;
    using System.Collections.Generic;
    using System.IO;
    using System.Linq;
    using System.Runtime.InteropServices.WindowsRuntime;
    using Windows.Foundation;
    using Windows.Foundation.Collections;
    using Windows.UI.Xaml;
    using Windows.UI.Xaml.Controls;
    using Windows.UI.Xaml.Controls.Primitives;
    using Windows.UI.Xaml.Data;
    using Windows.UI.Xaml.Input;
    using Windows.UI.Xaml.Media;
    using Windows.UI.Xaml.Navigation;
    
    // The Blank Page item template is documented at http://go.microsoft.com/fwlink/?LinkId=234238
    
    namespace App1
    {
        /// <summary>
        /// An empty page that can be used on its own or navigated to within a Frame.
        /// </summary>
        public sealed partial class MainPage : Page
        {
            public MainPage()
            {
                this.InitializeComponent();
                this.SizeChanged += Page_SizeChanged;
            }
    
            // Basic visual states for screen resize and rotation.
            void Page_SizeChanged(object sender, SizeChangedEventArgs e)
            {
                if (e.NewSize.Width < 600)
                {
                    VisualStateManager.GoToState(this, "MinimalLayout", true);
                }
                else if (e.NewSize.Width < e.NewSize.Height)
                {
                    VisualStateManager.GoToState(this, "PortraitLayout", true);
                }
                else
                {
                    VisualStateManager.GoToState(this, "DefaultLayout", true);
                }
            }
        }
    }
    


    Monday, March 17, 2014 9:59 AM
  • Hi,

    I test your project. If you change the ZooedOutPresenter's IsHitTestVisible to true in SemanticZoomStyle , the problem will disappear:

    <ContentPresenter
                                      x:Name="ZoomedOutPresenter" 
                                      RenderTransformOrigin="0.5, 0.5"
                                      Content="{TemplateBinding ZoomedOutView}"
                                      IsHitTestVisible="True"
                                      Visibility="Collapsed">
                                                        <ContentPresenter.RenderTransform>
                                                            <CompositeTransform x:Name="ZoomedOutTransform" />
                                                        </ContentPresenter.RenderTransform>
                                                    </ContentPresenter>

    Please see more information about IsHitTestVisible:

    http://msdn.microsoft.com/en-us/library/windows/apps/windows.ui.xaml.uielement.ishittestvisible.aspx

    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 B13ella Wednesday, March 19, 2014 9:03 AM
    Wednesday, March 19, 2014 5:56 AM
  • Thanks Anne, that has fixed it.

    Any idea why the Microsoft default template has this set to false? Should this be changed?

    Wednesday, March 19, 2014 9:03 AM