博客园_程兴亮

Silverlight实用窍门系列：67.Silverlight下的Socket通讯

2012-05-24T03:17:00Z

在Silverlight中进行通讯，只能使用4502-4534之间的端口进行数据传输，另外Silverlight客户端会自动向943端口的服务器端发送一个“<policy-file-request/>”的语句请求，然后服务器端943端口回发以下文件以许可Socket通讯。

<?xml version="1.0" encoding="utf-8" ?>
<access-policy>
<cross-domain-access>
<policy>
<allow-from>
<domain uri="*"/>
</allow-from>
<grant-to>
<socket-resource port="4502-4534" protocol="tcp"/>
</grant-to>
</policy>
</cross-domain-access>
</access-policy>

A.现在我们首先来看服务器端的代码，主要分为策略响应步骤和服务响应步骤。

策略步骤一：启动监听943端口是否有需要安全策略文件请求

策略步骤二：如果客户端请求是<policy-file-request/>,则将安全策略文件作为bytes发送给客户端

服务步骤一：启动服务器端，监听4525端口，是否有Socket对话请求

服务步骤二：如果有客户端请求的连接，则发送消息告知客户端

代码如下：

class Program
{
static void Main(string[] args)
{
//策略步骤一：启动监听943端口是否有需要安全策略文件请求
Thread access = new Thread(new ThreadStart(accessThread));
access.Start();

//服务步骤一：启动服务器端，监听4525端口，是否有Socket对话请求
Thread server = new Thread(new ThreadStart(ServerThread));
server.Start();
}
//策略请求监听
static void accessThread()
{
//获取943端口监听的Socket服务端
Socket socket = GetSocketServer(943);
while (true)
{
Socket new_access = socket.Accept();
string clientPolicyString = "<policy-file-request/>";
byte[] requestbytes = new byte[clientPolicyString.Length];
new_access.Receive(requestbytes);
string requeststring = System.Text.Encoding.UTF8.GetString(requestbytes, 0, requestbytes.Length);

if (requeststring == clientPolicyString)
{
//策略步骤二：如果客户端请求是<policy-file-request/>,则将安全策略文件作为bytes发送给客户端
byte[] accessbytes = GetPolicyToClient();
new_access.Send(accessbytes, accessbytes.Length, SocketFlags.None);
new_access.Close();
}
Thread.Sleep(100);
}
}

static void ServerThread()
{
//获取4525端口监听的Socket服务端
Socket socket = GetSocketServer(4525);
while (true)
{
Socket _socket = socket.Accept();
//服务步骤二：如果有客户端请求的连接，则发送消息告知客户端
byte[] b2 = new byte[1024];
_socket.Receive(b2);
Console.WriteLine(Encoding.UTF8.GetString(b2).Replace("\0", ""));
string recString = "我已经收到消息了";
_socket.Send(Encoding.UTF8.GetBytes(recString));
_socket.Close();
Thread.Sleep(100);
}
}
//根据端口建立Socket服务器端
static Socket GetSocketServer(int serverPort)
{
Socket socket = new Socket(AddressFamily.InterNetwork, SocketType.Stream, ProtocolType.Tcp);
socket.Bind(new IPEndPoint(IPAddress.Any, serverPort));
socket.Listen(40);
return socket;
}
//获取安全策略文件的byte[]
static byte[] GetPolicyToClient()
{
string path = Environment.CurrentDirectory.Replace("\\bin\\Debug","");
FileStream fs = new FileStream(path+ @"\clientaccesspolicy.xml", FileMode.Open);
int length = (int)fs.Length;
byte[] bytes = new byte[length];
fs.Read(bytes, 0, length);
fs.Close();
return bytes;
}

}

B.其次我们来看客户端操作，分为以下几个步骤：

客户端步骤一：发起服务器连接请求。

客户端步骤二：连接服务器成功，将需要发送的数据放入缓冲区中，然后异步向服务器发送消息请求

客户端步骤三：消息发送成功，此时设置一个新的缓冲区实例，并且发起异步接收服务器返回的消息

客户端步骤四：获取到服务器返回的消息，关闭Socket　

客户端cs代码如下：

public partial class MainPage : UserControl
{
public MainPage()
{
InitializeComponent();
}
System.Net.Sockets.Socket socket;

private void button1_Click(object sender, RoutedEventArgs e)
{
byte[] userbytes = Encoding.UTF8.GetBytes(this.tbInput.Text);
socket = new System.Net.Sockets.Socket(AddressFamily.InterNetwork, SocketType.Stream, ProtocolType.Tcp);
SocketAsyncEventArgs socketArgs = new SocketAsyncEventArgs();
socketArgs.RemoteEndPoint = new DnsEndPoint("127.0.0.1", 4525);
//将需要发送的内容转为byte[]，保存到UserToken属性中
socketArgs.UserToken = userbytes;
socketArgs.Completed += new EventHandler<SocketAsyncEventArgs>(socketArgs_Completed);
//客户端步骤一：发起服务器连接请求。
socket.ConnectAsync(socketArgs);
}
//每发生一个Socket操作都讲激活此方法，操作包括（Connect/Send/Receive/None）
void socketArgs_Completed(object sender, SocketAsyncEventArgs e)
{
if (e.LastOperation == SocketAsyncOperation.Connect)
{
//客户端步骤二：连接服务器成功，将需要发送的数据放入缓冲区中，然后异步向服务器发送消息请求
byte[] userbytes = (byte[])e.UserToken;
e.SetBuffer(userbytes, 0, userbytes.Length);
socket.SendAsync(e);
}
else if (e.LastOperation == SocketAsyncOperation.Send)
{
//客户端步骤三：消息发送成功，此时设置一个新的缓冲区实例，并且发起异步接收服务器返回的消息
byte[] userbytes = new byte[1024];
e.SetBuffer(userbytes, 0, userbytes.Length);
socket.ReceiveAsync(e);
}
else if (e.LastOperation == SocketAsyncOperation.Receive)
{
//客户端步骤四：获取到服务器返回的消息，关闭Socket
string RecevieStr = Encoding.UTF8.GetString(e.Buffer, 0, e.Buffer.Length).Replace("\0", "");
//因为是异步Socket请求，所以需要使用UI线程更新lbShowMessage的显示效果
this.lbShowMessage.Dispatcher.BeginInvoke(new DoThingDele(DoThing), RecevieStr);
socket.Close();
}
}
//更新UI
public void DoThing(string arg)
{
this.lbShowMessage.Content = this.lbShowMessage.Content + "->" + arg;
}
//声明的一个DoThing方法委托
public delegate void DoThingDele(string arg);
}

客户端Xaml前台代码如下：

最后效果如下，如需源码请点击 SLSocket.zip 下载，本文演示的是最简单通讯效果：

本文链接

Visual Studio 2011 Beta新特性（一）：安装VS2011

2012-05-21T03:21:00Z

VS2011 Beta 已经发布好几月，今天我们来看看Vs2011的安装过程，在接下来的文章里会一步一步学习和发现VS2011的新特性。

首先下载VS2011 Beta的安装文件如下：

你可以通过以下链接 VS2011 Beta 进行下载，分为安装包和语言包。当然选择下载DVD ISO文件到本地速度更快捷：

我们解压ISO文件，然后点击“vs_premium.exe”文件（当然“旗舰版”和“个人版”略有不同），可以看到以下界面：

点击“I agree to the license....”并且Install,就会进入以下界面，对VS2011进行安装：

最后安装成功时显示如下：

安装中文语言包，打开VS2011如下：

通过VS11的安装界面以及开发界面我们已经可以看出它估计是为Windows 8系统结合的。可以支持Metro风格界面的开发工作，下一节我们将开始正式了解VS2011的新特性。如需下载请点击 VS 2011 Beta 即可。

本文链接

Silverlight实用窍门系列：66.Silverlight的数据模板DataTemplate(二)获取数据模板控件

2012-05-08T03:26:00Z

在Silverlight中我们使用了数据模板，在很多时候也需要获取到数据模板上的控件，并且进行改变。本文使用的实例数据源和上节相同，如需了解请下载源码查看。

当然在这里我们可以分为获取数据模板原始控件和获取数据模板当前行控件两种。

一：获取数据模板原始控件。即通过“lbTempName.LoadContent()”的方式获取到原始数据模板的根元素（所有的DataTemplate数据模板都只有一个根元素，否则会报错）

a.Xaml代码如下：

b.Cs代码如下,使用注意事项在代码注释内标明：

private void btnShow_Click(object sender, RoutedEventArgs e)
{
Button btn = sender as Button;
//1.在这里必须是直接在ListBox.ItemTemplate下写的DataTemplate才能使用此LoadContent()方法
//2.如果是使用ItemTemplate="{StaticResource lbTmp}"的方式则无法获取
//3.此种方式获取到的是模板中初始情况的控件名单。而非当前列的控件名单
StackPanel panel = (StackPanel)this.lbTempName.LoadContent();
StackPanel hidPanel = VisualTreeHelper.GetChild(panel, 1) as StackPanel;

//设置动作无法成功并且反馈到界面，因为它是获取到源模板，而非当前列控件
hidPanel.Visibility =
hidPanel.Visibility == Visibility.Visible ? Visibility.Collapsed : Visibility.Visible;
}

二：获取数据模板当前行控件。根据点击行按钮事件等方式，通过 VisualTreeHelper.GetParent(触发事件的按钮对象)的方式去获取当前行模板的根元素，然后通过该根元素使用 VisualTreeHelper.GetChild(spParent2, 1)或者 spParent1.FindName("tbName")的方式获取其他子控件。

a.Xaml代码如下：

<UserControl.Resources>
<local:ArtList x:Key="SourceList"></local:ArtList>
<DataTemplate x:Key="lbTmp">
<StackPanel Orientation="Vertical" >
<StackPanel Orientation="Horizontal" Margin="5" Width="380">
<TextBlock Text="{Binding ArtName}" Margin="5 10 0 0"></TextBlock>
<TextBox Text="{Binding ArtContent}" Name="tbName" Margin="5"></TextBox>
<TextBox Text="{Binding ArtAuthor}" Margin="5"></TextBox>
<TextBlock Text="{Binding ArtUpdateTime}" Margin="5 10 0 0"></TextBlock>
<Button Content="展开" Width="60" Height="26" x:Name="btnShow"
HorizontalAlignment="Right" Click="Button_Click" />
</StackPanel>
<StackPanel Orientation="Horizontal" Visibility="Collapsed">
<TextBox Text="{Binding ArtContent}" Width="280"></TextBox>
</StackPanel>
</StackPanel>
</DataTemplate>
</UserControl.Resources>
<Grid x:Name="LayoutRoot" Background="White" DataContext="{StaticResource SourceList}">
<ListBox x:Name="lbRes" ItemsSource="{Binding ArticleList}"
ItemTemplate="{StaticResource lbTmp}" Margin="0 0 0 0 "
HorizontalAlignment="Left" VerticalAlignment="Top"
Height="400" >
</ListBox>
</Grid>

b.Cs代码如下：

private void Button_Click(object sender, RoutedEventArgs e)
{
Button btn=sender as Button;
//获取父级StackPanel
StackPanel spParent1 = VisualTreeHelper.GetParent(btn) as StackPanel;
//通过名字找到当前Item列的tbName元素
TextBox tb = spParent1.FindName("tbName") as TextBox;
tb.Text = tb.Text + "点击";
//获得祖父级StackPanel
StackPanel spParent2 = VisualTreeHelper.GetParent(spParent1) as StackPanel;
//获取到其子元素
StackPanel hidPanel = VisualTreeHelper.GetChild(spParent2, 1) as StackPanel;
//设置动作
btn.Content = btn.Content.ToString() == "展开" ? "隐藏" : "展开";
hidPanel.Visibility =
hidPanel.Visibility == Visibility.Visible ? Visibility.Collapsed : Visibility.Visible;
}

如需源码请点击 SLDataTemplate2.zip 下载。下面是效果图：

本文链接

Silverlight实用窍门系列：65.Silverlight的数据模板DataTemplate(一)使用数据模板

2012-05-07T03:25:00Z

在Silverlight中，我们的数据列表显示控件有ListBox、DataGrid等。对于显示出来的数据条目样式外观的管理是通过DataTemplate（数据模板）来完成的。本节将从DataTemplate基础说起如何使用DataTemplate。

首先我们准备数据源如下:

/// <summary>
/// 文章Model
/// </summary>
public class ArticleModel
{
public string ArtName { get; set; }

public string ArtContent { get; set; }

public string ArtAuthor { get; set; }

public string ArtUpdateTime { get; set; }
}

/// <summary>
/// 文章列表
/// </summary>
public class ArtList
{
public ArtList()
{
ArticleList = new List<ArticleModel>();
ArticleList.Add(new ArticleModel() { ArtName = "成都", ArtContent = "天府之国",
ArtAuthor = "leung", ArtUpdateTime = "2012-04-05 11:12:36" });
ArticleList.Add(new ArticleModel() { ArtName = "上海", ArtContent = "翡翠明珠",
ArtAuthor = "aiLen", ArtUpdateTime = "2012-05-16 21:32:10" });
ArticleList.Add(new ArticleModel() { ArtName = "广州", ArtContent = "沿海城市",
ArtAuthor = "minghe", ArtUpdateTime = "2012-01-17 05:01:45" });
ArticleList.Add(new ArticleModel() { ArtName = "西藏", ArtContent = "高原城市",
ArtAuthor = "weifeng", ArtUpdateTime = "2012-03-22 09:30:14" });
}

/// <summary>
/// 文章列表属性
/// </summary>
public List<ArticleModel> ArticleList { get; set; }
}

如何在前台控件中绑定数据源呢？如同上一节所述，设置一个静态资源

//引用域名空间
xmlns:local="clr-namespace:SLDataTemplate"
//初始化为静态资源
<UserControl.Resources>
<local:ArtList x:Key="SourceList"></local:ArtList>
</UserControl.Resources>
//设置为数据上下文
<Grid x:Name="LayoutRoot" Background="White" DataContext="{StaticResource SourceList}">
　 //设置数据源绑定
<ListBox x:Name="lbArt" ItemsSource="{Binding ArticleList}" />
</Grid>

其次以ListBox为例，在本文中有三种方式：

一、在ListBox.ItemTemplate中直接添加DataTemplate。

二、将DataTemplate作为Resources，ListBox中属性 ItemTemplate="{StaticResource lbTmp}"引用。

<UserControl.Resources>
<DataTemplate x:Key="lbTmp">
<StackPanel Orientation="Horizontal">
<TextBlock Text="{Binding ArtName}"></TextBlock>
<TextBox Text="{Binding ArtContent}"></TextBox>
<TextBox Text="{Binding ArtAuthor}"></TextBox>
<TextBlock Text="{Binding ArtUpdateTime}"></TextBlock>
</StackPanel>
</DataTemplate>
</UserControl.Resources>

三、将DataTemplate在后台代码编写，然后在后台代码中指定。

　 //前台代码
<ListBox x:Name="lbCsRet" Margin="0 370 0 0 " HorizontalAlignment="Left"
VerticalAlignment="Top" Width="350" Height="300" >
</ListBox>

//后台代码

public MainPage()
{
InitializeComponent();
DataTemplate dtemp = GetTemplate();
this.lbCsRet.ItemTemplate = dtemp;
this.lbCsRet.ItemsSource = new ArtList().ArticleList;
}
private DataTemplate GetTemplate()
{
string xamlString = @"<DataTemplate
xmlns=""http://schemas.microsoft.com/winfx/2006/xaml/presentation""
xmlns:x=""http://schemas.microsoft.com/winfx/2006/xaml"">
<StackPanel Orientation=""Horizontal"">
<TextBlock Text=""{Binding ArtName}""></TextBlock>
<TextBox Text=""{Binding ArtContent}""></TextBox>
<TextBox Text=""{Binding ArtAuthor}""></TextBox>
<TextBlock Text=""{Binding ArtUpdateTime}""></TextBlock>
</StackPanel>
</DataTemplate>";
return (DataTemplate)XamlReader.Load(xamlString);
}

最后我们可以看看同样在DataGrid中使用DataTemplate。

<sdk:DataGrid ItemsSource="{Binding ArticleList}" Margin="370 370 0 0 "
HorizontalAlignment="Left" VerticalAlignment="Top"
Width="350" Height="300" AutoGenerateColumns="False" >
<sdk:DataGrid.Columns>
<sdk:DataGridTemplateColumn Header="列表" CellTemplate="{StaticResource lbTmp}">
</sdk:DataGridTemplateColumn>
</sdk:DataGrid.Columns>
</sdk:DataGrid>

下面我们来看看运行效果，如需源码请点击 SLDataTemplate.zip 下载。

本文链接

Silverlight实用窍门系列：64.Silverlight中的DataContext和ItemsSource

2012-04-23T04:30:00Z

在Silverlight中我们经常看到数据绑定源由DataContext或者ItemsSource指定，那么他们之间的区别有哪些呢？

DataContext：从英文字母意思是数据上下文，在Silverlight中某个父级元素设置了DataContext，那么其子元素将可以继承并且使用DataContext中的属性。DataContext绑定的数据源可以是实体集合、实体、属性等。

ItemsSource:其数据源通常是实体集合（多列数据），无法让其子元素继承使用。

下面我们以一个实例主要讲解DataContext的用法，其中在父级元素Grid设置了一个DataContext属性绑定实体，该实体内部有一个属性为实体集合，此实体集合用于Grid的子元素ListBox的ItemsSource属性绑定。代码如下：

首先我们看两个实体，其中一个实体属性为List<>:

public class ClaModel
{
public ClaModel()
{
ClaName = "五年级三班";
ClaInfo = "全校最好的班级，获得多项荣誉";
StuList = new List<StuModel>()
{
new StuModel(){StuName="刘三", StuAge=15, StuInfo="他很勤奋"},
new StuModel(){StuName="李四", StuAge=14, StuInfo="他很懒惰"},
new StuModel(){StuName="王五", StuAge=16, StuInfo="他很聪明"}
};
}
public string ClaName { get; set; }

public string ClaInfo { get; set; }

public List<StuModel> StuList { get; set; }
}

public class StuModel
{
public string StuName { get; set; }

public int StuAge { get; set; }

public string StuInfo { get; set; }

}

其次我们来看Xaml代码绑定如下：

最后我们看看另外一种后台绑定DataContext的方式。

public partial class MainPage : UserControl
{
public MainPage()
{
InitializeComponent();

//第二种方式：也可以用后台代码绑定DataContext
//this.LayoutRoot.DataContext = new ClaModel();
}
}

如需源码请点击 SLDataContext.zip 下载，效果图如下：

本文链接

Silverlight实用窍门系列：63.Silverlight中的Command，自定义简单Command

2012-04-16T06:16:00Z

在Silverlight中的MVVM模式下将前台页面和ViewModel界面交互分离开是通过本节所要讲述的Command实现的。我们自定义一个Command需要继承于ICommand接口并且实现这个接口。它有CanExecute()、Execute()方法和CanExecuteChanged事件组成。

CanExecute()：判断是否继续执行操作。

Execute()：执行操作的内容。

CanExecuteChanged：当出现影响是否应执行该命令的更改时发生。

首先：自定义的一个btnCommand。

public class btnCommand:ICommand
{
private bool canExe;
/// <summary>
/// 构造函数设置是否执行操作
/// </summary>
/// <param name="canexe"></param>
public btnCommand(bool canexe)
{
this.canExe = canexe;
}

/// <summary>
/// 判断是否执行操作
/// </summary>
/// <param name="parameter"></param>
/// <returns></returns>
public bool CanExecute(object parameter)
{
if (canExe)
{
return true;
}
return false;
}

/// <summary>
/// 是否执行操作的变更发生时
/// </summary>
public event EventHandler CanExecuteChanged;

/// <summary>
/// 执行操作的内容，可以变为Action行为
/// </summary>
/// <param name="parameter"></param>
public void Execute(object parameter)
{
if (parameter != null)
{ MessageBox.Show(parameter.ToString()); }
else
{
MessageBox.Show("未设置CommandParameter");
}
}
}

其次：定义一个ViewModel，并且在构造函数中初始化两个Command属性。

public class BtnViewModel
{
// 设置两个命令
public ICommand BtnCommand { get; set; }
public ICommand BtnCommandTrue { get; set; }
public BtnViewModel()
{
//初始化两个命令值
BtnCommand = new btnCommand(false);
BtnCommandTrue = new btnCommand(true);
}
}

再次将ViewModel初始化为页面数据源

<UserControl.DataContext>
<local:BtnViewModel />
</UserControl.DataContext>

最后：前台的两个按钮绑定Command

如需源码请点击 SLICommand.zip 下载，下面是效果图。有一个按钮CanExecute，有一个不能点击。

本文链接

Silverlight实用窍门系列：62.Silverlight中的Action动作TargetedTriggerAction、TriggerAction

2012-04-09T02:36:00Z

在Silverlight中的Action是指动作的意思，在Trigger触发器触发的时候，执行Action动作。在我们自定义Action的时候可以定义两种Action分别是继承于TargetedTriggerAction<T>和TriggerAction<T>的。

TriggerAction<T>：继承于此的自定义Action动作的操作对象是关联采用此Action的对象。

TargetedTriggerAction<T>：继承于此的自定义Action动作的操作对象可以是其他对象，由TagetName指定的对象。

本文在前一篇文章的实例基础上增加了一个自定义的Action。继承于TriggerAction和TargetedTriggerAction都可以重写以下三个方法：OnAttached()、OnDetaching()、Invoke(object parameter)，其中TargetedTriggerAction还需要另外多重写一个OnTargetChanged(UIElement oldTarget, UIElement newTarget)方法，以便在设置了TargetName属性的时候能够将操作对象设置为指定的其他对象。

继承于TriggerAction<T>的Action代码如下：

//动作
public class InvokeAction : TriggerAction <UIElement>
{
//直接使用后台代码执行动作
protected override void Invoke(object parameter)
{
if (ToInvoke != null)
{
ToInvoke(parameter, new RoutedEventArgs() { });
}
}

public delegate void Handler(object sender, RoutedEventArgs e);
public event Handler ToInvoke;

/// <summary>
/// 装载对象
/// </summary>
protected override void OnAttached()
{
base.OnAttached();
}

/// <summary>
/// 卸载对象
/// </summary>
protected override void OnDetaching()
{
base.OnDetaching();
}

}

继承于TargetedTriggerAction<T>的Action代码如下：

public class InvokeTargetAction : TargetedTriggerAction<UIElement>
{
private UIElement element;

/// <summary>
/// 装载对象
/// </summary>
protected override void OnAttached()
{
base.OnAttached();
if (Target != null)
{
element = Target;
}
}
/// <summary>
/// 卸载对象
/// </summary>
protected override void OnDetaching()
{
base.OnDetaching();
element = null;
}

/// <summary>
/// 当此Action的TargetName属性赋值为某个按钮名称时出发此事件
/// </summary>
/// <param name="oldTarget"></param>
/// <param name="newTarget"></param>
protected override void OnTargetChanged(UIElement oldTarget, UIElement newTarget)
{
base.OnTargetChanged(oldTarget, newTarget);
if (element == null)
{
element = newTarget;
}
}

/// <summary>
/// 当触发器触发时运行此函数
/// </summary>
/// <param name="parameter"></param>
protected override void Invoke(object parameter)
{
ButtonBase btn = element as ButtonBase;
AutomationPeer peer = FrameworkElementAutomationPeer.CreatePeerForElement(btn); ;
IInvokeProvider invokeProvider = peer.GetPattern(PatternInterface.Invoke) as IInvokeProvider;
invokeProvider.Invoke();
}

}

MainPage.xaml代码如下，使用两种Action：

MainPage.xaml.cs代码如下：

public partial class MainPage : UserControl
{
public MainPage()
{
InitializeComponent();
}
//实现指定动作时出发的事件处理程序
private void PageClickHandler(object sender, RoutedEventArgs e)
{
PageEnum pageEnum = (PageEnum)sender;
string info = string.Empty;
if (pageEnum == PageEnum.PageLeft)
{
info = "向左翻页";
}
else if (pageEnum == PageEnum.PageRight)
{
info = "向右翻页";
}
MessageBox.Show(info);
}

private void button1_Click(object sender, RoutedEventArgs e)
{
MessageBox.Show("TargetedTriggerAction行为触发的事件");
}
}

当然还有一个自定义的Trigger代码没有贴出来，您可以点击 SLAction.zip 下载源文件，效果图如下：

本文链接

Silverlight实用窍门系列：61.Silverlight中的Trigger触发器,自定义翻页触发器

2012-03-26T03:13:00Z

在Silverlight应用程序和客户进行交互工作的时候可以不用写后台代码而通过Xaml代码来实现，在本文我们将学习了解Trigger触发器。

Trigger触发器：引发动作的因素，比如鼠标点击、键盘输入、鼠标双击、键盘Enter键敲入、鼠标中键滚动等等，这些都是触发动作交互的条件。

Trigger分为以下两类：

一、系统定义好的如EventTrigger、PropertyTrigger等。

二、用户自定义的Trigger，例如在SL4中是没有鼠标双击事件的，这时我们可以新建一个DoubleClickTrriger，通过定时器检测当点击页面同一个地方的时间间隔小于300毫秒的都属于鼠标触发动作。

EventTrigger主要是指定触发的事件名称，如下例是在MouseLeftButtonUp的时候触发ChangePropertyAction动作，在本例中不作详细讲述：

自定义Trigger:本实例中我们自定义一个翻页的触发器，它通过在指定对象上按下按钮，然后滑动鼠标向左或者向右移动然后放开鼠标，自动检测是向左翻页还是向右翻页。自定义Trigger和Behavior一样只需要重写OnAttached和OnDetaching方法即可，自定义Trigger需要继承于TriggerBase<T>类。

自定义Trigger代码如下：

public class PaggerTrigger : TriggerBase<UIElement>
{
private Point _downPosition;

protected override void OnAttached()
{
base.OnAttached();
//加载事件
AssociatedObject.MouseLeftButtonDown += new MouseButtonEventHandler(AssociatedObject_MouseLeftButtonDown);
AssociatedObject.MouseLeftButtonUp += new MouseButtonEventHandler(AssociatedObject_MouseLeftButtonUp);
}

void AssociatedObject_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)
{
UIElement element = sender as UIElement;
_downPosition = e.GetPosition(element);
}

void AssociatedObject_MouseLeftButtonUp(object sender, MouseButtonEventArgs e)
{
UIElement element = sender as UIElement;
Point position = e.GetPosition(element);
double X_Content = position.X - _downPosition.X ;
PageEnum pageEnum = PageEnum.PageLeft;
if (Math.Abs(X_Content) > 10)
{
if (X_Content > 0)
{
pageEnum = PageEnum.PageRight;
}
else
{
pageEnum = PageEnum.PageLeft;
}
InvokeActions(pageEnum);
}
}

protected override void OnDetaching()
{
base.OnDetaching();
//卸载事件
AssociatedObject.MouseLeftButtonDown -= new MouseButtonEventHandler(AssociatedObject_MouseLeftButtonDown);
AssociatedObject.MouseLeftButtonUp -= new MouseButtonEventHandler(AssociatedObject_MouseLeftButtonUp);
}
}

/// <summary>
/// 指示翻页方向枚举
/// </summary>
public enum PageEnum
{
/// <summary>
/// 左翻页
/// </summary>
PageLeft,

/// <summary>
/// 右翻页
/// </summary>
PageRight
}

自定义的Action代码如下，注意Action是触发器被触发时执行的动作，下一篇会详细讲述，其代码如下：

//动作
public class InvokeAction : TargetedTriggerAction<UIElement>
{
protected override void Invoke(object parameter)
{
if (ToInvoke != null)
{
ToInvoke(parameter, new RoutedEventArgs() { });
}
}

public delegate void Handler(object sender, RoutedEventArgs e);
public event Handler ToInvoke;

}

在主页面调用的时候其Xaml代码如下：

在Xaml.cs代码如下：

最后如需源码请点击 SLTrigger.zip 下载，需要引用System.Windows.Interactivity.dll 。

本文链接

Silverlight实用窍门系列：60.Silverlight中自定义Behavior，实现图片动画渐变Behavior

2012-03-19T03:14:00Z

在Silverlight中我们需要了解Behavior行为，它可以将一些常用的行为、效果等封装起来，在需要调用的时候可以非常方便的调用，主要需要引用System.Windows.Interactivity.DLL。它的运行本质是为采用了Behavior行为的源对象自动加载处理事件。

我们自定义一个Behavior行为需要做到以下三点方可成功。

一、继承于System.Windows.Interactivity.DLL中的Behavior<T>类，其中的T可以更换为Image、TextBox、Label等所有的元素对象甚至是DependencyObject，表示这个自定义的Behavior可以作用于哪种控件。

二、重写覆盖OnAttached方法，在这个方法中需要为添加Behavior行为的对象附加事件.

三、重写覆盖OnDetaching方法，在这个方法中需要为删除Behavior行为的对象卸载事件.

定义好Behavior行为之后，在界面上需要如以下方式使用：

自定义的Behavior行为代码如下，是一个控制图片透明度的动画效果。

public class OpacityBehavior : Behavior<Image>
{
private double _From = 1;
private double _To = 0.6;
//装载DoubleAnimation动画的故事板
Storyboard sboard = new Storyboard();
DoubleAnimation danima = new DoubleAnimation();
Image img;

/// <summary>
/// 透明度从多少开始
/// </summary>
public double From
{
get { return _From; }
set { _From = value; }
}

/// <summary>
/// 透明度到多少结尾
/// </summary>
public double To
{
get { return _To; }
set { _To = value; }
}

/// <summary>
/// 在为某个对象添加Behavior行为时附加事件
/// </summary>
protected override void OnAttached()
{
base.OnAttached();

//清除故事版和资源
img = this.AssociatedObject as Image;
sboard.Children.Clear();
img.Resources.Clear();
//设置img控件的透明度的Double类型数字变化
danima.SetValue(Storyboard.TargetNameProperty, img.Name);
danima.SetValue(Storyboard.TargetPropertyProperty, new PropertyPath("UIElement.Opacity"));
danima.Duration = new Duration(new TimeSpan(0, 0, 1));
sboard.Children.Add(danima);
img.Resources.Add("Storyboard", sboard);

//绑定鼠标事件
img.MouseEnter += new MouseEventHandler(img_MouseEnter);
img.MouseLeave += new MouseEventHandler(img_MouseLeave);
}

/// <summary>
/// 在为某个对象移除Behavior行为时注销事件
/// </summary>
protected override void OnDetaching()
{
base.OnDetaching();
img.MouseEnter -= new MouseEventHandler(img_MouseEnter);
img.MouseLeave -= new MouseEventHandler(img_MouseLeave);
}

void img_MouseEnter(object sender, MouseEventArgs e)
{
danima.From = this.From;
danima.To = this.To;
sboard.Begin();
}

void img_MouseLeave(object sender, MouseEventArgs e)
{
danima.From = this.To;
danima.To = this.From;
sboard.Begin();
}
}

注意：A: AssociatedObject属性是使用此行为的对象。B:在行为中定义的属性可以在Xaml界面直接赋值。

最后，如需源码请点击 SLBehavior.zip 下载，效果如下两张图所示：

本文链接

Silverlight实用窍门系列：59.多个中心点联动多线的可拖动控件扩展为拓扑图

2012-03-13T06:09:00Z

在本系列的第17篇文章中“Silverlight实用窍门系列：17.中心点联动多线的可拖动控件（绘制工程图、拓扑图基础） ”，制作了基本的中心联动图标。有园友对此图的扩展不是很清晰，所以在本文中我们将在那基础上做一个简易的拓扑图。

首先：将黄球为中心，绿球为圆圈的节点封装为一个子控件，然后提供一个接口，该接口可以接收一条外部的直线，并且这个接口可以指定在子控件中外部链接线的起始点还是结束点。

public partial class UCCircle : UserControl
{
public UCCircle(double lineCount, double lineLenth, double centerX, double centerY)
{
InitializeComponent();
//让img1图片控件具有MouseDragElementBehavior行为，且为让此控件在拖动过程中执行dragBehavior_Dragging事件。
dragBehavior.Attach(this.img1);
dragBehavior.Dragging += new MouseEventHandler(dragBehavior_Dragging);
//设置img1可见，设置其初始位置。
img1.SetValue(Canvas.LeftProperty, centerX - 22.0);
img1.SetValue(Canvas.TopProperty, centerY - 22.0);
AddChirldren(lineCount, lineLenth, centerX, centerY);
}
MouseDragElementBehavior dragBehavior = new MouseDragElementBehavior();
//放所有的线的集合
private List<ucLine> ucLineList = new List<ucLine>();
private void AddChirldren(double lineCount, double lineLenth, double centerX, double centerY)
{
//设置平均角度
double angle = 360.0 / lineCount;
//设置线的起始点的坐标
for (int i = 0; i < lineCount; i++)
{
ucLine dline = new ucLine();
//设置线的半径
dline.R = lineLenth;
//设置线的起始点的坐标
dline.CenterX = centerX;
dline.CenterY = centerY;
XX = centerX;
YY = centerY;
//设置这根线的角度
dline.AngleAll = angle * (i);
CanvasDevice.Children.Add(dline);
//将所有的线添加到线集合中去，以供拖动过程中使用
ucLineList.Add(dline);
}
}
/// <summary>
/// 设置连接两个圈中心的线条
/// </summary>
public void SetLinkLine(LinkLineModel lineModel)
{

if (lineModel.PointType == PoiType.StartPoint)
{
lineModel.LinkLine.X1 = XX;
lineModel.LinkLine.Y1 = YY;
}
else
{
lineModel.LinkLine.X2 = XX;
lineModel.LinkLine.Y2 = YY;
}
if (LinkLineList == null)
LinkLineList = new List<LinkLineModel>();
LinkLineList.Add(lineModel);

}
/// <summary>
/// 中心点连接线的列表
/// </summary>
public List<LinkLineModel> LinkLineList { set; get; }

//移动后的中心点位置
public double XX { get; set; }
public double YY { get; set; }

/// <summary>
/// img1被拖动的时候触发的事件
/// </summary>
/// <param name="sender"></param>
/// <param name="e"></param>
void dragBehavior_Dragging(object sender, MouseEventArgs e)
{
MouseDragElementBehavior dragBehavior2 = sender as MouseDragElementBehavior;
//获取到控件被拖动后的位置坐标
double x1 = dragBehavior2.X + 22;
double y1 = dragBehavior2.Y + 22;
XX = x1;
YY = y1;
foreach (ucLine dline in ucLineList)
{
//设置lineD线的起点坐标为移动后的坐标位置
dline.LineD.X1 = x1;
dline.LineD.Y1 = y1;
}

//设置起始点或者终结点的位置
foreach (LinkLineModel linemodel in LinkLineList)
{
if (linemodel.PointType == PoiType.StartPoint)
{
linemodel.LinkLine.X1 = XX;
linemodel.LinkLine.Y1 = YY;
}
else
{
linemodel.LinkLine.X2 = XX;
linemodel.LinkLine.Y2 = YY;
}
}

}
}

UCCircle.Xaml代码如下：

接口中指定线条是起始点还是终结点，以供子控件识别并且随时改变两个子控件中的连接线位置。

public class LinkLineModel
{
/// <summary>
/// 起点线还是终点线
/// </summary>
public PoiType PointType { get; set; }

/// <summary>
/// 线
/// </summary>
public Line LinkLine { get; set; }

/// <summary>
/// 线条名字
/// </summary>
public string LineName { get; set; }
}

定义了一个枚举如下：

/// <summary>
/// 指定点的类型是起始点还是终结点
/// </summary>
public enum PoiType
{
StartPoint,
EndPoint
}

最后看MainPage.xaml.cs代码如下，构造了三个子控件，两条子控件之间的连接线：

public partial class MainPage : UserControl
{
public MainPage()
{
InitializeComponent();
CanvasDevice.Children.Clear();

//连接uc和uc1的线条
Line line = new Line();
line.Stroke = new SolidColorBrush(Color.FromArgb(255, 255, 0, 0));
line.AllowDrop = true;

//连接uc1和uc2的线条
Line line2 = new Line();
line2.Stroke = new SolidColorBrush(Color.FromArgb(255, 255, 0, 0));
line2.AllowDrop = true;

//声明三个圆心的图
UCCircle uc = new UCCircle(5, 100, 250, 150);
UCCircle uc1 = new UCCircle(6, 100, 160, 370);
UCCircle uc2 = new UCCircle(6, 100, 450, 400);

//设置线条一在子控件中
uc.SetLinkLine(new LinkLineModel() { LinkLine= line, PointType= PoiType.StartPoint });
uc1.SetLinkLine(new LinkLineModel() { LinkLine = line, PointType = PoiType.EndPoint });

//设置线条二在子控件中
uc1.SetLinkLine(new LinkLineModel() { LinkLine = line2, PointType = PoiType.StartPoint });
uc2.SetLinkLine(new LinkLineModel() { LinkLine = line2, PointType = PoiType.EndPoint });

//将线条和子空间添加到Canvas中
CanvasDevice.Children.Add(line);
CanvasDevice.Children.Add(line2);
CanvasDevice.Children.Add(uc);
CanvasDevice.Children.Add(uc1);
CanvasDevice.Children.Add(uc2);
}
}

如需源码请点击 SLLinkLine.rar 下载。下面是效果图，建议下载源码之后观看。

本文链接