silverlight制作导航栏

很久没有写东西了，最近开始接触silverlight的项目，从而开始学习silverlight

开始的时候，什么都是一抹黑，逐渐一点点的学习新的东西。今天制作了一个导航栏，在这上面当鼠标移动到上面的时候，相应模块的字体会发生变化效果如下图：

设计这个有很大一部分是silverlight的样式，因为现在该技术我是新学，请大家指正.......谢谢

在制作该项目时必须添加相应的命名空间。

View Code

 1 <Grid x:Name="LayoutRoot" Background="Black">
 2         <Grid.Resources>
 3             <Style x:Key="ccc" TargetType="controls:HyperLinkControl">
 4                 <Setter Property="NavigateUri" Value="www.baidu.com"/>
 5                 <Setter Property="FontSize" Value="11"/>
 6                 <!--?-->
 7                 <Setter Property="Foreground" Value="Gray"/>
 8                 <!--Cursor鼠标悬停时显示__Value?-->
 9                 <Setter Property="Cursor" Value="SizeNESW"/>
10                 <Setter Property="Margin" Value="0,3,0,0"/>
11                 <Setter Property="Template">
12                     <Setter.Value>
13                         <ControlTemplate TargetType="controls:HyperLinkControl">
14                             <HyperlinkButton x:Name="Part_linkbutton" Content="{TemplateBinding Content}">
15                                 <HyperlinkButton.Style>
16                                     <Style TargetType="HyperlinkButton">
17                                         <Setter Property="Template">
18                                             <Setter.Value>
19                                                 <ControlTemplate TargetType="HyperlinkButton">
20                                                     <Grid x:Name="grid" Background="Transparent">
21                                                         <VisualStateManager.VisualStateGroups>
22                                                             <VisualStateGroup x:Name="CommonStates">
23                                                                 <VisualStateGroup.Transitions>
24                                                                     <!--GeneratedDuration颜色变化的时间间隔-->
25                                                                     <VisualTransition GeneratedDuration="0:0:1"/>
26                                                                 </VisualStateGroup.Transitions>
27                                                                 <VisualState x:Name="Normal"/>
28                                                                 <VisualState x:Name="MouseOver">
29                                                                     <Storyboard>
30                                                                         <!--颜色变化  To为变化后的颜色-->
31                                                                         <ColorAnimation Duration="0" To="Red" Storyboard.TargetProperty="(Control.Foreground).(SolidColorBrush.Color)" Storyboard.TargetName="content" />
32                                                                     </Storyboard>
33                                                                 </VisualState>
34                                                             </VisualStateGroup>
35                                                         </VisualStateManager.VisualStateGroups>
36                                                         <ContentControl x:Name="content" Content="{TemplateBinding Content}" ContentTemplate="{TemplateBinding ContentTemplate}" Foreground="White"/>
37                                                     </Grid>
38                                                 </ControlTemplate>
39                                             </Setter.Value>
40                                         </Setter>
41                                     </Style>
42                                 </HyperlinkButton.Style>
43                             </HyperlinkButton>
44                         </ControlTemplate>
45                     </Setter.Value>
46                 </Setter>
47             </Style>
48         </Grid.Resources>
49         <StackPanel Orientation="Horizontal"  HorizontalAlignment="Left" VerticalAlignment="Top"  Canvas.Top="0">
50             <TextBlock Text="网络多维分析系统应用专区" 
51                        FontFamily="Trebuchet MS" 
52                        Foreground="#FFA8D300" Height="16" 
53                        Margin="1,0,0,0" VerticalAlignment="Center"></TextBlock>
54             <!--IsPopup?   RenderTransformOrigin?-->
55             <controls:HyperLinkControl NavigateUri="www.baidu.com" Margin="5,3,5,0" Style="{StaticResource ccc}" IsPopup="True" Height="22" x:Name="h1">
56                 <!--Opacity对象的不透明度__0为完全透明-->
57                 <TextBlock x:Name="AJAX_Demos1" Text="系统分析" Opacity="10" RenderTransformOrigin="10,0.5">
58                 <TextBlock.RenderTransform>
59                     <!--TranslateY  TranslateX指的是TextBlock的位置  RenderTransform设置或获取元素呈现变换的原点-->
60                     <CompositeTransform TranslateY="0"/>
61                 </TextBlock.RenderTransform>
62                 </TextBlock>
63             </controls:HyperLinkControl>
64             <!--BorderThickness设置边框的粗细-->
65             <Border Height="20" VerticalAlignment="Center" Width="1" BorderThickness="1" x:Name="b1">
66                 <Border.BorderBrush>
67                     <!--LinearGradientBrush设置线性渐变EndPoint  StartPoint分别为终止和起始坐标-->
68                     <LinearGradientBrush  EndPoint="1,1" StartPoint="1,0" x:Name="l1">
69                         <!--GradientStop渐变停止点-->
70                         <GradientStop Color="White" Offset="1"></GradientStop>
71                         <GradientStop Color="Red" Offset="0.198"></GradientStop>
72                     </LinearGradientBrush>
73                 </Border.BorderBrush>
74             </Border>
75             <controls:HyperLinkControl NavigateUri="www.baidu.com" Margin="5,3,5,0" Style="{StaticResource ccc}" IsPopup="True" Height="22">
76                 <TextBlock x:Name="AJAX_Demos2" Text="网络规划" Opacity="100" RenderTransformOrigin="0.5,0.5">
77                 <TextBlock.RenderTransform>
78                     <CompositeTransform TranslateY="0"/>
79                 </TextBlock.RenderTransform>
80                 </TextBlock>
81             </controls:HyperLinkControl>
82             <Border Height="20" VerticalAlignment="Bottom" Width="1" BorderThickness="1">
83                 <Border.BorderBrush>
84                     <LinearGradientBrush  EndPoint="0.5,1" StartPoint="0.5,0">
85                         <GradientStop Color="#66FFFFFF" Offset="1"></GradientStop>
86                         <GradientStop Color="Transparent" Offset="0.198"></GradientStop>
87                     </LinearGradientBrush>
88                 </Border.BorderBrush>
89             </Border>
90         </StackPanel>
91     </Grid>

 

 

转载于:https://www.cnblogs.com/shangwuyuyi/archive/2012/06/19/2555284.html