博客园  :: 首页  :: 新随笔  :: 联系 :: 订阅 订阅  :: 管理

[索引页]
[源码下载]


稳扎稳打Silverlight(46) - 4.0UI之FlowDirection, TextTrimming, 响应鼠标滚轮事件, 响应鼠标右键事件, 全屏的新特性



作者:webabcd


介绍
Silverlight 4.0 用户界面(UI)相关:

  • FlowDirection - 指定文本或界面元素在它们的父元素中的流动方向 
  • TextTrimming - 文字溢出时的显示方式 
  • 响应鼠标的滚轮事件
  • 响应鼠标的右键事件
  • 全屏的新特性 - 当其他程序获得焦点时,是否退出全屏模式



在线DEMO
http://www.cnblogs.com/webabcd/archive/2010/08/09/1795417.html


示例
1、演示 FlowDirection 的效果
FlowDirectionDemo.xaml

代码
<navigation:Page x:Class="Silverlight40.UI.FlowDirectionDemo" 
           xmlns
="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
           xmlns:x
="http://schemas.microsoft.com/winfx/2006/xaml" 
           xmlns:d
="http://schemas.microsoft.com/expression/blend/2008"
           xmlns:mc
="http://schemas.openxmlformats.org/markup-compatibility/2006"
           xmlns:navigation
="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls.Navigation"
           Title
="FlowDirectionDemo Page">
    
<StackPanel Width="200" HorizontalAlignment="Left">
        
        
<!--
            FrameworkElement.FlowDirection - 指定文本或界面元素在它们的父元素中的流动方向 [System.Windows.FlowDirection 枚举]
                FlowDirection.LeftToRight - 内容从左到右流动(默认值)
                FlowDirection.RightToLeft - 内容从右到左流动
        
-->
        
        
<StackPanel Orientation="Horizontal" FlowDirection="RightToLeft">
            
<TextBlock Text="1" />
            
<TextBlock Text="2" />
            
<TextBlock Text="3" />
        
</StackPanel>

    
</StackPanel>
</navigation:Page>



2、演示 TextTrimming 的效果
TextTrimming.xaml

代码
<navigation:Page x:Class="Silverlight40.UI.TextTrimming" 
           xmlns
="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
           xmlns:x
="http://schemas.microsoft.com/winfx/2006/xaml" 
           xmlns:d
="http://schemas.microsoft.com/expression/blend/2008"
           xmlns:mc
="http://schemas.openxmlformats.org/markup-compatibility/2006"
           xmlns:navigation
="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls.Navigation"
           Title
="TextTrimming Page">
    
<Grid x:Name="LayoutRoot">
        
<StackPanel HorizontalAlignment="Left">
            
            
<!--
                TextBlock.TextTrimming - 文字溢出时的显示方式 [System.Windows.TextTrimming 枚举]
                    TextTrimming.None - 不做任何处理
                    TextTrimming.WordEllipsis - 在边界处,用省略号代替剩余文本
            
-->

            
<TextBlock Text="abcdefghijklmnopqrstuvwxyz" ToolTipService.ToolTip="abcdefghijklmnopqrstuvwxyz" Width="100" TextTrimming="None" />
            
            
<TextBlock Text="abcdefghijklmnopqrstuvwxyz" ToolTipService.ToolTip="abcdefghijklmnopqrstuvwxyz" Width="100" TextTrimming="WordEllipsis" />

        
</StackPanel>
    
</Grid>
</navigation:Page>



3、演示如何响应鼠标滚轮事件
MouseWheel.xaml

代码
<navigation:Page x:Class="Silverlight40.UI.MouseWheel" 
           xmlns
="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
           xmlns:x
="http://schemas.microsoft.com/winfx/2006/xaml" 
           xmlns:d
="http://schemas.microsoft.com/expression/blend/2008"
           xmlns:mc
="http://schemas.openxmlformats.org/markup-compatibility/2006"
           xmlns:navigation
="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls.Navigation"
           xmlns:sdk
="http://schemas.microsoft.com/winfx/2006/xaml/presentation/sdk"
           Title
="MouseWheel Page">
    
<Grid x:Name="LayoutRoot">
        
<StackPanel HorizontalAlignment="Left" Orientation="Horizontal">

            
<!-- 
                在 Silverlight 4.0 中像 ListBox, DataGrid, ComboBox 这类的控件,如果出现了垂直滚动条的话,则可以通过滚动鼠标滚轮的方法来控制该滚动条
            
-->
            
<ListBox Name="listBox" VerticalAlignment="Top" Width="100" Height="200">
                
<ListBox.ItemTemplate>
                    
<DataTemplate>
                        
<StackPanel Orientation="Horizontal">
                            
<TextBlock Text="{Binding}" Margin="1" />
                        
</StackPanel>
                    
</DataTemplate>
                
</ListBox.ItemTemplate>
            
</ListBox>
            
<sdk:DataGrid Name="dataGrid" VerticalAlignment="Top" Width="100" Height="200" IsReadOnly="True" AutoGenerateColumns="True" />
            
<ComboBox Name="comboBox" VerticalAlignment="Top" Width="100" Height="20" MaxDropDownHeight="200" />

            
<!-- 
                用于演示如何响应鼠标的滚轮事件 
            
-->
            
<StackPanel>
                
<TextBlock Name="lblMsg" VerticalAlignment="Top" />
                
<Grid Name="grid" Width="100" Height="100">
                    
<Rectangle Fill="Yellow" />
                    
<TextBlock Text="Mouse wheel me" />
                
</Grid>
            
</StackPanel>
            
        
</StackPanel>
    
</Grid>
</navigation:Page>


MouseWheel.xaml.cs

代码
/*
 * 本例演示如何响应鼠标滚轮事件
 * UIElement.MouseWheel - 鼠标滚轮滚动时所触发的事件
 *     MouseWheelEventArgs.Delta - 滚轮向上滚动为正数;滚轮向下滚动为负数
 
*/

using System;
using System.Collections.Generic;
using System.Linq;
using System.Net;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;
using System.Windows.Navigation;

namespace Silverlight40.UI
{
    
public partial class MouseWheel : Page
    {
        
public MouseWheel()
        {
            InitializeComponent();
        }

        
protected override void OnNavigatedTo(NavigationEventArgs e)
        {
            List
<int> list = new List<int>();
            
for (int i = 0; i < 100; i++)
            {
                list.Add(i);
            }

            listBox.ItemsSource 
= list;
            dataGrid.ItemsSource 
= list;
            comboBox.ItemsSource 
= list;

            grid.MouseWheel 
+= new MouseWheelEventHandler(grid_MouseWheel);
        }

        
void grid_MouseWheel(object sender, MouseWheelEventArgs e)
        {
            lblMsg.Text 
= "Delta: " + e.Delta;
        }
    }
}



4、演示如何响应鼠标右键事件
MouseRightClick.xaml

代码
<navigation:Page x:Class="Silverlight40.UI.MouseRightClick" 
           xmlns
="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
           xmlns:x
="http://schemas.microsoft.com/winfx/2006/xaml" 
           xmlns:d
="http://schemas.microsoft.com/expression/blend/2008"
           xmlns:mc
="http://schemas.openxmlformats.org/markup-compatibility/2006"
           xmlns:navigation
="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls.Navigation"
           Title
="MouseRightClick Page">
    
<Grid x:Name="LayoutRoot">
        
<StackPanel HorizontalAlignment="Left">
            
            
<TextBlock Name="lblMsg" Width="120" />

            
<Button Name="button" Content="right click me" Width="120" />
            
        
</StackPanel>
    
</Grid>
</navigation:Page>


MouseRightClick.xaml.cs

代码
/*
 * 本例演示如何响应鼠标右键事件
 * UIElement.MouseRightButtonDown - 鼠标右键按下时所触发的事件
 * UIElement.MouseRightButtonUp  - 鼠标右键抬起时所触发的事件
 
*/

using System;
using System.Collections.Generic;
using System.Linq;
using System.Net;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;
using System.Windows.Navigation;

namespace Silverlight40.UI
{
    
public partial class MouseRightClick : Page
    {
        
public MouseRightClick()
        {
            InitializeComponent();
        }

        
protected override void OnNavigatedTo(NavigationEventArgs e)
        {
            button.MouseRightButtonDown 
+= new MouseButtonEventHandler(button_MouseRightButtonDown);
            button.MouseRightButtonUp 
+= new MouseButtonEventHandler(button_MouseRightButtonUp);
        }

        
void button_MouseRightButtonDown(object sender, MouseButtonEventArgs e)
        {
            lblMsg.Text 
= "鼠标右键 Down";
            e.Handled 
= true;
        }

        
void button_MouseRightButtonUp(object sender, MouseButtonEventArgs e)
        {
            lblMsg.Text 
= "鼠标右键 Up";
            e.Handled 
= true;
        }
    }
}



5、演示全屏的新特性
FullScreen.xaml

代码
<navigation:Page x:Class="Silverlight40.UI.FullScreen" 
           xmlns
="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
           xmlns:x
="http://schemas.microsoft.com/winfx/2006/xaml" 
           xmlns:d
="http://schemas.microsoft.com/expression/blend/2008"
           xmlns:mc
="http://schemas.openxmlformats.org/markup-compatibility/2006"
           xmlns:navigation
="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls.Navigation"
           Title
="FullScreen Page">
    
<Grid x:Name="LayoutRoot">
        
        
<Button Name="btnFullScreen" Width="100" Height="50" Content="最大化/还原" Click="btnFullScreen_Click" />
        
    
</Grid>
</navigation:Page>


FullScreen.xaml.cs

代码
/*
 * Application.Current.Host.Content.FullScreenOptions - 全屏的选项
 *     System.Windows.Interop.FullScreenOptions.None - 当其他程序获得焦点时,退出全屏模式(默认值)
 *     System.Windows.Interop.FullScreenOptions.StaysFullScreenWhenUnfocused - 当其他程序获得焦点时,保持全屏模式
 * 当设置为“StaysFullScreenWhenUnfocused”全屏时会弹出对话框,要求用户确认是否使用“StaysFullScreenWhenUnfocused”的全屏模式。如果程序是“被信任的应用程序”则不会弹出该对话框
 
*/

using System;
using System.Collections.Generic;
using System.Linq;
using System.Net;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;
using System.Windows.Navigation;

namespace Silverlight40.UI
{
    
public partial class FullScreen : Page
    {
        
public FullScreen()
        {
            InitializeComponent();
        }

        
protected override void OnNavigatedTo(NavigationEventArgs e)
        {

        }

        
private void btnFullScreen_Click(object sender, RoutedEventArgs e)
        {
            Application.Current.Host.Content.FullScreenOptions 
= System.Windows.Interop.FullScreenOptions.StaysFullScreenWhenUnfocused;
            Application.Current.Host.Content.IsFullScreen 
^= true;
        }
    }
}



OK
[源码下载]