Silverlight 打造个性Portal界面

首先上图看看效果！大家觉得好，在看下面的代码实现吧

然后点击右边的小加号出现下图所示界面

好了，下面是代码

1，定义一个cs类，代码如下（形成一个模版）

namespace Edimp.Common
{
    public class MyWorkControl : Telerik.Windows.Controls.HeaderedContentControl
    {
        static ResourceDictionary resourceDictionary;
        static ResourceDictionary ResourceDictionary
        {
            get
            {
                if (resourceDictionary == null)
                {

                    string resourceStr = @"
        <ResourceDictionary 
            xmlns='http://schemas.microsoft.com/winfx/2006/xaml/presentation' 
                xmlns:x='http://schemas.microsoft.com/winfx/2006/xaml'
                xmlns:d='http://schemas.microsoft.com/expression/blend/2008' xmlns:mc='http://schemas.openxmlformats.org/markup-compatibility/2006' 
                xmlns:telerik='clr-namespace:Telerik.Windows.Controls;assembly=Telerik.Windows.Controls'
                >
                    <SolidColorBrush x:Key='Pad_BorderBrush' Color='#FFCACACA'/>
                    <SolidColorBrush x:Key='Pad_Background' Color='#FFFFFF'/>
                    <LinearGradientBrush x:Key='Pad_Header_Background' EndPoint='0,0' StartPoint='1,1'>                        
                        <!--EndPoint='0.5,0' StartPoint='0.5,1'
                        <GradientStop Color='#FFFF00' Offset='0'/>
                        <GradientStop Color='#FF4CBBE1' Offset='0.25'/>     
                        <GradientStop Color='#FF7BD7F7' Offset='0.75'/>    
                        <GradientStop Color='#FF008BC1' Offset='1'/>-->
                    <GradientStop Color='#00FF00' Offset='0'/>
                    <GradientStop Color='#FF4CBBE1' Offset='0.25'/>
                    <GradientStop Color='#FFFF00' Offset='0.75'/>
                    <GradientStop Color='#FF008BC1' Offset='1'/>
                      
                    </LinearGradientBrush>
                    <Style x:Key='HeaderedContentControlStyle' TargetType='telerik:HeaderedContentControl'>
                        <Setter Property='BorderThickness' Value='1 0 1 1'/>
                        <Setter Property='BorderBrush' Value='{StaticResource Pad_BorderBrush}'/>
                        <Setter Property='Background' Value='{StaticResource Pad_Background}'/>
                        <Setter Property='Template'>
                            <Setter.Value>
                                <ControlTemplate TargetType='telerik:HeaderedContentControl'>
                                    <Grid>
                                        <Grid.RowDefinitions>
                                            <RowDefinition Height='Auto'/>
                                            <RowDefinition Height='*'/>
                                        </Grid.RowDefinitions>
                                        <Border Background='{StaticResource Pad_Header_Background}' CornerRadius='5 5 0 0' Padding='10 7' Grid.Row='0' Height='30'>
                                            <ContentPresenter ContentTemplate='{TemplateBinding HeaderTemplate}' Content='{TemplateBinding Header}' HorizontalAlignment='Center'/>
                                        </Border>
                                        <Border BorderBrush='{TemplateBinding BorderBrush}' BorderThickness='{TemplateBinding BorderThickness}' Background='{TemplateBinding Background}' CornerRadius='0 0 5 5' Grid.Row='1'>
                                            <!--<ContentPresenter HorizontalAlignment='{TemplateBinding HorizontalContentAlignment}' Margin='{TemplateBinding Padding}' VerticalAlignment='{TemplateBinding VerticalContentAlignment}'/>-->
                                                <ContentPresenter HorizontalAlignment='Stretch' VerticalAlignment='Stretch'/>
                                        </Border>
                                    </Grid>
                                </ControlTemplate>
                            </Setter.Value>
                        </Setter>
                    </Style>
                    </ResourceDictionary>";
                    try
                    {
                        resourceStr = resourceStr.Replace("'", "\"");
                        resourceDictionary = System.Windows.Markup.XamlReader.Load(resourceStr) as ResourceDictionary;
                    }
                    catch (Exception)
                    {
                    }
                }
                return resourceDictionary;
            }
        }

        public MyWorkControl()
            : base()
        {
            base.Style = ResourceDictionary["HeaderedContentControlStyle"] as Style;
        }
    }
}

2，调用模版，代码如下

xmlns:custom="clr-namespace:Edimp.Common;assembly=Edimp.Common">

<custom:MyWorkControl Header="资料互提" x:Name="Top_Left" Grid.Row="0" Grid.Column="0" BorderBrush="#FF008BC1" Margin="3" >
                    <grid:RadGridView x:Name="dataGrid_topleft" IsReadOnly="True" AutoGenerateColumns="False" CanUserFreezeColumns="False" IsFilteringAllowed="False" ShowGroupPanel="False" BorderThickness="1" LoadingRowDetails="dataGrid_topleft_LoadingRowDetails">
                        <grid:RadGridView.Columns>
                            <grid:GridViewToggleRowDetailsColumn Width="30" ></grid:GridViewToggleRowDetailsColumn>
                            <grid:GridViewDataColumn Header="序号" DataMemberBinding="{Binding RowNo}" MinWidth="50" MaxWidth="50" HeaderTextAlignment="Center" TextAlignment="Center"></grid:GridViewDataColumn>
                            <grid:GridViewDataColumn Header="名称" DataMemberBinding="{Binding 名称}" MinWidth="90" MaxWidth="90" HeaderTextAlignment="Center" TextAlignment="Center"></grid:GridViewDataColumn>
                            <grid:GridViewDataColumn Header="个数" DataMemberBinding="{Binding 个数}" MinWidth="90" MaxWidth="90" HeaderTextAlignment="Center" TextAlignment="Center"></grid:GridViewDataColumn>
                            <grid:GridViewBoundColumnBase DataMemberBinding="{Binding ACTION}" Header="操    作" MinWidth="90" MaxWidth="90" HeaderTextAlignment="Center" TextAlignment="Center">
                                <grid:GridViewColumn.CellTemplate>
                                    <DataTemplate>
                                        <StackPanel Orientation="Horizontal" HorizontalAlignment="Center" Cursor="hand" ToolTipService.ToolTip="" Tag="{Binding ID}" MouseLeftButtonDown="Spl_GoMouseLeftButtonDown"    x:Name="Spl_Go" >
                                            <Image Tag="{Binding ID}" Source="../Icon/001_39-1.png" Cursor="hand" Width="16" Height="16" ToolTipService.ToolTip="转到" Margin="3,0,3,0"></Image>
                                            <TextBlock Text="转到" VerticalAlignment="Center" HorizontalAlignment="Left" Margin="3" />
                                        </StackPanel>
                                    </DataTemplate>
                                </grid:GridViewColumn.CellTemplate>
                            </grid:GridViewBoundColumnBase>
                        </grid:RadGridView.Columns>
                        <grid:RadGridView.RowDetailsTemplate>
                            <DataTemplate>                               
                                <dataGrid:DataGrid x:Name="dataGrid_topleft_detail" AutoGenerateColumns="False" GridLinesVisibility="Horizontal" HeadersVisibility="Column"
                                    RowBackground="Cornsilk" AlternatingRowBackground="LemonChiffon" RowHeight="22" MaxHeight="200" Foreground="Black"
                                    IsReadOnly="True" CanUserResizeColumns="False" Loaded="dataGrid_topleft_detail_Loaded" ScrollViewer.HorizontalScrollBarVisibility="Auto" ScrollViewer.VerticalScrollBarVisibility="Auto">
                                    <dataGrid:DataGrid.Columns>
                                        <dataGrid:DataGridTextColumn Header="序号" Binding="{Binding 序号}" />
                                        <dataGrid:DataGridTextColumn Header="文件编号" MinWidth="190"   Binding="{Binding 文件编号}"/>
                                        <dataGrid:DataGridTextColumn Header="文件名称" Binding="{Binding 文件名称}"/>                                        
                                    </dataGrid:DataGrid.Columns>
                                </dataGrid:DataGrid>
                            </DataTemplate>
                        </grid:RadGridView.RowDetailsTemplate>
                    </grid:RadGridView>
                </custom:MyWorkControl>

好了，比较简单，其实就是定一了一个模版！