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

[索引页]
[源码下载]


稳扎稳打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
[源码下载]

posted @ 2010-08-23 08:36  webabcd  阅读(5997)  评论(10)  编辑  收藏  举报