All geek questions in one place

Using uniformgrid to place buttons in a square

I am writing this game for children (memory) and have a list of tiles (List) that I associate with the controls inside the wrapper. Right now I have 22 tiles and they are arranged 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 number of tiles. I can’t get the tiles to display correctly using a single grid, the size is very small and in the upper left corner of the screen. When I set the columns and row properties, they should appear as if they were out of bounds. Who 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>
+4
source share
1 answer

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

Source: https://habr.com/ru/post/1382708/

More articles:


All Articles