Изображение в пределах эллипса XAML

Question

Я использую VS2013, Windows 8.1 и разрабатываю приложение для магазина Windows.

Im создает простой контакт - listview, который отображает контактные данные вместе с контактным изображением внутри эллипса. Когда я нажимаю на элемент listview, я хочу отобразить контактные данные в правой части страницы. Теперь проблема, с которой я сталкиваюсь, заключается в том, что я не могу установить контактное изображение в нужном размере на эллипсе справа. Я могу добиться этого в моем представлении списка с его меньшего эллипса. Важно: я не хочу, чтобы изображение выглядело растянутым/увеличенным/уменьшенным. Он должен точно выглядеть так, как он отображается в представлении списка. (Для просмотра списка, я использовал Ellipse.Fill вместе с ImageBrush, но относительно меньше размера эллипса)

То, что я пытался до сих пор:

1. Ellipse.Fill свойство, которое рисует изображение по размеру, но изображение выглядит растянутым.

2. Я попытался установить свойство «Stretch» ​​в теге изображения внутри эллипса, но не работал.

3. Я попробовал Image.clip, но у меня нет опции «EllipseGeometry», а только RectangleGeometry.

4. Наконец-то я создал изображение с прозрачным центром и поместил этот кадр поверх контактного изображения как маску. Это хорошо работает в некоторых резолюциях. Но когда какое-либо другое разрешение, контактные изображения, которые привязаны к бэкэнду, выходят за рамки, хотя я устанавливаю свойства «MaxHeight» или «Height».

Я хочу сделать это правильно, так как я чувствую, что добавление маски для изображений может быть отличным способом достижения этого. Пожалуйста помоги!

Я попытался это для ListView, п работает отлично, но тот же код для правой панели выглядит вытянутый (я попытался удалить растягивания attirbute или пробовал другие варианты, как Stretch = «None»/«Равномерный» и т.д.)

Я приложил скриншот.

Answer 1

от свойств "AlignmentX AlignmentY" в ImageBrush решить мою проблему.

Answer 2

Поскольку код явно не указан, вы можете сделать это как с Ellipse, так и с Border. Вот фрагмент кода

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

Вот результат