Using uniformgrid to arrange buttons in a square

11,886

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>
Share:
11,886
Brian Hvarregaard
Author by

Brian Hvarregaard

Software developer, developing Digital signage, GreenWeb

Updated on June 23, 2022

Comments

  • Brian Hvarregaard
    Brian Hvarregaard almost 2 years

    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.

    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>