AI导航网
微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦！

Silverlight中利用Blend绘制可伸缩的Tab菜单

分类：Silverlight作者：编程之家

直接上Blend设计代码：

  <Grid x:Name="Tab1" Margin="0,10,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,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,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,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" textwrapping="Wrap" TextAlignment="Center" FontSize="16" LineHeight="21.333" Text="专题分析" VerticalAlignment="Top"/>
                    <TextBlock x:Name="tbTip1" Margin="1,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" 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,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,16,6" Width="49"/>
                            <TextBlock HorizontalAlignment="Left" Margin="3,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,-1,0"/>
                        </Grid>
                        <Grid Height="40" d:LayoutOverrides="Height,VerticalMargin" Width="230">
                            <sdk:DatePicker x:Name="dpEnd" Margin="48,6" Width="115"/>
                            <ComboBox x:Name="cbEnd" HorizontalAlignment="Right" Margin="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,VerticalMargin" Width="230">
                            <ComboBox x:Name="cbRainGrade" Margin="78,6"/>
                            <TextBlock HorizontalAlignment="Left" Margin="4,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,1" FontSize="13.333" FontFamily="Microsoft YaHei" GroupName="rbGroup" IsChecked="True" Cursor="Hand" Click="rb_Click"/>
                            <TextBlock HorizontalAlignment="Left" Margin="4,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,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" VerticalAlignment="Center" Cursor="Hand" FontSize="16" FontFamily="Microsoft YaHei" d:LayoutOverrides="Width" Click="btnStatistic_Click"/>
                        </Grid>
                    </StackPanel>
                    <TextBlock Margin="30,37,217" textwrapping="Wrap" FontSize="21.333" FontFamily="微软雅黑" TextAlignment="Center" Text="专题分析"/>
                </Grid>
            </Grid>
            <Grid x:Name="Tab2" Margin="0,273,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,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,0.006" Stretch="Fill" stroke="#FF97B0CB" UseLayoutRounding="False">
                        <Path.Fill>
                            <LinearGradientBrush EndPoint="0.904,0.385">
                                <GradientStop Color="#FFD7DCE1" Offset="0.383"/>
                                <GradientStop Color="#FFFDFDFE" Offset="1"/>
                                <GradientStop Color="#FFDFE3E7"/>
                            </LinearGradientBrush>
                        </Path.Fill>
                    </Path>
                    <TextBlock Margin="1,65" textwrapping="Wrap" TextAlignment="Center" FontSize="16" LineHeight="21.333" Text="图   例"/>
                    <Grid Height="20" Margin="7,0" VerticalAlignment="Top">
                        <Rectangle strokeThickness="0.5" RadiusX="2" RadiusY="2" stroke="#FF319CE1">
                            <Rectangle.Fill>
                                <LinearGradientBrush EndPoint="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" VerticalAlignment="Top" Width="3" strokeThickness="0.2"/>
                        <Ellipse Fill="#FFFF871C" HorizontalAlignment="Left" Margin="2,9" Width="3" strokeThickness="0.2"/>
                        <Ellipse Fill="#FFE8343B" HorizontalAlignment="Left" Height="3" Margin="2,3" VerticalAlignment="Bottom" Width="3" strokeThickness="0.2"/>
                        <Path Data="M262.75,109 L269.91666,109" Height="2" Margin="6,2.6,0" Stretch="Fill" stroke="#FF1016FF" UseLayoutRounding="False" VerticalAlignment="Top" strokeThickness="2">
                            <Path.Fill>
                                <LinearGradientBrush EndPoint="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" Margin="6,8.562,9.438" Stretch="Fill" stroke="#FFFF871C" UseLayoutRounding="False" strokeThickness="2">
                            <Path.Fill>
                                <LinearGradientBrush EndPoint="0.5,3.309" Stretch="Fill" stroke="#FFE8343B" UseLayoutRounding="False" VerticalAlignment="Bottom" strokeThickness="2">
                            <Path.Fill>
                                <LinearGradientBrush EndPoint="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,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,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" Fill="White" stroke="#FF97B0CB" HorizontalAlignment="Right" Width="240"/>
                    <Path Data="M304.5,131 L304.5,260.81238" Margin="123.5,30.5,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,88.694" Stretch="Fill" UseLayoutRounding="False" VerticalAlignment="Bottom" Fill="Black" stroke="#FF97B0CB" HorizontalAlignment="Right" Width="239"/>
                    <Path Data="M220,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" VerticalAlignment="Top" Width="11"/>
                    <Ellipse Fill="#FFFFEB00" HorizontalAlignment="Left" Margin="7,85,0" Width="11" Height="11" VerticalAlignment="Top"/>
                    <Ellipse Fill="#FFEC26A5" HorizontalAlignment="Left" Margin="7,61" Width="11" Height="11" VerticalAlignment="Bottom"/>
                    <Ellipse Fill="#FF888489" HorizontalAlignment="Left" Margin="7,17" Width="11" Height="11" VerticalAlignment="Bottom"/>
                    <Ellipse Fill="#FF1016FF" HorizontalAlignment="Right" Height="11" Margin="0,93,0" VerticalAlignment="Top" Width="11" d:LayoutOverrides="HorizontalAlignment"/>
                    <Ellipse Fill="#FFFF871C" HorizontalAlignment="Right" Margin="0,0" Width="11" Height="11" VerticalAlignment="Top" d:LayoutOverrides="HorizontalAlignment"/>
                    <Ellipse Fill="#FFE8343B" HorizontalAlignment="Right" Margin="0,61" Width="11" Height="11" VerticalAlignment="Bottom" d:LayoutOverrides="HorizontalAlignment"/>
                    <TextBlock Margin="37,172" textwrapping="Wrap" FontSize="21.333" FontFamily="微软雅黑" TextAlignment="Center"><Run Text="图"/><Run Text=" "/><Run Text=" 例"/></TextBlock>
                    <TextBlock HorizontalAlignment="Left" Margin="22,0" textwrapping="Wrap" Text="<10" Width="70" FontSize="16" Height="19" VerticalAlignment="Top" d:LayoutOverrides="HorizontalAlignment"/>
                    <TextBlock HorizontalAlignment="Left" Margin="22,79,0" textwrapping="Wrap" Text="25~50" Width="70" FontSize="16" Height="19" VerticalAlignment="Top" d:LayoutOverrides="HorizontalAlignment"/>
                    <TextBlock HorizontalAlignment="Left" Margin="22,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,13" textwrapping="Wrap" Width="72" Height="19" VerticalAlignment="Bottom" Text="没有数据" FontSize="16"/>
                    <TextBlock HorizontalAlignment="Right" Margin="0,19,0" textwrapping="Wrap" Text="10～25" Width="70" FontSize="16" Height="19" VerticalAlignment="Top"/>
                    <TextBlock HorizontalAlignment="Right" Margin="0,0" textwrapping="Wrap" Width="70" FontSize="16" Height="19" VerticalAlignment="Top"><Run Text="50"/><Run Text="～100"/></TextBlock>
                    <TextBlock HorizontalAlignment="Right" Margin="0,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即可收缩，如右图

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 [email protected] 举报，一经查实，本站将立刻删除。

相关推荐

c# – 如何在Silverlight 4中绑定ContextMenu的IsEnabled属性？
如何在Silverlight4(XAML)中绑定IsEnabled属性？我试过简单的IsEnabled=“{BindingABC}”,但这不起作用–MenuItem总是启用.提前感谢您的线索！干杯编辑：有趣的是,当设置Mode=TwoWay时,绑定似乎有效.但是,在菜单项上...
c# – 使用Silverlight / windows手机式控件设置我的.Net桌面应用程序GUI
我正在编写我的第一个vb.net应用程序(但我也会在这里标记c#,因为我确信即使是一个c#人也可以使用类似的.net实现来回答这个问题).我申请的简短说明：我的桌面应用程序将仅在win平台上运行,使用vb.net,它是一个简单的网...
c# – Silverlight：将服务调用和文件处理移动到后台线程
ProcessFile()是在UIThread上运行还是在单独的线程上运行.如果它在UIThread上,如何将文件请求和ProcessFile()移动到单独的线程？varxClient=newServiceReference1.Service1SoapClient();xClient.Retrieve_File_Compl...
c# – 如何从ASP.NET / Silverlight开发人员成为sharepoint开发人员？
我从同行那里听说,对sharepoint的了解对职业生涯有益.我们不在办公室使用sharepoint.所以不知道如何开始.这些是我的新手问题>学习共享点值得努力吗？>学习sharepoint的资源在哪里？>我是否应该考虑开发哪些...
c# – Windows Phone 8 – 将列表保存到IsolatedStorage
我正在尝试保存一个类我的类对象的集合.我收到一个错误说明：Thecollectiondatacontracttype‘System.Collections.Generic.Listcannotbedeserializedbecauseitdoesnothaveapublicparameterlessconstructor.Addingapu...
c# – 在XAML中使用绑定设置样式
我需要根据Silverlight中的某些配置值设置给定控件的Style.我想有可能从两种可用的样式(静态资源)中选择一个控件样式.我试图做一些像：<TextBoxStyle="{BindingABC}"/>哪里publicstringABC{get{retu...
Android设备上的Silverlight / Moonlight
我刚买了第一台Android设备,我喜欢它…我也很喜欢你可以创建自己的应用程序并随意分发它们.我已经阅读了一些关于Monodroid的内容,而且显然微软希望将Silverlight放在这些设备上,尽管没有太多关于它们的信息……但是M...
c# – 从silverlight应用程序访问SQL Server数据库
我们的ASP.NET网站允许用户执行各种查询,并根据从数据库查询的结果显示网络图(如UML图).目前,我们正在生成一个位图并显示它.但由于我们需要支持允许用户以交互方式显示/隐藏某些块的功能,因此我们计划使用Silverligh...
c# – 自定义Silverlight启动画面导致白屏死机
我正在开发一个Silverlight4应用程序,我已经创建了一个自定义的启动画面.乍一看,自定义启动画面运行良好–非常好.几天后,我开始注意到闪屏不再显示,屏幕仍然是空白.这似乎只发生在我打开多个指向同一个应用程序的IE选...
c# – 使用带偏移的RotateTransform问题旋转图像
这是我的XAML：<ImageVerticalAlignment="Center"HorizontalAlignment="Center"Source="{BindingInput,Converter={StaticResourceByteArrayToBitmapConverter}}"><Image.Ren...
    pythonJavaScriptjavaHTMLreactjsC#AndroidCSSNode.jssqlrpython-3.xMysqLjQueryc++pandasFlutterangularIOSdjangolinuxswifttypescript路由器JSON路由器设置无线路由器h3c华三华三路由器设置华三路由器电脑软件教程arraysdocker软件图文教程Cvue.jslaravelspring-bootreact-native