Posizionamento di un elemento all'interno della tela dal centro (anziché dall'angolo in alto a sinistra) utilizzando solo XAML in Silverlight/WinRT

Question

La domanda comune sul posizionamento di un elemento all'interno di Canvas è "Come posizionare il centro dell'elemento (anziché il Angolo in alto a sinistra)".

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

Diverse soluzioni sono presentati, ma tutti hanno svantaggi.

Esiste un metodo semplice (XAML solo) per posizionare un elemento interno tela in modo che la sua Canvas.Left e Canvas.Top corrispondono al centro dell'elemento e proprietà sia di dimensioni e la posizione possono essere vincolati ad alcune altre proprietà?

ho trovato un modo molto semplice per fare questo in WPF (appena impostato Margin="-1000000"Positioning an element inside the Canvas by its center (instead of the top left corner) using only XAML in WPF), ma non funziona per Silverlight/WinRT. L'unico altro metodo che conosco richiede la creazione di ValueConverter per eseguire il calcolo x *= -0.5 (che non è solo XAML).

Answer 1

Anche se non è abbastanza, ecco un esempio di utilizzo nidificate RenderTransform s con origini diverse per compensare la posizione dell'oggetto di fare in modo che sia centrato:

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

Gli interni Grid s sono per la creazione del trasforma, mentre l'esterno Canvas è lì per assicurarsi che il Grid all'interno di esso imposta la sua dimensione a quella del contenuto al suo interno.