音乐播放器页面之汉堡菜单

1.SpliView介绍

    SplitView是一个Windows10上新增的控件，是Windows10通用应用推荐的交互控件，通常和一个汉堡按钮搭配作为抽屉式菜单来孔明下进行呈现。
    SplitView控件主要由两部分组成：一部分是菜单的面板；另一部分是主体内容。菜单面板是通过Pane属性来进行赋值，并且通过IsPaneOpen属性来控制打开和关闭菜单面板，true表示打开，flase表示关闭，个人推荐将面板长度OpenPaneLength设置为120的长度。DisplayMode是SplitView中比较重要的属性，一共可以取4个值：

• 1.Overlay
• 2.Inline
• 3.CompactOverlay
• 4.CompatLine

前两者会完全隐藏面板，后两者则保留部分面板，长度由CompatPaneLength属性决定，一般默认48,一般用作显示图标

2.汉堡菜单实现

2.1 XAML语法

<SplitView x:Name="MasterSplitView" IsPaneOpen="False" DisplayMode="CompactInline"  OpenPaneLength="140" Margin="0,0,0,0">
     <SplitView.Resources>
        <DataTemplate x:Key="NavTemplate">
            <Grid Height="24">
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="48"/>
                    <ColumnDefinition Width="*"/>
                </Grid.ColumnDefinitions>
                <FontIcon FontFamily="Segoe MDL2 Assets" Glyph="{Binding Icon}"  VerticalAlignment="Center" HorizontalAlignment="Left" Margin="-14,0,0,0" Width="48" Height="20" />
                <TextBlock Grid.Column="1" Text="{Binding Title}" Width="72" Margin="-8,0,0,0" VerticalAlignment="Center" />
            </Grid>
        </DataTemplate>
    </SplitView.Resources>
    <SplitView.Pane>
        <Grid x:Name="SplitViewPane">
            <Grid.RowDefinitions>
                <RowDefinition Height="48"/>
                <RowDefinition Height="*"/>
            </Grid.RowDefinitions>
            <ToggleButton x:Name="HamburgerButton" Width="48" HorizontalAlignment="Left" VerticalAlignment="Top" Click="ToggleButton_Click">
                <ToggleButton.Content>
                    <FontIcon x:Name="Hamburger" FontFamily="Segoe MDL2 Assets" Glyph="&#xE700;" Margin="0,10,0,0" />
                </ToggleButton.Content>
             </ToggleButton>
            <RelativePanel Background="Transparent" Grid.Row="1">
                <ListView x:Name="NavContorl" RelativePanel.AlignTopWithPanel="True"
                VerticalAlignment="Top" HorizontalAlignment="Left"
                SelectionMode="None"
                Background="Transparent"
                Margin="0,4,0,0"
                IsItemClickEnabled="True"
                ItemClick="NavContorl_ItemClick"
                ItemTemplate="{StaticResource NavTemplate}"/>

                <ListView x:Name="FootContorl" RelativePanel.AlignBottomWithPanel="True"
                VerticalAlignment="Top" HorizontalAlignment="Left"
                SelectionMode="None"
                Background="Transparent"
                Margin="0,4,0,0"
                IsItemClickEnabled="True"
                ItemClick="FootContorl_ItemClick"
                ItemTemplate="{StaticResource NavTemplate}" BorderThickness="0,1,0,0" BorderBrush="White"/>
            </RelativePanel>
        </Grid>
                   
    </SplitView.Pane>
    <SplitView.Content>
        <Frame x:Name="MasterFrame" />
    </SplitView.Content>
</SplitView>

2.2 菜单

namespace MusicPlayer.Models
{
    /// <summary>
    /// 汉堡菜单类
    /// </summary>
    public class NavItem
    {
        private string _icon;
        private string _title;
        private Type _view;

        public string Icon
        {
            get
            {
                return _icon;
            }
            set
            {
                _icon = value;
            }
        }
        public string Title
        {
            get
            {
                return _title;
            }
            set
            {
                _title = value;
            }
        }
        public Type View
        {
            get
            {
                return _view;
            }
            set
            {
                _view = value;
            }
        }
    }
}

2.3 创建所需要的菜单

namespace MusicPlayer.Models
{
public static class ItemsBuilder
{
private static IList _navItems = null;
private static IList _footItems = null;
public static IList BuildNavItems()
{
if(_navItems == null)
{
_navItems = new List()
{
new NavItem(){ Icon = "xE8D6",Title="我的音乐",View = typeof(MyMusicPage)},
new NavItem(){ Icon = "xE121",Title="最近播放",View = null },
new NavItem(){ Icon = "xE142",Title="正在播放",View = null },
};
}
return _navItems;
}

    public static IList<NavItem> BuildFootItems()
    {
        if(_footItems == null)
        {
            _footItems = new List<NavItem>()
            {
                new NavItem(){ Icon = "xE76E",Title="反馈",View = null},
                new NavItem(){ Icon = "xE713",Title="设置",View = null},                 
            };
        }
        return _footItems;
    }
}

}

2.4 使用数据绑定将菜单绑定到面板上

protected override void OnNavigatedTo(NavigationEventArgs e)
{
    this.NavContorl.ItemsSource = ItemsBuilder.BuildNavItems();
    this.FootContorl.ItemsSource = ItemsBuilder.BuildFootItems();
}

2.5 汉堡按钮的点击事件

private void ToggleButton_Click(object sender, RoutedEventArgs e)
{
    this.MasterSplitView.IsPaneOpen = !this.MasterSplitView.IsPaneOpen;
}

3.显示结果