Pozycjonowanie elementu wewnątrz płótna za jego środek (zamiast lewego górnego rogu) za pomocą tylko XAML w Silverlight/WinRT

Question

Najczęstsze pytanie dotyczące umieszczania elementu wewnątrz Canvas brzmi "Jak ustawić środek elementu (zamiast Górny lewy róg)".

• WPF: Resizing a circle, keeping the center point instead of TopLeft?
• WPF Center Ellipse at X, Y
• WPF element positioning on a Canvas

Kilka rozwiązania są prezentowane, ale wszystkie one mają wady.

Czy istnieje prosty (tylko XAML) metoda, aby umieścić element wewnątrz płótno tak, że jego Canvas.Left i Canvas.Top odpowiadają środka elementu i obie wielkość i położenie właściwości mogą być zobowiązane do niektórych innych właściwości?

Znalazłem bardzo prosty sposób, aby to zrobić w WPF (wystarczy ustawić Margin="-1000000"Positioning an element inside the Canvas by its center (instead of the top left corner) using only XAML in WPF), ale to nie działa dla Silverlight/WinRT. Jedyną inną znaną mi metodą jest wykonanie ValueConverter w celu wykonania obliczeń x *= -0.5 (która nie jest tylko XAML).

Answer 1

Chociaż nie dość, oto przykład używania zagnieżdżonych RenderTransform S z różnych źródeł, aby zrównoważyć pozycję obiektu, aby tak było, że to skupione:

<UserControl x:Class="UrlTest.Center" 
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
    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="400"> 

    <Canvas x:Name="LayoutRoot" Background="White"> 
     <ContentControl Canvas.Top="100" Content="{Binding ActualWidth,ElementName=Center, StringFormat=Width \{0\}}"/> 
     <ContentControl Canvas.Top="120" Content="{Binding ActualHeight,ElementName=Center, StringFormat=Height \{0\}}"/> 
     <Grid x:Name="Center" RenderTransformOrigin="-.5,-.5" Canvas.Left="40" Canvas.Top="25"> 
      <Grid.RenderTransform> 
       <ScaleTransform ScaleX="-1" ScaleY="-1"/> 
      </Grid.RenderTransform> 
      <Grid RenderTransformOrigin="-.25,-.25"> 
       <Grid.RenderTransform> 
        <ScaleTransform ScaleX="-1" ScaleY="-1"/> 
       </Grid.RenderTransform> 
       <Ellipse Width="80" Height="50" Fill="Aquamarine"/> 
       <ContentControl FontSize="20" HorizontalContentAlignment="Center" VerticalContentAlignment="Center">Center</ContentControl> 
      </Grid> 
     </Grid> 
    </Canvas> 
</UserControl> 

Wewnętrzne Grid s są za stworzenie przekształca, podczas gdy zewnętrzny Canvas jest tam, aby upewnić się, że wewnątrz niego Grid jest ustawiony na rozmiar zawartości wewnątrz.