【SilverLight】颜色适配器

实验要求:

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
<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
<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();
        }

 实现全屏控制:

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,页面运行后根据设定大小位置显示

运行结果:

相关文章
相关标签/搜索