使用 mahapps 的 Flyout c#

Question

您好，我目前正在使用库 Mahapps，但遇到了一些问题。单击 "Menu 1" 菜单项时如何弹出弹出窗口？我尝试了以下代码，但没有用。

<ListBox.ContextMenu>
            <ContextMenu>
                <MenuItem x:Name="FlyoutOverview" Header="Menu 1" IsCheckable="True" Click="flyoutOverview">
                    <MenuItem.Icon>
                        <iconPacks:PackIconModern Kind="GlobeWire"/>
                    </MenuItem.Icon>
                </MenuItem>
                <Separator/>
                <MenuItem Header="Menu 2"/>
                <Separator/>
                <MenuItem Header="Menu 3">
                    <MenuItem.Icon>
                        <iconPacks:PackIconModern Kind="People"/>
                    </MenuItem.Icon>
                </MenuItem>
                <MenuItem Header="Menu 4">
                    <MenuItem.Icon>
                        <iconPacks:PackIconModern Kind="UserDelete"/>
                    </MenuItem.Icon>
                </MenuItem>
                <MenuItem Header="Menu 5">
                    <MenuItem.Icon>
                        <iconPacks:PackIconModern Kind="ControlResume"/>
                    </MenuItem.Icon>
                </MenuItem>
            </ContextMenu>
        </ListBox.ContextMenu>
    </ListBox>

Answer 1

如果您按照我提供的教程链接进行操作，那么我想您能够创建一个简单的视图及其 ViewModel。

视图可以是 Window 并且其网格内容如下：

<Grid>
    <Grid.RowDefinitions>
        <RowDefinition />
    </Grid.RowDefinitions>

    <Grid.ColumnDefinitions>
        <ColumnDefinition />
        <ColumnDefinition />
    </Grid.ColumnDefinitions>

    <Controls:FlyoutsControl Grid.Column="1">
        <Controls:Flyout x:Name="yourMahAppFlyout" Header="Flyout" Background="AliceBlue" Position="Right" Width="350" 
                         IsOpen="{Binding ElementName=FlyoutOverview, Path=IsChecked}">
            <TextBlock Text="My Flyout is here" />
        </Controls:Flyout>
    </Controls:FlyoutsControl>

    <ListBox Grid.Row="0" Grid.Column="0" ItemsSource="{Binding NameList}">
        <ListBox.ContextMenu>
            <ContextMenu>
                <MenuItem x:Name="FlyoutOverview" Header="Menu 1" IsCheckable="True" 
                          IsChecked="{Binding IsMenuItem1Checked}">
                    <MenuItem.Icon>
                        <iconPacks:PackIconModern Kind="GlobeWire"/>
                    </MenuItem.Icon>

                </MenuItem>
                <Separator/>
                <MenuItem Header="Menu 2"/>
                <Separator/>
                <MenuItem Header="Menu 3">
                    <MenuItem.Icon>
                        <iconPacks:PackIconModern Kind="People"/>
                    </MenuItem.Icon>
                </MenuItem>
                <MenuItem Header="Menu 4">
                    <MenuItem.Icon>
                        <iconPacks:PackIconModern Kind="UserDelete"/>
                    </MenuItem.Icon>
                </MenuItem>
                <MenuItem Header="Menu 5">
                    <MenuItem.Icon>
                        <iconPacks:PackIconModern Kind="ControlResume"/>
                    </MenuItem.Icon>
                </MenuItem>
            </ContextMenu>
        </ListBox.ContextMenu>
    </ListBox>
</Grid>

ViewModel 可以具有以下属性：

    public MainWindowViewModel()
    {
        NameList = new ObservableCollection<string>()
        {
            "John", "Micheal", "Jack"
        };
    }

    public ObservableCollection<string> NameList { get; set; }

    public bool IsMenuItem1Checked
    {
        get { return _isMenuItem1Checked; }
        set { SetProperty(ref _isMenuItem1Checked, value); }
    }

列表框中的第一个菜单项将其 "IsChecked" 属性绑定到 ViewModel 中的 "IsMenuItem1Checked"，FlyOut "IsOpen" 属性绑定到 "IsChecked" 该菜单项。

使用 mahapps 的 Flyout c#

Flyout c# using mahapps

c#

mahapps.metro

flyout