Study Silverlight《控件之Border, Button, Calendar, Canvas, CheckBox, ComboBox 》

注:在这里感谢作者: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();
        }
    }
}

-------------------------------------------------------------------------------------------------------------------------------------------------

 

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值