How to selectively enable and disable scroll button based on window size

Question

I am trying to make a scroll viewer in which scroll button is visible only when window size is too small to show all the content. I have put some button into a stackpanel which is in the scrollviewer.

<Grid>
           <Grid.ColumnDefinitions>
            <ColumnDefinition Width="*"/>

        </Grid.ColumnDefinitions>
        <Grid.RowDefinitions>

            <RowDefinition Height="20"/>
            <RowDefinition Height="*"/>
            <RowDefinition Height="20"/>

            <RowDefinition/>
        </Grid.RowDefinitions>

        <RepeatButton x:Name="LineLeftButton" 
                Grid.Column="0"
                Grid.Row="0"

                Command="{x:Static ScrollBar.LineDownCommand}" 
                Background="{StaticResource uparrow}"
                CommandTarget="{Binding ElementName=scrollViewer}"/>
        <RepeatButton x:Name="LineRightButton" 
                Grid.Column="0"
                Grid.Row="2"
              Background="{StaticResource downarrow}" 
                Command="{x:Static ScrollBar.LineUpCommand}"      
                CommandTarget="{Binding ElementName=scrollViewer}"/>
        <ScrollViewer Grid.Column="1" Grid.Row="1"  x:Name="scrollViewer" 
                  VerticalScrollBarVisibility="Hidden" 
                  HorizontalScrollBarVisibility="Hidden">
            <StackPanel Orientation="Vertical">
            <Button Width="150" Height="20"/>
            <Button Width="150" Height="20"/>
            <Button Width="150" Height="20"/>
            <Button Width="150" Height="20"/>
            <Button Width="150" Height="20"/>
            <Button Width="150" Height="20"/>

            <Button Width="150" Height="20"/>
            </StackPanel>
        </ScrollViewer>
    </Grid>

The scroll is working kk but how do you disable it when there are not enough element in the stack such that a scroll is not required?

i dont want the scroll bar. i just need the scroll button to be visible when its required — jithin
thats alright , dou have ant suggestion how i can hide the repeat button in my code based on requirement — jithin

Daniele Sartori Daniele Sartori · Accepted Answer · 2017-12-06T10:27:36

You can create a converter like the following

public class MyConverter : IValueConverter
{
    public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
    {
        if (value is double)
        {
            return ((double)value < 140) ? Visibility.Visible : Visibility.Collapsed;
        }
        return Visibility.Collapsed;
    }

    public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
    {
        throw new NotImplementedException();
    }
}

where 140 is the total height needed (you can make this parameter dynamic). Then you just need to bind the visibility of your button

<RepeatButton x:Name="LineRightButton" 
                Visibility="{Binding ActualHeight, Converter={StaticResource MyConv}, ElementName=scrollViewer, Mode=OneWay}"
                Grid.Column="0"
                Grid.Row="2"
                Background="{StaticResource downarrow}" 
                Command="{x:Static ScrollBar.LineUpCommand}"      
                CommandTarget="{Binding ElementName=scrollViewer}"/>

You just need to define the converter mentioned above in your resources and it's done

EDIT Solution number 2 with Multibinding:

if you want to avoid to hardcode the total height of your button you can use a multivalueconverter and a multibinding

public class MyConverter : IMultiValueConverter
{
    public object Convert(object[] value, Type targetType, object parameter, CultureInfo culture)
    {
        if (value[0] is double && value[1] is double)
        {
            return ((double)value[0] < (double)value[1]) ? Visibility.Visible : Visibility.Collapsed;
        }
        return Visibility.Collapsed;
    }


    public object[] ConvertBack(object value, Type[] targetTypes, object parameter, CultureInfo culture)
    {
        throw new NotImplementedException();
    }
}

and modify your button in this way

<RepeatButton x:Name="LineRightButton" 
            Grid.Column="0"
            Grid.Row="2"
          Background="Black" 
            Command="{x:Static ScrollBar.LineUpCommand}"      
            CommandTarget="{Binding ElementName=scrollViewer}">
        <RepeatButton.Visibility>
            <MultiBinding Converter="{StaticResource MyConv}">
                <Binding Path="ActualHeight"  ElementName="scrollViewer"/>
                <Binding Path="ActualHeight"  ElementName="test"/>
            </MultiBinding>
        </RepeatButton.Visibility>
    </RepeatButton>

where "test is the name of the stackpanel containing the buttons

How to selectively enable and disable scroll button based on window size

1 Answers