locked
facebook or music apps left hidden menu how is it RRS feed

  • Question

  • Hi I make to Facebook or Music apps left menu.

    click left menu hidden and click left menu show how is it 

    Friday, January 31, 2014 1:17 PM

Answers

  • Create a Grid with a 320 pixel column for your open "menu" and a column for the rest of the page.

    Add VisualStates to the page for MenuOpen and MenuClosed, and in the MenuClosed state animate the menu column's Width to 0.

    Toggle between the two states when the menu button is pushed.

    Here's a quick example to get you going:

    <Page
        x:Class="App329.MainPage"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:local="using:App329"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        mc:Ignorable="d">
    
        <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
            <VisualStateManager.VisualStateGroups>
                <VisualStateGroup x:Name="MenuStates">
                    <VisualStateGroup.Transitions>
                        <VisualTransition GeneratedDuration="0:0:0"/>
                    </VisualStateGroup.Transitions>
                    <VisualState x:Name="MenuOpen">
                        <Storyboard>
                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="menuColumn" Storyboard.TargetProperty="ColumnDefinition.Width">
                                <DiscreteObjectKeyFrame KeyTime="0" Value="320" />
                            </ObjectAnimationUsingKeyFrames>
                            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(TextBlock.FontFamily)" Storyboard.TargetName="openText">
                            	<DiscreteObjectKeyFrame KeyTime="0">
                            		<DiscreteObjectKeyFrame.Value>
                            			<FontFamily>Global User Interface</FontFamily>
                            		</DiscreteObjectKeyFrame.Value>
                            	</DiscreteObjectKeyFrame>
                            </ObjectAnimationUsingKeyFrames>
                            <DoubleAnimation Duration="0" To="0" Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="closedText" d:IsOptimized="True"/>
                        </Storyboard>
                    </VisualState>
                    <VisualState x:Name="MenuClosed">
                    	<Storyboard>
                    		<DoubleAnimation Duration="0" To="0" Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="openText" d:IsOptimized="True"/>
                    	</Storyboard>
                    </VisualState>
                </VisualStateGroup>
            </VisualStateManager.VisualStateGroups>
    
            <Grid.ColumnDefinitions>
                <ColumnDefinition x:Name="menuColumn" Width="0"></ColumnDefinition>
                <ColumnDefinition Width="*" ></ColumnDefinition>
            </Grid.ColumnDefinitions>
            <Grid.RowDefinitions>
                <RowDefinition Height="100"></RowDefinition>
                <RowDefinition></RowDefinition>
            </Grid.RowDefinitions>
            <ListBox Grid.Column="0" Grid.Row="1">
                <ListBoxItem>One</ListBoxItem>
                <ListBoxItem>Two</ListBoxItem>
                <ListBoxItem>Three</ListBoxItem>
                <ListBoxItem>Four</ListBoxItem>
            </ListBox>
            <AppBarToggleButton Grid.Column="1" Icon="List" AutomationProperties.Name="Menu" Checked="AppBarToggleButton_Checked" Unchecked="AppBarToggleButton_Unchecked" Height="88" Width="100"/>
    		<TextBlock x:Name="openText" Text="Open!" Grid.Column="1" Grid.Row="1"/>
    		<TextBlock x:Name="closedText" Text="Closed!" Grid.Column="1" Grid.Row="1"/>
        </Grid>
    </Page>
    
    namespace App329
    {
        /// <summary>
        /// An empty page that can be used on its own or navigated to within a Frame.
        /// </summary>
        public sealed partial class MainPage : Page
        {
            public MainPage()
            {
                this.InitializeComponent();
            }
    
            private void AppBarToggleButton_Checked(object sender, RoutedEventArgs e)
            {
                VisualStateManager.GoToState(this, "MenuOpen", true);
            }
    
            private void AppBarToggleButton_Unchecked(object sender, RoutedEventArgs e)
            {
                VisualStateManager.GoToState(this, "MenuClosed", true);
            }
    
         
        }
    }


    --Rob

    Wednesday, February 5, 2014 3:51 AM
    Moderator

All replies

  • Check this out: http://social.msdn.microsoft.com/Forums/windowsapps/en-US/c553d793-5028-45c8-b5a2-346ee3e3a159/how-to-create-a-xboxmusicfacebook-style-sidebar?forum=winappswithcsharp


    Jeff Sanders (MSFT)

    @jsandersrocks - Windows Store Developer Solutions @WSDevSol
    Getting Started With Windows Azure Mobile Services development? Click here
    Getting Started With Windows Phone or Store app development? Click here
    My Team Blog: Windows Store & Phone Developer Solutions
    My Blog: Http Client Protocol Issues (and other fun stuff I support)

    Friday, January 31, 2014 6:39 PM
    Moderator
  • thanks but it is nothing
    Saturday, February 1, 2014 9:53 AM
  • What is your question? If Jeff's link doesn't help please explain in more detail what help you need.
    Saturday, February 1, 2014 7:45 PM
    Moderator
  • I want to make a menu. I make as Facebook metro app in left menu source code or a sample 

    thanks.

    Sunday, February 2, 2014 7:59 PM
  • Create a Grid with a 320 pixel column for your open "menu" and a column for the rest of the page.

    Add VisualStates to the page for MenuOpen and MenuClosed, and in the MenuClosed state animate the menu column's Width to 0.

    Toggle between the two states when the menu button is pushed.

    Here's a quick example to get you going:

    <Page
        x:Class="App329.MainPage"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:local="using:App329"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        mc:Ignorable="d">
    
        <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
            <VisualStateManager.VisualStateGroups>
                <VisualStateGroup x:Name="MenuStates">
                    <VisualStateGroup.Transitions>
                        <VisualTransition GeneratedDuration="0:0:0"/>
                    </VisualStateGroup.Transitions>
                    <VisualState x:Name="MenuOpen">
                        <Storyboard>
                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="menuColumn" Storyboard.TargetProperty="ColumnDefinition.Width">
                                <DiscreteObjectKeyFrame KeyTime="0" Value="320" />
                            </ObjectAnimationUsingKeyFrames>
                            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(TextBlock.FontFamily)" Storyboard.TargetName="openText">
                            	<DiscreteObjectKeyFrame KeyTime="0">
                            		<DiscreteObjectKeyFrame.Value>
                            			<FontFamily>Global User Interface</FontFamily>
                            		</DiscreteObjectKeyFrame.Value>
                            	</DiscreteObjectKeyFrame>
                            </ObjectAnimationUsingKeyFrames>
                            <DoubleAnimation Duration="0" To="0" Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="closedText" d:IsOptimized="True"/>
                        </Storyboard>
                    </VisualState>
                    <VisualState x:Name="MenuClosed">
                    	<Storyboard>
                    		<DoubleAnimation Duration="0" To="0" Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="openText" d:IsOptimized="True"/>
                    	</Storyboard>
                    </VisualState>
                </VisualStateGroup>
            </VisualStateManager.VisualStateGroups>
    
            <Grid.ColumnDefinitions>
                <ColumnDefinition x:Name="menuColumn" Width="0"></ColumnDefinition>
                <ColumnDefinition Width="*" ></ColumnDefinition>
            </Grid.ColumnDefinitions>
            <Grid.RowDefinitions>
                <RowDefinition Height="100"></RowDefinition>
                <RowDefinition></RowDefinition>
            </Grid.RowDefinitions>
            <ListBox Grid.Column="0" Grid.Row="1">
                <ListBoxItem>One</ListBoxItem>
                <ListBoxItem>Two</ListBoxItem>
                <ListBoxItem>Three</ListBoxItem>
                <ListBoxItem>Four</ListBoxItem>
            </ListBox>
            <AppBarToggleButton Grid.Column="1" Icon="List" AutomationProperties.Name="Menu" Checked="AppBarToggleButton_Checked" Unchecked="AppBarToggleButton_Unchecked" Height="88" Width="100"/>
    		<TextBlock x:Name="openText" Text="Open!" Grid.Column="1" Grid.Row="1"/>
    		<TextBlock x:Name="closedText" Text="Closed!" Grid.Column="1" Grid.Row="1"/>
        </Grid>
    </Page>
    
    namespace App329
    {
        /// <summary>
        /// An empty page that can be used on its own or navigated to within a Frame.
        /// </summary>
        public sealed partial class MainPage : Page
        {
            public MainPage()
            {
                this.InitializeComponent();
            }
    
            private void AppBarToggleButton_Checked(object sender, RoutedEventArgs e)
            {
                VisualStateManager.GoToState(this, "MenuOpen", true);
            }
    
            private void AppBarToggleButton_Unchecked(object sender, RoutedEventArgs e)
            {
                VisualStateManager.GoToState(this, "MenuClosed", true);
            }
    
         
        }
    }


    --Rob

    Wednesday, February 5, 2014 3:51 AM
    Moderator