一、前言

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

今天主要是做了一个小小的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这个控件的属性与大家来分享一下，

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

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