Tuesday, September 22, 2015

Using Grid to layout ItemsControl Items

The key is to use ItemContainerStyle setting Grid.Coulumn and Grid.Row


        <ItemsControl ItemsSource="{Binding VDItems}" Grid.Row="1" AllowDrop="True" Name="itemsCtlVD" VerticalAlignment="Stretch" HorizontalAlignment="Stretch" Background="White">
            <ItemsControl.ItemsPanel>
                <ItemsPanelTemplate>
                    <Grid ShowGridLines="False">
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition />
                            <ColumnDefinition />
                            <ColumnDefinition />
                            <ColumnDefinition />
                            <ColumnDefinition />
                            <ColumnDefinition />
                        </Grid.ColumnDefinitions>
                    </Grid>
                </ItemsPanelTemplate>
            </ItemsControl.ItemsPanel>

          
            <ItemsControl.ItemContainerStyle>
                <Style>
                    <Setter Property="Grid.Column"
                    Value="{Binding ColumnIndex}" />
                    <Setter Property="Grid.Row"
                    Value="{Binding RowIndex}" />
                </Style>
            </ItemsControl.ItemContainerStyle>

            
            <ItemsControl.ItemTemplate>
                <DataTemplate>
                    <Border BorderThickness="0.2" BorderBrush="LightGray" Background="{Binding Background}" >
                        <Viewbox Stretch="Uniform" StretchDirection="DownOnly">
                            <Label Content="{Binding Data}" FontWeight="Bold" Foreground="{Binding Foreground}">
                            </Label>
                        </Viewbox>
                        <i:Interaction.Triggers>
                            <i:EventTrigger EventName="MouseLeftButtonUp">
                                <i:InvokeCommandAction Command="{Binding ClickTradeCommand}"
                                                       CommandParameter="{Binding .}" ></i:InvokeCommandAction>
                            </i:EventTrigger>
                        </i:Interaction.Triggers>
                    </Border>
                </DataTemplate>
            </ItemsControl.ItemTemplate>
        </ItemsControl>

2 comments:

Anonymous said...

If you're quiet, you're not living. You've got to be noisy and colorful and lively.
_________________________
Cheap FIFA 16 Coins and FIFA 16 Coins

reginaburchard33 said...

My current solution to this problem is to use a set of AttachedProperties for a Grid that allow you to bind RowCount and ColumnCount properties to a property on the ViewModel

You can find the code for my version of the attached properties on my blog here, and they can be used like this:





professional thesis writing service