Skip to content

Instantly share code, notes, and snippets.

@edsnider edsnider/Beer.cs
Last active Aug 29, 2015

Embed
What would you like to do?
Windows Phone 8.1 SemanticZoom
namespace BeerGroups.Core.Models
{
public class Beer
{
public string Name { get; set; }
public string Brewery { get; set; }
public string Style { get; set; }
}
}
<Page
x:Class="BeerGroups.WP8.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
<UserControl.Resources>
<CollectionViewSource x:Name="BeerCVS"
IsSourceGrouped="True"
Source="{Binding BeerGroups}"/>
</UserControl.Resources>
<Grid>
<SemanticZoom>
<SemanticZoom.ZoomedInView>
<ListView ItemsSource="{Binding Source={StaticResource BeerCVS}}"
Margin="12">
<ListView.ItemTemplate>
<DataTemplate>
<StackPanel Margin="0,10">
<TextBlock Text="{Binding Name}"/>
<TextBlock Text="{Binding Brewery}"/>
</StackPanel>
</DataTemplate>
</ListView.ItemTemplate>
<ListView.GroupStyle>
<GroupStyle HidesIfEmpty="True">
<GroupStyle.HeaderTemplate>
<DataTemplate>
<Grid Margin="0,10" Background="DarkOrange">
<TextBlock Text="{Binding Key}"
Foreground="White" Padding="12"/>
</Grid>
</DataTemplate>
</GroupStyle.HeaderTemplate>
<GroupStyle.Panel>
<ItemsPanelTemplate>
<VariableSizedWrapGrid MaximumRowsOrColumns="3"
Orientation="Horizontal"/>
</ItemsPanelTemplate>
</GroupStyle.Panel>
</GroupStyle>
</ListView.GroupStyle>
</ListView>
</SemanticZoom.ZoomedInView>
<SemanticZoom.ZoomedOutView>
<GridView x:Name="ZoomedOutGridView" Foreground="White"
ScrollViewer.IsHorizontalScrollChainingEnabled="False"
Margin="12">
<GridView.ItemTemplate>
<DataTemplate>
<TextBlock Text="{Binding Group.Key}"
Foreground="White"/>
</DataTemplate>
</GridView.ItemTemplate>
<GridView.ItemsPanel>
<ItemsPanelTemplate>
<ItemsWrapGrid ItemWidth="200" ItemHeight="75" MaximumRowsOrColumns="2"/>
</ItemsPanelTemplate>
</GridView.ItemsPanel>
<GridView.ItemContainerStyle>
<Style TargetType="GridViewItem">
<Setter Property="Margin" Value="4" />
<Setter Property="Padding" Value="10" />
<Setter Property="Background" Value="Green" />
<Setter Property="BorderThickness" Value="1" />
<Setter Property="HorizontalContentAlignment" Value="Left" />
<Setter Property="VerticalContentAlignment" Value="Bottom" />
</Style>
</GridView.ItemContainerStyle>
</GridView>
</SemanticZoom.ZoomedOutView>
</SemanticZoom>
</Grid>
</Page>
using BeerGroups.Core.ViewModels;
namespace BeerGroups.WP8
{
public sealed partial class MainPage : Page
{
public MainPage()
{
this.InitializeComponent();
this.NavigationCacheMode = NavigationCacheMode.Required;
}
protected override void OnNavigatedTo(NavigationEventArgs e)
{
DataContext = new MainViewModel();
ZoomedOutGridView.ItemsSource = BeerCVS.View.CollectionGroups;
}
}
}
namespace BeerGroups.Core.ViewModels
{
public class MainViewModel : INotifyPropertyChanged
{
private IOrderedEnumerable<System.Linq.IGrouping<string, BeerGroups.Core.Models.Beer>>
_beerGroups;
public IOrderedEnumerable<System.Linq.IGrouping<string, BeerGroups.Core.Models.Beer>> BeerGroups
{
get { return _beerGroups; }
set
{
_beerGroups = value;
OnPropertyChanged();
}
}
private List<Beer> _beer;
public List<Beer> Beer
{
get { return _beer; }
set
{
_beer = value;
OnPropertyChanged();
}
}
public event PropertyChangedEventHandler PropertyChanged;
protected virtual void OnPropertyChanged([CallerMemberName] string propertyName = null)
{
PropertyChangedEventHandler handler = PropertyChanged;
if (handler != null) handler(this, new PropertyChangedEventArgs(propertyName));
}
public MainViewModel()
{
Beer = new List<Beer>();
#region Load up some dummy data
for (var i = 0; i < 10; i++) // Add these 4 beers several times so there is plenty of data
{
Beer.Add(new Beer
{
Name = "DreamWeaver Wheat",
Brewery = "Tröegs Brewing Company",
Style = "Hefeweizen"
});
Beer.Add(new Beer
{
Name = "Weihenstephaner Hefeweissbier",
Brewery = "Bayerische Staatsbrauerei Weihenstephan",
Style = "Hefeweizen"
});
Beer.Add(new Beer
{
Name = "Wiley's One-Eyed Wheat",
Brewery = "Bricktown Brewery",
Style = "American Pale Wheat Ale"
});
Beer.Add(new Beer
{
Name = "Hefewiezen",
Brewery = "Phantom Canyon Brewing Company",
Style = "Hefeweizen"
});
}
#endregion
var result = from b in Beer
group b by b.Style
into g
orderby g.Key
select g;
BeerGroups = result;
}
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.