裁剪使用椭圆和Windows RT结合它在我的用户控件内 [英] Clipping Using Ellipse and binding it inside my user control in Windows RT

查看：126
本文介绍了裁剪使用椭圆和Windows RT结合它在我的用户控件内的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我有一个形象，我剪辑使用椭圆对此我相当成功的鼠标区域。



但我想那椭圆成为其中的一部分我用户控制和用户控制应当与我的手指一起移动和剪裁椭圆应该是用户控件中。
完整的项目可以从这里



<下载p>我的 UserControl'sXAML 是

 <用户控件
X：类=App78 .Magnifier
的xmlns =http://schemas.microsoft.com/winfx/2006/xaml/presentation
的xmlns：X =http://schemas.microsoft.com/winfx/2006 / XAML
的xmlns：本地=使用：App78
的xmlns：D =http://schemas.microsoft.com/expression/blend/2008
的xmlns：MC = http://schemas.openxmlformats.org/markup-compatibility/2006
 MC：可忽略=D
 HEIGHT =230
 WIDTH =170> 
 
 
<电网HEIGHT =230WIDTH =170> 
<路径数据=M25.533,0C15.457,0,7.262,8.199,7.262,18.271c0,9.461,13.676,19.698,17.63,32.338 c0.085,0.273,0.34,0.459,0.626， 0.457c0.287-0.004,0.538-0.192,0.619-0.467c3.836-12.951,17.666-22.856,17.667-32.33 C43.803,8.199,35.607,0,25.533,0z M25.533,32.131c-7.9,0 -14.328-6.429-14.328-14.328c0-7.9,6.428-14.328,14.328-14.328 c7.898,0,14.327,6.428,14.327,14.328C39.86,25.702,33.431,32.131,25.533,32.131z
填写=＃FFF4F4F5
拉伸=填充
行程=黑
 UseLayoutRounding =FALSE
 HEIGHT =227
 WIDTH = 171>< /路径和GT; 
<椭圆X：NAME =MagnifierEllipseX：FieldModifier =公不透明度=1能见度=可见的Horizo​​ntalAlignment =左VerticalAlignment =评出的IsHitTestVisible =FALSEWIDTH =150 HEIGHT =150行程=白StrokeThickness =3保证金=11,8,0,0> 
< Ellipse.RenderTransform> 
< TranslateTransform X：NAME =MagnifierTransformX：FieldModifier =公/> 
< /Ellipse.RenderTransform> 
 
< Ellipse.Fill> 
<的ImageBrush 
的ImageSource =http://blog.al.com/space-news/2009/04/iss015e22574.jpg
弹力=无
 AlignmentX =左
 AlignmentY =评出的> 
< ImageBrush.Transform> 
<&的TransformGroup GT; 
< TranslateTransform X：FieldModifier =公
 X：NAME =PositionTransform/> 
< ScaleTransform X：FieldModifier =公
 X：NAME =ZoomTransform/> 
< TranslateTransform X：FieldModifier =公
 X：NAME =CenterTransform/> 
< /&的TransformGroup GT; 
< /ImageBrush.Transform> 
< /&的ImageBrush GT; 
< /Ellipse.Fill> 
< /椭圆> 
 
< /网格和GT; 
< /用户控件>



我的 MainPage.xaml中是



 <第
X：类=App78.MainPage
的xmlns =http://schemas.microsoft.com/winfx/2006 / XAML /演示
的xmlns：X =http://schemas.microsoft.com/winfx/2006/xaml
的xmlns：本地=使用：App78
的xmlns：D =http://schemas.microsoft.com/expression/blend/2008
的xmlns：MC =http://schemas.openxmlformats.org/markup-compatibility/2006
 
 MC：可忽略=D> 
 
<电网
X：NAME =LayoutGrid
保证金=0,0
背景={ThemeResource ApplicationPageBackgroundThemeBrush}
控股= LayoutGrid_Holding
 PointerMoved =LayoutGrid_OnPointerMoved
 PointerWheelChanged =LayoutGrid_OnPointerWheelChanged> 
<图像
X：NAME =BigImage
的Horizo​​ntalAlignment =中心
 VerticalAlignment =中心
弹力=统一
来源= http://blog.al.com/space-news/2009/04/iss015e22574.jpg/> 
 
 
将;  - &下;椭圆
X：名称=MagnifierEllipse
不透明度=1
能见度=折叠
的Horizo​​ntalAlignment =左
 VerticalAlignment =评出的
 IsHitTestVisible =FALSE
 WIDTH =150
 HEIGHT =150
行程=白
 StrokeThickness =3
保证金= -  100> 
< Ellipse.RenderTransform> 
< TranslateTransform 
 X：NAME =MagnifierTransform/> 
< /Ellipse.RenderTransform> 
< Ellipse.Fill> 
<的ImageBrush 
的ImageSource =http://blog.al.com/space-news/2009/04/iss015e22574.jpg
弹力=无
 AlignmentX =左
 AlignmentY =评出的> 
< ImageBrush.Transform> 
<&的TransformGroup GT; 
< TranslateTransform 
 X：NAME =PositionTransform/> 
< ScaleTransform 
 X：NAME =ZoomTransform/> 
< TranslateTransform 
 X：NAME =CenterTransform/> 
< /&的TransformGroup GT; 
< /ImageBrush.Transform> 
< /&的ImageBrush GT; 
< /Ellipse.Fill> 
< /椭圆>  - > 
<局部：放大镜X：NAME =MagnifierTip能见度=可见/> 
< /网格和GT; 
< /页>

请看到评论的栏目 椭圆 ，如果我取消，我清楚地得到做剪辑一个椭圆。



我的主要requirenment是让椭圆的用户控件中，请参照的更多的澄清视频



我的 MainPage.xaml中.CS 具有下面的代码

 使用系统;使用Windows.UI.Xaml.Controls 
; 
使用Windows.UI.Xaml.Input; 
使用Windows.UI.Xaml.Media; 
使用Windows.UI.Xaml.Media.Imaging; 
 
命名空间App78 
 {
公共密封部分类的MainPage：第
 {
私人双zoomScale = 2; 
私人双pointerX = 0; 
私人双pointerY = 0; 
私人常量双MinZoomScale = 0.25; 
私人常量双MaxZoomScale = 32; 
 
 
公众的MainPage（）
 {
 this.InitializeComponent（）; 
 
 VAR BI =（BitmapImage的）BigImage.Source; 
 bi.ImageOpened + = bi_ImageOpened; 
 this.SizeChanged + = MainPage_SizeChanged; 
} 
 
无效MainPage_SizeChanged（对象发件人，Windows.UI.Xaml.SizeChangedEventArgs E）
 {
 this.UpdateImageLayout（）; 
} 
 
无效bi_ImageOpened（对象发件人，Windows.UI.Xaml.RoutedEventArgs E）
 {
 this.UpdateImageLayout（）; 
} 
 
私人无效UpdateImageLayout（）
 {
 VAR BI =（BitmapImage的）BigImage.Source; 
如果（bi.PixelWidth< this.LayoutGrid.ActualWidth&放大器;&安培; 
 bi.PixelHeight< this.LayoutGrid.ActualHeight）
 {
 this.BigImage.Stretch = Stretch.None; 
} 
，否则
 {
 this.BigImage.Stretch = Stretch.Uniform; 
} 
 
 this.UpdateMagnifier（）; 
} 
 
私人无效LayoutGrid_OnPointerMoved（对象发件人，PointerRoutedEventArgs E）
 {
 // MagnifierTip.Visibility = Windows.UI.Xaml.Visibility.Collapsed; 
 VAR点= e.GetCurrentPoint（this.LayoutGrid）; 
 this.pointerX = point.Position.X; 
 this.pointerY = point.Position.Y; 
 this.UpdateMagnifier（）; 
} 
 
私人无效UpdateMagnifier（）
 {
 VAR BI =（BitmapImage的）BigImage.Source; 
 
双offsetX = 0; 
双offsetY = 0; 
双imageScale = 1; 
 
 VAR imageRatio =（双）bi.PixelWidth / bi.PixelHeight; 
 VAR gridRatio = this.LayoutGrid.ActualWidth / this.LayoutGrid.ActualHeight; 
 
如果（bi.PixelWidth< this.LayoutGrid.ActualWidth&放大器;&安培; 
 bi.PixelHeight< this.LayoutGrid.ActualHeight）
 {
 offsetX = 0.5 *（this.LayoutGrid.ActualWidth  -  bi.PixelWidth）; 
 offsetY = 0.5 *（this.LayoutGrid.ActualHeight  -  bi.PixelHeight）; 
 // imageScale = 1; - 保持
} 
，否则如果（imageRatio< gridRatio）
 {
 offsetX = 0.5 *（this.LayoutGrid.ActualWidth  -  imageRatio * this.LayoutGrid.ActualHeight）; 
 offsetY = 0; 
 imageScale = BigImage.ActualHeight / bi.PixelHeight; 
} 
，否则
 {
 offsetX = 0; 
 offsetY = 0.5 *（this.LayoutGrid.ActualHeight  -  this.LayoutGrid.ActualWidth / imageRatio）; 
 imageScale = BigImage.ActualWidth / bi.PixelWidth; 
} 
 
 MagnifierTip.MagnifierTransform.X = this.pointerX; 
 MagnifierTip.MagnifierTransform.Y = this.pointerY; 
 MagnifierTip.PositionTransform.X =（-this.pointerX + offsetX）/ imageScale; 
 MagnifierTip.PositionTransform.Y =（-this.pointerY + offsetY）/ imageScale; 
 MagnifierTip。 ZoomTransform.ScaleX = imageScale * zoomScale; 
 MagnifierTip.ZoomTransform.ScaleY = imageScale * zoomScale; 
 MagnifierTip.CenterTransform.X = MagnifierTip.MagnifierEllipse.ActualWidth / 2  -  MagnifierTip.MagnifierEllipse.StrokeThickness / 2; 
 MagnifierTip.CenterTransform.Y = MagnifierTip.MagnifierEllipse.ActualHeight / 2  -  MagnifierTip.MagnifierEllipse.StrokeThickness / 2; 
} 
 
私人无效LayoutGrid_OnPointerWheelChanged（对象发件人，PointerRoutedEventArgs E）
 {
如果（e.GetCurrentPoint（this.LayoutGrid）.Properties.MouseWheelDelta大于0） 
 {
 zoomScale = Math.Max（MinZoomScale，Math.Min（MaxZoomScale，zoomScale * 1.2））; 
} 
，否则
 {
 zoomScale = Math.Max（MinZoomScale，Math.Min（MaxZoomScale，zoomScale / 1.2））; 
} 
 
 this.UpdateMagnifier（）; 
} 
 
私人无效LayoutGrid_Holding（对象发件人，HoldingRoutedEventArgs E）
 {
 // MagnifierTip.Visibility = Windows.UI.Xaml.Visibility.Visible; 
 
 
} 
} 
}


解决方案

我想你需要让你的MagnifierTransform以你的放大镜用户控件的根网格。结果
同样的CenterTransform似乎并没有到需要我的意见。结果，
中的其他最后变化是在的MainPage，使得使得TranslateTransforms有意义对准顶部/左侧的用户控制。



只是作为奖励，我得到了更新的项目这里，还与指针按下/释放事件来显示/隐藏放大镜。被警告说，控股不与大多数鼠标设备工作。来源：的链接结果
我也对我的变更添加了注释（注释用DV开始:)。
它并不完美，仍然有显然很多关于你实现，但希望这是你需要的。



有关谁不想要下载的项目，我会离开这里更新的代码：结果
MainPage.xaml中 

 <第
X：类=App78.MainPage
的xmlns =HTTP：/ /schemas.microsoft.com/winfx/2006/xaml/presentation
的xmlns：X =http://schemas.microsoft.com/winfx/2006/xaml
的xmlns：本地=使用：App78
的xmlns：D =http://schemas.microsoft.com/expression/blend/2008
的xmlns：MC =http://schemas.openxmlformats.org/markup-compatibility / 2006年的
 MC：可忽略=D> 
 
<电网
X：NAME =LayoutGrid
保证金=0,0
背景={ThemeResource ApplicationPageBackgroundThemeBrush}
控股= LayoutGrid_Holding
 PointerMoved =LayoutGrid_OnPointerMoved
 PointerWheelChanged =LayoutGrid_OnPointerWheelChanged
 PointerPressed =LayoutGrid_OnPointerPressed
 PointerReleased =LayoutGrid_OnPointerReleased> 
<图像
X：NAME =BigImage
的Horizo​​ntalAlignment =中心
 VerticalAlignment =中心
弹力=统一
来源= http://blog.al.com/space-news/2009/04/iss015e22574.jpg/> 
 
<局部：放大镜VerticalAlignment =顶部的Horizo​​ntalAlignment =左X：NAME =MagnifierTip能见度=折叠/> 
< /网格和GT; 
< /页>



MainPage.xaml.cs中 



 使用系统;使用System.Diagnostics程序
;使用Windows.UI.Xaml.Controls 
; 
使用Windows.UI.Xaml.Input; 
使用Windows.UI.Xaml.Media; 
使用Windows.UI.Xaml.Media.Imaging; 
 
命名空间App78 
 {
公共密封部分类的MainPage：第
 {
私人双zoomScale = 2; 
私人双pointerX = 0; 
私人双pointerY = 0; 
私人常量双MinZoomScale = 0.25; 
私人常量双MaxZoomScale = 32; 
 
 
公众的MainPage（）
 {
 this.InitializeComponent（）; 
 
 VAR BI =（BitmapImage的）BigImage.Source; 
 bi.ImageOpened + = bi_ImageOpened; 
 this.SizeChanged + = MainPage_SizeChanged; 
} 
 
无效MainPage_SizeChanged（对象发件人，Windows.UI.Xaml.SizeChangedEventArgs E）
 {
 this.UpdateImageLayout（）; 
} 
 
无效bi_ImageOpened（对象发件人，Windows.UI.Xaml.RoutedEventArgs E）
 {
 this.UpdateImageLayout（）; 
} 
 
私人无效UpdateImageLayout（）
 {
 VAR BI =（BitmapImage的）BigImage.Source; 
如果（bi.PixelWidth< this.LayoutGrid.ActualWidth&放大器;&安培; 
 bi.PixelHeight< this.LayoutGrid.ActualHeight）
 {
 this.BigImage.Stretch = Stretch.None; 
} 
，否则
 {
 this.BigImage.Stretch = Stretch.Uniform; 
} 
 
 this.UpdateMagnifier（）; 
} 
 
私人无效LayoutGrid_OnPointerMoved（对象发件人，PointerRoutedEventArgs E）
 {
 // DV：如果指针是不接触，我们可以忽略它
如果（e.Pointer.IsInContact！）{返回; } 
 
 VAR点= e.GetCurrentPoint（this.LayoutGrid）; 
 this.pointerX = point.Position.X; 
 this.pointerY = point.Position.Y; 
 this.UpdateMagnifier（）; 
} 
 
私人无效UpdateMagnifier（）
 {
 VAR BI =（BitmapImage的）BigImage.Source; 
 
双offsetX = 0; 
双offsetY = 0; 
双imageScale = 1; 
 
 VAR imageRatio =（双）bi.PixelWidth / bi.PixelHeight; 
 VAR gridRatio = this.LayoutGrid.ActualWidth / this.LayoutGrid.ActualHeight; 
 
如果（bi.PixelWidth< this.LayoutGrid.ActualWidth&放大器;&安培; 
 bi.PixelHeight< this.LayoutGrid.ActualHeight）
 {
 offsetX = 0.5 *（this.LayoutGrid.ActualWidth  -  bi.PixelWidth）; 
 offsetY = 0.5 *（this.LayoutGrid.ActualHeight  -  bi.PixelHeight）; 
 // imageScale = 1; - 保持
} 
，否则如果（imageRatio< gridRatio）
 {
 offsetX = 0.5 *（this.LayoutGrid.ActualWidth  -  imageRatio * this.LayoutGrid.ActualHeight）; 
 offsetY = 0; 
 imageScale = BigImage.ActualHeight / bi.PixelHeight; 
} 
，否则
 {
 offsetX = 0; 
 offsetY = 0.5 *（this.LayoutGrid.ActualHeight  -  this.LayoutGrid.ActualWidth / imageRatio）; 
 imageScale = BigImage.ActualWidth / bi.PixelWidth; 
} 
 
 // DV：这可能是不再$ B $需要b //MagnifierTip.MagnifierTransform.X = this.pointerX; 
 //MagnifierTip.MagnifierTransform.Y = this.pointerY; 
 MagnifierTip.PositionTransform.X =（-this.pointerX + offsetX）/ imageScale; 
 MagnifierTip.PositionTransform.Y =（-this.pointerY + offsetY）/ imageScale; 
 
 // DV：我没有测试过的缩放/缩放
 MagnifierTip.ZoomTransform.ScaleX = imageScale * zoomScale; 
 MagnifierTip.ZoomTransform.ScaleY = imageScale * zoomScale; 
 
 MagnifierTip.CenterTransform.X = MagnifierTip.MagnifierEllipse.ActualWidth / 2  -  MagnifierTip.MagnifierEllipse.StrokeThickness / 2; 
 MagnifierTip.CenterTransform.Y = MagnifierTip.MagnifierEllipse.ActualHeight / 2  -  MagnifierTip.MagnifierEllipse.StrokeThickness / 2; 
 
 // DV：我添加了一个GlobalGrid变换它转换孩童
 MagnifierTip.MagnifierTransformGrid.X = this.pointerX  - （MagnifierTip.ActualWidth / 2）; 
 MagnifierTip.MagnifierTransformGrid.Y = this.pointerY  - （MagnifierTip.ActualHeight）; ; 
 
} 
 
私人无效LayoutGrid_OnPointerWheelChanged（对象发件人，PointerRoutedEventArgs E）
 {
如果（e.GetCurrentPoint（this.LayoutGrid）.Properties.MouseWheelDelta大于0）
 {
 zoomScale = Math.Max（MinZoomScale，Math.Min（MaxZoomScale，zoomScale * 1.2））; 
} 
，否则
 {
 zoomScale = Math.Max（MinZoomScale，Math.Min（MaxZoomScale，zoomScale / 1.2））; 
} 
 
 this.UpdateMagnifier（）; 
} 
 
 
 // DV：控股通常只适用于触摸https://msdn.microsoft.com/en-us/library/windows/apps/windows.ui .xaml.uielement.holding.aspx F = 255安培; MSPPError = -2147217396 
私人无效LayoutGrid_Holding（对象发件人，HoldingRoutedEventArgs E）
 {
 // 
} 
 
 // DV：指针按下同时支持鼠标和触摸，但火灾immeadiatley。你必须找出一种拖延战术使用，或持有触摸，然后右击鼠标
私人无效LayoutGrid_OnPointerPressed（对象发件人，PointerRoutedEventArgs E）
 {
 MagnifierTip.Visibility = Windows.UI .Xaml.Visibility.Visible; 
} 
 
 // DV：指针推出同时支持鼠标和触摸。 
私人无效LayoutGrid_OnPointerReleased（对象发件人，PointerRoutedEventArgs E）
 {
 MagnifierTip.Visibility = Windows.UI.Xaml.Visibility.Collapsed; 
} 
} 
}



Magnifier.xaml 

 <用户控件
X：类=App78.Magnifier
的xmlns = http://schemas.microsoft.com/winfx/2006/xaml/presentation
的xmlns：X =http://schemas.microsoft.com/winfx/2006/xaml
的xmlns：本地=使用：App78
的xmlns：D =http://schemas.microsoft.com/expression/blend/2008
的xmlns：MC =http://schemas.openxmlformats.org/标记兼容性/ 2006
 MC：可忽略=D
 HEIGHT =230
 WIDTH =170> 
 
 
<电网HEIGHT =230WIDTH =170> 
 
<  -  DV：这是全局的变换，我添加 - > 
< Grid.RenderTransform> 
<&的TransformGroup GT; 
< TranslateTransform X：NAME =MagnifierTransformGridX：FieldModifier =公/> 
< /&的TransformGroup GT; 
< /Grid.RenderTransform> 
<椭圆透明度=1能见度=可见填充={ThemeResource ApplicationPageBackgroundThemeBrush}的Horizo​​ntalAlignment =中心VerticalAlignment =评出的IsHitTestVisible =FALSEWIDTH =135HEIGHT =128 StrokeThickness =3保证金=0,17,0,0/> 
<椭圆X：NAME =MagnifierEllipseX：FieldModifier =公不透明度=1能见度=可见的Horizo​​ntalAlignment =左VerticalAlignment =评出的IsHitTestVisible =FALSEWIDTH =150 HEIGHT =150行程=白StrokeThickness =3保证金=11,8,0,0> 
< Ellipse.Fill> 
<的ImageBrush 
的ImageSource =http://blog.al.com/space-news/2009/04/iss015e22574.jpg
弹力=无
 AlignmentX =左
 AlignmentY =评出的> 
< ImageBrush.Transform> 
<&的TransformGroup GT; 
< TranslateTransform X：FieldModifier =公
 X：NAME =CenterTransform/> 
< TranslateTransform X：FieldModifier =公
 X：NAME =PositionTransform/> 
< ScaleTransform X：FieldModifier =公
 X：NAME =ZoomTransform/> 
< /&的TransformGroup GT; 
< /ImageBrush.Transform> 
< /&的ImageBrush GT; 
< /Ellipse.Fill> 
< /椭圆> 
<路径数据=M25.533,0C15.457,0,7.262,8.199,7.262,18.271c0,9.461,13.676,19.698,17.63,32.338 c0.085,0.273,0.34,0.459,0.626， 0.457c0.287-0.004,0.538-0.192,0.619-0.467c3.836-12.951,17.666-22.856,17.667-32.33 C43.803,8.199,35.607,0,25.533,0z M25.533,32.131c-7.9,0 -14.328-6.429-14.328-14.328c0-7.9,6.428-14.328,14.328-14.328 c7.898,0,14.327,6.428,14.327,14.328C39.86,25.702,33.431,32.131,25.533,32.131z
填写=＃FFF4F4F5
拉伸=填充
行程=黑
 UseLayoutRounding =FALSE
 HEIGHT =227
 WIDTH = 171>< /路径和GT; 
< /网格和GT; 
< /用户控件>


I have an image and I am clipping the mouse area using an Ellipse in which I am quite successful.

But I want that ellipse to be a part of my user control and the user control should move along with my finger and the clipping Ellipse should be inside the user control . The complete project can be downloaded from here

My UserControl'sXAML is 

<UserControl
    x:Class="App78.Magnifier"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:App78"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d"
    Height="230"
    Width="170">


    <Grid Height="230" Width="170">
        <Path Data="M25.533,0C15.457,0,7.262,8.199,7.262,18.271c0,9.461,13.676,19.698,17.63,32.338 c0.085,0.273,0.34,0.459,0.626,0.457c0.287-0.004,0.538-0.192,0.619-0.467c3.836-12.951,17.666-22.856,17.667-32.33 C43.803,8.199,35.607,0,25.533,0z M25.533,32.131c-7.9,0-14.328-6.429-14.328-14.328c0-7.9,6.428-14.328,14.328-14.328 c7.898,0,14.327,6.428,14.327,14.328C39.86,25.702,33.431,32.131,25.533,32.131z"
              Fill="#FFF4F4F5"
              Stretch="Fill"
              Stroke="Black"
              UseLayoutRounding="False"
              Height="227"
              Width="171" ></Path>
            <Ellipse x:Name="MagnifierEllipse" x:FieldModifier="public"  Opacity="1" Visibility="Visible" HorizontalAlignment="Left" VerticalAlignment="Top" IsHitTestVisible="False" Width="150" Height="150" Stroke="White" StrokeThickness="3" Margin="11,8,0,0" >
                <Ellipse.RenderTransform>
                    <TranslateTransform x:Name="MagnifierTransform" x:FieldModifier="public"/>
                </Ellipse.RenderTransform>

                <Ellipse.Fill>
                    <ImageBrush
                    ImageSource="http://blog.al.com/space-news/2009/04/iss015e22574.jpg"
                    Stretch="None"
                    AlignmentX="Left"
                    AlignmentY="Top">
                        <ImageBrush.Transform>
                            <TransformGroup>
                                <TranslateTransform x:FieldModifier="public"
                                x:Name="PositionTransform"/>
                                <ScaleTransform x:FieldModifier="public"
                                x:Name="ZoomTransform"/>
                                <TranslateTransform x:FieldModifier="public"
                                x:Name="CenterTransform" />
                            </TransformGroup>
                        </ImageBrush.Transform>
                    </ImageBrush>
                </Ellipse.Fill>
            </Ellipse>

    </Grid>
</UserControl>

My MainPage.XAML is

<Page
    x:Class="App78.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:App78"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"

    mc:Ignorable="d">

    <Grid
        x:Name="LayoutGrid"
        Margin="0,0"
        Background="{ThemeResource ApplicationPageBackgroundThemeBrush}"
        Holding="LayoutGrid_Holding"
        PointerMoved="LayoutGrid_OnPointerMoved"
        PointerWheelChanged="LayoutGrid_OnPointerWheelChanged">
        <Image
            x:Name="BigImage"
            HorizontalAlignment="Center"
            VerticalAlignment="Center"
            Stretch="Uniform"
            Source="http://blog.al.com/space-news/2009/04/iss015e22574.jpg" />


                <!--<Ellipse 
            x:Name="MagnifierEllipse"
            Opacity="1"
            Visibility="Collapsed"
            HorizontalAlignment="Left"
            VerticalAlignment="Top"
            IsHitTestVisible="False"
            Width="150"
            Height="150"
            Stroke="White"
            StrokeThickness="3"
            Margin="-100">
                    <Ellipse.RenderTransform>
                        <TranslateTransform
                    x:Name="MagnifierTransform"/>
                    </Ellipse.RenderTransform>
                    <Ellipse.Fill>
                        <ImageBrush
                    ImageSource="http://blog.al.com/space-news/2009/04/iss015e22574.jpg"
                    Stretch="None"
                    AlignmentX="Left"
                    AlignmentY="Top">
                            <ImageBrush.Transform>
                                <TransformGroup>
                                    <TranslateTransform
                                x:Name="PositionTransform"/>
                                    <ScaleTransform
                                x:Name="ZoomTransform"/>
                                    <TranslateTransform
                                x:Name="CenterTransform" />
                                </TransformGroup>
                            </ImageBrush.Transform>
                        </ImageBrush>
                    </Ellipse.Fill>
                </Ellipse>-->
        <local:Magnifier x:Name="MagnifierTip" Visibility="Visible" />
    </Grid>
</Page>

Please see the commented section of Ellipse , If I uncomment , I clearly get a Ellipse that is doing the clip.

My main requirenment is to get the Ellipse inside the user control , please refer the video for more clarification

My MainPage.XAML.CS has the following code

using System;
using Windows.UI.Xaml.Controls;
using Windows.UI.Xaml.Input;
using Windows.UI.Xaml.Media;
using Windows.UI.Xaml.Media.Imaging;

namespace App78
{
    public sealed partial class MainPage : Page
    {
        private double zoomScale = 2;
        private double pointerX = 0;
        private double pointerY = 0;
        private const double MinZoomScale = .25;
        private const double MaxZoomScale = 32;


        public MainPage()
        {
            this.InitializeComponent();

            var bi = (BitmapImage)BigImage.Source;
            bi.ImageOpened += bi_ImageOpened;
            this.SizeChanged += MainPage_SizeChanged;
        }

        void MainPage_SizeChanged(object sender, Windows.UI.Xaml.SizeChangedEventArgs e)
        {
            this.UpdateImageLayout();
        }

        void bi_ImageOpened(object sender, Windows.UI.Xaml.RoutedEventArgs e)
        {
            this.UpdateImageLayout();
        }

        private void UpdateImageLayout()
        {
            var bi = (BitmapImage)BigImage.Source;
            if (bi.PixelWidth < this.LayoutGrid.ActualWidth &&
                bi.PixelHeight < this.LayoutGrid.ActualHeight)
            {
                this.BigImage.Stretch = Stretch.None;
            }
            else
            {
                this.BigImage.Stretch = Stretch.Uniform;
            }

            this.UpdateMagnifier();
        }

        private void LayoutGrid_OnPointerMoved(object sender, PointerRoutedEventArgs e)
        {
           // MagnifierTip.Visibility = Windows.UI.Xaml.Visibility.Collapsed;
            var point = e.GetCurrentPoint(this.LayoutGrid);
            this.pointerX = point.Position.X;
            this.pointerY = point.Position.Y;
            this.UpdateMagnifier();
        }

        private void UpdateMagnifier()
        {
            var bi = (BitmapImage)BigImage.Source;

            double offsetX = 0;
            double offsetY = 0;
            double imageScale = 1;

            var imageRatio = (double)bi.PixelWidth / bi.PixelHeight;
            var gridRatio = this.LayoutGrid.ActualWidth / this.LayoutGrid.ActualHeight;

            if (bi.PixelWidth < this.LayoutGrid.ActualWidth &&
                bi.PixelHeight < this.LayoutGrid.ActualHeight)
            {
                offsetX = 0.5 * (this.LayoutGrid.ActualWidth - bi.PixelWidth);
                offsetY = 0.5 * (this.LayoutGrid.ActualHeight - bi.PixelHeight);
                //imageScale = 1; - remains
            }
            else if (imageRatio < gridRatio)
            {
                offsetX = 0.5 * (this.LayoutGrid.ActualWidth - imageRatio * this.LayoutGrid.ActualHeight);
                offsetY = 0;
                imageScale = BigImage.ActualHeight / bi.PixelHeight;
            }
            else
            {
                offsetX = 0;
                offsetY = 0.5 * (this.LayoutGrid.ActualHeight - this.LayoutGrid.ActualWidth / imageRatio);
                imageScale = BigImage.ActualWidth / bi.PixelWidth;
            }

            MagnifierTip.MagnifierTransform.X = this.pointerX;
           MagnifierTip.MagnifierTransform.Y = this.pointerY;
           MagnifierTip.PositionTransform.X = (-this.pointerX + offsetX) / imageScale;
           MagnifierTip.PositionTransform.Y = (-this.pointerY + offsetY) / imageScale;
           MagnifierTip. ZoomTransform.ScaleX = imageScale * zoomScale;
           MagnifierTip.ZoomTransform.ScaleY = imageScale * zoomScale;
           MagnifierTip.CenterTransform.X = MagnifierTip.MagnifierEllipse.ActualWidth / 2 - MagnifierTip.MagnifierEllipse.StrokeThickness / 2;
           MagnifierTip.CenterTransform.Y = MagnifierTip.MagnifierEllipse.ActualHeight / 2 - MagnifierTip.MagnifierEllipse.StrokeThickness / 2;
        }

        private void LayoutGrid_OnPointerWheelChanged(object sender, PointerRoutedEventArgs e)
        {
            if (e.GetCurrentPoint(this.LayoutGrid).Properties.MouseWheelDelta > 0)
            {
                zoomScale = Math.Max(MinZoomScale, Math.Min(MaxZoomScale, zoomScale * 1.2));
            }
            else
            {
                zoomScale = Math.Max(MinZoomScale, Math.Min(MaxZoomScale, zoomScale / 1.2));
            }

            this.UpdateMagnifier();
        }

        private void LayoutGrid_Holding(object sender, HoldingRoutedEventArgs e)
        {
          //  MagnifierTip.Visibility = Windows.UI.Xaml.Visibility.Visible;


        }
    }
}

解决方案

I think you need to get your MagnifierTransform to the "root" Grid of your Magnifier UserControl.
Also the CenterTransform doesn't seem to be needed in my opinion.
The other last change is in the MainPage, making the User Control aligned to Top/Left so that the TranslateTransforms make sense.

Just as a bonus, I got the updated project here , also with pointer pressed/released events to show/hide the magnifier. Be warned that "Holding" doesn't work with most mouse devices. Source: link
I also added comments on my changes (comments start with DV:). It's not perfect and there's obviously still a lot for you to implement but hopefully this is what you needed.

For whoever doesn't want to download the project I'll leave the updated code here:
MainPage.xaml 

<Page
    x:Class="App78.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:App78"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d">

    <Grid
        x:Name="LayoutGrid"
        Margin="0,0"
        Background="{ThemeResource ApplicationPageBackgroundThemeBrush}"
        Holding="LayoutGrid_Holding"
        PointerMoved="LayoutGrid_OnPointerMoved"
        PointerWheelChanged="LayoutGrid_OnPointerWheelChanged"
        PointerPressed="LayoutGrid_OnPointerPressed"
        PointerReleased="LayoutGrid_OnPointerReleased">
        <Image
            x:Name="BigImage"
            HorizontalAlignment="Center"
            VerticalAlignment="Center"
            Stretch="Uniform"
            Source="http://blog.al.com/space-news/2009/04/iss015e22574.jpg" />

        <local:Magnifier VerticalAlignment="Top" HorizontalAlignment="Left" x:Name="MagnifierTip" Visibility="Collapsed" />
    </Grid>
</Page>

MainPage.xaml.cs 

using System;
using System.Diagnostics;
using Windows.UI.Xaml.Controls;
using Windows.UI.Xaml.Input;
using Windows.UI.Xaml.Media;
using Windows.UI.Xaml.Media.Imaging;

namespace App78
{
    public sealed partial class MainPage : Page
    {
        private double zoomScale = 2;
        private double pointerX = 0;
        private double pointerY = 0;
        private const double MinZoomScale = .25;
        private const double MaxZoomScale = 32;


        public MainPage()
        {
            this.InitializeComponent();

            var bi = (BitmapImage)BigImage.Source;
            bi.ImageOpened += bi_ImageOpened;
            this.SizeChanged += MainPage_SizeChanged;
        }

        void MainPage_SizeChanged(object sender, Windows.UI.Xaml.SizeChangedEventArgs e)
        {
            this.UpdateImageLayout();
        }

        void bi_ImageOpened(object sender, Windows.UI.Xaml.RoutedEventArgs e)
        {
            this.UpdateImageLayout();
        }

        private void UpdateImageLayout()
        {
            var bi = (BitmapImage)BigImage.Source;
            if (bi.PixelWidth < this.LayoutGrid.ActualWidth &&
                bi.PixelHeight < this.LayoutGrid.ActualHeight)
            {
                this.BigImage.Stretch = Stretch.None;
            }
            else
            {
                this.BigImage.Stretch = Stretch.Uniform;
            }

            this.UpdateMagnifier();
        }

        private void LayoutGrid_OnPointerMoved(object sender, PointerRoutedEventArgs e)
        {
            //DV: If pointer is not in contact we can ignore it
            if (!e.Pointer.IsInContact) { return; }

            var point = e.GetCurrentPoint(this.LayoutGrid);
            this.pointerX = point.Position.X;
            this.pointerY = point.Position.Y;
            this.UpdateMagnifier();
        }

        private void UpdateMagnifier()
        {
            var bi = (BitmapImage)BigImage.Source;

            double offsetX = 0;
            double offsetY = 0;
            double imageScale = 1;

            var imageRatio = (double)bi.PixelWidth / bi.PixelHeight;
            var gridRatio = this.LayoutGrid.ActualWidth / this.LayoutGrid.ActualHeight;

            if (bi.PixelWidth < this.LayoutGrid.ActualWidth &&
                bi.PixelHeight < this.LayoutGrid.ActualHeight)
            {
                offsetX = 0.5 * (this.LayoutGrid.ActualWidth - bi.PixelWidth);
                offsetY = 0.5 * (this.LayoutGrid.ActualHeight - bi.PixelHeight);
                //imageScale = 1; - remains
            }
            else if (imageRatio < gridRatio)
            {
                offsetX = 0.5 * (this.LayoutGrid.ActualWidth - imageRatio * this.LayoutGrid.ActualHeight);
                offsetY = 0;
                imageScale = BigImage.ActualHeight / bi.PixelHeight;
            }
            else
            {
                offsetX = 0;
                offsetY = 0.5 * (this.LayoutGrid.ActualHeight - this.LayoutGrid.ActualWidth / imageRatio);
                imageScale = BigImage.ActualWidth / bi.PixelWidth;
            }

            //DV: This is probably not need anymore
           //MagnifierTip.MagnifierTransform.X = this.pointerX;
           //MagnifierTip.MagnifierTransform.Y = this.pointerY;
            MagnifierTip.PositionTransform.X = (-this.pointerX + offsetX) / imageScale;
            MagnifierTip.PositionTransform.Y = (-this.pointerY + offsetY) / imageScale;

            //DV: I haven't tested the Scaling/Zoom
            MagnifierTip.ZoomTransform.ScaleX = imageScale * zoomScale;
            MagnifierTip.ZoomTransform.ScaleY = imageScale * zoomScale;

            MagnifierTip.CenterTransform.X = MagnifierTip.MagnifierEllipse.ActualWidth / 2 - MagnifierTip.MagnifierEllipse.StrokeThickness / 2;
            MagnifierTip.CenterTransform.Y = MagnifierTip.MagnifierEllipse.ActualHeight / 2 - MagnifierTip.MagnifierEllipse.StrokeThickness / 2;

            //DV: I added a GlobalGrid Transform which translates every children
            MagnifierTip.MagnifierTransformGrid.X = this.pointerX - (MagnifierTip.ActualWidth / 2);
            MagnifierTip.MagnifierTransformGrid.Y = this.pointerY - (MagnifierTip.ActualHeight); ;

        }

        private void LayoutGrid_OnPointerWheelChanged(object sender, PointerRoutedEventArgs e)
        {
            if (e.GetCurrentPoint(this.LayoutGrid).Properties.MouseWheelDelta > 0)
            {
                zoomScale = Math.Max(MinZoomScale, Math.Min(MaxZoomScale, zoomScale * 1.2));
            }
            else
            {
                zoomScale = Math.Max(MinZoomScale, Math.Min(MaxZoomScale, zoomScale / 1.2));
            }

            this.UpdateMagnifier();
        }


        //DV: Holding usually only works with touch https://msdn.microsoft.com/en-us/library/windows/apps/windows.ui.xaml.uielement.holding.aspx?f=255&MSPPError=-2147217396
        private void LayoutGrid_Holding(object sender, HoldingRoutedEventArgs e)
        {
            //
        }

        //DV: pointer pressed supports both mouse and touch but fires immeadiatley. You'll have to figure out a delay strategy or using holding for touch and right click for mouse
        private void LayoutGrid_OnPointerPressed(object sender, PointerRoutedEventArgs e)
        {
            MagnifierTip.Visibility = Windows.UI.Xaml.Visibility.Visible;
        }

        //DV: pointer released supports both mouse and touch.
        private void LayoutGrid_OnPointerReleased(object sender, PointerRoutedEventArgs e)
        {
            MagnifierTip.Visibility = Windows.UI.Xaml.Visibility.Collapsed;
        }
    }
}

Magnifier.xaml 

<UserControl
    x:Class="App78.Magnifier"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:App78"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d"
    Height="230"
    Width="170">


    <Grid Height="230" Width="170">

        <!-- DV: This is the global transform I added -->
        <Grid.RenderTransform>
            <TransformGroup>
                <TranslateTransform x:Name="MagnifierTransformGrid" x:FieldModifier="public"/>
            </TransformGroup>
        </Grid.RenderTransform>
        <Ellipse Opacity="1" Visibility="Visible" Fill="{ThemeResource ApplicationPageBackgroundThemeBrush}"  HorizontalAlignment="Center" VerticalAlignment="Top" IsHitTestVisible="False" Width="135" Height="128"  StrokeThickness="3" Margin="0,17,0,0" />
        <Ellipse x:Name="MagnifierEllipse" x:FieldModifier="public" Opacity="1" Visibility="Visible" HorizontalAlignment="Left" VerticalAlignment="Top" IsHitTestVisible="False" Width="150" Height="150" Stroke="White" StrokeThickness="3" Margin="11,8,0,0" >
            <Ellipse.Fill>
                <ImageBrush
                    ImageSource="http://blog.al.com/space-news/2009/04/iss015e22574.jpg"
                    Stretch="None"
                    AlignmentX="Left"
                    AlignmentY="Top">
                    <ImageBrush.Transform>
                        <TransformGroup>
                            <TranslateTransform x:FieldModifier="public"
                                x:Name="CenterTransform"/>
                            <TranslateTransform x:FieldModifier="public"
                                x:Name="PositionTransform"/>
                            <ScaleTransform x:FieldModifier="public"
                                x:Name="ZoomTransform"/>
                        </TransformGroup>
                    </ImageBrush.Transform>
                </ImageBrush>
            </Ellipse.Fill>
        </Ellipse>
        <Path Data="M25.533,0C15.457,0,7.262,8.199,7.262,18.271c0,9.461,13.676,19.698,17.63,32.338 c0.085,0.273,0.34,0.459,0.626,0.457c0.287-0.004,0.538-0.192,0.619-0.467c3.836-12.951,17.666-22.856,17.667-32.33 C43.803,8.199,35.607,0,25.533,0z M25.533,32.131c-7.9,0-14.328-6.429-14.328-14.328c0-7.9,6.428-14.328,14.328-14.328 c7.898,0,14.327,6.428,14.327,14.328C39.86,25.702,33.431,32.131,25.533,32.131z"
              Fill="#FFF4F4F5"
              Stretch="Fill"
              Stroke="Black"
              UseLayoutRounding="False"
              Height="227"
              Width="171" ></Path>
    </Grid>
</UserControl>

这篇关于裁剪使用椭圆和Windows RT结合它在我的用户控件内的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
C#/.NET最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆