CODEWITHSUNDEEP
c#wpfuniformgrid
iJay
iJay

Reputation: 4273

Uniform Grid control with multiple Items C# WPF

I need a window like below ;

enter image description here

I tried to achieve this, but couldn't get 100% outcome. Where did I do wrong?

    <UniformGrid>
    <ItemsControl ItemsSource="{Binding Data}">
    <ItemsControl.ItemTemplate>
        <DataTemplate>
           <Border  BorderBrush="Black" Background="Gainsboro" BorderThickness="3" Margin="2" Width="100" >  
              <Grid FlowDirection="LeftToRight">
                <Grid.RowDefinitions>
                    <RowDefinition Height="Auto" />
                    <RowDefinition Height="Auto"/>
                    <RowDefinition Height="Auto"/>
                </Grid.RowDefinitions>

                <Grid.ColumnDefinitions>
                    <ColumnDefinition/>
                </Grid.ColumnDefinitions>

                <Label HorizontalAlignment="Center" Content="{Binding Label1Text}" Grid.Row="1" Margin="2"/>

                <Label HorizontalAlignment="Center" Content="{Binding Label2Text}" Grid.Row="2" Margin="2"/>

                <Button HorizontalAlignment="Center" Content="Button1" Width="80" Height="80"
                        Command="{Binding DataContext.Command1, RelativeSource={RelativeSource AncestorType=ItemsControl}}"
                        CommandParameter="{Binding}"
                        Grid.Row="0"  Margin="2"/>
            </Grid>
        </Border>

        </DataTemplate>
        </ItemsControl.ItemTemplate>

        <ItemsControl.Template>
            <ControlTemplate TargetType="ItemsControl">
                <ScrollViewer CanContentScroll="True">
                    <ItemsPresenter/>
                </ScrollViewer>
            </ControlTemplate>
    </ItemsControl.Template>

   </ItemsControl>
  </UniformGrid>

Result window;

enter image description here

Upvotes: 3

Views: 3460

Answers (2)

har07
har07

Reputation: 89285

Try to change ItemsPanel template to UniformGrid instead of wrapping the ItemsControl within UniformGrid. You can also try using WrapPanel instead of UniformGrid :

.......
<ItemsControl.ItemsPanel>
        <ItemsPanelTemplate>
                <UniformGrid Columns="2"/>
                <!--  <WrapPanel/> -->
        </ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
.......

Upvotes: 3

gomi42
gomi42

Reputation: 2519

You need to specify the number of columns:

<UniformGrid Columns="2">
....

Upvotes: 0

Related Questions