首先说一下我想要实现的效果。
我希望在左侧的导航点击了以后右侧的主体部分发声变化。
之前我在LeftNav模块用的控件是ToggleButton并为其制作了样式。本来想的是自己根据 ToggleButton作为基础自己在做一个复合控件出来。不过这里做导航的话，ListBox会更加的 适合些。ListBox的样式制作和之前的ToggleButton样式制作大同小异，都是一个原则：各个 VisualStateGroup中的视图状态是可以共存的，VisualStateGroup内部的视图状态只能同时 出现一个，尽量不要在多个VisualStateGroup同时改变同一个元素的属性。
下来导航模块“LeftNav”需要从外部加载导航配置文件文件"Nav.xml"，将其获得的数据 解析并于ListBox做数据绑定。要完成上诉的工作就需要引入Services模块，将各个功能分离 开、各司其职。
Nav.xml：
1 <?xml version="1.0" encoding="utf-8" ?>
2 <root>
3 <module showname="Hello Prism" xapname="OperatingTableTestModule" ViewType="OperatingTableTestModule.Views.HelloPrismView, OperatingTableTestModule, Version=1.0.0.0" />
4 <module showname="欢迎" xapname="OTWelcomeModule" ViewType="OTWelcomeModule.Views.OTWelcomeView, OTWelcomeModule, Version=1.0.0.0" />
5 <module showname="CGArt" xapname="OTCGArtModule" ViewType="OT.SL.CGArt2010.Style.Issue._31.Views.OTCGArtView, OT.SL.CGArt2010.Style.Issue.31, Version=1.0.0.0" />
6 <module showname="妄摄写真" xapname="OTMosatsu" ViewType="OTMosatsu.Views.OTMosatsuView, OTMosatsu, Version=1.0.0.0" />
7 </root>
这里先定义一个导航的实体类，“LdModule”
01 namespace OTLeftNavModule.Entities
02 {
03 public class LdModule
04 {
05 //显示名称
06 public string showname { get; set; }
07 //View类别
08 public string ViewType { get; set; }
09 //Module的名称
10 public string xapname { get; set; }
11 }
12 }service获取数据并解析
1 namespace OTLeftNavModule.Services
2 {
3 public interface ILeftNavService
4 {
5 void RetrievLdModules(Action<IEnumerable<LdModule>> RetrievLdModulesCallBack);
6 }
7 }
01 namespace OTLeftNavModule.Services
02 {
03 public class LeftNavService : ILeftNavService
04 {
05
06
07 #region ILeftNavService Members
08
09 /// <summary>
10 /// 回调函数，用来介绍返回的 LdModule
11 /// </summary>
12 /// <param name="RetrievLdModulesCallBack"></param>
13 public void RetrievLdModules(Action<IEnumerable<LdModule>> RetrievLdModulesCallBack)
14 {
15 var uri = new Uri(HtmlPage.Document.DocumentUri, "Nav.xml");
16 WebClient wb = new WebClient();
17 wb.DownloadStringCompleted += (sender, e) => RetrievLdModulesCallBack(BuildLdModules(e));
18 wb.DownloadStringAsync(uri);
19 }
20
21 /// <summary>
22 /// 解析XML
23 /// </summary>
24 /// <param name="e"></param>
25 /// <returns></returns>
26 private IEnumerable<LdModule> BuildLdModules(DownloadStringCompletedEventArgs e)
27 {
28 if (e.Error != null)
29 {
30 return new List<LdModule> { new LdModule() { showname = "error", ViewType = "error" } };
31 }
32 XDocument xmlLdModules = XDocument.Parse(e.Result);
33
34 var ldmodules = from module in xmlLdModules.Descendants ("module")
35 select new LdModule
36 {
37 showname = (string)module.Attribute("showname"),
38 ViewType = (string)module.Attribute ("ViewType"),
39 xapname = (string)module.Attribute("xapname")
40 };
41 return ldmodules;
42 }
43
44 #endregion
45 }
46 }将获取的数据赋给Model类用来做数据绑定
01 namespace OTLeftNavModule.Models
02 {
03 public class LeftNavModel : INotifyPropertyChanged
04 {
05 ILeftNavService leftNavService;
06 public LeftNavModel(ILeftNavService leftNavService)
07 {
08
09 ldModules = new ObservableCollection<LdModule>();
10
11 this.leftNavService = leftNavService;
12 this.leftNavService.RetrievLdModules(OnRetrievLdModulesComplete);
13 }
14
15 /// <summary>
16 /// 回调函数，为ldModules赋值
17 /// </summary>
18 /// <param name="newLdModules"></param>
19 private void OnRetrievLdModulesComplete(IEnumerable<LdModule> newLdModules)
20 {
21 this.ldModules.Clear();
22 foreach (var module in newLdModules)
23 {
24 this.ldModules.Add (module);
25 }
26 }
27
28 public ObservableCollection<LdModule> ldModules
29 {
30 get;
31 private set;
32 }
33
34
35 #region INotifyPropertyChanged Members
36
37 public event PropertyChangedEventHandler PropertyChanged;
38 #endregion
39 }
40 }在Xaml里做绑定
1 <ListBox Background="{x:Null}" x:Name="ListNav" BorderBrush="{x:Null}" ItemsSource="{Binding ldModules}" Foreground="Black" Style="{StaticResource NavListBoxStyle}" BorderThickness="0" ItemContainerStyle="{StaticResource NavListBoxItemStyle}" FontSize="13.333" Cursor="Hand" Margin="0,2,0,0">
2 <ListBox.ItemTemplate>
3 <DataTemplate><TextBlock Text="{Binding showname}"/></DataTemplate>
4 </ListBox.ItemTemplate>
5 </ListBox>
最后需要替换右侧的主体Module了，我研究了Composite的Module模块、了解了Module生 命周期。需要做到替换主体部分的思路就是先从主体区域得到当前Module，将其移除再载入 新的Module。这样会比较适合我当前的项目。
01 void ListNav_SelectionChanged(object sender, SelectionChangedEventArgs e)
02 {
03 LdModule model = ListNav.SelectedItem as LdModule;
04
05 //获取选中模块View的类型
06 Type viewType = Type.GetType(model.ViewType, false);
07
08 //是否增加被加载过
09 if (viewType != null)
10 {
11 var resolveView = this.container.Resolve(viewType);
12
13 IRegion mainRegion = this.regionManager.Regions["MainRegion"];
14
15 //获取主体当前的View
16 object view = mainRegion.GetView("mainCurrView");
17
18 //移除
19 if (view != null)
20 mainRegion.Remove(view);
21
22 //载入新的View
23 mainRegion.Add(resolveView, "mainCurrView");
24 }
25 else
26 {
27 //新加载Module并自动替换当 前视图
28 moduleManager.LoadModule (model.xapname);
29
30 }
31 }