2 つの矢印ボタンの間にコンテンツを表示するツールバー ボタンを作成しようとしています。コードを使用してそれを行うことができました:
<ItemsControl
ScrollViewer.VerticalScrollBarVisibility="Auto"
ItemsSource="{Binding DynamicToolbarItems}"
ItemTemplate="{StaticResource ItemTemplate}"
HorizontalAlignment="Left">
<ItemsControl.Template>
<ControlTemplate TargetType="{x:Type ItemsControl}">
<ScrollViewer Focusable="false" Padding="{TemplateBinding Padding}">
<ScrollViewer.Template>
<ControlTemplate TargetType="{x:Type ScrollViewer}">
<Grid Background="Transparent">
<Grid.RowDefinitions>
<RowDefinition Height="16" />
<RowDefinition/>
<RowDefinition Height="16" />
</Grid.RowDefinitions>
<Border Grid.Row="0" BorderThickness="0,0,0,1" BorderBrush="#666666">
<Grid Margin="1" x:Name="UpGrid">
<Path x:Name="UpArrowPath" Fill="#FFFFFF" Data="{StaticResource UpArrowGeometry}" Margin="-1" HorizontalAlignment="Center" VerticalAlignment="Center"/>
<RepeatButton x:Name="RepeatButtonUp" Command="{x:Static ScrollBar.LineUpCommand}" Opacity="0"/>
<RepeatButton x:Name="RepeatButtonPageUp" Command="{x:Static ScrollBar.PageUpCommand}" Visibility="Hidden"/>
</Grid>
</Border>
<ScrollContentPresenter Grid.Row="1" x:Name="PART_ScrollContentPresenter" CanContentScroll="{TemplateBinding CanContentScroll}" CanHorizontallyScroll="False" CanVerticallyScroll="False" ContentTemplate="{TemplateBinding ContentTemplate}" Content="{TemplateBinding Content}" Margin="{TemplateBinding Padding}"/>
<Border Grid.Row="2" BorderThickness="0,1,0,0" BorderBrush="#666666">
<Grid Margin="1" x:Name="DownGrid">
<Path x:Name="DownArrowPath" Data="{StaticResource DownArrowGeometry}" Margin="-1" HorizontalAlignment="Center" VerticalAlignment="Center" Fill="#FFFFFF"/>
<RepeatButton x:Name="RepeatButtonDown" Command="{x:Static ScrollBar.LineDownCommand}" Opacity="0" />
<RepeatButton x:Name="RepeatButtonPageDown" Command="{x:Static ScrollBar.PageDownCommand}" Visibility="Hidden"/>
</Grid>
</Border>
</Grid>
<ControlTemplate.Triggers>
<MultiTrigger>
</MultiTrigger>
<Trigger SourceName="UpGrid" Property="IsMouseOver" Value="True">
<Setter TargetName="UpArrowPath" Property="Fill" Value="#02abf2" />
</Trigger>
<Trigger SourceName="DownGrid" Property="IsMouseOver" Value="True">
<Setter TargetName="DownArrowPath" Property="Fill" Value="#02abf2" />
</Trigger>
<!--Trigger SourceName="RepeatButtonPageUp" Property="IsEnabled" Value="False">
<Setter TargetName="UpArrowPath" Property="Fill" Value="Red" />
</Trigger>
<Trigger SourceName="RepeatButtonPageDown" Property="IsEnabled" Value="False">
<Setter TargetName="DownArrowPath" Property="Fill" Value="Red" />
</Trigger-->
</ControlTemplate.Triggers>
</ControlTemplate>
</ScrollViewer.Template>
<ItemsPresenter SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"/>
</ScrollViewer>
<ControlTemplate.Triggers>
<Trigger Property="IsGrouping" Value="true">
<Setter Property="ScrollViewer.CanContentScroll" Value="false"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</ItemsControl.Template>
<ItemsControl.GroupStyle>
<GroupStyle HidesIfEmpty="True">
<GroupStyle.HeaderTemplate>
<DataTemplate>
<Separator x:Name="Separator" Style="{StaticResource ToolbarSeparatorStyle}"/>
<DataTemplate.Triggers>
<DataTrigger Binding="{Binding RelativeSource={RelativeSource PreviousData}}" Value="{x:Null}">
<Setter TargetName="Separator" Property="Visibility" Value="Collapsed"/>
</DataTrigger>
</DataTemplate.Triggers>
</DataTemplate>
</GroupStyle.HeaderTemplate>
</GroupStyle>
</ItemsControl.GroupStyle>
</ItemsControl>
私の唯一の問題は、スクロールできなくなったときに矢印ボタンの塗りつぶしの色を変更したいということです。コードでは、2 つのトリガーがコメントアウトされていることがわかります。
<!--Trigger SourceName="RepeatButtonPageUp" Property="IsEnabled" Value="False">
<Setter TargetName="UpArrowPath" Property="Fill" Value="Red" />
</Trigger>
<Trigger SourceName="RepeatButtonPageDown" Property="IsEnabled" Value="False">
<Setter TargetName="DownArrowPath" Property="Fill" Value="Red" />
</Trigger-->
スクロールするものが何もないときに RepeatButtons が無効にならないため、これは機能しないと思います。
これを実装するにはどうすればよいですか?
ありがとうございました!