SilverLight企業應用框架設計【二】框架畫面

框架畫面分為上中下三層

由下面一個Grid控件完成布局

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

上層為頂部菜單區域

中層為子菜單和業務畫面部分

下層為狀態欄和版權信息區域

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

一：頂部菜單區域

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監控系統" Grid.Column="1" Grid.Row="3" />
            </Grid>
            <Rectangle Width="1" Fill="{StaticResource HeadSplitor}"></Rectangle>                        
            <StackPanel>
                <Button Style="{StaticResource ToolBtnStyle}" Content="全部關閉" Click="CloseAllClick"></Button>
                <Button Style="{StaticResource ToolBtnStyle}" Content="關閉當前" Click="CloseCurClick"></Button>
                <Button Style="{StaticResource ToolBtnStyle}" Content="關閉其他" 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="退出系統" Click="LoginOutBtnClick"></Button>
                <Button Style="{StaticResource ToolBtnStyle}" Content="重新登錄" Click="ReLoginBtnClick"></Button>
            </StackPanel>
            <Rectangle Width="1" Fill="{StaticResource HeadSplitor}"></Rectangle>
        </StackPanel>

頂部菜單分為三部分

從左向右依次是

歡迎信息（GRID）

頂部菜單（動態創建）

常用按鈕（StackPanel)

頂部菜單的容器是一個StackPanel

此容器有一個漸變的背景色，樣式代碼如下

    <!--頭部漸變背景-->
    <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>

此容器每個部分都有一個Rectangle來分割

此Rectangle也有個漸變的背景，代碼如下

    <!--頭部分隔條漸變背景-->
    <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>

動態創建頂部菜單的代碼如下

（大家先不要深究數據是怎么來的，在以后的章節咱們會講到數據交互的細節）

            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);
            }

這里創建的HeadBtn是一個自定義的控件

（每個頂部菜單就是一個控件的實例）

該自定義控件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>

注意，這里每個頂部菜單的ICO圖標不是動態的，朋友們，想讓他變成動態的就自己動手吧

為了實現美觀的效果

我為這個自定義控件定義了鼠標的滑入滑出事件

        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);
        }

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

二：底部狀態條區域

此處比較簡單

代碼如下：

        <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.我沒有做狀態信息的內容

2.版本信息應該通過Assambly獲取

三：中部區域

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控件顯示的為頂部菜單的標題，標志着當前選中的是哪個頂部菜單

ListBox為子菜單控件

TabControl為業務畫面區域

四：子菜單區域

子菜單樣式相對復雜些

樣式代碼如下

<!--子菜單樣式-->
    <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"/>
                        <ContentPresenter
                              x: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>

這些樣式主要是為了實現如下效果

子菜單數據綁定非常簡單

（頂部菜單的單擊事件將綁定子菜單）

代碼如下：

        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;
        }

五：業務畫面區域

業務畫面的容器為TabControl

每個TabItem將承載一個業務畫面

主要是為TabItem增加關閉按鈕

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>

這個關閉按鈕的樣式比較特殊

    <!--標簽按鈕-->
    <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>

關閉按鈕樣式主要為了實現如下效果

（鼠標滑上，關閉按鈕背景變灰色）

按鈕的單擊事件如下

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