使用统一网格将按钮排列成正方形 [英] Using uniformgrid to arrange buttons in a square

问题描述

我正在编写此儿童游戏(内存)，并且有一个磁贴列表(列表)，我将其绑定到包装面板中的项目控件.现在我有22个磁贴，它们自己排列在中心的两行中.

Im writing this childrens game (memory) and have a list of tiles (List) which i bind to an items control inside a wrappanel. Right now i have 22 tiles and they arrange themselves in two rows in the center.

我真正想要的是将其布置在屏幕中央的5x5矩阵中，因此它会随着瓷砖的数量而缩放.使用统一网格时，我无法使磁贴正确显示，其尺寸非常小，并且位于屏幕的左上角.当我设置列和行属性时，它会显示，好像它在边界之外.有人可以帮忙吗?

What i really want is to arrange it in a 5x5 matrix in the center of the screen, so it scales with the amount of tiles. I cant get the tiles to show properly, when using the uniform grid, the size is very small and in the top left corner of my screen. When i set the columns and the rows properties it toesnt show up, as if its outside the bounds. Anyone can help?

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>

推荐答案

您将ItemsControl放在UniformGrid中(这就是控件如此小的原因)，但统一网格应位于 inside ItemsControl作为其ItemsPanel(当前为WrapPanel).

You put the ItemsControl in a UniformGrid (That is why the control is so small), but the uniform grid should be inside the ItemsControl as its ItemsPanel (which is currrently a 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>

这篇关于使用统一网格将按钮排列成正方形的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！