如何使用 Material Design 在 WPf 中打开/创建菜单

问题描述 投票：0回答：2

所以我正在使用 Material Design 和 Caliburn micro。 我想习惯 Material Design，但对 WPF 还很陌生。但由于工作原因，我必须同时使用两者。 我想在我的表单顶部有一个 Colorzone。

<materialDesign:ColorZone 
Mode="PrimaryLight"
Grid.Row="0"
Grid.Column="0"
Grid.ColumnSpan="4"
Padding="16">
    <StackPanel
    Orientation="Horizontal">
        <ToggleButton
        Style="{DynamicResource MaterialDesignHamburgerToggleButton}">               
        </ToggleButton>
        <TextBlock
        VerticalAlignment="Center"
        Margin="16 0 0 0">
        Material Design In XAML Toolkit
        </TextBlock>
    </StackPanel>
</materialDesign:ColorZone>

我的汉堡按钮位于右侧，当我启动它时，动画可以工作，但是单击按钮时如何打开抽屉或菜单，以及再次按下按钮时如何关闭它。 我在哪里编写按钮的代码？

wpf menu material-design drawer
2个回答
1
投票

所以我找到了答案：

<materialDesign:ColorZone 
Mode="PrimaryLight"
Grid.Row="0"
Grid.Column="0"
Grid.ColumnSpan="4"
Padding="16">
    <StackPanel
    Orientation="Horizontal">
        <ToggleButton

        Command="{x:Static materialDesign:DrawerHost.OpenDrawerCommand}"
        CommandParameter="{x:Static Dock.Left}"

        Style="{DynamicResource MaterialDesignHamburgerToggleButton}">               
        </ToggleButton>
        <TextBlock
        VerticalAlignment="Center"
        Margin="16 0 0 0">
        Material Design In XAML Toolkit
        </TextBlock>
    </StackPanel>
</materialDesign:ColorZone>

您必须为汉堡按钮添加命令和命令参数。

现在我们只需要一个可以打开的抽屉：

<materialDesign:DrawerHost.LeftDrawerContent>
    <StackPanel Margin="16" VerticalAlignment="Stretch" HorizontalAlignment="Stretch" >
        <Button 
            Margin="25,10,25,10"
            VerticalAlignment="Top"
            cal:Message.Attach="DoCoolStuff()"

            Command="{x:Static materialDesign:DrawerHost.CloseDrawerCommand}"
            CommandParameter="{x:Static Dock.Left}">

            BlaBlaBlaYour Button Text here
        </Button>
        <Button    
    </StackPanel>
</materialDesign:DrawerHost.LeftDrawerContent>

现在我们有了一个菜单栏和一个抽屉，但除非我们将它们都写入以下内容，否则它们将无法工作：

<materialDesign:DrawerHost Grid.RowSpan="3" Grid.ColumnSpan="4" Margin="0,0,0,0" BorderThickness="2" BorderBrush="{DynamicResource MaterialDesignDivider}" 
Panel.ZIndex="1">

<materialDesign:ColorZone...>
<materialDesign:DrawerHost.LeftDrawerContent...>

</materialDesign:DrawerHost>

重要的是，我们给 DrawerHost Panel.ZIndex = 1，因为当您有一个抽屉应打开的按钮时，该按钮将位于前台，但现在抽屉将位于前台。

就是这样，现在我们有了一个带有汉堡按钮的菜单栏，可以打开抽屉。 关于按钮的提示我添加了它不需要命令和命令参数，但当您想在按下按钮时关闭抽屉时它会有所帮助。

我希望我能帮助别人

0
投票

也许这个问题很老了，但是。 这是我用于页面之间导航的内容，我使用 

Caliburn.Micro.4.0.212
和 
MaterialDesignThemes.4.9.0
这是我的
ShellView.xaml

<Window>
    <materialDesign:DrawerHost Grid.Row="0" IsLeftDrawerOpen="{Binding ElementName=MenuToggleButton, Path=IsChecked}">
        <Grid>
            <Grid.RowDefinitions>
                <RowDefinition Height="50" />
                <RowDefinition />
            </Grid.RowDefinitions>
            <materialDesign:ColorZone Grid.Row="0" Mode="PrimaryMid">
                <ToggleButton
                    x:Name="MenuToggleButton"
                    Margin="5,0,0,0"
                    HorizontalAlignment="Left"
                    IsChecked="False"
                    Style="{DynamicResource MaterialDesignHamburgerToggleButton}" />
            </materialDesign:ColorZone>
            <ContentControl
                x:Name="ActiveItem"
                Grid.Row="1"
                Margin="10" />
        </Grid>
        <materialDesign:DrawerHost.LeftDrawerContent>
            <Grid>
                <Grid.RowDefinitions>
                    <RowDefinition Height="50" />
                    <RowDefinition Height="*" />
                </Grid.RowDefinitions>
                <DockPanel
                    Name="NavigationWidth"
                    Grid.Row="0"
                    Width="200">
                    <ToggleButton
                        Margin="5"
                        HorizontalAlignment="Left"
                        VerticalAlignment="Top"
                        IsChecked="{Binding ElementName=MenuToggleButton, Path=IsChecked}"
                        Style="{DynamicResource MaterialDesignHamburgerToggleButton}" />
                </DockPanel>
                <StackPanel
                    Grid.Row="1"
                    HorizontalAlignment="Left"
                    Orientation="Vertical">
                    <Button
                        Width="{Binding ElementName=NavigationWidth, Path=Width}"
                        Height="50"
                        HorizontalContentAlignment="Left"
                        cal:Message.Attach="Navigation('Home')"
                        Background="{DynamicResource MaterialDesignBackground}"
                        BorderThickness="0"
                        Foreground="{DynamicResource MaterialDesignDarkBackground}"
                        Style="{StaticResource MaterialDesignOutlinedLightButton}">
                        <StackPanel Orientation="Horizontal">
                            <materialDesign:PackIcon
                                Width="30"
                                Height="30"
                                Margin="0,5,0,0"
                                VerticalAlignment="Center"
                                Kind="HomeOutline" />
                            <Label
                                Margin="0,5,0,0"
                                VerticalAlignment="Center"
                                Content="Home"
                                FontSize="18" />
                        </StackPanel>
                    </Button>
                    <Button
                        Width="{Binding ElementName=NavigationWidth, Path=Width}"
                        Height="50"
                        HorizontalContentAlignment="Left"
                        cal:Message.Attach="Navigation('Settings')"
                        Background="{DynamicResource MaterialDesignBackground}"
                        BorderThickness="0"
                        Foreground="{DynamicResource MaterialDesignDarkBackground}"
                        Style="{StaticResource MaterialDesignOutlinedLightButton}">
                        <StackPanel Orientation="Horizontal">
                            <materialDesign:PackIcon
                                Width="30"
                                Height="30"
                                Margin="0,5,0,0"
                                VerticalAlignment="Center"
                                Kind="SettingsOutline" />
                            <Label
                                Margin="0,5,0,0"
                                VerticalAlignment="Center"
                                Content="Settings"
                                FontSize="18" />
                        </StackPanel>
                    </Button>
                    <Button
                        Width="{Binding ElementName=NavigationWidth, Path=Width}"
                        Height="50"
                        HorizontalContentAlignment="Left"
                        cal:Message.Attach="Navigation('About')"
                        Background="{DynamicResource MaterialDesignBackground}"
                        BorderThickness="0"
                        Foreground="{DynamicResource MaterialDesignDarkBackground}"
                        Style="{StaticResource MaterialDesignOutlinedLightButton}">
                        <StackPanel Orientation="Horizontal">
                            <materialDesign:PackIcon
                                Width="30"
                                Height="30"
                                Margin="0,5,0,0"
                                VerticalAlignment="Center"
                                Kind="AboutOutline" />
                            <Label
                                Margin="0,5,0,0"
                                VerticalAlignment="Center"
                                Content="About"
                                FontSize="18" />
                        </StackPanel>
                    </Button>
                </StackPanel>
            </Grid>
        </materialDesign:DrawerHost.LeftDrawerContent>
    </materialDesign:DrawerHost>
</Window>

还有这个

ShellViewModel

public class ShellViewModel : Conductor<IScreen>
{
    protected async override void OnViewLoaded(object view)
    {
        base.OnViewLoaded(view);
        await ActivateItemAsync(new HomeViewModel());
    }
    public async Task Navigation(string pageName)
    {
        switch (pageName)
        {
            case ("Home"):
                await ActivateItemAsync(new HomeViewModel());
                break;
            case ("Settings"):
                await ActivateItemAsync(new SettingViewModel());
                break;
            case ("About"):
                await ActivateItemAsync(new AboutViewModel());
                break;
        }
    }
}

我无法在 stackoverflow 上发布图像，因为我没有声誉，所以如果你想查看结果，我将 gif 上传到我的驱动器上： 这里

注释

1 - 确保名字，因为 

caliburn.micro
对名字敏感，祝你好运。

2 - 并创建一个模板因此，当创建一个新项目时，您不需要再次编写所有这些代码👍

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.