用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>
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
<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;
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
namespace DemoApp
{
public partial class MenuControl : UserControl
{
HtmlWindow html = HtmlPage.Window;
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
public MenuControl()
{
InitializeComponent();
}
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
private void item01_MouseEnter(object sender, MouseEventArgs e)
{
img01.Visibility = Visibility.Visible;
item01.Cursor = Cursors.Hand;
msg.Text = "go to index page.";
}
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
private void item01_MouseLeave(object sender, MouseEventArgs e)
{
img01.Visibility = Visibility.Collapsed;
msg.Text = "";
}
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
private void item02_MouseEnter(object sender, MouseEventArgs e)
{
img02.Visibility = Visibility.Visible;
item02.Cursor = Cursors.Hand;
msg.Text = "go to start page.";
}
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
private void item02_MouseLeave(object sender, MouseEventArgs e)
{
img02.Visibility = Visibility.Collapsed;
msg.Text = "";
}
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
private void item01_MouseLeftButtonUp(object sender, MouseButtonEventArgs e)
{
html.Navigate(new Uri("/Default.aspx?id=index",UriKind.Relative));
}
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
private void item02_MouseLeftButtonUp(object sender, MouseButtonEventArgs e)
{
html.Navigate(new Uri("Default.aspx?id=start", UriKind.Relative));
}
}
}
效果:鼠标放到文字连接上,显示一些悬停效果(用png图片),点击时,连接到某个页面.
1.MenuControl.xaml文件:
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
2.MenuControl.xaml.cs文件:
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedBlockStart.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockEnd.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockEnd.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockEnd.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockEnd.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockEnd.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockEnd.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockEnd.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockEnd.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedBlockEnd.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)