Flyout c # с использованием mahapps - PullRequest
Новая
       30

Flyout c # с использованием mahapps

0 голосов
/ 29 октября 2018

Здравствуйте. В настоящее время я использую библиотеку Mahapps, но у меня есть некоторые проблемы. Как вывести всплывающее окно при нажатии «Menu 1» MenuItem? Я попытался с помощью следующего кода, но он не работал. 

<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 Ответ

0 голосов
/ 06 ноября 2018

Если вы перешли по указанным мной учебным ссылкам, то, я полагаю, вы сможете создать простой View и его ViewModel.

Представление может быть окном, и его содержимое 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 к IsMenuItem1Checked в ViewModel, а свойство IsOpen FlyOut привязывает к IsChecked этого элемента меню.

...