CODEWITHSUNDEEP
imagexamlvisual-studio-2013windows-store-appswindows-8.1
Samanvitha Suresh
Samanvitha Suresh

Reputation: 31

Image within an ellipse XAML

I am using VS2013, Windows 8.1 and developing a windows store app.

Im creating a simple contacts - listview, that displays the contact details along with contact image within an ellipse. When I click on the listview item, I want to display the contact details on right side of the page. Now the issue I am facing is, I am not able to fit the contact image to the right size on the ellipse on the right side pane. I am able to achieve it in my list view since its an smaller ellipse. Important: I do not want the image to look stretched/Zoomed in /Zoomed out. It should exactly look like how it appears within the list view. (For list view , I have used Ellipse.Fill along with Imagebrush, but relatively smaller sized ellipse)

What I tried so far:

  1. Ellipse.Fill property which paints the image to size, but the image looks stretched.

  2. I tried setting "Stretch" property within the image tag within ellipse, but did not work.

  3. I tried Image.clip, but I do not have "EllipseGeometry" option, instead only RectangleGeometry.

  4. Lastly I created an image that has a transparent center and I place this frame over the contact image like a mask. This works well on some resolutions. But when some other resolution, the contact images which are binded from backend, go beyond the frame, although I set "MaxHeight" or "Height" properties.

I want to do it the right way, since I feel adding an image mask might not be a great way to achieve this. Please help!

I tried this for listview, n works fine, But the same code for right pane looks stretched (I have tried removing stretch attirbute, or tried other options like Stretch ="None" /"Uniform" etc )

I have attached screenshot.

Upvotes: 0

Views: 1622

Answers (3)

GuChil
GuChil

Reputation: 139

If your image has portrait orientation, then you can use Stretch, AlignmentX, AlignmentY properties of ImageBrush like this to achieve best preview result

<Border CornerRadius="20" BorderThickness="1" BorderBrush="DarkGoldenrod">
        <Ellipse Width="40" Height="40">
            <Ellipse.Fill>
                <ImageBrush ImageSource="{Binding PractitionerPhoto}"  Stretch="UniformToFill" AlignmentX="Center" AlignmentY="Top" />
            </Ellipse.Fill>
        </Ellipse>
    </Border>

Upvotes: 0

Samanvitha Suresh
Samanvitha Suresh

Reputation: 31

The properties "AlignmentX AlignmentY" within ImageBrush solved my issue.

Upvotes: 1

Muhammad Hassan
Muhammad Hassan

Reputation: 1057

Since code isn't clearly mentioned, you can do it with both Ellipse and Border. Here's the code snippet

<!--With Ellipse-->
<Ellipse Height="200"
         Width="200">
         <Ellipse.Fill>
             <ImageBrush Stretch="Uniform"
                         ImageSource="Assets/profile.png" />
         </Ellipse.Fill>
</Ellipse>


<!--With Border-->
<Border Height="200"
        Width="200"
        CornerRadius="150">
        <Border.Background>
            <ImageBrush Stretch="Uniform"
                        ImageSource="Assets/profile.png" />
        </Border.Background>
</Border>

Here's the result enter image description here

Upvotes: 1

Related Questions