Utiliser uniformgrid pour organiser les boutons dans un carré

Question

Je suis en train d'écrire ce jeu pour enfants (mémoire) et j'ai une liste de tuiles (Liste) que je lie à un contrôle d'objets dans un wrappanel. En ce moment j'ai 22 tuiles et ils s'organisent en deux rangées au centre.

Ce que je veux vraiment, c'est l'agencer dans une matrice 5x5 au centre de l'écran, de sorte qu'il s'équilibre avec la quantité de carreaux. Je ne peux pas obtenir les carreaux pour montrer correctement, en utilisant la grille uniforme, la taille est très petite et dans le coin supérieur gauche de mon écran. Lorsque je mets les colonnes et les propriétés des lignes, il n'apparaît pas, comme s'il était en dehors des limites. Quelqu'un peut-il aider?

XAML:

<Window x:Class="MemoryWPF.MainWindow" 
     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
     Title="MainWindow" Height="350" Width="525"> 
    <Window.Resources> 
     <Style TargetType="Button" x:Key="TransparentButton"> 
      <Setter Property="Template"> 
       <Setter.Value> 
        <ControlTemplate TargetType="Button"> 
         <Border Background="Transparent"> 
          <ContentPresenter/> 
         </Border> 
        </ControlTemplate> 
       </Setter.Value> 
      </Setter> 
     </Style> 
    </Window.Resources> 
    <UniformGrid Columns="5" Rows="5"> 
     <UniformGrid.Background> 
      <ImageBrush x:Name="backBrush"/> 
     </UniformGrid.Background>   
     <ItemsControl ItemsSource="{Binding Tiles}" VerticalAlignment="Center" HorizontalAlignment="center" Margin="100"> 
      <ItemsControl.ItemTemplate> 
       <DataTemplate> 
        <Button Style="{StaticResource TransparentButton}" BorderThickness="0" Padding="-4" Command="{Binding TurnTileCommand}" Opacity="{Binding OpacityVal}" Margin="10"> 
         <Image Width="150" Height="150" Source="{Binding ImageUri}"/> 
        </Button> 
       </DataTemplate> 
      </ItemsControl.ItemTemplate> 
      <ItemsControl.ItemsPanel> 
       <ItemsPanelTemplate> 
        <WrapPanel/> 
       </ItemsPanelTemplate> 
      </ItemsControl.ItemsPanel> 
     </ItemsControl> 
     <TextBlock Text="{Binding AmountTilesLeft}" VerticalAlignment="Bottom" FontSize="15"/> 
    </UniformGrid> 
</Window> 

Answer 1

Vous mettez le ItemsControl dans un UniformGrid (C'est la raison pour laquelle le contrôle est si petit), mais la grille uniforme devrait être à l'intérieur la ItemsControl comme ItemsPanel (qui est currrently une WrapPanel).

<ItemsControl ItemsSource="{Binding Tiles}" VerticalAlignment="Center" HorizontalAlignment="center" Margin="100"> 
     <ItemsControl.ItemTemplate> 
      <DataTemplate> 
       <Button Style="{StaticResource TransparentButton}" BorderThickness="0" Padding="-4" Command="{Binding TurnTileCommand}" Opacity="{Binding OpacityVal}" Margin="10"> 
        <Image Width="150" Height="150" Source="{Binding ImageUri}"/> 
       </Button> 
      </DataTemplate> 
     </ItemsControl.ItemTemplate> 
     <ItemsControl.ItemsPanel> 
      <ItemsPanelTemplate> 
       <UniformGrid Columns="5" Rows="5"> 
        <UniformGrid.Background> 
         <ImageBrush x:Name="backBrush"/> 
        </UniformGrid.Background> 
       </UniformGrid> 
      </ItemsPanelTemplate> 
     </ItemsControl.ItemsPanel> 
    </ItemsControl>