一、前言
好久没有写这方面的文章,今天抽时间来写一篇,在这里我话就不多说,看下面的内容:
今天主要是做了一个小小的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这个控件的属性与大家来分享一下,
由于工作的种种原因没有更多的时间来学习和研究;可能下一篇文章也不是什么时候,只要对初学者有一点帮助的,我都会
写在我的博客里面,更希望大家多多支持我,有什么问题及时的反馈给我,我会在以后的文章的改正,谢谢大家,晚安!