uniformgridを使って四角形のボタンを配置する

Question

この子どものゲーム（メモリ）を書き、アイテムのコントロールにバインドするタイル（リスト）のリストがあります。今私は22タイルを持って、彼らは中心に2列に自分自身を配置します。

私が本当に望むのは、画面中央の5x5マトリックスに配置することです。タイルの量に合わせて拡大縮小します。均一なグリッドを使用すると、サイズが非常に小さく、画面の左上隅にタイルが正しく表示されません。私は列と行のプロパティを設定すると、それが外にあるかのように表示されます。誰でも助けることができますか？

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

あなたは（コントロールが非常に小さい理由がある）UniformGridでItemsControlを置くが、均一なグリッドがcurrrentlyでそのItemsPanelとして内部ItemsControl（する必要があります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>