Another part of the overall solution we were trying to come up with in conjunction my previous post on Scrolling Multiple Content Areas, we also needed to come up with a way to only show X number of items in the visible region of an ItemsControl wrapped in a ScrollViewer.  This was more tricky than I had initially anticipated, but the solution seems to work for us and its got relatively few moving parts. 

The end result of the concept can be visualize in this Xbap example.  By moving the slider at the bottom, you effectively change the width of the ItemsControl containing the colored Ellipses.  In order to do this as a reflection of the number of items contained within, you need another IMultiValueConverter.

Here is the meat of the code for the RelativeSizeConverter I came up with:

public class RelativeSizeConverter : IMultiValueConverter

{

    public object Convert(object[] values, Type targetType, object parameter, CultureInfo culture)

    {

        if( values.Length != 3 )

            throw new InvalidOperationException("Don't do that!");


        double containerSize = System.Convert.ToDouble(values[0]);

        int totalItems = System.Convert.ToInt32(values[1]);

        int visibleItems = System.Convert.ToInt32(values[2]);


        var visibleSubgroupSize = containerSize / visibleItems;


        return totalItems * visibleSubgroupSize;

    }

}

Basically we figure out how wide things would be if we only had the visible items and then we apply that to all the items return.  In order for this to work, there cannot be any sizing between the ItemsControl and the ScrollViewer, but its a small price to pay.  That would look odd any way in my opinion, but maybe I am simply justifying the solution!

Anyways, putting this RelativeSizeConverter to use, we get:

<ScrollViewer x:Name="container" HorizontalScrollBarVisibility="Auto" VerticalScrollBarVisibility="Auto">

    <ItemsControl x:Name="itemsToScale">

        <ItemsControl.Width>

            <MultiBinding Converter="{StaticResource sizeConverter}">

                <Binding ElementName="container" Path="ActualWidth" />

                <Binding ElementName="itemsToScale" Path="Items.Count" />

                <Binding ElementName="scaleSize" Path="Value" />

            </MultiBinding>

        </ItemsControl.Width>

    </ItemsControl>

</ScrollViewer>


<Slider x:Name="scaleSize" Width="100" HorizontalAlignment="Center"

        Minimum="2" Maximum="{Binding ElementName=itemsToScale, Path=Items.Count}"

        Value="{Binding ElementName=itemsToScale, Path=Items.Count, Mode=OneWay}"

        IsSnapToTickEnabled="True" TickFrequency="1" />

Notice we use the ScrollViewer’s ActualWidth as our “containerSize”.  The ItemsControl itself has the “totalItems” count, and finally we are using a Slider with the name “scaleSize” to adjust the “visibleItems” count.

Code for the Xbap sample at the top can be downloaded here.

I struggled to solve a UI dilemma while at my current client.  For various reasons, we came across a situation in which we needed to scroll two areas of the view based on a single Scrollbar.  You can see what we were attempting and finally achieved here.

The end result is smooth, yet not quite intuitive so I thought I would share the results and steps taken.  The idea is to use a surrogate ScrollViewer as the source for the offset of a TranslateTransform being applied to content within a seperate ScrollViewer.

Unfortunately, the offset values exposed by the ScrollViewer are both readonly and opposite in force to which we would need to apply to the surrogate.  That is, if we scroll 20 units to the right on our ScrollViewer, we would need to offset the surrogate ScrollViewer by that amount in the opposite direction.  To resolve this problem, we use an IValueConverter to multiple the offset by –1.

Here we can see the Xaml used to layout and hookup this scenario:

<StackPanel>

    <ScrollViewer HorizontalScrollBarVisibility="Hidden" VerticalScrollBarVisibility="Hidden">

        <Grid>

            <Grid.RenderTransform>

                <TranslateTransform X="{Binding ElementName=mainScroller, Path=HorizontalOffset, Converter={StaticResource multiplyConv}, ConverterParameter=-1}" />

            </Grid.RenderTransform>

            <!-- Content Scrolled by another goes here -->

        </Grid>

    </ScrollViewer>

    <ScrollViewer x:Name="mainScroller" HorizontalScrollBarVisibility="Auto" VerticalScrollBarVisibility="Auto">

        <!-- Content Scrolled on its own accord goes here-->

    </ScrollViewer>

</StackPanel>

You can see that we have two ScrollViewers and the one which will be controlled (versus the controller) has a container element with a TranslateTransform applied to its RenderTransform property.  This is what we will be using to move the controlled content in the opposite direction of the ScrollBar.

If you find that your content for each are not the same size, you can always use a MultiBinding to accomodate the relative scrolling distance as applied to the offset.

You can find the source to the sample Xbap here.