专栏首页dino.c的专栏另一种方法实现silverlight图片局部放大效果

另一种方法实现silverlight图片局部放大效果

  今天看到這篇文章,即模仿京東(360buy)浏览产品图片的效果:

silverlight图片局部放大效果

  一時技痒于是也打算做一个出来。因为功能简单不如索性用纯xaml做,不写一行代码。当然,MouseDragElementBehavior这种东西也是要用到的,但这也不算是“我”写了代码吧。   原以为会很简单,结果失败了。MouseDragElementBehavior有一个属性是ConstrainToParentBounds,即是否只在父容器的范围中拖动。这个属性理所当然地应该设置为True,但实际上只要鼠标一移出父容器被拖动的控件就完全不动了。实际效果如下,为了方便比较做了 ConstrainToParentBounds="False" 和 ConstrainToParentBounds="True"两种。 这个东西做出来的效果不是很理想,难登大雅之堂,如果需要实际使用还是老老实实地用上面那篇文章介绍的方法吧。

  稍微解释一下:放大区域的位移量应该和那块半透明方块的位移量成反比的,因为不想写代码,所以将放大区域反转再反转,然后再将半透明方块的位移量和放大区域的位移量绑定。MouseDragElementBehavior是通过改变半透明方块的RenderTransform来改变它的位移量,所以应该绑定RenderTransform:

RenderTransform="{Binding RenderTransform,Mode=TwoWay,ElementName=image}"

  另外,要遮挡图片的其它部分,我倾向于直接使用ScrollViewer,不过放大区域是圆形或其它形状那就另当别论了。   下面是全部源代码

xaml 
 <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>

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • [UWP]创建一个ProgressControl

    UWP有很多问题,先不说生态的事情,表单、验证、输入、设计等等一堆基本问题缠身。但我觉得最应该首先解决的绝对是Blend,那个随随便便就崩溃、报错、比Silve...

    dino.c
  • [UWP]做个调皮的BusyIndicator

    最近突然想要个BusyIndicator。做过WPF开发的程序员对BusyIndicator应该不陌生,Extended WPF Toolkit 提供了Busy...

    dino.c
  • [UWP]在应用退出时弹出确认提示框

    在应用退出时(点击右上角的关闭按钮)弹出一个确认按钮可以说是一个最常见的操作了,例如记事本的“你是否保存”:

    dino.c
  • 微信公众号信息抓取方法(一)——抓取公众号历史消息列表数据

    研究微信抓取之前, 看过知乎有大神写的比较完善的例子, 受到启发, 才完成了整个微信公众号的抓取。 微信公众号内容的批量采集与应用 微信抓取的难点: 1. 无法...

    aox.lei
  • 我用Python实现了一个小说网站雏形

    前段时间做了一个爬取妹子套图的小功能,小伙伴们似乎很有兴趣,为了还特意组建了一个Python兴趣学习小组,来一起学习。十个python九个爬,在大家的印象中好像...

    小柒2012
  • 文件的打开与关闭-IO1.文件的目的2.文件的打开与关闭 3.文件的读写 4.应用

    就是把一些存储存放起来,可以让程序下一次执行的时候直接使用,而不必重新制作一份,省时省力

    意气相许的许
  • 我用Python实现了一个小说网站雏形

    前段时间做了一个爬取妹子套图的小功能,小伙伴们似乎很有兴趣,为了还特意组建了一个Python兴趣学习小组,来一起学习。十个python九个爬,在大家的印象中好像...

    小柒2012
  • 写数据库同时发mq消息事务一致性的一种解决方案

    随着公司业务的增长,单体应用架构很难满足业务快速迭代以及性能方面的需求,都会进行服务化改造,按照业务等要素将原来庞大的单体应用拆分成不同的服务。那么在进行服务化...

    Criss@陈磊
  • 写数据库同时发mq消息事务一致性的一种解决方案

    随着公司业务的增长,单体应用架构很难满足业务快速迭代以及性能方面的需求,都会进行服务化改造,按照业务等要素将原来庞大的单体应用拆分成不同的服务。那么在进行服务化...

    普通程序员
  • 手游自动化框架GAutomator,新增iOS系统和UE4引擎支持

    GAutomator诞生背后 研究过手游自动化测试的同学都知道,虽然市场上已经有比较多成熟的自动化工具,如Android系统的UIAutomator,iOS的...

    腾讯开源

扫码关注云+社区

领取腾讯云代金券