上一节为大家简单介绍了如何使用WRS实现SilverLight和数据库交互,这节我们主要实现SilverLight自定义控件,通过自定义控件我们可以扩展微软提供的已有控件功能,或者自己创造独特控件,估计在看文的朋友们会觉得自定义控件难度很大,其实我们可以通过继承微软的控件类来实现我们的扩展。
通过这篇文章我们主要实现一个自定义导航栏,封装好的控件可以分享给其他朋友,让更多的人分享自己的劳动果实。
1.紧接着上一节项目,在解决方案上右键/添加/新建项目/SilverLight/SilverLight类库,我这里名称就叫"Controls",在生成的新项目中进行操作:
(1).删除默认生成的Class1.cs
(2).新建文件夹,命名为:"Themes",在此文件夹右键/添加/新建项/SilverLight/SilverLight资源字典,命名为"Generic.xaml"。
这里要注意,第(2)步的命名必须是"Themes"文件夹和"Generic.xaml"文件,因为Generic.xaml文件里存放着自定义控件样式,而SilverLight会寻找这个文件用来加载默认样式。
(3).在Controls项目上右键/添加类,我这里命名为"NavigateItem.cs",接下来在Generic.xaml里添加这个控件的样式,代码如下,需要先添加命名空间,这里我已经添加好“xmlns:Local="clr-namespace:Controls"”,我们用这个类文件生成一个属于自己的菜单中按钮:
- <ResourceDictionary
- xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
- xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
- xmlns:Local="clr-namespace:Controls"
- >
- <!--导航栏*****************************************************************************************************************************-->
- <!--导航栏子项-->
- <Style TargetType="Local:NavigateItem">
- <Setter Property="Template">
- <Setter.Value>
- <ControlTemplate TargetType="Local:NavigateItem">
- <Grid Cursor="{TemplateBinding Cursor}" Width="{TemplateBinding Width}" Height="{TemplateBinding Height}">
- <Border CornerRadius="10,10,0,0" x:Name="Container" Opacity="0.6">
- <Border.Background>
- <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
- <GradientStop Color="#FF393939" Offset="1"/>
- <GradientStop Color="#FE434343"/>
- </LinearGradientBrush>
- </Border.Background>
- </Border>
- <ContentPresenter x:Name="contentPresenter" ContentTemplate="{TemplateBinding ContentTemplate}" Content="{TemplateBinding Content}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
- </Grid>
- </ControlTemplate>
- </Setter.Value>
- </Setter>
- </Style>
- </ResourceDictionary>
现在已经定义好按钮样式,这里的ContentPresenter控件的Content属性可以赋值为文本或者图片、嵌套其他容器这个看个人需要,我这里只需要使用默认的文本。这样还不能显示咱的控件,还需要在代码中引用样式,接下来是NavigateItem.cs代码:
- using System;
- using System.Net;
- using System.Windows;
- using System.Windows.Controls;
- using System.Windows.Documents;
- using System.Windows.Ink;
- using System.Windows.Input;
- using System.Windows.Media;
- using System.Windows.Media.Animation;
- using System.Windows.Shapes;
- namespace Controls
- {
- public class NavigateItem:ContentControl
- {
- public NavigateItem()
- {
- this.DefaultStyleKey = typeof(NavigateItem);
- }
- }
- }
大家看到这个类继承自ContentControl,也可以继承自Control,构造函数里指示默认模版类型,指定类型后,SilverLight就会在Generic.xaml里找到这个样式。
(4).到现在我们的自定义控件已经可以显示,接下来在janerui项目添加对Controls的项目引用,然后在MainPage.xaml里添加我们自己的控件:
- <UserControl x:Class="janerui.MainPage"
- 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"
- mc:Ignorable="d"
- xmlns:Local="clr-namespace:Controls;assembly=Controls"
- d:DesignHeight="300" d:DesignWidth="400">
- <Grid x:Name="LayoutRoot" Background="White">
- <Local:NavigateItem Content="swk" Width="100" Height="30"/>
- </Grid>
- </UserControl>
这里我们声明了我们刚刚自己定义的控件,赶紧生成浏览下,这时大家就看到自己封装的控件已经显示成功了。
由于时间问题,今天就到这里,明天我会继续完成后续部分,公开Click事件等。