本帖最后由 Clever-he 于 2015-11-10 10:15 编辑

本节知识点：
[list]
[*] SplitView做导航菜单
[*] MvvmLight 的 SimpleIoc、ServiceLocator 的使用
[*] MvvmLight 的Messenger消息通知机制的使用
[*] MvvmLight 中DispatcherHelper 的使用
[/list]


上回我们说到SocketBusiness 的创建以及实现，SocketBusiness保证了我们Socket网络通信的能力和App的底层处理逻辑，这篇我们开始介绍StreamSocket网络编程（聊天室-客户端）的前端代码的实现。

这里我们会使用MVVMLight框架，任何接触过 WindowsPhone 、Win 8.1 开发的 工作人员都知道在日常开发中我们会使用MVVM设计模式进行依赖关系解耦，而MVVMLight无疑是MVVM设计模式上的最优秀、使用最广泛的一个框架。

首先在项目中创建一个Pages文件夹，新建两个页面：ClientMessage.xaml（聊天页面）、ClientSetting.xaml（设置页面），创建好之后先不用写任何代码，因为我们还需要做个导航，我们就使用系统自己创建的MainPage页面来做个导航。


一、MainPage的实现


MianPage.xaml中我们来使用SplitView和Frame控件来做导航和主页面(SplitView菜单的展开折叠按钮没有做，有想加上的朋友自己加个按钮即可)，前台xaml主代码如下：

[mw_shl_code=csharp,true]<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
<SplitView DisplayMode="CompactInline" CompactPaneLength="64" >
<SplitView.Pane>
<Grid RequestedTheme="Dark">
<controls:NavMenuListView x:Name="NavListView"
ContainerContentChanging="NavMenuItemContainerContentChanging"
ItemInvoked="NavMenuList_ItemInvoked"
ItemContainerStyle="{StaticResource ListViewItemBaseStyle}"
ItemsSource="{x:Bind NavList}" Background="#FF1C3048">

<controls:NavMenuListView.ItemTemplate>
<DataTemplate x:DataType="models:NavModel">
<Grid Margin="-12,0,0,0" Height="64">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="64"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Grid Width="24" Height="24">
<SymbolIcon ToolTipService.ToolTip="{x:Bind Title}" Symbol="{x:Bind Icon}"/>
</Grid>

<TextBlock Margin="16,0,1,0" Grid.Column="1" Text="{x:Bind Title}" VerticalAlignment="Center" />
</Grid>
</DataTemplate>
</controls:NavMenuListView.ItemTemplate>

</controls:NavMenuListView>
</Grid>
</SplitView.Pane>
<Grid>
<Frame x:Name="MainPageFrame" />
</Grid>
</SplitView>
</Grid>[/mw_shl_code]


上面的代码中，我们在SplitView控件的Pane元素中使用了一个自定义控件NavMenuListView，这个控件继承与ListView类，创建一个Controls文件夹，新建一个NavMenuList.cs文件，定义一个NavMenuListView类继承与ListView，具体代码如下：
[mw_shl_code=csharp,true]public class NavMenuListView : ListView
{
private SplitView _splitViewHost;

public NavMenuListView()
{
SelectionMode = ListViewSelectionMode.Single;
IsItemClickEnabled = true;
ItemClick += ItemClickedHandler;

// Locate the hosting SplitView control
Loaded += (s, a) =>
{
var parent = VisualTreeHelper.GetParent(this);
while (parent != null && !(parent is SplitView))
{
parent = VisualTreeHelper.GetParent(parent);
}

if (parent != null)
{
_splitViewHost = parent as SplitView;

_splitViewHost.RegisterPropertyChangedCallback(SplitView.IsPaneOpenProperty,
(sender, args) => { OnPaneToggled(); });

// Call once to ensure we're in the correct state
OnPaneToggled();
}
};
}

protected override void OnApplyTemplate()
{
base.OnApplyTemplate();

// Remove the entrance animation on the item containers.
for (var i = 0; i < ItemContainerTransitions.Count; i++)
{
if (ItemContainerTransitions is EntranceThemeTransition)
{
ItemContainerTransitions.RemoveAt(i);
}
}
}

/// <summary>
/// Mark the <paramref name="item" /> as selected and ensures everything else is not.
/// If the <paramref name="item" /> is null then everything is unselected.
/// </summary>
/// <param name="item"></param>
public void SetSelectedItem(ListViewItem item)
{
var index = -1;
if (item != null)
{
index = IndexFromContainer(item);
}

for (var i = 0; i < Items.Count; i++)
{
var lvi = (ListViewItem) ContainerFromIndex(i);
if (i != index)
{
lvi.IsSelected = false;
}
else if (i == index)
{
lvi.IsSelected = true;
}
}
}

/// <summary>
/// Occurs when an item has been selected
/// </summary>
public event EventHandler<ListViewItem> ItemInvoked;

/// <summary>
/// Custom keyboarding logic to enable movement via the arrow keys without triggering selection
/// until a 'Space' or 'Enter' key is pressed.
/// </summary>
/// <param name="e"></param>
protected override void OnKeyDown(KeyRoutedEventArgs e)
{
var focusedItem = FocusManager.GetFocusedElement();

switch (e.Key)
{
case VirtualKey.Up:
TryMoveFocus(FocusNavigationDirection.Up);
e.Handled = true;
break;

case VirtualKey.Down:
TryMoveFocus(FocusNavigationDirection.Down);
e.Handled = true;
break;

case VirtualKey.Tab:
var shiftKeyState = CoreWindow.GetForCurrentThread().GetKeyState(VirtualKey.Shift);
var shiftKeyDown = (shiftKeyState & CoreVirtualKeyStates.Down) == CoreVirtualKeyStates.Down;

// If we're on the header item then this will be null and we'll still get the default behavior.
if (focusedItem is ListViewItem)
{
var currentItem = (ListViewItem) focusedItem;
var onlastitem = currentItem != null && IndexFromContainer(currentItem) == Items.Count - 1;
var onfirstitem = currentItem != null && IndexFromContainer(currentItem) == 0;

if (!shiftKeyDown)
{
if (onlastitem)
{
TryMoveFocus(FocusNavigationDirection.Next);
}
else
{
TryMoveFocus(FocusNavigationDirection.Down);
}
}
else // Shift + Tab
{
if (onfirstitem)
{
TryMoveFocus(FocusNavigationDirection.Previous);
}
else
{
TryMoveFocus(FocusNavigationDirection.Up);
}
}
}
else if (focusedItem is Control)
{
if (!shiftKeyDown)
{
TryMoveFocus(FocusNavigationDirection.Down);
}
else // Shift + Tab
{
TryMoveFocus(FocusNavigationDirection.Up);
}
}

e.Handled = true;
break;

case VirtualKey.Space:
case VirtualKey.Enter:
// Fire our event using the item with current keyboard focus
InvokeItem(focusedItem);
e.Handled = true;
break;

default:
base.OnKeyDown(e);
break;
}
}

/// <summary>
/// This method is a work-around until the bug in FocusManager.TryMoveFocus is fixed.
/// </summary>
/// <param name="direction"></param>
private void TryMoveFocus(FocusNavigationDirection direction)
{
if (direction == FocusNavigationDirection.Next || direction == FocusNavigationDirection.Previous)
{
FocusManager.TryMoveFocus(direction);
}
else
{
var control = FocusManager.FindNextFocusableElement(direction) as Control;
if (control != null)
{
control.Focus(FocusState.Programmatic);
}
}
}

private void ItemClickedHandler(object sender, ItemClickEventArgs e)
{
// Triggered when the item is selected using something other than a keyboard
var item = ContainerFromItem(e.ClickedItem);
InvokeItem(item);
}

private void InvokeItem(object focusedItem)
{
SetSelectedItem(focusedItem as ListViewItem);
ItemInvoked(this, focusedItem as ListViewItem);

if (_splitViewHost.IsPaneOpen && (
_splitViewHost.DisplayMode == SplitViewDisplayMode.CompactOverlay ||
_splitViewHost.DisplayMode == SplitViewDisplayMode.Overlay))
{
_splitViewHost.IsPaneOpen = false;
if (focusedItem is ListViewItem)
{
((ListViewItem) focusedItem).Focus(FocusState.Programmatic);
}
}
}

/// <summary>
/// Re-size the ListView's Panel when the SplitView is compact so the items
/// will fit within the visible space and correctly display a keyboard focus rect.
/// </summary>
private void OnPaneToggled()
{
if (_splitViewHost.IsPaneOpen)
{
ItemsPanelRoot.ClearValue(WidthProperty);
ItemsPanelRoot.ClearValue(HorizontalAlignmentProperty);
}
else if (_splitViewHost.DisplayMode == SplitViewDisplayMode.CompactInline ||
_splitViewHost.DisplayMode == SplitViewDisplayMode.CompactOverlay)
{
ItemsPanelRoot.SetValue(WidthProperty, _splitViewHost.CompactPaneLength);
ItemsPanelRoot.SetValue(HorizontalAlignmentProperty, HorizontalAlignment.Left);
}
}
}[/mw_shl_code]

MainPage页面中的自定义NavMenuListView控件还是设置了ItemContainerStyle样式，样式我写在了一个名叫MainPageStyle.xaml样式文件中，样式文件在App.xaml中添加了引用如下：
[mw_shl_code=csharp,true]<Application.Resources>
<ResourceDictionary>
<ResourceDictionary.MergedDictionaries>
<ResourceDictionary Source="Style/MainPageStyle.xaml"/>
</ResourceDictionary.MergedDictionaries>
</ResourceDictionary>
</Application.Resources>[/mw_shl_code]

这样引用在App.xaml里，方便全局使用该样式文件里定义的样式资源。

Ok，在MainPageStyle.xaml样式文件中定义我们需要的ItemContainerStyle样式资源，打开MainPageStyle.xaml文件编写如下代码：
[mw_shl_code=csharp,true]<Color x:Key="MainColor" >#25C4A4</Color>
<SolidColorBrush x:Key="MainThemeBrush" Color="#FF25C4A4"/>
<Style x:Key="ListViewItemBaseStyle" TargetType="ListViewItem">
<Setter Property="FontFamily" Value="{ThemeResource ContentControlThemeFontFamily}"/>
<Setter Property="FontSize" Value="{ThemeResource ControlContentThemeFontSize}"/>
<Setter Property="Background" Value="Transparent"/>
<Setter Property="Foreground" Value="{ThemeResource SystemControlForegroundBaseHighBrush}"/>
<Setter Property="TabNavigation" Value="Local"/>
<Setter Property="IsHoldingEnabled" Value="True"/>
<!--<Setter Property="Padding" Value="12,0,12,0"/>-->
<Setter Property="HorizontalContentAlignment" Value="Left"/>
<Setter Property="VerticalContentAlignment" Value="Center"/>
<Setter Property="MinWidth" Value="{ThemeResource ListViewItemMinWidth}"/>
<Setter Property="MinHeight" Value="{ThemeResource ListViewItemMinHeight}"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ListViewItem">
<ListViewItemPresenter CheckBrush="{ThemeResource SystemControlForegroundBaseMediumHighBrush}"
ContentMargin="{TemplateBinding Padding}"
CheckMode="Inline"
ContentTransitions="{TemplateBinding ContentTransitions}"
CheckBoxBrush="{ThemeResource SystemControlForegroundBaseMediumHighBrush}"
DragForeground="{ThemeResource ListViewItemDragForegroundThemeBrush}"
DragOpacity="{ThemeResource ListViewItemDragThemeOpacity}"
DragBackground="{ThemeResource ListViewItemDragBackgroundThemeBrush}"
DisabledOpacity="{ThemeResource ListViewItemDisabledThemeOpacity}"
FocusBorderBrush="{ThemeResource SystemControlForegroundAltHighBrush}"
FocusSecondaryBorderBrush="{ThemeResource SystemControlForegroundBaseHighBrush}"
HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"
PointerOverForeground="{ThemeResource SystemControlHighlightAltBaseHighBrush}"
PressedBackground="{ThemeResource SystemControlHighlightListMediumBrush}"
PlaceholderBackground="{ThemeResource ListViewItemPlaceholderBackgroundThemeBrush}"
PointerOverBackground="{ThemeResource SystemControlHighlightListLowBrush}"
ReorderHintOffset="{ThemeResource ListViewItemReorderHintThemeOffset}"
SelectedPressedBackground="{StaticResource MainThemeBrush}"
SelectionCheckMarkVisualEnabled="True"
SelectedForeground="{ThemeResource SystemControlHighlightAltBaseHighBrush}"
SelectedPointerOverBackground="{StaticResource MainThemeBrush}"
SelectedBackground="{StaticResource MainThemeBrush}"
VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"/>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>[/mw_shl_code]

样式中主要设置了ListView的项选中后的背景色以及鼠标经过的背景色等，定义好之后MainPage页面中的控件就可以使用它了。

在自定义的菜单导航NavMenuListView中，ItemsSource数据源我们绑定到了一个NavList集合以及订阅了ContainerContentChanging、ItemInvoked的两个事件，我们来看下完整的MainPage.xaml.cs代码：
[mw_shl_code=csharp,true]public sealed partial class MainPage : Page
{

public static Frame MainFrame { get; set; }
public List<NavModel> NavList = new List<NavModel>
{
new NavModel {Icon = Symbol.Message,PageType = typeof(ClientMessage),Title = "消息"},
new NavModel {Icon = Symbol.Setting,PageType = typeof(ClientSetting),Title = "设置"}
};
public MainPage()
{
this.InitializeComponent();
MainFrame = MainPageFrame;
}

private void NavMenuItemContainerContentChanging(ListViewBase sender, ContainerContentChangingEventArgs args)
{
if (!args.InRecycleQueue && args.Item is NavModel)
{
args.ItemContainer.SetValue(AutomationProperties.NameProperty, ((NavModel)args.Item).Title);
}
else
{
args.ItemContainer.ClearValue(AutomationProperties.NameProperty);
}
}

private void NavMenuList_ItemInvoked(object sender, ListViewItem e)
{
var item = (NavModel)((NavMenuListView)sender).ItemFromContainer(e);

if (item?.PageType != null && item.PageType != typeof(object) &&
item.PageType != MainFrame.CurrentSourcePageType)
{
MainFrame.Navigate(item.PageType);
}
}
}[/mw_shl_code]

代码很简单就不解释了，主要就是点击导航到某个界面。导航Model记得添加Models项目的引用。


二、安装MvvmLight框架

接下来我们来安装下MVVMLight的框架，右键"引用"点击"管理NuGet程序包"，在搜索框中输入"mvvmlight"进行搜索，待搜索结果出来后选择MVVMLight包点击安装进行安装（已安装的显示为卸载按钮）：
***附件停止解析***

三、ViewModelLocator的创建

安装好MvvmLight后，我们新建一个ViewModel文件夹，新建一个名为ViewModelLocator.cs的类用来统一管理定位我们的ViewModel，打开这个文件编写代码如下：
[mw_shl_code=csharp,true]public class ViewModelLocator
{
private static ViewModelLocator _default;

public ViewModelLocator()
{
ServiceLocator.SetLocatorProvider(() => SimpleIoc.Default);

//在Ioc容器里面注册每个VM
SimpleIoc.Default.Register<SettingPageViewModel>();
SimpleIoc.Default.Register<MessagePageViewModel>();
}

/// <summary>
/// 默认的全局ViewModelLocator实例，在App资源中声明
/// </summary>
public static ViewModelLocator Default
{
get
{
if (_default != null) return _default;
_default = Application.Current.Resources["locator"] as ViewModelLocator;
if (_default == null) throw new NotImplementedException("App资源中没有声明ViewModelLocator");
return _default;
}
}

/// <summary>
/// 提供给外部的SettingPageViewModel VM
/// </summary>
public SettingPageViewModel SettingPageViewModel => ServiceLocator.Current.GetInstance<SettingPageViewModel>();

/// <summary>
/// 提供给外部的MessagePageViewModel VM
/// </summary>
public MessagePageViewModel MessagePageViewModel => ServiceLocator.Current.GetInstance<MessagePageViewModel>();
}[/mw_shl_code]