activities/Activities/MainPage.xaml

<!--
//*********************************************************
//
// Copyright (c) Microsoft. All rights reserved.
// This code is licensed under the MIT License (MIT).
// THIS CODE IS PROVIDED *AS IS* WITHOUT WARRANTY OF
// ANY KIND, EITHER EXPRESS OR IMPLIED, INCLUDING ANY
// IMPLIED WARRANTIES OF FITNESS FOR A PARTICULAR
// PURPOSE, MERCHANTABILITY, OR NON-INFRINGEMENT.
//
//*********************************************************
-->
<Page
    x:Class="ActivitiesExample.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:ActivitiesExample"
    xmlns:converters="using:ActivitiesExample.Converters"
    xmlns:data="using:ActivitiesExample.Data"
    d:DataContext="{Binding Source={d:DesignInstance Type=data:ActivityDesignData, IsDesignTimeCreatable=True}}"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d"
    Background="#FF1bA1E2">
    <Page.Resources>
        <converters:EllipsisVisible x:Key="VisibleEllipsis"/>
        <converters:TimeSpanToString x:Key="TimeToString"/>
        <converters:TimeSpanToWidth x:Key="TimeToWidth"/>
        <converters:ActivityToImage x:Key="ActivityToIcon"/>
        <converters:ActivityToActivityHint x:Key="ActivityToHint"/>
        <converters:DateToString x:Key="DateToUiString"/>
    </Page.Resources>
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="*"/>
        </Grid.RowDefinitions>
        <!--TitlePanel contains the name of the application and page title-->
        <StackPanel x:Name="TitlePanel" Grid.Row="0"  Margin="24,10,24,0" >
            <TextBlock x:Uid="ApplicationSuite" Text="_SensorCore Example" Style="{ThemeResource TitleTextBlockStyle}" Typography.Capitals="SmallCaps" Foreground="White"/>
            <TextBlock x:Uid="ApplicationName"  Text="_activities" Style="{ThemeResource HeaderTextBlockStyle}" Foreground="White"/>
        </StackPanel>
        <!--ContentPanel - place additional content here-->
        <Grid Grid.Row="1" Margin="0">
            <Grid.RowDefinitions>
                <RowDefinition Height="Auto"/>
                <RowDefinition Height="Auto"/>
                <RowDefinition Height="*"/>
                <RowDefinition Height="Auto"/>
            </Grid.RowDefinitions>
            <!-- current activity text -->
            <StackPanel Grid.Row="0" Margin="24,14,0,0" VerticalAlignment="Center" HorizontalAlignment="Left">
                <TextBlock x:Uid="CurrentActivityHeader" Text="_Current activity:"  FontSize="16" VerticalAlignment="Center"/>
                <TextBlock Text="{Binding Path=CurrentActivity, Mode=OneWay}" HorizontalAlignment="Left" FontSize="29.86" Margin="12,0,0,0" VerticalAlignment="Center" />
            </StackPanel>
            <!-- current activity icon -->
            <Image Source="{Binding CurrentActivity, Converter={StaticResource ActivityToIcon}}" Grid.Row="2" Height="300" Width="300" Opacity="0.3"/>
            <!-- List of activities -->
            <TextBlock Text="{Binding Path=Date, Converter={StaticResource ResourceKey=DateToUiString}}" Grid.Row="1" Margin="24,0,0,6" FontSize="16"/>
            <ListView x:Name="ActivityListView" Grid.Row="2" Margin="24,0" ItemsSource="{Binding Path=History, Mode=OneWay}" Background="#3FFFFFFF" SelectionMode="None">
                <ListView.ItemTemplate>
                    <DataTemplate>
                        <Grid Margin="0" Width="{Binding ActualWidth, ElementName=ActivityListView, Mode=OneWay}">
                            <Grid.RowDefinitions >
                                <RowDefinition Height="10"/>
                                <RowDefinition Height="auto"/>
                                <RowDefinition Height="auto"/>
                                <RowDefinition Height="*"/>
                            </Grid.RowDefinitions>
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition Width="*"/>
                                <!-- 30px reserved for ellipsis -->
                                <ColumnDefinition Width="30"/>
                            </Grid.ColumnDefinitions>
                            <!-- Activity name and durations -->
                            <StackPanel Orientation="Horizontal"  Grid.Row="1" Margin="12,0,0,0" >
                                <TextBlock Text="{Binding Path=Name}" FontSize="16" Foreground="White" VerticalAlignment="Center"/>
                                <TextBlock Text="{Binding Path=Duration, Converter={StaticResource ResourceKey=TimeToString}}" FontSize="16" Foreground="White" Margin="12,0,0,0" VerticalAlignment="Center"/>
                            </StackPanel>
                            <!-- Activity description -->
                            <TextBlock Grid.Row="2" Text="{Binding Path=Type, Converter={StaticResource ResourceKey=ActivityToHint}}" FontSize="10.66" Foreground="White" VerticalAlignment="Center" Margin="12,0,0,0" TextWrapping="Wrap" />
                            <!-- Activity duration as a rectangle -->
                            <Rectangle Grid.Row="3" Margin="0,6,0,0" Grid.Column="0" Width="{Binding Path=Duration, Converter={StaticResource ResourceKey=TimeToWidth}}" Height="6" Fill="White" VerticalAlignment="Top" HorizontalAlignment="Left"/>
                            <!-- Ellipsis added to the end of rectangle if duration > 12h -->
                            <StackPanel Grid.Row="3" Grid.Column="1" Orientation="Horizontal" Visibility="{Binding Duration, Converter={StaticResource VisibleEllipsis}}">
                                <Rectangle Margin="6,6,0,0" Width="6" Height="6" Fill="White" HorizontalAlignment="Left" VerticalAlignment="Top"/>
                                <Rectangle Margin="6,6,0,0" Width="6" Height="6" Fill="White" HorizontalAlignment="Right" VerticalAlignment="Top"/>
                            </StackPanel>
                        </Grid>
                    </DataTemplate>
                </ListView.ItemTemplate>
            </ListView>
            <!-- x coordinates -->
            <Grid Grid.Row="3" Margin="24,0,24,12" >
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="2*"/>
                    <ColumnDefinition Width="3*"/>
                    <ColumnDefinition Width="3*"/>
                    <ColumnDefinition Width="3*"/>
                    <ColumnDefinition Width="2*"/>
                </Grid.ColumnDefinitions>
                <TextBlock Text="00h" Grid.Column="0" HorizontalAlignment="Left" FontSize="16"/>
                <TextBlock Text="03h" Grid.Column="1" HorizontalAlignment="Center" FontSize="16"/>
                <TextBlock Text="06h" Grid.Column="2" HorizontalAlignment="Center"  FontSize="16"/>
                <TextBlock Text="09h" Grid.Column="3" HorizontalAlignment="Center"  FontSize="16"/>
                <TextBlock Text="12h" Grid.Column="4" HorizontalAlignment="Right" FontSize="16"/>
            </Grid>
        </Grid>
    </Grid>
    <Page.BottomAppBar>
        <CommandBar x:Name="cmdBar" Opacity="0.5" Opening="CommandBar_Opened" Closing="CommandBar_Closed">
            <AppBarButton x:Uid="PrevButton" x:Name="prevButton" Label="_previous" IsEnabled="True" Click="PrevButton_Click" >
                <AppBarButton.Icon>
                    <BitmapIcon UriSource="/Assets/back.png"/>
                </AppBarButton.Icon>
            </AppBarButton>
            <AppBarButton x:Uid="RefreshButton" x:Name="refreshButton" Label="_refresh" IsEnabled="True" Click="RefreshButton_Click" >
                <AppBarButton.Icon>
                    <BitmapIcon UriSource="/Assets/refresh.png"/>
                </AppBarButton.Icon>
            </AppBarButton>
            <AppBarButton x:Uid="NextButton" x:Name="nextButton" Label="_next" IsEnabled="False" Click="NextButton_Click" >
                <AppBarButton.Icon>
                    <BitmapIcon UriSource="/Assets/next.png"/>
                </AppBarButton.Icon>
            </AppBarButton>
            <CommandBar.SecondaryCommands>
                <AppBarButton x:Uid="About" Label="_about" Click="AboutButton_Click"/>
            </CommandBar.SecondaryCommands>
        </CommandBar>
    </Page.BottomAppBar>
</Page>