CODEWITHSUNDEEP
c#wpfwpf-controls
Marcel
Marcel

Reputation: 1074

Custom ItemsControl with optional Paging

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

Upvotes: 0

Views: 1444

Answers (1)

Marat Khasanov
Marat Khasanov

Reputation: 3848

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!

Upvotes: 1

Related Questions