我希望剪辑路径自动拉伸到父元素的宽度和高度.
步骤1
<Grid x:Name="LayoutRoot" Background="White" Width="600" Height="600">
<Image Source="/Desert.jpg" Stretch="Fill"/>
</Grid>
我画了一个大于600×600的心形
<Grid x:Name="LayoutRoot" Background="White" Width="600" Height="600">
<Image Source="/Desert.jpg" Stretch="Fill"/>
<Path Fill="White" Data="M354.67316,103.43996 C347.2861,87.291679 314.84012,29.107136 238.84006,6.6071892 C238.84006,6.6071873 221.0666,0.84548211 194.3698,0.55251884 C178.35172,0.37673342 159.12123,2.1696978 138.58997,8.3571806 C83.839897,24.857141 53.460484,64.142944 45.710514,73.392952 C46.114811,72.734512 22.339975,106.35702 16.710522,129.89299 C16.710522,129.89299 5.8399811,163.85704 2.3399515,201.35704 C-0.48841667,232.44208 0.086564839,263.52527 3.0899818,294.60712 C7.9390402,321.28616 14.078016,345.58807 20.506205,369.35715 C20.506205,369.35715 35.150459,408.43985 42.839603,422.35718 C45.804752,434.26614 72.256622,476.54443 90.59005,496.54446 C96.256668,503.29446 140.23531,550.68713 177.56865,580.35413 C205.90199,603.85406 250.19028,642.08411 362.10699,691.58392 C362.10699,691.58392 362.48297,691.56604 362.48297,691.56604 C474.3996,642.06622 518.73267,603.81635 547.06598,580.31641 C584.39935,550.64935 628.14935,503.25381 633.81598,496.50381 C652.14935,476.50375 678.60126,434.22546 681.56635,422.31653 C689.25555,408.39914 703.89978,369.31644 703.89978,369.31644 C710.32794,345.54733 716.46692,321.24539 721.31592,294.56635 C724.31934,263.48447 724.89435,232.40128 722.06598,201.31622 C718.56592,163.81618 707.6955,129.85211 707.6955,129.85211 C702.06598,106.31613 678.2912,72.693611 678.6955,73.352051 C670.9455,64.102036 640.56616,24.816208 585.8161,8.3162394 C565.28485,2.1287501 546.05432,0.33578444 530.03632,0.51156342 C503.33951,0.80453354 485.56607,6.5662427 485.56607,6.5662479 C409.56607,29.066204 375.85822,86.731186 369.73306,103.39907 C367.48129,109.5267 364.90286,111.34041 362.5423,111.18388 C362.5423,111.18388 359.19095,113.31599 354.67316,103.43996 z" RenderTransformOrigin="0.5,0.5" />
</Grid>
为了使心形适合600×600,我只需添加填充设置
<Grid x:Name="LayoutRoot" Background="White" Width="600" Height="600">
<Image Source="/Desert.jpg" Stretch="Fill"/>
<Path Fill="White" Stretch="Fill" Data="M354.67316,0.5" />
</Grid>
我现在想要使用此路径剪辑图像.我只能将data属性复制到剪辑路径中.
<Grid x:Name="LayoutRoot" Background="White" Width="600" Height="600">
<Image Source="/Desert.jpg" Stretch="Fill" Clip="M354.67316,103.43996 z"/>
</Grid>
所以我的问题是.如何将Path数据用于给定形状,并在将其作为剪辑应用之前调整其边界框的大小.或者如何在调整大小后将图像剪切为路径数据.
解决方法
不幸的是,这不是一件轻而易举的事.要调整剪切路径以使其最初调整大小或与元素一起调整大小,您必须求助于代码.
Blend Samples on codeplex的
ClippingBehavior就是这种技术的一个很好的例证.通过将行为应用于UIElement,您将获得圆角矩形形式的剪切路径.当关联的UIElement调整大小时,此剪切路径会调整大小.