Flyout c# 使用 mahapps答案

【问题标题】：Flyout c# using mahappsFlyout c# 使用 mahapps
【发布时间】：2019-04-02 02:39:03
【问题描述】：

您好，我目前正在使用库 Mahapps，但我遇到了一些问题。单击“菜单 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>

【问题讨论】：

“菜单 1”项的 Click 事件背后的代码是什么？
对不起，我是 C# 新手.. 我不知道代码
那么你在哪里实现这个 Click="flyoutOverview" ？
在哪里可以找到教程.. 我在 stackflow 上都试过了
* private void flyoutOverview(object sender, RoutedEventArgs e)
{

}
* 这是代码.. 但我不太了解绑定代码..

标签： c# mahapps.metro flyout

【解决方案1】：

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

View 可以是一个 Window，它的 Grid 内容如下：

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

【讨论】：

如果我将 IsChecked="{Binding IsMenuItem1Checked}" 更改为 IsChecked="{Binding IsMenuItemOverview}" 但为什么会出现错误？跨度>
@YJK 你的 IsMenuItemOverview 是什么？
我还没有为 IsMenuItemOverview 放置任何变量
那么很清楚为什么会出现错误。您需要创建 Viewmodel 属性，然后正确进行绑定。我之前提供的教程链接详细解释了
我注意到您只使用视图和视图模型...模型？如果我想在我的项目中使用视图和视图模型，我可以这样做吗？