3

カスタムスクロールバーを書いています。マウスがグリッド (スクロールバー) にホバーすると、その高さとつまみの高さを増やし、背景などを変更する必要があります。つまみはプロパティの 1 つではなくグリッドの子要素であるため、つまみの高さを除いてすべてが実行されます。

これは、TargetName "ellipse" が見つからないという例外を私に与えている完全なテンプレート コードです。

<ControlTemplate x:Key="HorizontalScrollBar" TargetType="{x:Type ScrollBar}">
    <Grid MaxHeight="28">
        <Grid.ColumnDefinitions>
            <ColumnDefinition MaxWidth="2"></ColumnDefinition>
            <ColumnDefinition Width="*"></ColumnDefinition>
            <ColumnDefinition MaxWidth="2"></ColumnDefinition>
        </Grid.ColumnDefinitions>
        <Track Name="PART_Track" Grid.Column="1" IsDirectionReversed="False">
            <Track.DecreaseRepeatButton>
                <RepeatButton Command="ScrollBar.PageLeftCommand"
                    Style="{StaticResource ScrollBarPageButtonStyle}">
                </RepeatButton>
            </Track.DecreaseRepeatButton>
            <Track.Thumb>
                <Thumb IsTabStop="False" Margin="0,1,0,1" BorderBrush="{StaticResource StandardBorderBrush}">
                    <Thumb.Template>
                        <ControlTemplate TargetType="{x:Type Thumb}">
                            <Rectangle Height="12" Name="ellipse"  Stroke="{StaticResource StandardBorderBrush}"
                                            Fill="{StaticResource StandardBrush}" RadiusX="5" RadiusY="5"></Rectangle>
                        </ControlTemplate>
                    </Thumb.Template>                        
                </Thumb>                    
            </Track.Thumb>
            <Track.IncreaseRepeatButton>
                <RepeatButton Command="ScrollBar.PageRightCommand"
                    Style="{StaticResource ScrollBarPageButtonStyle}">
                </RepeatButton>
            </Track.IncreaseRepeatButton>
        </Track>
        <Grid.Resources>
            <Style TargetType="Grid">
                <Style.Triggers>
                    <Trigger Property="IsMouseOver" Value="True">
                        <Setter Property="Background" Value="Gray"></Setter>
                        <Setter TargetName="ellipse" Property="Height" Value="28"></Setter>
                    </Trigger>
                    <Trigger Property="IsMouseOver" Value="False">
                        <Setter Property="Background" Value="Transparent"></Setter>
                        <Setter TargetName="ellipse" Property="Height" Value="14"></Setter>
                    </Trigger>
                </Style.Triggers>
            </Style>
        </Grid.Resources>
    </Grid>
</ControlTemplate>
4

1 に答える 1

3

ControlTemplate.TriggersThumb テンプレートのように使用します

  <Track.Thumb>
     <Thumb IsTabStop="False" Margin="0,1,0,1" BorderBrush="Blue">
        <Thumb.Template>
           <ControlTemplate TargetType="{x:Type Thumb}">
              <Rectangle Height="12" x:Name="ellipse"  Stroke="Blue"
                                        Fill="Wheat" RadiusX="5" RadiusY="5"></Rectangle>
                   <ControlTemplate.Triggers>
                        <DataTrigger Binding="{Binding IsMouseOver, RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type Grid}}}"  Value="True">
                             <Setter TargetName="ellipse" Property="Height" Value="28"></Setter>
                          </DataTrigger>
                          <DataTrigger Binding="{Binding IsMouseOver, RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type Grid}}}"  Value="True">
                                <Setter TargetName="ellipse" Property="Height" Value="14"></Setter>
                           </DataTrigger>
                    </ControlTemplate.Triggers>
                 </ControlTemplate>
               </Thumb.Template>
           </Thumb>
   </Track.Thumb>

スタイルトリガーが更新されます

 <Style TargetType="Grid">
     <Style.Triggers>
          <Trigger Property="IsMouseOver" Value="True">
              <Setter Property="Background" Value="Gray"></Setter>
          </Trigger>
          <Trigger Property="IsMouseOver" Value="False">
                <Setter Property="Background" Value="Transparent"></Setter>
          </Trigger>
       </Style.Triggers>
   </Style>
于 2014-06-05T16:23:58.830 に答える