很久没有写东西了,最近开始接触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>