Custom ItemsControl with optional Paging

Question

I have a slightly extraordinary request ;-)

I'd like to develop an ItemsControl with a "Previous" Control and a "Next" Control. Like this bound to an arbitrary ViewModel:

<controls:PagedItemsControl ItemsSource="{Binding Items}">
    <ItemsControl.ItemsPanel>
        <ItemsPanelTemplate>
            <UniformGrid Columns="5" />
        </ItemsPanelTemplate>
    </ItemsControl.ItemsPanel>
    <ItemsControl.ItemTemplate>
        <DataTemplate DataType="system:String">
            <Border Background="Gray" Margin="5">
                <TextBlock Text="{Binding}" Foreground="White" VerticalAlignment="Center" HorizontalAlignment="Center" />
            </Border>
        </DataTemplate>
    </ItemsControl.ItemTemplate>
    <controls:PagedItemsControl.PreviousControl>
        <Button Content="Previous" Command="{Binding PreviousCommand}" />
    </controls:PagedItemsControl.PreviousControl>
    <controls:PagedItemsControl.NextControl>
        <Button Content="Next" Command="{Binding NextCommand}" />
    </controls:PagedItemsControl.NextControl>
</controls:PagedItemsControl>

In the example I passed 2 buttons controlled by the ViewModel's commands. It would be awesome if somebody could tell me how to listen to the Control.IsEnable state and show the PreviousControl as first item if enable and the the NextControl as last item if enable.

Example Paged ItemsControl

Thank you

You need a `CollectionView` (probably a `CompositeCollection` too since your Previous and Next elements are going to be a different type than the rest of the items), and a `RoutedCommand` to handle the execution of the previous / next logic and enabling/disabling. — Federico Berasategui, Jan 15 '15 at 15:39

score 1 · Accepted Answer · edited May 23 '17 at 11:57

Have a look at the following XAML. We cannot add elements to ItemsPanel while using ItemsSource. But we may try to build a tricky collection which consists of ItemsSource and additional elements. Unfortunately CollectionContainer unable to bound to Items directly. Lucky that good guys already found a solution for this case.

<Grid>
    <Grid.Resources>
        <BooleanToVisibilityConverter x:Key="BoolToVisibilityConverter"/>
    </Grid.Resources>
    <TextBlock Name="TrickyBinder"
                Tag="{Binding Items}"
                Visibility="Collapsed"/>
    <ItemsControl>
        <ItemsControl.ItemsPanel>
            <ItemsPanelTemplate>
                <UniformGrid Columns="5" />
            </ItemsPanelTemplate>
        </ItemsControl.ItemsPanel>
        <ItemsControl.ItemTemplate>
            <DataTemplate DataType="system:String">
                <Border Background="Gray" Margin="5">
                    <TextBlock Text="{Binding}" Foreground="White" VerticalAlignment="Center" HorizontalAlignment="Center" />
                </Border>
            </DataTemplate>
        </ItemsControl.ItemTemplate>
        <ItemsControl.ItemsSource>
            <CompositeCollection>
                <CollectionContainer>
                    <CollectionContainer.Collection>
                        <col:ArrayList>
                            <Button Content="Previous" Command="{Binding PreviousCommand}" Visibility="{Binding Path=IsEnabled,RelativeSource={RelativeSource Self},Converter={StaticResource BoolToVisibilityConverter}}" />
                        </col:ArrayList>
                    </CollectionContainer.Collection>
                </CollectionContainer>
                <CollectionContainer Collection="{Binding Path=Tag,Source={x:Reference TrickyBinder}}"/>
                <CollectionContainer>
                    <CollectionContainer.Collection>
                        <col:ArrayList>
                            <Button Content="Next" Command="{Binding NextCommand}" Visibility="{Binding Path=IsEnabled,RelativeSource={RelativeSource Self},Converter={StaticResource BoolToVisibilityConverter}}" />
                        </col:ArrayList>
                    </CollectionContainer.Collection>
                </CollectionContainer>
            </CompositeCollection>
        </ItemsControl.ItemsSource>
    </ItemsControl>
</Grid>

Hope this helps!

Yeah, looks great. A slight improvement: Provide `` as ressource and use `` instead of your "TrickyBinder" — Marcel, Jan 20 '15 at 14:32
@Marcel agree. I wasn't sure that Binding will work properly so I used the most obvious way. Anyway, my example is just a concept ;) — Marat Khasanov, Jan 20 '15 at 15:01

Custom ItemsControl with optional Paging

1 Answers1