Caliburn Micro和ModernUI的示例/教程

Question

Caliburn Micro和ModernUI的示例/教程

17

有没有关于如何将Caliburn Micro与ModernUi（https://mui.codeplex.com）一起使用的示例或教程？

- Matthias

1

我想，由于ModernUI看起来像是一组控件，所以您只需要为工具包中的每个控件添加约定即可。唯一的区别在于CM在大多数窗口管理方面使用ChildWindow，而您可能希望在实现中将其替换为ModernWindow。我认为，您可能只需要为WindowManager（特别是EnsureWindow方法）提供自己的实现。http://caliburnmicro.codeplex.com/SourceControl/changeset/view/35582bb2a8dfdd3fcd71a07fa82581ddb93a786f#src/Caliburn.Micro.Silverlight/WindowManager.cs - Charleh

1

看了一下，这个问题似乎比想象中的更复杂。我认为提供自己的WindowManager实现可能不是最好的选择，因为所有弹出窗口也都会实现ModernWindow类。此外，它似乎根据资源URL动态加载内容，因此采用ViewModel-First方法可能行不通。 - Charleh

2个回答

10

我使用Modern UI for WPF、Caliburn Micro和MEF创建了一个非常简单的聊天应用示例。

https://github.com/gblmarquez/mui-sample-chat

希望它能对你有所帮助。

- gblmarquez

我如何使用命令进行导航？当我使用Command="mui:LinkCommands.NavigateLink"时，我遇到了一个错误：“在 Windows Presentation Foundation (WPF) 项目中不支持 LinkCommands。” - Ali123

即使使用BBCodeBlock，URL也不会显示URL。 - Ali123

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Charleh · Accepted Answer

好的，我已经简单尝试过它并在Mui论坛上查看了一下，这似乎是最好的方法：

由于窗口从URL加载内容，因此您需要采用视图优先的方法，然后定位适当的VM并将两者绑定。

最好的方法似乎是通过ContentLoader类来完成，该类用于在请求时将内容加载到ModernWindow中。您只需对DefaultContentLoader进行子类化并提供必要的CM魔法即可绑定已加载的项:

public class ModernContentLoader : DefaultContentLoader
{
    protected override object LoadContent(Uri uri)
    {
        var content = base.LoadContent(uri);

        if (content == null)
            return null;

        // Locate the right viewmodel for this view
        var vm = Caliburn.Micro.ViewModelLocator.LocateForView(content);

        if (vm == null)
            return content;

        // Bind it up with CM magic
        if (content is DependencyObject)
        {
            Caliburn.Micro.ViewModelBinder.Bind(vm, content as DependencyObject, null);
        }

        return content;
    }
}

你的CM启动程序应该只引导一个由基于ModernWindow的视图支持的ModernWindow视图模型（CM尝试使用EnsureWindow，它会创建一个新的基本WPF窗口类，除非你的控件已经继承自Window，而ModernWindow已经这样做了。如果你需要所有对话框和弹出窗口都是MUI，那么你可能需要重新实现WindowManager）：

public class Bootstrapper : Bootstrapper<ModernWindowViewModel>
{
}

可以作为导体（OneActive），长这样：

public class ModernWindowViewModel : Conductor<IScreen>.Collection.OneActive
{
}

视图的 XAML 为

ModernWindowView.xaml

<mui:ModernWindow x:Class="WpfApplication4.ViewModels.ModernWindowView"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:mui="http://firstfloorsoftware.com/ModernUI"
                                     Title="ModernWindowView" Height="300" Width="300" ContentLoader="{StaticResource ModernContentLoader}">   
    <mui:ModernWindow.MenuLinkGroups>
        <mui:LinkGroupCollection>
            <mui:LinkGroup GroupName="Hello" DisplayName="Hello">
                <mui:LinkGroup.Links>
                    <mui:Link Source="/ViewModels/ChildView.xaml" DisplayName="Click me"></mui:Link>
                </mui:LinkGroup.Links>
            </mui:LinkGroup>
        </mui:LinkGroupCollection>
    </mui:ModernWindow.MenuLinkGroups>
</mui:ModernWindow>

显然，你也需要将加载程序作为一个资源：

<Application.Resources>
    <ResourceDictionary>
        <ResourceDictionary.MergedDictionaries>
            <ResourceDictionary Source="/FirstFloor.ModernUI;component/Assets/ModernUI.xaml" />
            <ResourceDictionary Source="/FirstFloor.ModernUI;component/Assets/ModernUI.Dark.xaml"/>
            <ResourceDictionary>
                <framework:ModernContentLoader x:Key="ModernContentLoader"></framework:ModernContentLoader>
                <wpfApplication4:Bootstrapper x:Key="Bootstrapper"></wpfApplication4:Bootstrapper>
            </ResourceDictionary>
        </ResourceDictionary.MergedDictionaries>
    </ResourceDictionary>
</Application.Resources>

这是我用作测试的ChildViewModel：

public class ChildViewModel : Conductor<IScreen>
{
    public void ClickMe()
    {
        MessageBox.Show("Hello");
    }
}

这是它的XAML（只是一个按钮）

<UserControl x:Class="WpfApplication4.ViewModels.ChildView"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
                                     Height="350" Width="525">
    <Grid>
        <StackPanel>
        <TextBlock >Hello World</TextBlock>
        <Button x:Name="ClickMe" Width="140" Height="50">Hello World</Button>
        </StackPanel>
    </Grid>
</UserControl>

并且这是概念证明：

MUI Example