Skip to content

DrawerMenu

闫驚鏵(Jinhua Yan) edited this page Mar 15, 2023 · 4 revisions

1)Xaml

<Grid>
    <Grid.ColumnDefinitions>
        <ColumnDefinition  Width="Auto"/>
        <ColumnDefinition/>
    </Grid.ColumnDefinitions>
    <Frame Name="myFrame" Grid.Column="1"
           NavigationUIVisibility="Hidden"/>
    <wpfdev:DrawerMenu SelectionChanged="DrawerMenu_SelectionChanged">
        <wpfdev:DrawerMenuItem Text="主页">
            <wpfdev:DrawerMenuItem.Icon>
                <Image Source="pack://application:,,,/WPFDevelopers.Samples;component/Images/CircularMenu/2.png" />
            </wpfdev:DrawerMenuItem.Icon>
        </wpfdev:DrawerMenuItem>
        <wpfdev:DrawerMenuItem Text="Edge">
            <wpfdev:DrawerMenuItem.Icon>
                <Image Source="pack://application:,,,/WPFDevelopers.Samples;component/Images/CircularMenu/4.png" />
            </wpfdev:DrawerMenuItem.Icon>
        </wpfdev:DrawerMenuItem>
        <wpfdev:DrawerMenuItem Text="云盘">
            <wpfdev:DrawerMenuItem.Icon>
                <Image Source="pack://application:,,,/WPFDevelopers.Samples;component/Images/CircularMenu/1.png" />
            </wpfdev:DrawerMenuItem.Icon>
        </wpfdev:DrawerMenuItem>
        <wpfdev:DrawerMenuItem Text="邮件">
            <wpfdev:DrawerMenuItem.Icon>
                <Image Source="pack://application:,,,/WPFDevelopers.Samples;component/Images/CircularMenu/8.png" />
            </wpfdev:DrawerMenuItem.Icon>
        </wpfdev:DrawerMenuItem>
        <wpfdev:DrawerMenuItem Text="视频">
            <wpfdev:DrawerMenuItem.Icon>
                <Image Source="pack://application:,,,/WPFDevelopers.Samples;component/Images/CircularMenu/6.png" />
            </wpfdev:DrawerMenuItem.Icon>
        </wpfdev:DrawerMenuItem>
        <wpfdev:DrawerMenuItem Text="Bus">
            <wpfdev:DrawerMenuItem.Icon>
                <Path Data="{StaticResource PathBus}" 
              Fill="{DynamicResource PlaceholderTextSolidColorBrush}" 
              Stretch="Uniform"
              Width="20" Height="20"/>
            </wpfdev:DrawerMenuItem.Icon>
        </wpfdev:DrawerMenuItem>
    </wpfdev:DrawerMenu>
</Grid>

2)CSharp

    public partial class DrawerMenuExample : UserControl
    {
        private List<Uri> _uriList = new List<Uri>()
        {
            new Uri("pack://application:,,,/WPFDevelopers.Samples;component/ExampleViews/DrawerMenu/HomePage.xaml",UriKind.Absolute),
            new Uri("pack://application:,,,/WPFDevelopers.Samples;component/ExampleViews/DrawerMenu/EdgePage.xaml",UriKind.Absolute),
        };
        public DrawerMenuExample()
        {
            InitializeComponent();
        }
        private void DrawerMenu_SelectionChanged(object sender, SelectionChangedEventArgs e)
        {
            if (myFrame == null) return;
            var menu = (WPFDevelopers.Controls.DrawerMenu)sender;
            if (menu == null) return;
            var item = (WPFDevelopers.Controls.DrawerMenuItem)menu.SelectedValue;
            if (item == null) return;
            switch (item.Text)
            {
                case "主页":
                    myFrame.Navigate(_uriList[0]);
                    break;
                case "Edge":
                    myFrame.Navigate(_uriList[1]);
                    break;
                case "云盘":
                case "邮件":
                case "视频":
                    WPFDevelopers.Controls.MessageBox.Show($"点击了{item.Text}", "提示");
                    break;
                case "Bus":
                    break;
            }
        }
    }
Clone this wiki locally