如何根据窗口大小选择性地启用和禁用滚动按钮

Question

我正在尝试制作一个滚动查看器，其中滚动按钮仅在窗口尺寸太小而无法显示所有内容时才可见。我已将一些按钮放入滚动查看器中的堆栈面板中。

<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>

滚动正在工作，但是当堆栈中没有足够的元素以至于不需要滚动时，如何禁用它？

Answer 1

你可以像下面这样创建一个转换器

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();
    }
}

其中 140 是所需的总高度（您可以使此参数动态化）。然后你只需要绑定按钮的可见性

<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}"/>

你只需要在你的资源中定义上面提到的转换器就可以了

编辑多绑定解决方案 2：

如果您想避免硬编码按钮的总高度，您可以使用多值转换器和多绑定

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();
    }
}

并以这种方式修改您的按钮

<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>

其中“test 是包含按钮的堆栈面板的名称