另一种方法实现silverlight图片局部放大效果
今天看到這篇文章,即模仿京東(360buy)浏览产品图片的效果:
一時技痒于是也打算做一个出来。因为功能简单不如索性用纯xaml做,不写一行代码。当然,MouseDragElementBehavior这种东西也是要用到的,但这也不算是“我”写了代码吧。
原以为会很简单,结果失败了。MouseDragElementBehavior有一个属性是ConstrainToParentBounds,即是否只在父容器的范围中拖动。这个属性理所当然地应该设置为True,但实际上只要鼠标一移出父容器被拖动的控件就完全不动了。实际效果如下,为了方便比较做了 ConstrainToParentBounds="False" 和 ConstrainToParentBounds="True"两种。 这个东西做出来的效果不是很理想,难登大雅之堂,如果需要实际使用还是老老实实地用上面那篇文章介绍的方法吧。
稍微解释一下:放大区域的位移量应该和那块半透明方块的位移量成反比的,因为不想写代码,所以将放大区域反转再反转,然后再将半透明方块的位移量和放大区域的位移量绑定。MouseDragElementBehavior是通过改变半透明方块的RenderTransform来改变它的位移量,所以应该绑定RenderTransform:
RenderTransform="{Binding RenderTransform,Mode=TwoWay,ElementName=image}"
另外,要遮挡图片的其它部分,我倾向于直接使用ScrollViewer,不过放大区域是圆形或其它形状那就另当别论了。
下面是全部源代码
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<Grid x:Name="LayoutRoot">
<Grid.Background>
<LinearGradientBrush EndPoint="0.189,0.967" StartPoint="0.181,0.075">
<GradientStop Color="#FFB3B3B3" Offset="0"/>
<GradientStop Color="#FFD2D2D2" Offset="1"/>
</LinearGradientBrush>
</Grid.Background>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<StackPanel>
<StackPanel Orientation="Horizontal">
<TextBlock Text="width:" Margin="5,0" Width="40"/>
<Slider Maximum="1024" x:Name="sliderX" Value="500" Width="200"
ToolTipService.ToolTip="{Binding Value,ElementName=sliderX}"/>
</StackPanel>
<StackPanel Orientation="Horizontal">
<TextBlock Text="height:" Margin="5,0" Width="40"/>
<Slider Maximum="768" x:Name="sliderY" Value="400" Width="200"
ToolTipService.ToolTip="{Binding Value,ElementName=sliderY}"/>
</StackPanel>
<TextBlock Margin="5,0" Text="ConstrainToParentBounds='False'"/>
<controlsToolkit:Viewbox HorizontalAlignment="Left" Margin="5,0,5,5"
Width="250" >
<Grid HorizontalAlignment="Center" VerticalAlignment="Center">
<Image Source="Penguins.jpg"/>
<Rectangle Height="{Binding Value,Mode=OneWay,ElementName=sliderY}"
Width="{Binding Value,Mode=OneWay,ElementName=sliderX}"
x:Name="rec" RenderTransform="{Binding RenderTransform,Mode=TwoWay,ElementName=image}"
HorizontalAlignment="Left" VerticalAlignment="Top"
Fill="#66FFFFFF" Stroke="Red" StrokeThickness="2"
RenderTransformOrigin="0.5,0.5">
<i:Interaction.Behaviors>
<il:MouseDragElementBehavior ConstrainToParentBounds="False" />
</i:Interaction.Behaviors>
</Rectangle>
</Grid>
</controlsToolkit:Viewbox>
<TextBlock Margin="5,0" Text="ConstrainToParentBounds='True'"/>
<controlsToolkit:Viewbox HorizontalAlignment="Left" Margin="5"
Width="250" >
<Grid HorizontalAlignment="Center" VerticalAlignment="Center">
<Image Source="Penguins.jpg"/>
<Rectangle RenderTransform="{Binding RenderTransform,Mode=TwoWay,ElementName=image}"
Height="{Binding Value,Mode=OneWay,ElementName=sliderY}"
Width="{Binding Value,Mode=OneWay,ElementName=sliderX}" x:Name="rec2"
HorizontalAlignment="Left" VerticalAlignment="Top" Fill="#66FFFFFF" Stroke="Red"
StrokeThickness="2" RenderTransformOrigin="0.5,0.5">
<i:Interaction.Behaviors>
<il:MouseDragElementBehavior ConstrainToParentBounds="True" />
</i:Interaction.Behaviors>
</Rectangle>
</Grid>
</controlsToolkit:Viewbox>
</StackPanel>
<controlsToolkit:Viewbox Margin="5" Padding="0" Grid.Column="1">
<ScrollViewer Height="{Binding Value,Mode=OneWay,ElementName=sliderY}"
Width="{Binding Value,Mode=OneWay,ElementName=sliderX}"
Padding="0" HorizontalScrollBarVisibility="Hidden" VerticalScrollBarVisibility="Hidden">
<Grid HorizontalAlignment="Left" VerticalAlignment="Top" RenderTransformOrigin="0,0" Margin="0">
<Grid.RenderTransform>
<TransformGroup>
<ScaleTransform ScaleX="-1" ScaleY="-1"/>
<SkewTransform AngleX="0" AngleY="0"/>
<RotateTransform Angle="0"/>
<TranslateTransform/>
</TransformGroup>
</Grid.RenderTransform>
<Image x:Name="image" Source="Penguins.jpg" RenderTransformOrigin="0,0" Margin="0">
<Image.Projection>
<PlaneProjection CenterOfRotationX="0" CenterOfRotationY="0" RotationY="180" RotationX="180"/>
</Image.Projection>
</Image>
</Grid>
</ScrollViewer>
</controlsToolkit:Viewbox>
</Grid>
<Grid.Background>
<LinearGradientBrush EndPoint="0.189,0.967" StartPoint="0.181,0.075">
<GradientStop Color="#FFB3B3B3" Offset="0"/>
<GradientStop Color="#FFD2D2D2" Offset="1"/>
</LinearGradientBrush>
</Grid.Background>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<StackPanel>
<StackPanel Orientation="Horizontal">
<TextBlock Text="width:" Margin="5,0" Width="40"/>
<Slider Maximum="1024" x:Name="sliderX" Value="500" Width="200"
ToolTipService.ToolTip="{Binding Value,ElementName=sliderX}"/>
</StackPanel>
<StackPanel Orientation="Horizontal">
<TextBlock Text="height:" Margin="5,0" Width="40"/>
<Slider Maximum="768" x:Name="sliderY" Value="400" Width="200"
ToolTipService.ToolTip="{Binding Value,ElementName=sliderY}"/>
</StackPanel>
<TextBlock Margin="5,0" Text="ConstrainToParentBounds='False'"/>
<controlsToolkit:Viewbox HorizontalAlignment="Left" Margin="5,0,5,5"
Width="250" >
<Grid HorizontalAlignment="Center" VerticalAlignment="Center">
<Image Source="Penguins.jpg"/>
<Rectangle Height="{Binding Value,Mode=OneWay,ElementName=sliderY}"
Width="{Binding Value,Mode=OneWay,ElementName=sliderX}"
x:Name="rec" RenderTransform="{Binding RenderTransform,Mode=TwoWay,ElementName=image}"
HorizontalAlignment="Left" VerticalAlignment="Top"
Fill="#66FFFFFF" Stroke="Red" StrokeThickness="2"
RenderTransformOrigin="0.5,0.5">
<i:Interaction.Behaviors>
<il:MouseDragElementBehavior ConstrainToParentBounds="False" />
</i:Interaction.Behaviors>
</Rectangle>
</Grid>
</controlsToolkit:Viewbox>
<TextBlock Margin="5,0" Text="ConstrainToParentBounds='True'"/>
<controlsToolkit:Viewbox HorizontalAlignment="Left" Margin="5"
Width="250" >
<Grid HorizontalAlignment="Center" VerticalAlignment="Center">
<Image Source="Penguins.jpg"/>
<Rectangle RenderTransform="{Binding RenderTransform,Mode=TwoWay,ElementName=image}"
Height="{Binding Value,Mode=OneWay,ElementName=sliderY}"
Width="{Binding Value,Mode=OneWay,ElementName=sliderX}" x:Name="rec2"
HorizontalAlignment="Left" VerticalAlignment="Top" Fill="#66FFFFFF" Stroke="Red"
StrokeThickness="2" RenderTransformOrigin="0.5,0.5">
<i:Interaction.Behaviors>
<il:MouseDragElementBehavior ConstrainToParentBounds="True" />
</i:Interaction.Behaviors>
</Rectangle>
</Grid>
</controlsToolkit:Viewbox>
</StackPanel>
<controlsToolkit:Viewbox Margin="5" Padding="0" Grid.Column="1">
<ScrollViewer Height="{Binding Value,Mode=OneWay,ElementName=sliderY}"
Width="{Binding Value,Mode=OneWay,ElementName=sliderX}"
Padding="0" HorizontalScrollBarVisibility="Hidden" VerticalScrollBarVisibility="Hidden">
<Grid HorizontalAlignment="Left" VerticalAlignment="Top" RenderTransformOrigin="0,0" Margin="0">
<Grid.RenderTransform>
<TransformGroup>
<ScaleTransform ScaleX="-1" ScaleY="-1"/>
<SkewTransform AngleX="0" AngleY="0"/>
<RotateTransform Angle="0"/>
<TranslateTransform/>
</TransformGroup>
</Grid.RenderTransform>
<Image x:Name="image" Source="Penguins.jpg" RenderTransformOrigin="0,0" Margin="0">
<Image.Projection>
<PlaneProjection CenterOfRotationX="0" CenterOfRotationY="0" RotationY="180" RotationX="180"/>
</Image.Projection>
</Image>
</Grid>
</ScrollViewer>
</controlsToolkit:Viewbox>
</Grid>
作者:dino.c
出处:http://www.cnblogs.com/dino623/
说明:欢迎转载并请标明来源和作者。如有错漏请指出,谢谢。