c# - 使用 XAML 在最大和最小滚动边界上禁用 ScrollBar 的按钮

Question

下面是相关代码。在我的 RepeatButton 的初始化中，我给了它们 ScrollBar.LineRight/LeftCommand。

但是在我的 RepeatButton 的 ControlTemplate 中，我需要触发 RepeatButton 的 IsEnabled 属性。

我想将 RepeatButton 的 IsEnabled 绑定(bind)到命令的 CanExecute，并在 XAML 中完成。

<Style x:Key="WindowTabScrollerStyle" TargetType="{x:Type ScrollViewer}">
<Style.Resources>
  <Style x:Key="WindowTabScrollBarStyle" TargetType="{x:Type ScrollBar}">
    <Style.Resources>
      <Style x:Key="WindowTabScrollerRepeatButtonStyle" TargetType="{x:Type RepeatButton}">
        <Setter Property="Template">
          <Setter.Value>
            <ControlTemplate TargetType="{x:Type RepeatButton}">
              <Grid>
                <Border Name="PART_Border" BorderThickness="2" BorderBrush="{StaticResource TabScrollerButtonBorderBrush}" Background="{StaticResource TabScrollerButtonBackgroundBrush}" />
                <Canvas Width="5" Height="17" HorizontalAlignment="Center" VerticalAlignment="Center">
                  <Path Name="ScrollArrowImage"
                      Fill="{StaticResource TabScrollerButtonArrowBrush}"/>
                </Canvas>
              </Grid>
              <ControlTemplate.Triggers>
                <Trigger Property="Name" Value="LeftScrollButton">
                  <Setter TargetName="ScrollArrowImage" Property="Data" Value="m5.44,11.6v5.797l-5.437,-8.696l5.437,-8.696v5.797l-1.812,2.899l1.812,2.899z"/>
                </Trigger>
                <Trigger Property="Name" Value="RightScrollButton">
                  <Setter TargetName="ScrollArrowImage" Property="Data" Value="m0,11.6v5.797l5.437,-8.696l-5.437,-8.696v5.797l1.812,2.899l-1.812,2.899z"/>
                </Trigger>
                <MultiTrigger>
                  <MultiTrigger.Conditions>
                    <Condition Property="RepeatButton.IsPressed"  Value="True"/>
                    <Condition Property="RepeatButton.IsEnabled" Value="True"/>
                  </MultiTrigger.Conditions>
                  <Setter TargetName="ScrollArrowImage" Property="Fill" Value="{StaticResource PressedTabScrollerButtonArrowBrush}"/>
                  <Setter TargetName="PART_Border" Property="BorderBrush" Value="{StaticResource PressedTabScrollerButtonBorderBrush}"/>
                  <Setter TargetName="PART_Border" Property="Background" Value="{StaticResource PressedTabScrollerButtonBackgroundBrush}"/>
                </MultiTrigger>
                <Trigger Property="RepeatButton.IsEnabled" Value="False">
                  <Setter TargetName="ScrollArrowImage" Property="Fill" Value="{StaticResource DisabledTabScrollerButtonArrowBrush}"/>
                </Trigger>
              </ControlTemplate.Triggers>
            </ControlTemplate>
          </Setter.Value>
        </Setter>

        <Setter Property="Width" Value="20" />
        <Setter Property="IsTabStop" Value="False" />
        <Setter Property="Interval" Value="50" />
        <Setter Property="Opacity" Value=".7" />
        <Setter Property="Margin" Value="2,1" />
        <Style.Triggers>
          <Trigger Property="IsMouseOver" Value="True">
            <Setter Property="Opacity" Value="1" />
          </Trigger>
        </Style.Triggers>
      </Style>
    </Style.Resources>
    <Setter Property="Template">
      <Setter.Value>
        <ControlTemplate TargetType="{x:Type ScrollBar}">
          <Grid>
            <Grid.ColumnDefinitions>
              <ColumnDefinition Width="Auto" />
              <ColumnDefinition Width="0.00001*" />
              <ColumnDefinition Width="Auto" />
            </Grid.ColumnDefinitions>
            <RepeatButton Grid.Column="0" Name="LeftScrollButton"
                          Style="{StaticResource WindowTabScrollerRepeatButtonStyle}"
                          Command="ScrollBar.LineLeftCommand" />
            <RepeatButton Grid.Column="2" Name="RightScrollButton"
                          Style="{StaticResource WindowTabScrollerRepeatButtonStyle}"
                          Command="ScrollBar.LineRightCommand" />                  
          </Grid>
        </ControlTemplate>
      </Setter.Value>
    </Setter>
    <Setter Property="Orientation" Value="Horizontal" />
    <Setter Property="IsTabStop" Value="False" />
    <Setter Property="Cursor" Value="Arrow" />
    <Setter Property="Background" Value="Transparent" />
  </Style>
</Style.Resources>
<Setter Property="HorizontalContentAlignment" Value="Stretch" />
<Setter Property="VerticalContentAlignment" Value="Stretch" />
<Setter Property="BorderThickness" Value="1" />
<Setter Property="VerticalScrollBarVisibility" Value="Visible" />
<Setter Property="Margin" Value="36,0,0,0" />
<Setter Property="Template">
  <Setter.Value>
    <ControlTemplate TargetType="{x:Type ScrollViewer}">
      <Grid>
        <Grid.ColumnDefinitions>
          <ColumnDefinition Width="*" />
        </Grid.ColumnDefinitions>
        <Grid.RowDefinitions>
          <RowDefinition Height="30" />
        </Grid.RowDefinitions>

        <ScrollContentPresenter x:Name="ScrollContentPresenter"
                                CanContentScroll="True"
                                HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
                                VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
                                ContentTemplate="{TemplateBinding ContentTemplate}"
                                Cursor="{TemplateBinding Cursor}" />

        <ScrollBar x:Name="PART_HorizontalScrollBar"
                   Grid.Column="0"
                   Grid.Row="0"
                   Style="{StaticResource WindowTabScrollBarStyle}"
                   MinHeight="30"
                   Maximum="{TemplateBinding ScrollableWidth}"
                   Minimum="0"
                   Value="{TemplateBinding HorizontalOffset}"
                   ViewportSize="{TemplateBinding ViewportWidth}"
                   Visibility="{Binding ComputedHorizontalScrollBarVisibility, RelativeSource={RelativeSource TemplatedParent}}" />
      </Grid>
    </ControlTemplate>
  </Setter.Value>
</Setter>
</Style>

Answer 1

通过 DataTriggers 和比较其绑定(bind)相等性的 MultiValueConverter，我让它发挥作用。这可能不是最好的方法，但由于 DataTriggers 在 ScrollBar 的 ControlTemplate 中，而且我依赖于两个 ScrollViewer 属性的相等性，所以这是最好的选择。

 <Style x:Key="WindowTabScrollerStyle" TargetType="{x:Type ScrollViewer}">
    <Style.Resources>
      <Style x:Key="WindowTabScrollBarStyle" TargetType="{x:Type ScrollBar}">
        <Style.Resources>
          <Style x:Key="WindowTabScrollerRepeatButtonStyle" TargetType="{x:Type   RepeatButton}">
            <Setter Property="Template">
              <Setter.Value>
                <ControlTemplate TargetType="{x:Type RepeatButton}">
                  <Grid>
                    <Border Name="PART_Border" BorderThickness="2"
                            BorderBrush="{StaticResource TabScrollerButtonBorderBrush}"
                            Background="{StaticResource TabScrollerButtonBackgroundBrush}" />
                    <Canvas Width="5" Height="17" HorizontalAlignment="Center" VerticalAlignment="Center">
                      <Path Name="ScrollArrowImage"
                            Fill="{StaticResource TabScrollerButtonArrowBrush}" />
                    </Canvas>
                  </Grid>
                  <ControlTemplate.Triggers>
                    <Trigger Property="Name" Value="LeftScrollButton">
                      <Setter TargetName="ScrollArrowImage" Property="Data"
                              Value="m5.44,11.6v5.797l-5.437,-8.696l5.437,-8.696v5.797l-1.812,2.899l1.812,2.899z" />
                    </Trigger>
                    <Trigger Property="Name" Value="RightScrollButton">
                      <Setter TargetName="ScrollArrowImage" Property="Data"
                              Value="m0,11.6v5.797l5.437,-8.696l-5.437,-8.696v5.797l1.812,2.899l-1.812,2.899z" />
                    </Trigger>
                    <MultiTrigger>
                      <MultiTrigger.Conditions>
                        <Condition Property="IsPressed" Value="True" />
                        <Condition Property="IsEnabled" Value="True" />
                      </MultiTrigger.Conditions>
                      <Setter TargetName="ScrollArrowImage" Property="Fill"
                              Value="{StaticResource PressedTabScrollerButtonArrowBrush}" />
                      <Setter TargetName="PART_Border" Property="BorderBrush"
                              Value="{StaticResource PressedTabScrollerButtonBorderBrush}" />
                      <Setter TargetName="PART_Border" Property="Background"
                              Value="{StaticResource PressedTabScrollerButtonBackgroundBrush}" />
                    </MultiTrigger>
                    <Trigger Property="IsEnabled" Value="False">
                      <Setter TargetName="ScrollArrowImage" Property="Fill"
                              Value="{StaticResource DisabledTabScrollerButtonArrowBrush}" />
                    </Trigger>
                  </ControlTemplate.Triggers>
                </ControlTemplate>
              </Setter.Value>
            </Setter>

            <Setter Property="Width" Value="20" />
            <Setter Property="IsTabStop" Value="False" />
            <Setter Property="Interval" Value="50" />
            <Setter Property="Opacity" Value=".7" />
            <Setter Property="Margin" Value="2,1" />
            <Style.Triggers>
              <Trigger Property="IsMouseOver" Value="True">
                <Setter Property="Opacity" Value="1" />
              </Trigger>
            </Style.Triggers>
          </Style>
        </Style.Resources>
        <Setter Property="Orientation" Value="Horizontal" />
        <Setter Property="IsTabStop" Value="False" />
        <Setter Property="Cursor" Value="Arrow" />
        <Setter Property="Background" Value="Transparent" />
        <Setter Property="Template">
          <Setter.Value>
            <ControlTemplate TargetType="{x:Type ScrollBar}">
              <ControlTemplate.Resources>
                <converters:IsEqualMultiConverter x:Key="IsEqualMultiConverter" />
              </ControlTemplate.Resources>
              <Grid>
                <Grid.ColumnDefinitions>
                  <ColumnDefinition Width="Auto" />
                  <ColumnDefinition Width="0.00001*" />
                  <ColumnDefinition Width="Auto" />
                </Grid.ColumnDefinitions>
                <RepeatButton Grid.Column="0" Name="LeftScrollButton"
                              Style="{StaticResource WindowTabScrollerRepeatButtonStyle}"
                              Command="ScrollBar.LineLeftCommand" />
                <RepeatButton Grid.Column="2" Name="RightScrollButton"
                              Style="{StaticResource WindowTabScrollerRepeatButtonStyle}"
                              Command="ScrollBar.LineRightCommand" />
              </Grid>
              <ControlTemplate.Triggers>
                <DataTrigger Value="True">
                  <DataTrigger.Binding>
                    <MultiBinding Converter="{StaticResource IsEqualMultiConverter}">
                      <Binding ElementName="PART_TabScroller" Path="HorizontalOffset" />
                      <Binding ElementName="PART_TabScroller" Path="ScrollableWidth" />
                    </MultiBinding>
                  </DataTrigger.Binding>
                  <Setter TargetName="RightScrollButton" Property="RepeatButton.IsEnabled" Value="False" />
                </DataTrigger>
                <DataTrigger Binding="{Binding HorizontalOffset, ElementName=PART_TabScroller}" Value="0">
                  <Setter TargetName="LeftScrollButton" Property="RepeatButton.IsEnabled" Value="False" />
                </DataTrigger>
              </ControlTemplate.Triggers>
            </ControlTemplate>
          </Setter.Value>
        </Setter>
      </Style>
    </Style.Resources>
    <Setter Property="HorizontalContentAlignment" Value="Stretch" />
    <Setter Property="VerticalContentAlignment" Value="Stretch" />
    <Setter Property="BorderThickness" Value="1" />
    <Setter Property="VerticalScrollBarVisibility" Value="Visible" />
    <Setter Property="Margin" Value="36,0,0,0" />
    <Setter Property="Template">
      <Setter.Value>
        <ControlTemplate TargetType="{x:Type ScrollViewer}">
          <Grid>
            <Grid.ColumnDefinitions>
              <ColumnDefinition Width="*" />
            </Grid.ColumnDefinitions>
            <Grid.RowDefinitions>
              <RowDefinition Height="30" />
            </Grid.RowDefinitions>

            <ScrollContentPresenter x:Name="ScrollContentPresenter"
                                    CanContentScroll="True"
                                    HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
                                    VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
                                    ContentTemplate="{TemplateBinding ContentTemplate}"
                                    Cursor="{TemplateBinding Cursor}" />

            <ScrollBar x:Name="PART_HorizontalScrollBar"
                       Grid.Column="0"
                       Grid.Row="0"
                       Style="{StaticResource WindowTabScrollBarStyle}"
                       MinHeight="30"
                       Maximum="{TemplateBinding ScrollableWidth}"
                       Minimum="0"
                       Value="{TemplateBinding HorizontalOffset}"
                       ViewportSize="{TemplateBinding ViewportWidth}"
                       Visibility="{TemplateBinding ComputedHorizontalScrollBarVisibility}" />
          </Grid>
        </ControlTemplate>
      </Setter.Value>
    </Setter>
  </Style>