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

pqwbnv8z  于 2023-10-22  发布在  其他
关注(0)|答案(2)|浏览(217)

所以我使用材料设计和Caliburn微型。我想习惯材料设计和即时通讯新的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>

我得到了右边的汉堡按钮,当我启动它的动画工程,但我如何打开一个抽屉或菜单时,按钮被点击,我如何关闭它时,它再次按下。我在哪里写代码按钮做什么?

cczfrluj

cczfrluj1#

我找到了一个答案:

<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>

您必须为汉堡包按钮添加命令和CommandParameter。
现在我们只需要一个抽屉,我们可以打开:

<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,因为当你有一个按钮,抽屉应该打开按钮将在前台,但现在抽屉将。
就是这样,现在我们有一个菜单栏与汉堡按钮,打开一个抽屉。一个按钮的提示我添加了它不需要命令和命令参数,但它有助于当你想关闭抽屉时,一个按钮被按下。
我希望我能帮助到别人

ndasle7k

ndasle7k2#

也许这个问题很老。这是我用来在页面之间导航的,我用Caliburn.Micro.4.0.212MaterialDesignThemes.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:Here

备注

1 -要确定的名称,因为caliburn.micro敏感的名称,祝你好运。
2 -并创建一个模板,所以当创建一个新的项目,你不需要写所有这些代码了。

相关问题