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

时间:2017-12-06 09:47:36

标签: c# wpf scrollviewer

我正在尝试创建一个滚动查看器,只有当窗口大小太小而无法显示所有内容时,滚动按钮才可见。我已将一些按钮放入scrollviewer中的stackpanel。

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

滚动是工作kk但是当堆栈中没有足够的元素以便不需要滚动时如何禁用它?

1 个答案:

答案 0 :(得分: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是包含按钮的堆栈面板的名称