使用 MVVM 的 Metro Flyout [英] Metro Flyouts with MVVM
问题描述
我正在尝试在我的应用程序中使用 MahApps.Metro 的 Flyouts.所以我将这部分添加到我的 MainWindow.xaml 中:
I'm trying to use the Flyouts from MahApps.Metro in my application. So I added this part to my MainWindow.xaml:
<controls:MetroWindow.Flyouts>
<controls:FlyoutsControl ItemsSource="{Binding Flyouts}">
<controls:FlyoutsControl.ItemTemplate>
<DataTemplate DataType="{x:Type viewModel:SettingsViewModel}">
<view:SettingsFlyout/>
</DataTemplate>
</controls:FlyoutsControl.ItemTemplate>
</controls:FlyoutsControl>
</controls:MetroWindow.Flyouts>
ItemTemplate
将包含从我的视图模型到视图的映射.Flyouts
是一个 ObservableCollection
,目前只包含我的 SettingsViewModel
.
The ItemTemplate
will contain the mappings from my viewmodels to the views. Flyouts
is an ObservableCollection<IFlyoutViewModel>
and currently only contains my SettingsViewModel
.
IFlyoutViewModel
定义:
using System.ComponentModel;
namespace MyApplication.ViewModel
{
internal interface IFlyoutViewModel : INotifyPropertyChanged
{
bool Visible { get; set; }
}
}
以及我如何使用 Visible
属性:
And how I use the Visible
-property:
<controls:Flyout x:Class="MyApplication.View.SettingsFlyout"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:controls="http://metro.mahapps.com/winfx/xaml/controls"
Header="Settings"
Position="Right"
IsOpen="{Binding Visible}"
Width="300">
...
</controls:Flyout>
所以现在我设置了 SettingsViewModel 的 Visible
属性,但是 Flyout 不会打开.我做错了什么?
So now I set the Visible
-property of my SettingsViewModel, but the Flyout won't open. What am I doing wrong?
我只是尝试分配 IsOpen="true"
硬编码,但这也不起作用.所以用数据模板显示弹出窗口似乎是问题...
I just tried to assign IsOpen="true"
hardcoded but this didn't work, too. So displaying the flyout with a datatemplate seems to be the problem...
推荐答案
我按照 Eldho 链接的问题讨论中的描述构建了它,现在它可以工作了.关键是要定义ItemContainerStyle
并在那里绑定IsOpen
!
I built it like described in the issue dicussion linked by Eldho, now it works. The key ist to define ItemContainerStyle
and bind IsOpen
there!
新的MainWindow.xaml
:
<controls:MetroWindow.Flyouts>
<controls:FlyoutsControl ItemsSource="{Binding Flyouts}">
<controls:FlyoutsControl.Resources>
<view:FlyoutPositionConverter x:Key="FlyoutPositionConverter"/>
</controls:FlyoutsControl.Resources>
<controls:FlyoutsControl.ItemTemplate>
<DataTemplate DataType="{x:Type viewModel:SettingsViewModel}">
<view:SettingsFlyout/>
</DataTemplate>
</controls:FlyoutsControl.ItemTemplate>
<controls:FlyoutsControl.ItemContainerStyle>
<Style BasedOn="{StaticResource {x:Type controls:Flyout}}"
TargetType="{x:Type controls:Flyout}">
<Setter Property="Header"
Value="{Binding Header}" />
<Setter Property="IsOpen"
Value="{Binding Visible}" />
<Setter Property="Position"
Value="{Binding Position, Converter={StaticResource FlyoutPositionConverter}}" />
<Setter Property="IsModal"
Value="{Binding IsModal}" />
<Setter Property="Theme" Value="Accent" />
</Style>
</controls:FlyoutsControl.ItemContainerStyle>
</controls:FlyoutsControl>
</controls:MetroWindow.Flyouts>
新的IFlyoutViewModel
:
using System.ComponentModel;
namespace MyApplication.ViewModel
{
internal interface IFlyoutViewModel : INotifyPropertyChanged
{
string Header { get; }
bool Visible { get; set; }
Position Position { get; set; }
bool IsModal { get; set; }
}
public enum Position
{
Top,
Left,
Right,
Bottom
}
}
FlyoutPositionConverter
只是我的位置枚举和 MahApps.Metro.Controls.Position
之间的映射器,因为我不想在我的视图模型中使用真实的位置界面.
The FlyoutPositionConverter
is just a mapper between my position enum and the MahApps.Metro.Controls.Position
because I didn't want to use the real positon in my viewmodel interface.
此外,视图现在不再需要是 Flyout
,它可以是普通的用户控件.
Also the view now no longer needs to be a Flyout
, it can be a normal usercontrol.
这篇关于使用 MVVM 的 Metro Flyout的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!