New Metro Views: Listing 3.

XAML for the Semantic Zoom control.

<SemanticZoom x:Name="semanticZoom" VerticalAlignment="Bottom">            
  <SemanticZoom.ZoomedInView>
    <ListView x:Name="lstView">
      <ListView.ItemTemplate>
        <DataTemplate>
          <UserControl>
            <TextBlock Text="{Binding}" VerticalAlignment="Center" 
              HorizontalAlignment="Center" FontSize="26.667" Foreground="White" />
          </UserControl>
        </DataTemplate>
      </ListView.ItemTemplate>
    </ListView>
  </SemanticZoom.ZoomedInView>          
  <SemanticZoom.ZoomedOutView>
    <GridView x:Name="grdView" >
      <GridView.ItemTemplate>
        <DataTemplate>
          <UserControl>
            <Button x:Name="btnZoomedOutView" Content="{Binding}" Width="80" 
              Height="80" Foreground="Blue" BorderBrush="LightBlue" FontSize="40" 
              Click="btnZoomedOutView_Click" />
          </UserControl>
        </DataTemplate>
      </GridView.ItemTemplate>
    </GridView>
  </SemanticZoom.ZoomedOutView> </SemanticZoom>

About the Author

Michael Crump is a product manager that works at Microsoft on the Azure platform. He is a is a developer, blogger and speaker of topics relating to cloud development. He’s passionate about helping developers understand the benefits of the cloud in a no-nonsense way. You can reach him on Twitter at mbcrump or by following his blog at michaelcrump.net.