分类:Silverlight

用Silverlight做了一个导航条

[ Thursday, June 26, 2008 ]
Tags:  silverlight  Silverlight导航条  

效果:鼠标放到文字连接上,显示一些悬停效果(用png图片),点击时,连接到某个页面.

1.MenuControl.xaml文件:
 

<UserControl x:Class="DemoApp.MenuControl"
    xmlns="http://schemas.microsoft.com/client/2007" 
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
    Width="400" Height="300">
    <Grid x:Name="LayoutRoot" Background="White">
        <Canvas Background="#2595EB">
            <Image x:Name="img01" Source="bg.png"  Canvas.Left="10" Canvas.Top="120" Width="80" Height="25" Visibility="Collapsed"></Image>
            <Image x:Name="img02" Source="bg.png"  Canvas.Left="62" Canvas.Top="120" Width="100" Height="25" Visibility="Collapsed"></Image>
            
            <TextBlock x:Name="item01" TextWrapping="Wrap" MouseEnter="item01_MouseEnter" MouseLeave="item01_MouseLeave" MouseLeftButtonUp="item01_MouseLeftButtonUp" Canvas.Left="30" Canvas.Top="120" Text="Index"></TextBlock>
            <TextBlock x:Name="item02" TextWrapping="Wrap" MouseEnter="item02_MouseEnter" MouseLeave="item02_MouseLeave" MouseLeftButtonUp="item02_MouseLeftButtonUp" Canvas.Left="95" Canvas.Top="120" Text="Start"></TextBlock>
                       
            
            <TextBlock x:Name="msg" TextWrapping="Wrap" Canvas.Left="120" Canvas.Top="160"></TextBlock>            
        </Canvas>
    </Grid>
</UserControl>

在这里,刚开始吧image的定义放到textblock后面了,结果鼠标放上去,那个图片一直闪,不稳定.调换后就好了.

2.MenuControl.xaml.cs文件:
 

using System;
using System.Collections.Generic;
using System.Linq;
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.Browser;

namespace DemoApp
{
    public partial class MenuControl : UserControl
    {
        HtmlWindow html = HtmlPage.Window;

        public MenuControl()
        {
            InitializeComponent();
        }

        private void item01_MouseEnter(object sender, MouseEventArgs e)
        {
            img01.Visibility = Visibility.Visible;
            item01.Cursor = Cursors.Hand;
            msg.Text = "go to index page.";
        }

        private void item01_MouseLeave(object sender, MouseEventArgs e)
        {
            img01.Visibility = Visibility.Collapsed;
            msg.Text = "";
        }

        private void item02_MouseEnter(object sender, MouseEventArgs e)
        {
            img02.Visibility = Visibility.Visible;
            item02.Cursor = Cursors.Hand;
            msg.Text = "go to start page.";
        }

        private void item02_MouseLeave(object sender, MouseEventArgs e)
        {
            img02.Visibility = Visibility.Collapsed;
            msg.Text = "";
        }      

        private void item01_MouseLeftButtonUp(object sender, MouseButtonEventArgs e)
        {
            html.Navigate(new Uri("/Default.aspx?id=index",UriKind.Relative));
        }

        private void item02_MouseLeftButtonUp(object sender, MouseButtonEventArgs e)
        {
            html.Navigate(new Uri("Default.aspx?id=start", UriKind.Relative));
        }
    }
}

相关文章:

Silverlight Video Show 微软实例  (2008-6-25 23:20:32)

Microsoft Silverlight Tools Beta 2 for Visual Studio 2008  (2008-6-9 9:44:13)

Silverlight 2 Beta 2功能透露 WPF框架兼容性增强  (2008-6-6 9:35:9)

微软Silverlight锋芒彰显 近30%PC用户享受到全新体验  (2008-4-16 21:7:23)

微软发布新版Silverlight插件  (2008-4-10 11:37:34)

Silverlight：Silverlight QQ群 欢迎大家  (2008-4-3 20:24:48)

关于Silverlight里中文字无法显示的解決方案[整理]   (2008-3-26 13:37:2)

Silverlight：诺基亚手机将添加微软Silverlight网络技术  (2008-3-24 17:2:13)

Silverlight：移动版Silverlight 1.0将于第二季度发布  (2008-3-20 18:17:11)

谷歌或收购Adobe对抗微软Silverlight  (2008-3-18 11:4:58)

点击这里获取该日志的TrackBack引用地址

发布:babycrazy | 分类:Silverlight | 评论:0 | 引用:0 | 浏览:
发表评论