Implement Semantic Zoom without listview, Gridview?

Question

I am trying to implement Semantic Zoom control but not with listview, Gridview or grouping. My UI has following XAML

ZoomIn

<!--Your ZoomIn view here-->
                <ScrollViewer>
                    <StackPanel>
                        <Grid x:Name="Item1" />
                        <Grid x:Name="Item2" />
                        <Grid x:Name="Item3" />
                        <Grid x:Name="Item4" />
                        <Grid x:Name="Item5" />
                    </StackPanel>
                </ScrollViewer>

ZoomOut

         <!--Your ZoomOut view here-->
            <ScrollViewer>
                <StackPanel>
                    <Image x:Name="ImageItem1" />
                    <Image x:Name="ImageItem2" />
                    <Image x:Name="ImageItem3" />
                    <Image x:Name="ImageItem4" />
                    <Image x:Name="ImageItem5" />
                </StackPanel>
            </ScrollViewer>

On clicking on an image in Zoomout it should take to the corresponding to Grid in Zoomin view.

How can i achieve this? Till now I have implemented Semantic zoom using listview, gridview and grouping.

Look this sample http://blogs.msdn.com/b/going_metro/archive/2012/07/18/semantic-zoom-only-supports-gridview-and-listview.aspx — , Jul 26 '13 at 07:21
Yes I have looked into that example but I am not able to get that how will i scroll to that element when I click on that image in ZoomOut. — Balraj Singh, Jul 26 '13 at 07:24
Well, you'll have to find the Image's VerticalOffset. You can do this with some math and by doing a TransformToVisual between your ScrollViewer and the respective Item. Then you set the VerticalOffset to the proper value. — Nate Diamond, Jul 27 '13 at 22:07

score 1 · Accepted Answer · answered Jul 29 '13 at 22:11

It's sloppy to use a control like SemanticZoom for controls it is not intended to use.

Having said that, you can do this:

<SemanticZoom>
    <SemanticZoom.ZoomedInView>
        <GridView>
            <GridView.Header>
                <StackPanel>
                    <TextBlock>One</TextBlock>
                    <TextBlock>Two</TextBlock>
                    <TextBlock>Three</TextBlock>
                </StackPanel>
            </GridView.Header>
        </GridView>
    </SemanticZoom.ZoomedInView>
    <SemanticZoom.ZoomedOutView>
        <GridView>
            <GridView.Header>
                <StackPanel>
                    <TextBlock>Four</TextBlock>
                    <TextBlock>Five</TextBlock>
                    <TextBlock>Six</TextBlock>
                </StackPanel>
            </GridView.Header>
        </GridView>
    </SemanticZoom.ZoomedOutView>
</SemanticZoom>

Best of luck!

Implement Semantic Zoom without listview, Gridview?

1 Answers1