How to disable app bar in my project

Question

I am developing a WP8 app with sliding menu/drawer in it.
Whenever i tried to disable the app bar it throws an exception on line "ApplicationBar.IsVisible = true;" code behind
My question is how can i disable the app bar, see the code below
xaml
<!--LayoutRoot is the root grid where all page content is placed-->
    <Canvas x:Name="canvas" VerticalAlignment="Stretch" HorizontalAlignment="Stretch" Height="800" Background="Black" ManipulationStarted="canvas_ManipulationStarted" ManipulationDelta="canvas_ManipulationDelta"
ManipulationCompleted="canvas_ManipulationCompleted">
        <Canvas.Resources>
            <Storyboard x:Name="moveAnimation">
                <DoubleAnimation Duration="0:0:0.2" To="0" Storyboard.TargetProperty="(Canvas.Left)" Storyboard.TargetName="LayoutRoot" d:IsOptimized="True" />
            </Storyboard>
        </Canvas.Resources>
        <!--<VisualStateManager.VisualStateGroups>
            <VisualStateGroup x:Name="CommonStates">
                <VisualStateGroup.Transitions>
                    <VisualTransition GeneratedDuration="0:0:0.3">
                        <VisualTransition.GeneratedEasingFunction>
                            <QuinticEase EasingMode="EaseInOut"/>
                        </VisualTransition.GeneratedEasingFunction>
                    </VisualTransition>
                </VisualStateGroup.Transitions>
                <VisualState x:Name="Normal">
<Storyboard>
                        <DoubleAnimation Duration="0:0:0.2" To="-420" Storyboard.TargetProperty="(Canvas.Left)" Storyboard.TargetName="LayoutRoot" d:IsOptimized="True"/>
</Storyboard>
                </VisualState>
                <VisualState x:Name="LeftMenuOpened">
                    <Storyboard>
                        <DoubleAnimation Duration="0:0:0.2" To="0" Storyboard.TargetProperty="(Canvas.Left)" Storyboard.TargetName="LayoutRoot" d:IsOptimized="True"/>
                    </Storyboard>
                </VisualState>
                <VisualState x:Name="RightMenuOpened">
<Storyboard>
                        <DoubleAnimation Duration="0:0:0.2" To="-840" Storyboard.TargetProperty="(Canvas.Left)" Storyboard.TargetName="LayoutRoot" d:IsOptimized="True"/>
</Storyboard>
                </VisualState>
            </VisualStateGroup>
        </VisualStateManager.VisualStateGroups>-->
        <Canvas  CacheMode="BitmapCache" x:Name="LayoutRoot" Width="420"  VerticalAlignment="Stretch" Background="Transparent" Canvas.Left="-420" Height="768">
            <!--<Grid.ColumnDefinitions>
                <ColumnDefinition Width="420"/>
                <ColumnDefinition Width="480"/>
                <ColumnDefinition Width="420"/>
            </Grid.ColumnDefinitions>
            <Grid.RowDefinitions>
                <RowDefinition Height="*"/>
            </Grid.RowDefinitions>-->
            <Border  Width="420"  CacheMode="BitmapCache" Background="#FF31363E" Grid.Column="0" VerticalAlignment="Stretch" HorizontalAlignment="Stretch"
Height="{Binding ActualHeight, ElementName=canvas}">
                <StackPanel Orientation="Horizontal">
                    <Grid Width="410">
                    </Grid>
                </StackPanel>
            </Border>
            <Grid x:Name="grdCommands" Margin="420,0,0,0" CacheMode="BitmapCache" Grid.Column="1" Background="#FFCFD4E2" Height="{Binding ActualHeight, ElementName=canvas}"
Width="480" >
                <Border Grid.Row="1" >
                    <Border.Background>
                        <ImageBrush ImageSource="/Assets/bg.jpg" Stretch="UniformToFill" />
                    </Border.Background>
                    <Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
                    </Grid>
                </Border>
            </Grid>
        </Canvas>
    </Canvas>
    <phone:PhoneApplicationPage.ApplicationBar>
        <shell:ApplicationBar IsVisible="True" IsMenuEnabled="True">
            <shell:ApplicationBarIconButton IconUri="/Assets/left.png" x:Name="leftt"  Text="Glossary" />
            <shell:ApplicationBarIconButton IconUri="/Assets/home.png" x:Name="home"  Text="Home"/>
            <shell:ApplicationBarIconButton IconUri="/Assets/right.png" x:Name="right"  Text="February"/>
        </shell:ApplicationBar>
    </phone:PhoneApplicationPage.ApplicationBar>
</phone:PhoneApplicationPage>
xaml.cs : public partial class TabNav : PhoneApplicationPage
        public TabNav()
            InitializeComponent();
            VisualStateManager.GoToState(this, "Normal", false);
            // Sample code to localize the ApplicationBar
            //BuildLocalizedApplicationBar();
            //Touch.FrameReported += new TouchFrameEventHandler(Touch_FrameReported);
            // Set the data context of the listbox control to the sample data
            DataContext = App.ViewModel;
            // Sample code to localize the ApplicationBar
            //BuildLocalizedApplicationBar();
        private void OpenClose_Left(object sender, System.Windows.Input.GestureEventArgs e)
            var left = Canvas.GetLeft(LayoutRoot);
            if (left > -100)
                ApplicationBar.IsVisible = true;
                MoveViewWindow(-420);
            else
                ApplicationBar.IsVisible = false;
                MoveViewWindow(0);
        private void OpenClose_Right(object sender, RoutedEventArgs e)
            var left = Canvas.GetLeft(LayoutRoot);
            if (left > -520)
                ApplicationBar.IsVisible = false;
                MoveViewWindow(-840);
            else
                ApplicationBar.IsVisible = true;
                MoveViewWindow(-420);
        void MoveViewWindow(double left)
            _viewMoved = true;
            if (left == -420)
                ApplicationBar.IsVisible = true;
            else
                ApplicationBar.IsVisible = false;
            ((Storyboard)canvas.Resources["moveAnimation"]).SkipToFill();
            ((DoubleAnimation)((Storyboard)canvas.Resources["moveAnimation"]).Children[0]).To = left;
            ((Storyboard)canvas.Resources["moveAnimation"]).Begin();
        private void canvas_ManipulationDelta(object sender, ManipulationDeltaEventArgs e)
            if (e.DeltaManipulation.Translation.X != 0)
                Canvas.SetLeft(LayoutRoot, Math.Min(Math.Max(-840, Canvas.GetLeft(LayoutRoot) + e.DeltaManipulation.Translation.X), 0));
        double initialPosition;
        bool _viewMoved = false;
        private void canvas_ManipulationStarted(object sender, ManipulationStartedEventArgs e)
            _viewMoved = false;
            initialPosition = Canvas.GetLeft(LayoutRoot);
        private void canvas_ManipulationCompleted(object sender, ManipulationCompletedEventArgs e)
            var left = Canvas.GetLeft(LayoutRoot);
            if (_viewMoved)
                return;
            if (Math.Abs(initialPosition - left) < 100)
                //bouncing back
                MoveViewWindow(initialPosition);
                return;
            //change of state
            if (initialPosition - left > 0)
                //slide to the left
                if (initialPosition > -420)
                    MoveViewWindow(-420);
                else
                    MoveViewWindow(-840);
            else
                //slide to the right
                if (initialPosition < -420)
                    MoveViewWindow(-420);
                else
                    MoveViewWindow(0);
Thank you in advance and reply soon
Jayjay john

Answer 1

HI Joakins,
It seems to very simple to solve you can use style based application bar like this,
<phone:PhoneApplicationPage.Resources>
<shell:ApplicationBar x:Key="groupAppBar"
BackgroundColor="#EFF2F6"
ForegroundColor="Black"
IsMenuEnabled="True"
Mode="Default">
<shell:ApplicationBarIconButton x:Name="grp_attach"
Click="Img_attach_Click"
IconUri="/Assets/AppBar/attachbaritem.png"
Text="attach" />
<shell:ApplicationBarIconButton x:Name="grp_sticker"
Click="sticker_Click"
IconUri="/Assets/AppBar/teddybaritem.png"
Text="sticker" />
<shell:ApplicationBarIconButton x:Name="grp_Send"
Click="ImgSend_Click"
IconUri="/Assets/Chat/send.png"
Text="send" />
<shell:ApplicationBar.MenuItems>
<shell:ApplicationBarMenuItem Click="btnGroupInfo_Click" Text="group info" />
<shell:ApplicationBarMenuItem Click="btnMedia_Click" Text="media" />
<shell:ApplicationBarMenuItem Click="btnDeleteGroup_Click" Text="leave group" />
</shell:ApplicationBar.MenuItems>
</shell:ApplicationBar>
</phone:PhoneApplicationPage.Resources>
And at code behind  use like this to show your appbar,
this.ApplicationBar = this.Resources["groupAppBar"] as ApplicationBar;
this.ApplicationBar.IsVisible = true;
And for removing,
this.ApplicationBar = null;
Please mark this as answer if you get the solution by this answer.