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, 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代码:
<Grid x:Name="LayoutRoot" Background="White">
<TextBlock Text="Right-click to customize" FontWeight="Bold" Margin="12,0,0,0"/>
<Rectangle Height="254" HorizontalAlignment="Left" Margin="12,24,0,0" Name="frame"
Stroke="Black" StrokeThickness="4" VerticalAlignment="Top" Width="320" RadiusX="15" RadiusY="15" Fill="Red"
MouseRightButtonDown="frame_MouseRightButtonDown"
MouseRightButtonUp="frame_MouseRightButtonUp" />
<Popup x:Name="pop">
<Border Background="LightBlue" Margin="10" BorderBrush="Blue" CornerRadius="5" BorderThickness="3">
<Grid Width="235" Height="138">
<TextBlock Text="Customize:" FontWeight="Bold" HorizontalAlignment="Center" Margin="83,0,83,116" />
<TextBlock Height="23" HorizontalAlignment="Left" Margin="19,30,0,0" Name="textBlock1" Text="Width:" VerticalAlignment="Top" Width="60" />
<Slider Height="23" Name="slWidth" Margin="114,31,31,84" Value="320" Minimum="10" Maximum="320" ValueChanged="slWidth_ValueChanged" />
<TextBlock Height="23" HorizontalAlignment="Left" Margin="19,72,0,0" Name="Height" Text="Height:" VerticalAlignment="Top" Width="60" />
<Slider Height="23" Margin="114,72,31,43" Name="slheight" Minimum="10" Value="254" Maximum="254" ValueChanged="slheight_ValueChanged" />
<Button Content="Done" Height="23" HorizontalAlignment="Left" Margin="129,109,0,0" Name="btnDone" Click="btnDone_Click" VerticalAlignment="Top" Width="75" />
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功能,没成功。