Silverlight 4中更换页面皮肤的功能

SL 4的鼠标右键事件功能：

鼠标右键事件我个人觉得比较使用的功能是更换页面皮肤，或者是弹出子窗口来添加临时需要填写的数据，或者是选择工具，或者是转到不同的连接等等。看项目需要你可以稍微想想，这个功能可以就是一个亮点。

在Silverlight 4中有个MouseRightButtonDown和MouseRightButtonUp事件，你可以给把它们合起来使用完成很多功能。当然，有LeftButton也有同样也添加了Up和Down事件。

我在Silverlight官网看了段视频介绍这个功能，它主要是介绍了右键修改皮肤，和ChildWindow弹出。我这里会边写边想着个大家多举几个例子。

1. 创建一个SilverLight4的应用程序。

2. 然后是在页面随便加点东西，我加了一个Rectangle，如下图

Ok，先测试下右键鼠标Down事件，

frame.MouseRightButtonDown+=new MouseButtonEventHandler(frame_MouseRightButtonDown);

委托的方法是MouseRightButtonDown，它的代码这里就写个MessageBox弹出，

void frame_MouseRightButtonDown(object sender,MouseButtonEventArgs e)

{

MessageBox.Show("button right clicked on the frame");

}

运行一下，：

3. 更换这个Rectangle的颜色，也就是皮肤吧：

使用Popup控件来作为右键时皮肤项的容器。Popup中添加一个Grid。最后出来的结构如下：

ListView中存放的是菜单，每个颜色都会添加一个右键的down事件，当事件发生时修改皮肤颜色。Grid也没什么特殊作用就是个容器，ListView相同。比较特殊的是Canvas这个控件，它添加了两个事件：鼠标右键Down和鼠标左键Down，任何一个发生时，它都会去查看当的Popup是否打开，如果是打开就给关闭。

代码如下:

_popup = new Popup();

_grid = new Grid();

_popup.Child = _grid;

_canvas = new Canvas();

_canvas.MouseLeftButtonDown += (sender,args) => { OnClickOutside(); };

_canvas.MouseRightButtonDown += (sender,args) => { args.Handled = true; OnClickOutside(); };

_canvas.Background = new SolidColorBrush(Colors.Transparent);

_grid.Children.Add(_canvas);

_content = GetContent();

_content.HorizontalAlignment = HorizontalAlignment.Left;

_content.VerticalAlignment = VerticalAlignment.Top;

_content.Margin = new Thickness(_location.X,_location.Y,0);

_grid.Children.Add(_content);

UpdateSize();

这里你发现没有ListBox，而只能看到一个_content,它是个自定义的控件：

Grid grid = new Grid() { Width = 100,Height = 115 };

Border border = new Border() { BorderBrush = new SolidColorBrush(Colors.Black),BorderThickness = new Thickness(1),Background = new SolidColorBrush(Colors.LightGray) };

grid.Children.Add(border);

TextBlock red = new TextBlock() { Text = "Red",Width = 90 };

red.MouseLeftButtonUp += new MouseButtonEventHandler(ChangeColorRed);

TextBlock blue = new TextBlock() { Text = "Blue",Width = 90 };

blue.MouseLeftButtonUp += new MouseButtonEventHandler(ChangeColorBlue);

TextBlock green = new TextBlock() { Text = "Green",Width = 90 };

green.MouseLeftButtonUp += new MouseButtonEventHandler(ChangeColorGreen);

TextBlock yellow = new TextBlock() { Text = "Yellow",Width = 90 };

yellow.MouseLeftButtonUp += new MouseButtonEventHandler(ChangeColorYellow);

TextBlock cancel = new TextBlock() { Text = "Cancel Menu",Width = 90 };

cancel.MouseLeftButtonUp += new MouseButtonEventHandler(CancelContextMenu);

ListBox options = new ListBox();

options.Items.Add(red);

options.Items.Add(blue);

options.Items.Add(green);

options.Items.Add(yellow);

options.Items.Add(cancel);

grid.Children.Add(options);

就是在它里面添加了ListBox 。

最后就是在页面加载时给需要改变颜色的控件添加右键事件：

frame.MouseRightButtonDown+=new MouseButtonEventHandler(frame_MouseRightButtonDown);

frame.MouseRightButtonUp+= new MouseButtonEventHandler(frame_MouseRightButtonUp);

void frame_MouseRightButtonDown(object sender,MouseButtonEventArgs e)

{

e.Handled = true;

}

void frame_MouseRightButtonUp(object sender,MouseButtonEventArgs e)

{

SkinChangeContextMenu contextMenu = new SkinChangeContextMenu(frame);

contextMenu.Show(e.GetPosition(LayoutRoot));

}

运行结果：

4. 使用MouseRightDown事件来改变一个Canvas的大小；

还是以上面的Canvas为例子，鼠标右键是我们需要让一个Popup显示出来，通过Popup上的两个Slider来设置Canvas的Height和Width。

Xaml代码：

<Rectangle Height="254" HorizontalAlignment="Left" Margin="12,24,0" Name="frame"

stroke="Black" strokeThickness="4" VerticalAlignment="Top" Width="320" RadiusX="15" RadiusY="15" Fill="Red"

MouseRightButtonDown="frame_MouseRightButtonDown"

MouseRightButtonUp="frame_MouseRightButtonUp" />

</Grid>

</Border>

</Popup>

当在Canvas右键点击时，我们让这个Popup弹出来：

private void frame_MouseRightButtonDown(object sender,MouseButtonEventArgs e)

{

e.Handled = true;

}

private void frame_MouseRightButtonUp(object sender,MouseButtonEventArgs e)

{

pop.HorizontalOffset = e.GetPosition(null).X + 2;

pop.VerticalOffset = e.GetPosition(null).Y + 2;

pop.IsOpen = true;

}

Popup伤的Slider添加的事件代码：

private void slheight_ValueChanged(object sender,RoutedPropertyChangedEventArgs<double> e)

{

if (frame == null) return;

frame.Height = slheight.Value;

}

private void slWidth_ValueChanged(object sender,RoutedPropertyChangedEventArgs<double> e)

{

if (frame == null) return;

frame.Width = slWidth.Value;

}

private void btnDone_Click(object sender,RoutedEventArgs e)

{

pop.IsOpen = false;

}

现在运行下，看看结果：

拖动滚动条就可以让后面红色的那个Rectangle高度或者宽度变化。

5. 刚才试着给那个popup添加哥drag –drop功能，没成功。

Silverlight 4中更换页面皮肤的功能

相关推荐