drumkit-old/DrumKit/UI/MainPage.xaml

<Page
    x:Class="DrumKit.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:DrumKit"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d">

    <Page.Resources>

        <ImageBrush x:Key="MainpageBackgroundBrush" ImageSource="ms-appx:///Assets/bg.png" Stretch="UniformToFill" />

    </Page.Resources>

    <Grid
        Background="{StaticResource MainpageBackgroundBrush}">

        <Canvas Name="canvas" />

        <!--<Grid Visibility="Collapsed">
            <Border Margin="7"
                    CornerRadius="10" 
                    BorderBrush="Red" 
                    BorderThickness="5" />

            <Canvas Name="recCanvas">
                <Ellipse Width="18" Height="18" Fill="Red"
                         Canvas.Left="20"
                         Canvas.Top="20"/>
                <TextBlock
                           FontFamily="Consolas"
                           FontSize="16"
                           Foreground="Red"
                           Canvas.Left="42"
                           Canvas.Top="19">REC
                </TextBlock>
                
                <Canvas.Triggers>
                    <EventTrigger RoutedEvent="Canvas.Loaded">
                        <BeginStoryboard>
                            <Storyboard RepeatBehavior="Forever" >
                                <DoubleAnimation
                                    Storyboard.TargetName="recCanvas"
                                    Storyboard.TargetProperty="Opacity"
                                    Duration="0:0:1" BeginTime="0:0:1" From="1" To="0.1" />
                            </Storyboard>
                        </BeginStoryboard>
                    </EventTrigger>
                </Canvas.Triggers>
            </Canvas>
            <StackPanel Orientation="Horizontal"
                        HorizontalAlignment="Left"
                        VerticalAlignment="Top">
                <Button>Record</Button>
                <Button>Stop</Button>
            </StackPanel>
        </Grid>-->

    </Grid>


    <Page.BottomAppBar>
        <AppBar>
            <Grid>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition />
                    <ColumnDefinition Width="Auto" />
                </Grid.ColumnDefinitions>

                <StackPanel Grid.Column="0" Orientation="Horizontal">

                    <ToggleButton
                        Name="buttonAnimations"
                        Click="buttonAnimations_Click"
                        AutomationProperties.Name="Animations"
                        IsChecked="True"
                        Style="{StaticResource VideoAppBarButtonStyle}" />

                    <Button
                        Name="buttonEditMode"
                        Click="ButtonEditMode_Click"
                        Style="{StaticResource EditAppBarButtonStyle}" />

                    <ToggleButton
                        Name="buttonKeys"
                        Click="buttonKeys_Click"
                        AutomationProperties.Name="Show keys"
                        IsChecked="True"
                        Style="{StaticResource KeyboardAppBarButtonStyle}" />

                </StackPanel>

                <StackPanel Grid.Column="1" Orientation="Horizontal" >
                    <Button 
                        Name="buttonSettings"
                        Click="ButtonSettings_Click"
                        AutomationProperties.Name="Settings"
                        Style="{StaticResource SettingsAppBarButtonStyle}" />
                </StackPanel>
            </Grid>
        </AppBar>
    </Page.BottomAppBar>
</Page>