Использование равномерной сетки для расположения кнопок в квадрате - PullRequest
Новая
       14

Использование равномерной сетки для расположения кнопок в квадрате

5 голосов
/ 23 ноября 2011

Я пишу эту детскую игру (память) и у меня есть список тайлов (List), которые я привязываю к элементу управления внутри обертки.Сейчас у меня 22 плитки, и они располагаются в два ряда в центре.

Что мне действительно нужно, так это расположить его в матрице 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>

1 Ответ

18 голосов
/ 23 ноября 2011

Вы помещаете ItemsControl в UniformGrid (вот почему элемент управления такой маленький), но равномерная сетка должна быть внутри ItemsControl как ItemsPanel (чтов настоящее время 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>
...