概述

实验要求: 1、使用vs2010开发工具创建富客户端程序 2、使用滑块控件控制矩形区域颜色变化 3、在WEB页面中调整Silverlight区域大小实验步骤: 1,创建SilverLight项目，项目名称为MyDemo，主页面为默认页面即MainPage.xaml 2,新建后对页面进行布局,采用Grid+Canvas+resources布局. 3,定义两行两列.左边跨两行内有4个TextBloc

实验要求:

1、使用vs2010开发工具创建富客户端程序
2、使用滑块控件控制矩形区域颜色变化
3、在WEB页面中调整Silverlight区域大小

实验步骤:
1,创建SilverLight项目，项目名称为MyDemo，主页面为默认页面即MainPage.xaml
2,新建后对页面进行布局,采用Grid+Canvas+resources布局.
3,定义两行两列.左边跨两行内有4个TextBlock控件分别设置文本为透明度,红色值,蓝色值,绿色值.另有4个Slider控件.一个矩形框控件和一个TextBox控件,一个Button控件进行全屏设置,进行设置.在App.xaml中通过resources设置全局样式.
4,对相应控件注入事件,最终实现随着Silder控件值的变化,矩形框颜色和透明度改变,实现颜色调配器功能.
5,调试过程中,通过MyDemotestPage.aspx页面对宽度和高度设置，最终使调配器运行页面中间部位。

实验代码实现:

1,资源文件

View Code

@H_673_57@<Application.resources> <Style x:Key="button1" TargetType="Button"> <Setter Property="FontSize" Value="24"></Setter> <Setter Property="Foreground" Value="Green"></Setter> <Setter Property="BACkground" Value="Red"></Setter> </Style> <Style x:Key="button2" TargetType="Button"> <Setter Property="FontSize" Value="14"></Setter> <Setter Property="Foreground" Value="Green"></Setter> <Setter Property="BACkground" Value="Red"></Setter> </Style> <Style x:Key="textblock1" TargetType="TextBlock"> <Setter Property="FontSize" Value="18"></Setter> <Setter Property="FontWeight" Value="Bold"></Setter> <Setter Property="Foreground" Value="White"></Setter> </Style> <Style x:Key="textBox1" TargetType="TextBox"> <Setter Property="FontSize" Value="16"></Setter> <Setter Property="Foreground" Value="Green"></Setter> </Style> </Application.resources>

2,界面设计:

View Code

@H_673_57@<Grid x:Name="LayoutRoot" BACkground="#46461F"> <Grid.RowDeFinitions> <RowDeFinition Height="150"/> <RowDeFinition Height="160"/> </Grid.RowDeFinitions> <Grid.columnDeFinitions> <columnDeFinition Width="250"/> <columnDeFinition Width="*"/> </Grid.columnDeFinitions> <Canvas Grid.column="1" Grid.Row="0"> <Rectangle Name="rec" Grid.Row="0" Grid.column="1" Width="130" Height="130" Canvas.Left="10" Canvas.Top="10" VerticalAlignment="Center" Fill="Orange"/> </Canvas> <Canvas Grid.column="1" Grid.Row="1"> <TextBlock Name="myTb1" Style="{Staticresource textblock1}" Text="颜色值："/> <TextBox Name="myTbx1" FontSize="16" Canvas.Left="10" Width="130" Style="{Staticresource textBox1}" Canvas.Top="30"/> <Button Name="but1" Content="全屏" Style="{Staticresource button2}" Canvas.Left="108" Canvas.Top="114" Click="but1_Click" /> </Canvas> <Canvas Grid.RowSpan="2" Grid.column="0" Grid.Row="0"> <TextBlock Name="TmyTb2" Style="{Staticresource textblock1}" Canvas.Left="10" Canvas.Top="10" Text="透明度："/> <Slider Name="touming" Canvas.Left="10" Canvas.Top="40" Width="200" Height="20" Maximum="255" ValueChanged="touming_ValueChanged" /> <TextBlock Name="RmyTb3" Style="{Staticresource textblock1}" Canvas.Left="10" Canvas.Top="66" Text="红色值："/> <Slider Name="red" Canvas.Left="10" Canvas.Top="98" Width="200" Height="20" Maximum="255" ValueChanged="touming_ValueChanged" /> <TextBlock Name="BmyTb4" Style="{Staticresource textblock1}" Canvas.Left="10" Canvas.Top="124" Text="蓝色值："/> <Slider Name="blue" Canvas.Left="10" Canvas.Top="160" Width="200" Height="20" Maximum="255" ValueChanged="touming_ValueChanged" /> <TextBlock Name="GmyTb5" Style="{Staticresource textblock1}" Canvas.Left="10" Canvas.Top="186" Text="绿色值："/> <Slider Name="green" Canvas.Left="10" Canvas.Top="223" Width="200" Height="20" Maximum="255" ValueChanged="touming_ValueChanged" /> </Canvas> </Grid>

3,后台实现:
Slider控件都使用本事件实现

//根据透明度，颜色值改变，调节Slider控件值,改变颜色.所有Slider控件都使用本事件实现
        private void touming_ValueChanged(object sender,RoutedPropertyChangedEventArgs<double> E)
        {
            Color color = Color.FromArgb((bytE)touming.Value,(bytE)red.Value,(bytE)blue.Value,(bytE)green.value);
            rec.Fill = new SolidColorBrush(color);
            myTbx1.Text = color.ToString();
        }

实现全屏控制:

@H_673_57@private void but1_Click(object sender,RoutedEventArgs E) { Content contentObject = Application.Current.Host.Content; contentObject.IsFullScreen = !contentObject.IsFullScreen; }

实验结果:

1，初始化时设置矩形框颜色，运行后：
2，随着透明度值变化，颜色透明度变化
3，随着红色值，蓝色值，绿色值改变，颜色自动适配
4，点击全屏按钮，页面全屏。再次点击或者esc键退出全屏
5，随着颜色值和透明度改变，文本框显示相应的值
6，页面运行后根据设定大小位置显示

运行结果: