注:在这里感谢作者:webabcd,在学习Silverlight中给了很好的参考(大部分源码来自于webabcd)。http://www.cnblogs.com/webabcd
1、Border.xaml
<UserControl x:Class="SilverlightBasic.Control.BorderTest"
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"
d:DesignHeight="300" d:DesignWidth="400">
<StackPanel Width="400" Height="300" Orientation="Horizontal">
<!--
BorderThickness:边框的宽度[uniform];[leftright,topbottom];[left,top,right,bottom]
BorderBrush:边框的颜色
CornerRadius:边框角的半径
-->
<Border BorderBrush="#FF0000" BorderThickness="1,3,5,7" CornerRadius="5"
Width="120" Height="200" Margin="5">
<TextBlock Text="红色Border" ToolTipService.ToolTip="红色Border" TextAlignment="Center"/>
</Border>
<Border BorderThickness="8" CornerRadius="10" Width="120" Height="200" Margin="5">
<TextBlock Text="红色Border1" ToolTipService.ToolTip="红色Border" TextAlignment="Center"/>
<Border.BorderBrush>
<!-- ***ImageBrush:图像画笔***
ImageSource - 图片地址
Stretch属性 - 拉伸值 [System.Windows.Media.Stretch 枚举]
AlignmentX - 水平方向的对齐方式。Center(默认值), Left, Right
AlignmentY - 垂直方向的对齐方式。Center(默认值), Top, Bottom
-->
<ImageBrush ImageSource="/SilverlightBasic;component/Image/Border.jpg"/>
</Border.BorderBrush>
</Border>
</StackPanel>
</UserControl>
2、Button.xaml
<UserControl x:Class="SilverlightBasic.Control.ButtonTest"
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"
d:DesignHeight="300" d:DesignWidth="400">
<StackPanel Width="400" Orientation="Horizontal">
<!--
Content:按钮上显示的内容
Click:按钮的单击事件
Cursor:鼠标移动到按钮上面时,鼠标指针的样式
Padding:容器内的内容与容器边缘的填充距离[uniform];[leftright,topbottom];
[left,top,right,bottom]
-->
<Button Tag="我是button" Content="button" Cursor="Eraser" Padding="5"
Width="70" Height="35" Margin="5"/>
<!-- IsEnabled:按钮是否有效 -->
<Button Tag="无效Button" Content="无效Button" IsEnabled="False"
Width="70" Height="35" Margin="5" />
<!--
Button.Content - 按钮上显示的内容
ClickMode - 触发单击事件的类型 [System.Windows.Controls.ClickMode枚举]
1、以反斜杠开头的图片(Source="/images/DingosLogo.png")需要放在ClientBin目录下的相应文件夹中
2、不以反斜杠开头的图片(Source="images/DingosLogo.png")应该放在Silverlight 项目的目录下的相应文件夹里
-->
<Button Tag="图片Button" ClickMode="Release" Click="Button_Click" Margin="5" Width="70" Height="35">
<Button.Content>
<Image Source="/SilverlightBasic;component/Image/01.jpg" Stretch="UniformToFill" />
</Button.Content>
</Button>
</StackPanel>
</UserControl>
Button.xaml.cs
using System;
using System.Collections.Generic;
using System.Linq;
using System.Net;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;
using System.Windows.Browser;
namespace SilverlightBasic.Control
{
public partial class ButtonTest : UserControl
{
public ButtonTest()
{
InitializeComponent();
}
/**
* 页面Alert
*/
private void Button_Click(object sender, RoutedEventArgs e){
HtmlWindow html = HtmlPage.Window;
html.Alert(((System.Windows.Controls.Button)sender).Tag.ToString() + "被单击了");
}
}
}
3、 Calendar.xaml
<UserControl x:Class="SilverlightBasic.Control.DateControl"
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:sdk="http://schemas.microsoft.com/winfx/2006/xaml/presentation/sdk"
mc:Ignorable="d"
d:DesignHeight="400" d:DesignWidth="600">
<!--
注意:在presentation/sdk命名空间下
DateControl包括两个控件:DatePicker和Calendar
-->
<StackPanel Margin="0,100,0,0">
<sdk:DatePicker Name="dpLong" SelectedDateFormat="Long" Width="200"/>
<sdk:DatePicker Name="dpShort" SelectedDateFormat="Short" Width="200"/>
<StackPanel Orientation="Horizontal" Margin="10" HorizontalAlignment="Center">
<!--
SelectedDatesChanged - 选中日期后所触发的事件
DisplayDateEnd - 此日期之后的日期不予显示
DisplayDateStart - 此日期之前的日期不予显示
FirstDayOfWeek - 控件所显示的每星期的第一天为星期几 [System.DayOfWeek枚举]
DisplayMode - 控件的显示模式 [System.Windows.Controls.DisplayMode枚举]
IsTodayHighlighted - 是否高亮显示今天的日期
-->
<StackPanel Margin="2">
<TextBlock Text="DisplayMode=Decade" Padding="5"/>
<sdk:Calendar DisplayMode="Decade"/>
</StackPanel>
<StackPanel Margin="2">
<TextBlock Text="DisplayMode=Month" Padding="5"/>
<sdk:Calendar DisplayMode="Month" IsTodayHighlighted="True" FirstDayOfWeek="Monday"/>
</StackPanel>
<StackPanel Margin="2">
<TextBlock Text="DisplayMode=Year" Padding="5"/>
<sdk:Calendar DisplayMode="Year"/>
</StackPanel>
</StackPanel>
</StackPanel>
</UserControl>
4、Canvas.xaml
<UserControl x:Class="SilverlightBasic.Control.CanvasTest"
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"
d:DesignHeight="300" d:DesignWidth="400">
<!-- Canvas:绝对布局模式
Canvas.Left:与上一层 Canvas 的 Y轴 间的距离,左上角为原点
Canvas.Top:与上一层 Canvas 的 X轴 间的距离,左上角为原点
-->
<Canvas Background="#FF00FF" Width="100" Height="100">
<Canvas Background="Green" Width="100" Height="100" Canvas.Left="100" Canvas.Top="100">
<TextBlock Text="TextBlock" Canvas.Top="20" />
</Canvas>
</Canvas>
</UserControl>
5、CheckBox.xaml
<UserControl x:Class="SilverlightBasic.Control.CheckBoxTest"
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"
d:DesignHeight="300" d:DesignWidth="400">
<StackPanel>
<!-- IsChecked - 是否被选中 -->
<CheckBox Name="chk1" Content="我是CheckBox" IsChecked="false" Margin="5"/>
<!--
IsThreeState:是否是有3个状态的CheckBox
false:通常的两状态。默认值
true:有3个状态:true, false, null。
也就是说 CheckBox.IsChecked是bool?类型
-->
<CheckBox Name="chk2" Content="红色的三状态CheckBox" Background="Red"
IsThreeState="True" Margin="5"/>
<!-- IsEnabled:CheckBox是否有效 -->
<CheckBox Name="chk3" Content="无效的CheckBox" IsEnabled="False" Margin="5"/>
<!--
CheckBox.Content:CheckBox所对应的内容
Checked:被选中后所触发的事件
Unchecked:被取消选中后所触发的事件
Click: 被单击后所触发的事件
-->
<CheckBox Name="chk4" Checked="Button_Click" Margin="5">
<CheckBox.Content>
<Image Source="/SilverlightBasic;component/Image/01.jpg" Width="100"/>
</CheckBox.Content>
</CheckBox>
<Button Content="各个CheckBox的选中状态" Width="200" HorizontalAlignment="Left"
Click="Button_Click" Margin="5"/>
</StackPanel>
</UserControl>
CheckBox.xaml.cs
using System;
using System.Collections.Generic;
using System.Linq;
using System.Net;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;
using System.Windows.Browser;//引入HtmlPage HtmlWindow
namespace SilverlightBasic.Control
{
public partial class CheckBoxTest : UserControl
{
public CheckBoxTest()
{
InitializeComponent();
}
private void Button_Click(object sender, RoutedEventArgs e) {
HtmlWindow html = HtmlPage.Window;
html.Alert(string.Format("chk1: {0}\r\nchk2: {1}\r\nchk3: {2}\r\nchk4: {3}",
chk1.IsChecked, chk2.IsChecked, chk3.IsChecked, chk4.IsChecked));
}
}
}
6、ComboBox.xaml
<UserControl x:Class="SilverlightBasic.Control.ComboBoxTest"
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"
d:DesignHeight="300" d:DesignWidth="400">
<StackPanel>
<ComboBox Name="cbo" Width="200" Margin="5">
<ComboBoxItem Content="ComboBoxItem1"/>
<ComboBoxItem Content="ComboBoxItem2"/>
<ComboBoxItem Content="ComboBoxItem3"/>
</ComboBox>
<ComboBox Name="cbo2" DisplayMemberPath="Name" MaxDropDownHeight="100"
Width="200" Margin="5"/>
</StackPanel>
</UserControl>
ComboBox.xaml.cs
using System;
using System.Collections.Generic;
using System.Linq;
using System.Net;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;
using SilverlightBasic.DataBing;//SourceDataModel SourceData
namespace SilverlightBasic.Control
{
public partial class ComboBoxTest : UserControl
{
public ComboBoxTest()
{
InitializeComponent();
BingData();
}
private void BingData() {
SourceData source = new DataBing.SourceData();
cbo2.ItemsSource = source.GetData();
}
}
}
-------------------------------------------------------------------------------------------------------------------------------------------------