locked
Clipping the background image with Ellipse and attaching it to a User control

    Question

  • Hi ,

        I have been working on A Windows 8.1 app wherein I have a user control (MagnifyTip.XAML)and there is a separate MainPage.XAML. 

    I have to use my user control on the MainPage.XAML wherein , When I tap and hold on the MainPage , my user control appears and where ever I move my finger , the User control clips the area and keeps displaying it in the user control.

    Please look at this video for better understanding. I have to develop a similar app.

    What I have developed till now can be downloaded here.

    My user control XAML is

    <UserControl
        x:Class="controlMagnifier.MagnifierUsercontrol"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:local="using:controlMagnifier"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        mc:Ignorable="d"
        d:DesignHeight="300"
    
        d:DesignWidth="200">
    
    
        <Canvas x:Name="controlCanvas" x:FieldModifier="public"   >
            <Canvas.RenderTransform>
                <RotateTransform>
    
                </RotateTransform>
            </Canvas.RenderTransform>
    
            <Grid Height="250" Width="176" Canvas.Left="23" Canvas.Top="40" >
    
                    <Border x:FieldModifier="public" x:Name="imgBorder" Width="150" CornerRadius="50,50,50,50" Margin="13,20,13,90">
                    <Border.Background>
                        <ImageBrush x:FieldModifier="public" x:Name="image1"    />
                    </Border.Background>
                </Border>
    
    
                <TextBlock x:Name="txtreading" Height="30" Width="80" Margin="0,-145,0,0" FontWeight="Bold" Foreground="Red"  FontSize="20" Text="ABC" TextAlignment="Center" />
                <!--<Image Height="120" Width="150" Margin="0,-50,0,0" Source="Assets/SmallLogo.scale-100.png" ></Image>-->
                <Path x:Name="MagnifyTip"  Data="m 422.67516,254.62099 c -54.00107,0 -97.94018,-42.99659 -97.94018,-95.82439 0,-52.83449 43.93911,-95.824384 97.94018,-95.824384 53.98741,0 97.93335,42.989894 97.93335,95.824384 0,52.8278 -43.94594,95.82439 -97.93335,95.82439 z m -4.5e-4,-201.388003 c -59.74605,0 -108.33864,48.616303 -108.33864,108.338643 0,56.09938 81.0924,116.80009 104.5378,191.74948 0.50401,1.61877 2.01605,2.72166 3.71189,2.7098 1.70178,-0.0237 3.1901,-1.13847 3.67039,-2.76909 C 449.00187,276.46834 531.00741,217.73624 531.01334,161.55977 531.00741,101.84929 482.4089,53.232987 422.67471,53.232987 Z" Fill="#FFF4F4F5" Stretch="Fill" Stroke="Black" UseLayoutRounding="False" Height="227" Width="171" />
    
    
            </Grid>
        </Canvas>
    
    </UserControl>

    My requirement is to attach the ellipse which I am using in the project uploaded to be inside the user control ! I am unable to do that !! My user control is a Path data. I am open to suggestions to modify my user control but the shape has to be like this only ! The user control should be able to move in all the directions as shown in the video above. ! need help !! 

    The Mainpage.XAML will be having an image tag (original image ) 

    <Image x:name="image1" Stretch="Uniform" HorizontalAlignment="Center" VerticalAlignment="Center" />


    Apoorv Kumar Upadhyay


    Thursday, March 26, 2015 4:10 PM

All replies

  • Hi ,

    This is getting complicated for me ! I need some good guidance . 

    I have a requirement to clip /crop a background image and show the cropped region in my user control.

    The user control should function in accordance with the following requirements.

    1) When I tap on the image , my user control appears just above my fingers 

    2)A crop function clips/crops 100*100 pixels around my finger and displays them inside the user control in circular manner.

    3) Keeping my fingers on the image ,whereever I move my fingers , the area gets clipped and gets attached in the user control.

    4)When I release my finger , the user control disappears. 

    5)When my finger reaches the image boundaries , the user control rotates 

    6) I can move my fingers very fast on the screen , the user control shouldnt lag. It should move with my finger and kep clipping/cropping the areas and attaching then to the user control .

    7)The user control should be able to adjust to any screen resolution and orientation.

    i have been able to implement CROP using BitmapEncorder, WriteableBitmapEX , but they dont seem to be a very fast solution until I came to know about Ellipse , Fill and Imagebrush things. 

    I am trying hard but not getting it.

    I am sharing my user control code code . Kindly help me to CLIP.

        <UserControl    x:Class="ClippingInAction.MagnifyTip"    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"    xmlns:local="using:ClippingInAction"    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"    mc:Ignorable="d"    Height="227" Width="171">    <Grid Height="227" Width="171" HorizontalAlignment="Center" Canvas.Left="0" Canvas.Top="0">        <Border x:FieldModifier="public" x:Name="imgBorder" Width="150" CornerRadius="50,50,50,50" Margin="13,18,13,85">        </Border>        <TextBlock x:Name="txtreading" Height="30" Width="80" Margin="0,-145,0,0" FontWeight="Bold" Foreground="Red"  FontSize="20" Text="ABC" TextAlignment="Center" />        <!--<Image Height="120" Width="150" Margin="0,-50,0,0" Source="Assets/SmallLogo.scale-100.png" ></Image>-->        <Path x:Name="MagnifyTipPath"  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" />    </Grid></UserControl>

    There is a MainPage that will have an image like

    <image x:name="OriginalImage" Stretch="Uniform" HorizontalAlignment="Center" VerticalAlignment="Center" />

    I want to clip this image on the pointermoved() event on the image and clip the area around my finger.

    Please watch this video. I want to build exactly somethig like this. 

    The image loaded can be of any size . It can go upto 2K resolution.

    Please find the code attached ! I have been able to implement this much ! I want the ellipse to be a part of my user control !! 

    Please help


    Apoorv Kumar Upadhyay



    Monday, March 23, 2015 9:00 AM
  • You can try to handle Manipulation event of your custom control. https://msdn.microsoft.com/en-us/library/windows/apps/xaml/hh465387.aspx#using_manipulation_events. I realize you are building an exciting app, I hope you can try this MSDN code sample to get started. https://code.msdn.microsoft.com/windowsapps/Input-3dff271b.

    Tuesday, March 24, 2015 6:18 AM
  • need a clipping code actually !! I want to put that code in my CS file and all the clipping control in the UserControl file !!

    I have tried these but They wont help what I want

    And yeah , The app will be awesome !! 


    Apoorv Kumar Upadhyay

    Wednesday, March 25, 2015 3:26 PM
  • Hi ,

        I have been working on A Windows 8.1 app wherein I have a user control (MagnifyTip.XAML)and there is a separate MainPage.XAML. 

    I have to use my user control on the MainPage.XAML wherein , When I tap and hold on the MainPage , my user control appears and where ever I move my finger , the User control clips the area and keeps displaying it in the user control.

    Please look at this video for better understanding. I have to develop a similar app.

    What I have developed till now can be downloaded here.

    My user control XAML is

    <UserControl
        x:Class="controlMagnifier.MagnifierUsercontrol"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:local="using:controlMagnifier"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        mc:Ignorable="d"
        d:DesignHeight="300"
    
        d:DesignWidth="200">
    
    
        <Canvas x:Name="controlCanvas" x:FieldModifier="public"   >
            <Canvas.RenderTransform>
                <RotateTransform>
    
                </RotateTransform>
            </Canvas.RenderTransform>
    
            <Grid Height="250" Width="176" Canvas.Left="23" Canvas.Top="40" >
    
                    <Border x:FieldModifier="public" x:Name="imgBorder" Width="150" CornerRadius="50,50,50,50" Margin="13,20,13,90">
                    <Border.Background>
                        <ImageBrush x:FieldModifier="public" x:Name="image1"    />
                    </Border.Background>
                </Border>
    
    
                <TextBlock x:Name="txtreading" Height="30" Width="80" Margin="0,-145,0,0" FontWeight="Bold" Foreground="Red"  FontSize="20" Text="ABC" TextAlignment="Center" />
                
                <Path x:Name="MagnifyTip"  Data="m 422.67516,254.62099 c -54.00107,0 -97.94018,-42.99659 -97.94018,-95.82439 0,-52.83449 43.93911,-95.824384 97.94018,-95.824384 53.98741,0 97.93335,42.989894 97.93335,95.824384 0,52.8278 -43.94594,95.82439 -97.93335,95.82439 z m -4.5e-4,-201.388003 c -59.74605,0 -108.33864,48.616303 -108.33864,108.338643 0,56.09938 81.0924,116.80009 104.5378,191.74948 0.50401,1.61877 2.01605,2.72166 3.71189,2.7098 1.70178,-0.0237 3.1901,-1.13847 3.67039,-2.76909 C 449.00187,276.46834 531.00741,217.73624 531.01334,161.55977 531.00741,101.84929 482.4089,53.232987 422.67471,53.232987 Z" Fill="#FFF4F4F5" Stretch="Fill" Stroke="Black" UseLayoutRounding="False" Height="227" Width="171" />
    
    
            </Grid>
        </Canvas>
    
    </UserControl>

    My requirement is to attach the ellipse which I am using in the project uploaded to be inside the user control ! I am unable to do that !! My user control is a Path data. I am open to suggestions to modify my user control but the shape has to be like this only ! The user control should be able to move in all the directions as shown in the video above. ! need help !! 

    The Mainpage.XAML will be having an image tag (original image ) 


    <Image x:name="image1" Stretch="Uniform" HorizontalAlignment="Center" VerticalAlignment="Center" />

    So , In short . I have a background image . When I tap and hold on it for some 1 second , the user control appears and starts clipping the region around my finger. I can move the finger anywhere and the area is being clipped !!

    I would also like to make a note of orientation over here ! At any orientation , the clip should happen !


    Apoorv Kumar Upadhyay

    Thursday, March 26, 2015 4:32 PM
  • This is the Silverlight forum.

    That's not Silverlight, it's win store app xaml.

    The Windows app store forum is what you want.

    .

    You realise Win 8.1 has a magnifier already?

    http://windows.microsoft.com/en-gb/windows-8/use-magnifier-see-items


    Hope that helps.
    Recent Technet articles: Property List Editing; Dynamic XAML

    Thursday, March 26, 2015 8:58 PM
  • Hi,

    Since this issue is related to windows store, I will move to windows store forum for a better support,  thanks for your understanding.

    Best Regards,

    Jambor


    We are trying to better understand customer views on social support experience, so your participation in this interview project would be greatly appreciated if you have time. Thanks for helping make community forums a great place.
    Click HERE to participate the survey.

    Friday, March 27, 2015 2:15 AM