Silverlight中利用Blend绘制可伸缩的Tab菜单
来源：互联网 发布：星际淘宝网无防盗 编辑：程序博客网 时间：2024/06/13 04:57
直接上Blend设计代码：
<Grid x:Name="Tab1" Margin="0,10,0,0" HorizontalAlignment="Right" VerticalAlignment="Top"> <Grid.ColumnDefinitions> <ColumnDefinition Width="32" x:Name="gridTab1" /> <ColumnDefinition Width="240" x:Name="gridTab2"/> </Grid.ColumnDefinitions> <Grid Grid.Column="0" Margin="0" HorizontalAlignment="Right" Width="32" Height="196" MouseLeftButtonDown="gridTab1_MouseLeftButtonDown" MouseLeftButtonUp="gridTab1_MouseLeftButtonUp" VerticalAlignment="Top"> <Path Data="M14.499997,0.5 L30.5,0.5 L30.5,195.5092 C22.749666,179.34477 21.416317,172.5116 12.74966,165.34474 C10.101785,163.15511 0.50000095,159.98717 0.5,153.17583 L0.5,12.833001 C0.50000095,6.0216737 6.0216732,0.50000131 12.833001,0.50000149 z" Margin="0,0,1,0" Stretch="Fill" Stroke="#FF97B0CB" UseLayoutRounding="False"> <Path.Fill> <LinearGradientBrush EndPoint="0.904,0.386" StartPoint="0.114,0.385"> <GradientStop Color="#FFD7DCE1" Offset="0.383"/> <GradientStop Color="#FFFDFDFE" Offset="1"/> <GradientStop Color="#FFDFE3E7"/> </LinearGradientBrush> </Path.Fill> </Path> <Rectangle StrokeThickness="0.5" RadiusY="3" RadiusX="3" Stroke="#FF319CE1" Height="20" Margin="7,13,5,0" VerticalAlignment="Top" Fill="#FFFBFDFC"> <Rectangle.OpacityMask> <ImageBrush Stretch="Fill"/> </Rectangle.OpacityMask> </Rectangle> <Rectangle StrokeThickness="0.5" Margin="6,13,3,0" Height="23" VerticalAlignment="Top"> <Rectangle.Fill> <ImageBrush ImageSource="Images/ztfx1.png"/> </Rectangle.Fill> <Rectangle.OpacityMask> <ImageBrush Stretch="Fill"/> </Rectangle.OpacityMask> </Rectangle> <TextBlock Margin="1,40,0,0" TextWrapping="Wrap" TextAlignment="Center" FontSize="16" LineHeight="21.333" Text="专题分析" VerticalAlignment="Top"/> <TextBlock x:Name="tbTip1" Margin="1,0,0,38" TextWrapping="Wrap" TextAlignment="Center" FontSize="16" VerticalAlignment="Bottom" Text="<<" Foreground="#FF0033FF"/> </Grid> <Grid Grid.Column="1" Margin="0" Width="240" Height="249" HorizontalAlignment="Right" VerticalAlignment="Top"> <Rectangle Margin="0,25,0,0" Fill="White" Stroke="#FF97B0CB" HorizontalAlignment="Right" Width="240"/> <Rectangle Height="35" VerticalAlignment="Top"> <Rectangle.Stroke> <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0"> <GradientStop Color="#FFD6DEEA"/> <GradientStop Color="#FF97B0CB" Offset="0.526"/> </LinearGradientBrush> </Rectangle.Stroke> <Rectangle.Fill> <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0"> <GradientStop Color="#FFF3F6FB" Offset="0"/> <GradientStop Color="#FFACC8E7" Offset="1"/> <GradientStop Color="#FFC3D6ED" Offset="0.513"/> </LinearGradientBrush> </Rectangle.Fill> </Rectangle> <StackPanel Margin="0,36,7,0" VerticalAlignment="Top" HorizontalAlignment="Right" Width="230"> <Grid Height="40" d:LayoutOverrides="Height" VerticalAlignment="Top" Width="230"> <sdk:DatePicker x:Name="dpStart" Margin="48,6,67,6" Width="115"/> <ComboBox x:Name="cbStart" HorizontalAlignment="Right" Margin="0,6,16,6" Width="49"/> <TextBlock HorizontalAlignment="Left" Margin="3,0,0,0" TextWrapping="Wrap" Text="起始：" Width="56" FontSize="16" FontFamily="Microsoft YaHei" VerticalAlignment="Center"/> <TextBlock TextWrapping="Wrap" Text="时" FontSize="16" FontFamily="Microsoft YaHei" VerticalAlignment="Center" HorizontalAlignment="Right" Width="15" Margin="0,0,-1,0"/> </Grid> <Grid Height="40" d:LayoutOverrides="Height, VerticalMargin" Width="230"> <sdk:DatePicker x:Name="dpEnd" Margin="48,6,67,6" Width="115"/> <ComboBox x:Name="cbEnd" HorizontalAlignment="Right" Margin="0,6,16,6" Width="49"/> <TextBlock HorizontalAlignment="Left" Margin="3,0,0,0" TextWrapping="Wrap" Text="截至：" Width="56" FontSize="16" FontFamily="Microsoft YaHei" VerticalAlignment="Center"/> <TextBlock TextWrapping="Wrap" Text="时" FontSize="16" FontFamily="Microsoft YaHei" VerticalAlignment="Center" HorizontalAlignment="Right" Width="15" Margin="0,0,-1,0"/> </Grid> <Grid Height="40" d:LayoutOverrides="Height, VerticalMargin" Width="230"> <ComboBox x:Name="cbRainGrade" Margin="78,6,0,6"/> <TextBlock HorizontalAlignment="Left" Margin="4,0,0,0" TextWrapping="Wrap" Text="雨量级别：" Width="80" FontSize="16" FontFamily="Microsoft YaHei" VerticalAlignment="Center"/> </Grid> <Grid Height="40" d:LayoutOverrides="Height, VerticalMargin" Visibility="Collapsed"> <RadioButton x:Name="rb1" Content="稀" Margin="70,11,67,1" FontSize="13.333" FontFamily="Microsoft YaHei" GroupName="rbGroup" IsChecked="True" Cursor="Hand" Click="rb_Click"/> <TextBlock HorizontalAlignment="Left" Margin="4,0,0,0" TextWrapping="Wrap" Text="过滤级：" Width="55" FontSize="13.333" FontFamily="Microsoft YaHei" VerticalAlignment="Center"/> <RadioButton x:Name="rb2" Content="密" Margin="0,12,8,0" FontSize="13.333" FontFamily="Microsoft YaHei" HorizontalAlignment="Right" Width="55" GroupName="rbGroup" Cursor="Hand" Click="rb_Click"/> </Grid> <Grid Height="40" d:LayoutOverrides="Height, VerticalMargin"> <Button x:Name="btnAnalysis" Content="雨量等值线" Margin="66,0,61,0" VerticalAlignment="Center" Cursor="Hand" FontSize="16" FontFamily="Microsoft YaHei" d:LayoutOverrides="Width" Click="btnAnalysis_Click"/> </Grid> <Grid Height="40" d:LayoutOverrides="Height, VerticalMargin"> <Button x:Name="btnStatistic" Content="雨量统计" Margin="66,0,61,0" VerticalAlignment="Center" Cursor="Hand" FontSize="16" FontFamily="Microsoft YaHei" d:LayoutOverrides="Width" Click="btnStatistic_Click"/> </Grid> </StackPanel> <TextBlock Margin="30,0,37,217" TextWrapping="Wrap" FontSize="21.333" FontFamily="微软雅黑" TextAlignment="Center" Text="专题分析"/> </Grid> </Grid> <Grid x:Name="Tab2" Margin="0,273,0,0" HorizontalAlignment="Right" VerticalAlignment="Top"> <Grid.ColumnDefinitions> <ColumnDefinition Width="32" x:Name="gridTab11" /> <ColumnDefinition Width="240" x:Name="gridTab21"/> </Grid.ColumnDefinitions> <Grid Grid.Column="0" Margin="0" Height="153" HorizontalAlignment="Right" Width="32" MouseLeftButtonDown="gridTab11_MouseLeftButtonDown" MouseLeftButtonUp="gridTab11_MouseLeftButtonUp" VerticalAlignment="Top"> <Path Data="M14.499997,0.5 L30.5,0.5 L30.5,152.50117 C22.749666,136.33675 21.416317,129.50357 12.74966,122.33672 C10.101785,120.14707 0.50000095,116.97913 0.5,110.1678 L0.5,12.833001 C0.50000095,6.0216737 6.0216732,0.50000131 12.833001,0.50000149 z" Margin="0,0,1,0.006" Stretch="Fill" Stroke="#FF97B0CB" UseLayoutRounding="False"> <Path.Fill> <LinearGradientBrush EndPoint="0.904,0.386" StartPoint="0.114,0.385"> <GradientStop Color="#FFD7DCE1" Offset="0.383"/> <GradientStop Color="#FFFDFDFE" Offset="1"/> <GradientStop Color="#FFDFE3E7"/> </LinearGradientBrush> </Path.Fill> </Path> <TextBlock Margin="1,40,0,65" TextWrapping="Wrap" TextAlignment="Center" FontSize="16" LineHeight="21.333" Text="图 例"/> <Grid Height="20" Margin="7,13,5,0" VerticalAlignment="Top"> <Rectangle StrokeThickness="0.5" RadiusX="2" RadiusY="2" Stroke="#FF319CE1"> <Rectangle.Fill> <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0"> <GradientStop Color="#FFF1F1F1" Offset="0"/> <GradientStop Color="#FFD0D0D0" Offset="1"/> <GradientStop Color="#FFDEDEDE" Offset="0.448"/> <GradientStop Color="#FFD0D0D0" Offset="0.5"/> </LinearGradientBrush> </Rectangle.Fill> </Rectangle> <Ellipse Fill="#FF1016FF" HorizontalAlignment="Left" Height="3" Margin="2,2,0,0" VerticalAlignment="Top" Width="3" StrokeThickness="0.2"/> <Ellipse Fill="#FFFF871C" HorizontalAlignment="Left" Margin="2,8,0,9" Width="3" StrokeThickness="0.2"/> <Ellipse Fill="#FFE8343B" HorizontalAlignment="Left" Height="3" Margin="2,0,0,3" VerticalAlignment="Bottom" Width="3" StrokeThickness="0.2"/> <Path Data="M262.75,109 L269.91666,109" Height="2" Margin="6,2.6,2,0" Stretch="Fill" Stroke="#FF1016FF" UseLayoutRounding="False" VerticalAlignment="Top" StrokeThickness="2"> <Path.Fill> <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0"> <GradientStop Color="#FFF1F1F1" Offset="0"/> <GradientStop Color="#FFD0D0D0" Offset="1"/> <GradientStop Color="#FFDEDEDE" Offset="0.448"/> <GradientStop Color="#FFE8343B" Offset="0.5"/> </LinearGradientBrush> </Path.Fill> </Path> <Path Data="M262.75,109 L269.91666,109" Margin="6,8.562,2,9.438" Stretch="Fill" Stroke="#FFFF871C" UseLayoutRounding="False" StrokeThickness="2"> <Path.Fill> <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0"> <GradientStop Color="#FFF1F1F1" Offset="0"/> <GradientStop Color="#FFD0D0D0" Offset="1"/> <GradientStop Color="#FFDEDEDE" Offset="0.448"/> <GradientStop Color="#FFE8343B" Offset="0.5"/> </LinearGradientBrush> </Path.Fill> </Path> <Path Data="M262.75,109 L269.91666,109" Height="2" Margin="6,0,2,3.309" Stretch="Fill" Stroke="#FFE8343B" UseLayoutRounding="False" VerticalAlignment="Bottom" StrokeThickness="2"> <Path.Fill> <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0"> <GradientStop Color="White" Offset="0.023"/> <GradientStop Color="#FFE93940" Offset="0.046"/> </LinearGradientBrush> </Path.Fill> </Path> </Grid> <TextBlock x:Name="tbTip2" Margin="1,0,0,38" TextWrapping="Wrap" TextAlignment="Center" FontSize="16" VerticalAlignment="Bottom" Text="<<" Foreground="#FF0033FF"/> </Grid> <Grid Grid.Column="1" Margin="0" Width="240" Height="204" HorizontalAlignment="Right" VerticalAlignment="Top"> <Rectangle HorizontalAlignment="Right" Width="240" Height="35" VerticalAlignment="Top"> <Rectangle.Stroke> <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0"> <GradientStop Color="#FFD6DEEA"/> <GradientStop Color="#FF97B0CB" Offset="0.526"/> </LinearGradientBrush> </Rectangle.Stroke> <Rectangle.Fill> <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0"> <GradientStop Color="#FFF3F6FB" Offset="0"/> <GradientStop Color="#FFACC8E7" Offset="1"/> <GradientStop Color="#FFC3D6ED" Offset="0.513"/> </LinearGradientBrush> </Rectangle.Fill> </Rectangle> <Rectangle Margin="0,30,0,0" Fill="White" Stroke="#FF97B0CB" HorizontalAlignment="Right" Width="240"/> <Path Data="M304.5,131 L304.5,260.81238" Margin="123.5,30.5,0,1.099" Stretch="Fill" UseLayoutRounding="False" Fill="#FF97B0CB" Stroke="#FF97B0CB" Width="2" HorizontalAlignment="Left" d:LayoutOverrides="Width"/> <Path Data="M220,157.5 L390.00662,157.5" Height="2" Margin="0,67.811,0.496,0" Stretch="Fill" UseLayoutRounding="False" VerticalAlignment="Top" Fill="Black" Stroke="#FF97B0CB" HorizontalAlignment="Right" Width="239"/> <Path Data="M220,157.5 L390.00662,157.5" Height="2" Margin="0,0,0.496,88.694" Stretch="Fill" UseLayoutRounding="False" VerticalAlignment="Bottom" Fill="Black" Stroke="#FF97B0CB" HorizontalAlignment="Right" Width="239"/> <Path Data="M220,157.5 L390.00662,157.5" Height="2" Margin="0,0,0.496,43.199" Stretch="Fill" UseLayoutRounding="False" VerticalAlignment="Bottom" Fill="Black" Stroke="#FF97B0CB" HorizontalAlignment="Right" Width="239"/> <Ellipse Fill="#FF3FC916" HorizontalAlignment="Left" Height="11" Margin="7,42,0,0" VerticalAlignment="Top" Width="11"/> <Ellipse Fill="#FFFFEB00" HorizontalAlignment="Left" Margin="7,85,0,0" Width="11" Height="11" VerticalAlignment="Top"/> <Ellipse Fill="#FFEC26A5" HorizontalAlignment="Left" Margin="7,0,0,61" Width="11" Height="11" VerticalAlignment="Bottom"/> <Ellipse Fill="#FF888489" HorizontalAlignment="Left" Margin="7,0,0,17" Width="11" Height="11" VerticalAlignment="Bottom"/> <Ellipse Fill="#FF1016FF" HorizontalAlignment="Right" Height="11" Margin="0,42,93,0" VerticalAlignment="Top" Width="11" d:LayoutOverrides="HorizontalAlignment"/> <Ellipse Fill="#FFFF871C" HorizontalAlignment="Right" Margin="0,85,93,0" Width="11" Height="11" VerticalAlignment="Top" d:LayoutOverrides="HorizontalAlignment"/> <Ellipse Fill="#FFE8343B" HorizontalAlignment="Right" Margin="0,0,93,61" Width="11" Height="11" VerticalAlignment="Bottom" d:LayoutOverrides="HorizontalAlignment"/> <TextBlock Margin="37,0,30,172" TextWrapping="Wrap" FontSize="21.333" FontFamily="微软雅黑" TextAlignment="Center"><Run Text="图"/><Run Text=" "/><Run Text=" 例"/></TextBlock> <TextBlock HorizontalAlignment="Left" Margin="22,36,0,0" TextWrapping="Wrap" Text="<10" Width="70" FontSize="16" Height="19" VerticalAlignment="Top" d:LayoutOverrides="HorizontalAlignment"/> <TextBlock HorizontalAlignment="Left" Margin="22,79,0,0" TextWrapping="Wrap" Text="25~50" Width="70" FontSize="16" Height="19" VerticalAlignment="Top" d:LayoutOverrides="HorizontalAlignment"/> <TextBlock HorizontalAlignment="Left" Margin="22,0,0,59" TextWrapping="Wrap" Width="70" Height="19" VerticalAlignment="Bottom" FontSize="16" d:LayoutOverrides="HorizontalAlignment"><Run Text="100"/><Run Text="~"/><Run Text="20"/><Run Text="0"/></TextBlock> <TextBlock HorizontalAlignment="Left" Margin="22,0,0,13" TextWrapping="Wrap" Width="72" Height="19" VerticalAlignment="Bottom" Text="没有数据" FontSize="16"/> <TextBlock HorizontalAlignment="Right" Margin="0,36,19,0" TextWrapping="Wrap" Text="10～25" Width="70" FontSize="16" Height="19" VerticalAlignment="Top"/> <TextBlock HorizontalAlignment="Right" Margin="0,79,19,0" TextWrapping="Wrap" Width="70" FontSize="16" Height="19" VerticalAlignment="Top"><Run Text="50"/><Run Text="～100"/></TextBlock> <TextBlock HorizontalAlignment="Right" Margin="0,0,19,59" TextWrapping="Wrap" Width="70" Height="19" VerticalAlignment="Bottom" FontSize="16"><Run Text=">="/><Run Text="20"/><Run Text="0"/></TextBlock> </Grid> </Grid>
private void gridTab1_MouseLeftButtonDown(object sender, System.Windows.Input.MouseButtonEventArgs e){ e.Handled = true;}private void gridTab1_MouseLeftButtonUp(object sender, System.Windows.Input.MouseButtonEventArgs e){ if (this.gridTab2.Width == new GridLength(240, GridUnitType.Pixel)) { //处于展开状态 this.tbTip1.Text = "<<"; Grid.SetColumnSpan(this.Tab1, 1); this.gridTab2.Width = new GridLength(0, GridUnitType.Pixel); } else { //处于收缩状态 this.tbTip1.Text = ">>"; Grid.SetColumnSpan(this.Tab1, 2); this.gridTab2.Width = new GridLength(240, GridUnitType.Pixel); }}private void gridTab11_MouseLeftButtonDown(object sender, System.Windows.Input.MouseButtonEventArgs e){ e.Handled = true;}private void gridTab11_MouseLeftButtonUp(object sender, System.Windows.Input.MouseButtonEventArgs e){ if (this.gridTab21.Width == new GridLength(240, GridUnitType.Pixel)) { //处于展开状态 this.tbTip2.Text = "<<"; Grid.SetColumnSpan(this.Tab2, 1); this.gridTab21.Width = new GridLength(0, GridUnitType.Pixel); } else { //处于收缩状态 this.tbTip2.Text = ">>"; Grid.SetColumnSpan(this.Tab2, 2); this.gridTab21.Width = new GridLength(240, GridUnitType.Pixel); }}
点击Tab即可收缩，如右图
- Silverlight中利用Blend绘制可伸缩的Tab菜单
- 可伸缩展开的级联菜单
- 浮动，可伸缩菜单
- 绘制可自由伸缩的输入框背景
- android中可伸缩图像的应用。
- 可伸缩的电子商务解决方案
- 可伸缩的TextView
- 可伸缩的TextView
- JavaScript伸缩的菜单
- Flex 效果_可伸缩隐藏菜单
- Js-Html 前端系列--可伸缩菜单
- 可伸缩右侧边栏导航菜单
- 利用flexbox构建可伸缩布局
- 可伸缩的电子商务解决方案 2
- 可伸缩的搜索框
- Android ----可伸缩的控件
- 67. 可伸缩的 Comet
- 可伸缩展示的ListView
- 数组折腾我快崩溃了、、、、
- 页面声音播放（HTML5 embed标签）
- ActivityGroup相关--getLocalActivityManager()
- PPT幻灯片放映不显示备注，只让备注显示在自己屏幕上！
- ffmpeg转板卡可以播放的alaw
- Silverlight中利用Blend绘制可伸缩的Tab菜单
- Python语言解析xml文件
- 模态指令和非模态指令
- 我的第三十八个C++上机报告（成绩处理第二季）
- 代理设计模式之(静态代理+Java自身提供的动态代理机制)
- strtok()和strtok_r()
- 应用Python写的一个简单的Class代码生成器
- 数组大折腾
- JS判断浏览器类型与版本
