日韩性视频-久久久蜜桃-www中文字幕-在线中文字幕av-亚洲欧美一区二区三区四区-撸久久-香蕉视频一区-久久无码精品丰满人妻-国产高潮av-激情福利社-日韩av网址大全-国产精品久久999-日本五十路在线-性欧美在线-久久99精品波多结衣一区-男女午夜免费视频-黑人极品ⅴideos精品欧美棵-人人妻人人澡人人爽精品欧美一区-日韩一区在线看-欧美a级在线免费观看

歡迎訪問 生活随笔!

生活随笔

當(dāng)前位置: 首頁 > 编程资源 > 编程问答 >内容正文

编程问答

SilverLight企业应用框架设计【二】框架画面

發(fā)布時(shí)間:2025/4/5 编程问答 52 豆豆
生活随笔 收集整理的這篇文章主要介紹了 SilverLight企业应用框架设计【二】框架画面 小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.

框架畫面分為上中下三層

由下面一個(gè)Grid控件完成布局

<Grid x:Name="LayoutRoot"><Grid.RowDefinitions><RowDefinition Height="60"></RowDefinition><RowDefinition Height="*"></RowDefinition><RowDefinition Height="22"></RowDefinition></Grid.RowDefinitions></Grid>

上層為頂部菜單區(qū)域

中層為子菜單和業(yè)務(wù)畫面部分

下層為狀態(tài)欄和版權(quán)信息區(qū)域

下面我們分別看一下這三個(gè)部分的生成邏輯

一:頂部菜單區(qū)域

XAML代碼如下:

<StackPanel x:Name="TopMenuS" Orientation="Horizontal" Background="{StaticResource HeadBG}"><Grid><Grid.ColumnDefinitions><ColumnDefinition Width="10"></ColumnDefinition><ColumnDefinition Width="142"></ColumnDefinition><ColumnDefinition Width="10"></ColumnDefinition></Grid.ColumnDefinitions><Grid.RowDefinitions><RowDefinition Height="3"></RowDefinition><RowDefinition Height="18"></RowDefinition><RowDefinition Height="18"></RowDefinition><RowDefinition Height="18"></RowDefinition><RowDefinition Height="3"></RowDefinition></Grid.RowDefinitions><TextBlock x:Name="helloBlock" Grid.Column="1" Grid.Row="1" Text="xxxx通信" /><TextBlock x:Name="UserName" Text="Administrator" Grid.Column="1" Grid.Row="2" /><TextBlock Text="歡迎使用 xxx監(jiān)控系統(tǒng)" Grid.Column="1" Grid.Row="3" /></Grid><Rectangle Width="1" Fill="{StaticResource HeadSplitor}"></Rectangle> <StackPanel><Button Style="{StaticResource ToolBtnStyle}" Content="全部關(guān)閉" Click="CloseAllClick"></Button><Button Style="{StaticResource ToolBtnStyle}" Content="關(guān)閉當(dāng)前" Click="CloseCurClick"></Button><Button Style="{StaticResource ToolBtnStyle}" Content="關(guān)閉其他" Click="CloseOtherClick"></Button></StackPanel><Rectangle Width="1" Fill="{StaticResource HeadSplitor}"></Rectangle><StackPanel><Button Style="{StaticResource ToolBtnStyle}" Content="修改密碼" Click="ChangePSWBtnClick"></Button><Button Style="{StaticResource ToolBtnStyle}" Content="退出系統(tǒng)" Click="LoginOutBtnClick"></Button><Button Style="{StaticResource ToolBtnStyle}" Content="重新登錄" Click="ReLoginBtnClick"></Button></StackPanel><Rectangle Width="1" Fill="{StaticResource HeadSplitor}"></Rectangle></StackPanel>

頂部菜單分為三部分

從左向右依次是

歡迎信息(GRID)

頂部菜單(動(dòng)態(tài)創(chuàng)建)

常用按鈕(StackPanel)

頂部菜單的容器是一個(gè)StackPanel

此容器有一個(gè)漸變的背景色,樣式代碼如下

<!--頭部漸變背景--><LinearGradientBrush x:Key="HeadBG" StartPoint="0.5 0" EndPoint="0.5 1"><GradientStop Offset="0" Color="#FAFAFA"></GradientStop><GradientStop Offset="0.5" Color="#D6D6D6"></GradientStop></LinearGradientBrush>

此容器每個(gè)部分都有一個(gè)Rectangle來分割

此Rectangle也有個(gè)漸變的背景,代碼如下

<!--頭部分隔條漸變背景--><LinearGradientBrush x:Key="HeadSplitor" StartPoint="0.5 0" EndPoint="0.5 1"><GradientStop Offset="0" Color="#FAFAFA"></GradientStop><GradientStop Offset="1" Color="#000000"></GradientStop></LinearGradientBrush>

常用按鈕的樣式如下:

<!--頭部的 三分欄 工具按鈕樣式--><Style x:Key="ToolBtnStyle" TargetType="Button"><Style.Setters><Setter Property="Width" Value="90"></Setter><Setter Property="Height" Value="20"></Setter><Setter Property="Cursor" Value="Hand"></Setter><Setter Property="Template"><Setter.Value><ControlTemplate TargetType="Button"><Grid x:Name="Container"><vsm:VisualStateManager.VisualStateGroups><vsm:VisualStateGroup x:Name="CommonStates"><vsm:VisualState x:Name="MouseOver"><Storyboard><DoubleAnimation Storyboard.TargetName="fillColor" Storyboard.TargetProperty="Opacity" Duration="0" To="1"/></Storyboard></vsm:VisualState><vsm:VisualState x:Name="Normal" /></vsm:VisualStateGroup></vsm:VisualStateManager.VisualStateGroups><Rectangle x:Name="fillColor" Opacity="0" Fill="#B5B5B5" IsHitTestVisible="False" RadiusX="1" RadiusY="1"/><ContentPresenter x:Name="contentPresenter"Content="{TemplateBinding Content}"ContentTemplate="{TemplateBinding ContentTemplate}"VerticalAlignment="{TemplateBinding VerticalContentAlignment}"HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"Margin="{TemplateBinding Padding}"/></Grid></ControlTemplate></Setter.Value></Setter></Style.Setters></Style>

動(dòng)態(tài)創(chuàng)建頂部菜單的代碼如下

(大家先不要深究數(shù)據(jù)是怎么來的,在以后的章節(jié)咱們會(huì)講到數(shù)據(jù)交互的細(xì)節(jié))

var tops = Common.ViewUtility.AllMenu.Where(m => m.ParentId == Guid.Empty).OrderByDescending(m => m.MenuOrder);foreach (var m in tops){var topM = new HeadBtn();topM.DataContext = m;topM.MouseLeftButtonUp += new MouseButtonEventHandler(topM_MouseLeftButtonUp);TopMenuS.Children.Insert(2,topM);}

這里創(chuàng)建的HeadBtn是一個(gè)自定義的控件

(每個(gè)頂部菜單就是一個(gè)控件的實(shí)例)

該自定義控件XAML代碼如下:

<StackPanel Orientation="Horizontal" Cursor="Hand"><Grid x:Name="btn" Width="90" Height="60"><Grid.RowDefinitions><RowDefinition></RowDefinition><RowDefinition Height="20"></RowDefinition></Grid.RowDefinitions><Image Source="../Images/module2.png" Height="30"></Image><TextBlock Text="{Binding MenuName}" Grid.Row="1" FontSize="12"VerticalAlignment="Center" HorizontalAlignment="Center" ></TextBlock></Grid><Rectangle Width="1" Fill="{StaticResource HeadSplitor}"></Rectangle></StackPanel>

注意,這里每個(gè)頂部菜單的ICO圖標(biāo)不是動(dòng)態(tài)的,朋友們,想讓他變成動(dòng)態(tài)的就自己動(dòng)手吧

為了實(shí)現(xiàn)美觀的效果

我為這個(gè)自定義控件定義了鼠標(biāo)的滑入滑出事件

private void UserControl_MouseEnter(object sender, MouseEventArgs e){var color = Color.FromArgb(255,180, 180, 180);btn.Background = new SolidColorBrush(color);}private void UserControl_MouseLeave(object sender, MouseEventArgs e){btn.Background = new SolidColorBrush(Colors.Transparent);}

這些顏色的值,本應(yīng)該作為資源放在樣式文件中,我這里也沒有做處理

二:底部狀態(tài)條區(qū)域

此處比較簡單

代碼如下:

<StackPanel Width="Auto" Grid.Row="2" Background="#B5B5B5" Orientation="Horizontal" FlowDirection="RightToLeft"><TextBlock VerticalAlignment="Center" Text="V1.0.0 Copy Right ? All Rights Reserved"/><TextBlock VerticalAlignment="Center" Text="xxxx"/></StackPanel>

1.我沒有做狀態(tài)信息的內(nèi)容

2.版本信息應(yīng)該通過Assambly獲取

三:中部區(qū)域

XAML代碼如下

<Border Grid.Row="1" BorderBrush="#B5B5B5" BorderThickness="0 1 0 0"><Grid Background="#E8E8E8" Margin="0 1 0 0" Name="CenterGrid"><Grid.ColumnDefinitions><ColumnDefinition Width="160"></ColumnDefinition><ColumnDefinition Width="*"></ColumnDefinition></Grid.ColumnDefinitions><StackPanel><sdk:Label Height="26" Background="#b5b5b5" Margin="0 6 0 6"FontWeight="Bold" FontSize="12" x:Name="lblMenuText" HorizontalAlignment="Center" Width="160" /><ListBox SelectionChanged="left_panel_SelectionChanged" ItemContainerStyle="{StaticResource ListBoxItemStyleNew}"Grid.Column="0" x:Name="left_panel" Background="#E8E8E8" BorderThickness="0"><ListBox.ItemTemplate><DataTemplate><ContentPresenter Content="{Binding MenuName}"></ContentPresenter></DataTemplate></ListBox.ItemTemplate></ListBox></StackPanel><sdk:TabControl x:Name="tbControl" SelectionChanged="tbControl_SelectionChanged" Grid.Column="1" Margin="0 6 0 0"></sdk:TabControl></Grid></Border>

其中Label控件顯示的為頂部菜單的標(biāo)題,標(biāo)志著當(dāng)前選中的是哪個(gè)頂部菜單

ListBox為子菜單控件

TabControl為業(yè)務(wù)畫面區(qū)域

四:子菜單區(qū)域

子菜單樣式相對復(fù)雜些

樣式代碼如下

<!--子菜單樣式--><Style TargetType="ListBoxItem" x:Key="ListBoxItemStyleNew" ><Setter Property="Padding" Value="3" /><Setter Property="HorizontalContentAlignment" Value="Center" /><Setter Property="VerticalContentAlignment" Value="Center" /><Setter Property="Background" Value="Transparent" /><Setter Property="BorderThickness" Value="1"/><Setter Property="TabNavigation" Value="Local" /><Setter Property="Template"><Setter.Value><ControlTemplate TargetType="ListBoxItem"><Grid Background="{TemplateBinding Background}"><vsm:VisualStateManager.VisualStateGroups><vsm:VisualStateGroup x:Name="CommonStates"><vsm:VisualState x:Name="Normal" /><vsm:VisualState x:Name="MouseOver"><Storyboard><DoubleAnimation Storyboard.TargetName="fillColor" Storyboard.TargetProperty="Opacity" Duration="0" To=".35"/></Storyboard></vsm:VisualState><vsm:VisualState x:Name="Disabled"><Storyboard><DoubleAnimation Storyboard.TargetName="contentPresenter" Storyboard.TargetProperty="Opacity" Duration="0" To=".55" /></Storyboard></vsm:VisualState></vsm:VisualStateGroup><vsm:VisualStateGroup x:Name="SelectionStates"><vsm:VisualState x:Name="Unselected" /><vsm:VisualState x:Name="Selected"><Storyboard><DoubleAnimation Storyboard.TargetName="fillColor2" Storyboard.TargetProperty="Opacity" Duration="0" To=".75"/></Storyboard></vsm:VisualState></vsm:VisualStateGroup><vsm:VisualStateGroup x:Name="FocusStates"><vsm:VisualState x:Name="Focused"><Storyboard><ObjectAnimationUsingKeyFrames Storyboard.TargetName="FocusVisualElement" Storyboard.TargetProperty="Visibility" Duration="0"><DiscreteObjectKeyFrame KeyTime="0"><DiscreteObjectKeyFrame.Value><Visibility>Visible</Visibility></DiscreteObjectKeyFrame.Value></DiscreteObjectKeyFrame></ObjectAnimationUsingKeyFrames></Storyboard></vsm:VisualState><vsm:VisualState x:Name="Unfocused"/></vsm:VisualStateGroup></vsm:VisualStateManager.VisualStateGroups><Rectangle x:Name="fillColor" Opacity="0" Fill="#B5B5B5" IsHitTestVisible="False" RadiusX="1" RadiusY="1"/><Rectangle x:Name="fillColor2" Opacity="0" Fill="#FFBADDE9" IsHitTestVisible="False" RadiusX="1" RadiusY="1"/><ContentPresenterx:Name="contentPresenter"Cursor="Hand"Content="{TemplateBinding Content}"ContentTemplate="{TemplateBinding ContentTemplate}"HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"Margin="{TemplateBinding Padding}"/><Rectangle x:Name="FocusVisualElement" Stroke="#FF6DBDD1" StrokeThickness="1" Visibility="Collapsed" RadiusX="1" RadiusY="1" /></Grid></ControlTemplate></Setter.Value></Setter></Style>

這些樣式主要是為了實(shí)現(xiàn)如下效果

子菜單數(shù)據(jù)綁定非常簡單

(頂部菜單的單擊事件將綁定子菜單)

代碼如下:

void topM_MouseLeftButtonUp(object sender, MouseButtonEventArgs e){var tBTN = sender as HeadBtn;var tMenu = tBTN.DataContext as MenuM;lblMenuText.Content = tMenu.MenuName;var subs = Common.ViewUtility.AllMenu.Where(m => m.ParentId == tMenu.Id).OrderBy(m => m.MenuOrder);left_panel.ItemsSource = subs;}

五:業(yè)務(wù)畫面區(qū)域

業(yè)務(wù)畫面的容器為TabControl

每個(gè)TabItem將承載一個(gè)業(yè)務(wù)畫面

主要是為TabItem增加關(guān)閉按鈕

XAML代碼如下:

<sdk:TabItem.HeaderTemplate><DataTemplate><StackPanel Orientation="Horizontal" Width="auto" Margin="0 0 -2 -2"><TextBlock x:Name="tboxheader" Text="{Binding}"/><Button Cursor="Hand" Click="CloseBTN_Click" Style="{StaticResource ListViewHeadBtnStyle}" Margin="3,-3,-6,0" Content="X" ></Button></StackPanel></DataTemplate></sdk:TabItem.HeaderTemplate></sdk:TabItem>

這個(gè)關(guān)閉按鈕的樣式比較特殊

<!--標(biāo)簽按鈕--><Style x:Key="ListViewHeadBtnStyle" TargetType="Button"><Style.Setters><Setter Property="Width" Value="20"></Setter><Setter Property="Height" Value="20"></Setter><Setter Property="Template"><Setter.Value><ControlTemplate TargetType="Button"><Grid x:Name="Container"><vsm:VisualStateManager.VisualStateGroups><vsm:VisualStateGroup x:Name="CommonStates"><vsm:VisualState x:Name="Normal" /><vsm:VisualState x:Name="MouseOver"><Storyboard><DoubleAnimation Storyboard.TargetName="fillColor" Storyboard.TargetProperty="Opacity" Duration="0" To=".35"/></Storyboard></vsm:VisualState></vsm:VisualStateGroup></vsm:VisualStateManager.VisualStateGroups><Rectangle x:Name="fillColor" Opacity="0" Fill="#B5B5B5" IsHitTestVisible="False" RadiusX="1" RadiusY="1"/><ContentPresenter x:Name="contentPresenter"Content="{TemplateBinding Content}"ContentTemplate="{TemplateBinding ContentTemplate}"VerticalAlignment="{TemplateBinding VerticalContentAlignment}"HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"Margin="{TemplateBinding Padding}"/></Grid></ControlTemplate></Setter.Value></Setter></Style.Setters></Style>

關(guān)閉按鈕樣式主要為了實(shí)現(xiàn)如下效果

(鼠標(biāo)滑上,關(guān)閉按鈕背景變灰色)

按鈕的單擊事件如下

private void CloseBTN_Click(object sender, RoutedEventArgs e){var tc = this.Parent as TabControl;tc.Items.Remove(this);}

轉(zhuǎn)載于:https://www.cnblogs.com/liulun/archive/2012/01/04/2312482.html

總結(jié)

以上是生活随笔為你收集整理的SilverLight企业应用框架设计【二】框架画面的全部內(nèi)容,希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò),歡迎將生活随笔推薦給好友。