Silverlight中利用Blend繪製可伸縮的Tab選單

暖楓無敵發表於2012-11-29

直接上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即可收縮，如右圖

CSS 可伸縮圓角導航選單
2020-02-18
CSS
垂直可伸縮的導航選單例項程式碼
2017-03-01
單例
css3實現的可伸縮圓角導航選單
2017-03-26
CSSS3
js頂部可以伸縮的導航選單效果
2017-04-07
JS
Node.js的可伸縮性
2019-02-26
Node.js
滑鼠懸浮可以上下伸縮的導航選單
2018-07-16
水平伸縮動畫導航選單實現詳解
2017-04-12
動畫
可伸縮聚類演算法綜述（可伸縮聚類演算法開篇）
2018-10-30
聚類演算法
js滑鼠懸浮水平彈性伸縮的導航選單
2017-04-08
JS
Twitter如何使用Redis提高可伸縮性
2014-09-17
Redis
直播平臺開發，伸縮式選單，隨意調整選單欄橫向的大小
2022-02-15
Blitz4j - 可伸縮的日誌框架
2012-11-21
框架
可伸縮的微服務告警系統設計指南
2020-04-06
微服務
簡析Uber的可伸縮監控：uMonitor和Neris
2018-12-24
自定義view之可伸縮的圓弧與扇形
2017-03-08
View
構建高效且可伸縮的結果快取
2015-08-25
快取
可伸縮NoSQL資料庫的五條建議
2014-09-28
SQL資料庫
利用jQuery實現Tab選項卡
2021-09-09
jQuery
可伸縮性和重/輕量，誰是實用系統的架構主選？
2004-08-02
架構
在騰訊雲容器服務 TKE 中利用 HPA 實現業務的彈性伸縮
2020-12-07
jQuery可伸縮搜尋框程式碼例項
2017-04-18
jQuery
大型網站的可伸縮性架構如何設計？
2019-04-29
網站架構
EXTjs 伸縮選單佈局accordion 和嚮導佈局cardlayout
2011-08-10
JS
教學影片：如何利用Blend2設計Silverlight並配合ASP.NET
2008-01-03
ASP.NET
懸浮在網頁頂部可伸縮層詳解
2017-11-25
網頁
高可用可伸縮架構實用經驗談
2015-05-24
架構
關於記憶體快取的可伸縮性問題
2013-03-09
記憶體快取
ArcGIS API for Silverlight 繪製降雨路徑動畫
2014-04-20
API動畫
:target偽類製作tab選項卡
2016-12-25
SQLServer中Tab製表符的影響
2019-06-26
SQLServer
基於 HBase 構建可伸縮的分散式事務佇列
2015-06-11
分散式佇列
實戰：構建可伸縮Hadoop叢集的方法步驟
2013-01-11
Hadoop
Android可伸縮佈局－FlexboxLayout(支援RecyclerView整合)
2017-03-21
AndroidFlexView
[譯] Tab Bar 就是新的漢堡選單
2018-08-01
Android利用AChartEngine繪製圖表
2014-08-13
Android
利用純 CSS3 定製單選/多選框樣式
2018-12-06
CSSS3
VC++的選單控制和自繪選單。 (轉)
2007-12-02
C++
類似列表的view伸縮動畫
2017-03-09
View動畫

Silverlight中利用Blend繪製可伸縮的Tab選單

相關文章