Comment aligner les boutons à l'horizontale et à la propagation de l'égalité avec les xaml windows phone

J'ai finalement trouvé la réponse à mon problème dans un article que j'ai trouvé sur le web.

Vous pouvez le vérifier ici: À l'aide de Grilles avec ItemsControl en XAML

En bref, vous avez besoin de sous-classe, le itemsControl et vous avez besoin d'écraser le GetContainerForItemOverride méthode qui permettra de prendre soin de copier les "données" de l'ItemTemplate à la ContentPresenter. Dans ce cas, la ligne et la colonne, mais à mon exigence, c'est juste la Colonne, puisque ma ligne sera toujours 0.

Ici est au cœur de la partie du code si vous ne voulez pas de vérifier l'intégralité de l'article qui résolvent le problème de commandes de réglage à l'horizontale dans une grille à l'aide ItemsControl, mais notez l'article prend soin de créer des lignes & colonnes dynamiquement, ce qui ne m'intéressent pas pour mon projet.

public class GridAwareItemsControl : ItemsControl
{
    protected override DependencyObject GetContainerForItemOverride()
    {
        ContentPresenter container = (ContentPresenter)base.GetContainerForItemOverride();
        if (ItemTemplate == null)
        {
            return container;
        }

        FrameworkElement content = (FrameworkElement)ItemTemplate.LoadContent();
        BindingExpression rowBinding = content.GetBindingExpression(Grid.RowProperty);
        BindingExpression columnBinding = content.GetBindingExpression(Grid.ColumnProperty);

        if (rowBinding != null)
        {
            container.SetBinding(Grid.RowProperty, rowBinding.ParentBinding);
        }

        if (columnBinding != null)
        {
            container.SetBinding(Grid.ColumnProperty, columnBinding.ParentBinding);
        }

        return container;
    }
}

La finale xaml ressemble à ceci:

<controls:GridAwareItemsControl ItemsSource="{Binding Links}">
    <ItemsControl.ItemsPanel>
        <ItemsPanelTemplate>
            <Grid Background="Pink">
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="*"/>
                    <ColumnDefinition Width="Auto"/>
                    <ColumnDefinition Width="*"/>
                </Grid.ColumnDefinitions>
            </Grid>
       </ItemsPanelTemplate>
    </ItemsControl.ItemsPanel>
    <ItemsControl.ItemTemplate>
        <DataTemplate>
            <Button
                 Grid.Column="{Binding Column}" 
                 Grid.Row="0" 
                 Width="120" Height="120">
                 <ContentControl>
                     <StackPanel Orientation="Vertical">
                         <Image Source="{Binding Image}" Width="36" Height="36" Margin="5"
                                Stretch="UniformToFill" HorizontalAlignment="Center"/>
                         <TextBlock Text="{Binding Description}" Foreground="#0F558E" 
                          FontSize="18" HorizontalAlignment="Center"/>
                     </StackPanel>
                 </ContentControl>
            </Button>
        </DataTemplate>
    </ItemsControl.ItemTemplate>
</controls:GridAwareItemsControl>

Une fois que j'ai utilisé le nouveau contrôle, mes boutons ont été correctement placés à l'intérieur de la grille, et, par conséquent, ont été uniformément espacées que la grille a pris soin de l'esprit de la ColumnDefinitions.

Si quelqu'un sait comment obtenir la même sans avoir à créer un nouveau contrôle et de la substitution de la méthode (en d'autres termes, pur XAML), veuillez le poster que je serais très intéressé de voir comment cela peut être fait.

Merci et merci à Robert Garfoot pour le partage de ce super code!

PS: Notez que j'ai simplifié mon code xaml dans le but de créer un échantillon de test sans aucun style sur les boutons, de sorte que ces sont plutôt gros, si vous essayez basé sur cet échantillon.

Mise à JOUR:

Petite faute de frappe correction, mais ma grille de définition de la colonne a été définie comme

 <Grid.ColumnDefinitions>
     <ColumnDefinition Width="*"/>
     <ColumnDefinition Width="Auto"/>
     <ColumnDefinition Width="*"/>
 </Grid.ColumnDefinitions>

mais comme @OmegaMan suggéré, pour être répartie uniformément, il doit avoir été défini comme

 <Grid.ColumnDefinitions>
     <ColumnDefinition Width="Auto"/>
     <ColumnDefinition Width="*"/>
     <ColumnDefinition Width="Auto"/>
 </Grid.ColumnDefinitions>

OriginalL'auteur Thierry