silverlight 入门教程（六）

一、前言

好久没有写这方面的文章,今天抽时间来写一篇,在这里我话就不多说,看下面的内容:

今天主要是做了一个小小的DEMO,希望能给初学者,同时也使自己也学习一下:

 

二、控件介绍

主要用到了Image,Slider,TextBox两个控件来完成了这个DEMO示例:

Image:大家都知道是一个用来显示图片的东西:

Slider:这个对大家来说有一点不明白;他就是一个像WinfForm中的滑动条:

TextBox:文本框控件;

 

三、功能说明

用Image来显示出图片，用Slider来改变当前所显示的图片大小，就这么简单，没有其它的功能；

在以后的文章我会对这个Demo扩展；

 

四、结果浏览

                                         第一次改变效果

                                           第二次改变效果

 

五、代码简单说明

Page.xaml代码：

<UserControl x:Class="SilverlightDemo7.Page"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
    Width="561" Height="325" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" mc:Ignorable="d">
    <Grid x:Name="LayoutRoot" Loaded="LayoutRoot_Loaded" Height="334" Width="563">
    	<Grid.Background>
    		<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
    			<GradientStop Color="#FF000000"/>
    			<GradientStop Color="#FFE5E5E5" Offset="1"/>
    		</LinearGradientBrush>
    	</Grid.Background>
    	<Slider HorizontalAlignment="Left" Margin="14.5,153.5,0,155.5"  ValueChanged="Slivder_ValueChanged" VerticalAlignment="Stretch" Width="171" x:Name="Slivder"/>
    	<TextBox Height="24" HorizontalAlignment="Left" Margin="63.5,77.5,0,0" VerticalAlignment="Top" Width="81" Text="" TextWrapping="Wrap" x:Name="txtheight"/>
    	<Image HorizontalAlignment="Stretch" Margin="202.501998901367,0,94.4980010986328,30.25" VerticalAlignment="Bottom" Source="a.JPG" Stretch="Fill" RenderTransformOrigin="0.541000008583069,-0.143999993801117" x:Name="image">
    		<Image.OpacityMask>
    			<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
    				<GradientStop Color="#FF000000"/>
    				<GradientStop Color="#FFFFFFFF" Offset="1"/>
    			</LinearGradientBrush>
    		</Image.OpacityMask>
    	</Image>
    	<TextBlock HorizontalAlignment="Left" Margin="31.5,75.5,0,0" Width="82" Text="¸ß:" TextWrapping="Wrap" VerticalAlignment="Top" Height="24"/>
    	<TextBlock Height="24" HorizontalAlignment="Left" Margin="33.5,117.5,0,0" VerticalAlignment="Top" Width="34" Text="¿í:" TextWrapping="Wrap"/>
    	<TextBox Height="24" HorizontalAlignment="Left" Margin="62.5,118.5,0,0" VerticalAlignment="Top" Width="81" Text="" TextWrapping="Wrap" x:Name="txtwidth"/>
    	

    </Grid>
</UserControl>

这上面的代码，大家不毕去看它，这些代码都是用工具生成；

Page.xaml.cs代码：

  private void Slivder_ValueChanged(object sender, RoutedPropertyChangedEventArgs<double> e)
        {
            txtheight.Text = (Slivder.Value).ToString();
            txtwidth.Text = (Slivder.Value).ToString();
            image.Height = Slivder.Value;
            image.Width = Slivder.Value;
        }

上面的代码是Slider控的ValueChanged值改变事件，当Slider控件的值发生了改变是，就对文本框，Image两个控件给

Slider改变的事，这样就改变了Image的大小；

 private void LayoutRoot_Loaded(object sender, RoutedEventArgs e)
        {
            Slivder.Maximum = 600;
        }

这一段代码是当加载的时候给Slider控件设置它的最大值，也就是说Slider控件只能达到600，即Image的长，宽也就只

有600

六、总结

在这个示例中没有其它什么技术的东西，也没有什么可以讲的，在以后我会把Slider这个控件的属性与大家来分享一下，

由于工作的种种原因没有更多的时间来学习和研究；可能下一篇文章也不是什么时候，只要对初学者有一点帮助的，我都会

写在我的博客里面，更希望大家多多支持我，有什么问题及时的反馈给我，我会在以后的文章的改正，谢谢大家，晚安！