設置文本框的滾動條樣式

Question

如何使用我的文本框樣式制作滾動查看器使用我的滾動條樣式？

    <Style x:Key="MyTextBoxStyle" BasedOn="{x:Null}" TargetType="{x:Type TextBox}">                    
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type TextBoxBase}">
                <Grid>
                    <Rectangle x:Name="_rct" Stroke="#FFA8AFBE" RadiusX="8" RadiusY="8" Fill="White" />
                    <Border Name="Border" BorderThickness="2" CornerRadius="8" BorderBrush="#FFA8AFBE" Background="White">                   
                        <ScrollViewer Margin="6"  x:Name="PART_ContentHost" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" />
                    </Border>
                </Grid>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
    </Style> 

我的滾動條樣式：

    <Style x:Key="MyScrollBarStyle" TargetType="{x:Type ScrollBar}">
    <Setter Property="Background" Value="#ff007eb1"/>
    <Setter Property="BorderBrush" Value="Transparent"/>
    <Style.Triggers>
        <Trigger Property="Orientation" Value="Vertical">
            <Setter Property="Width" Value="5"/>
            <Setter Property="Height" Value="Auto" />
            <Setter Property="Template" Value="{StaticResource VerticalScrollBar}" />
        </Trigger>
        <Trigger Property="Orientation" Value="Horizontal">
            <Setter Property="Width" Value="Auto"/>
            <Setter Property="Height" Value="5" />
            <Setter Property="Template" Value="{StaticResource HorizontalScrollBar}" />
        </Trigger>
    </Style.Triggers>      
</Style>

Answer 1

你可以這樣做：

<TextBox>
    <TextBox.Resources>
        <Style TargetType="{x:Type ScrollBar}"
                BasedOn="{StaticResource MyScrollBarStyle}"></Style>
    </TextBox.Resources>
</TextBox>

Answer 2

在Silverlight 5中，

<TextBox  TextWrapping="Wrap" VerticalScrollBarVisibility="Auto">
 <TextBox.Resources>
     <Style TargetType="ScrollBar" BasedOn="{StaticResource ScrollBarStyle1}">
                            </Style>
  </TextBox.Resources>

要定義自己的滾動條樣式， 請訪問此處

Answer 3

您必須修改ScrollViewer模板。

<ControlTemplate TargetType="{x:Type ScrollViewer}">
<Grid Background="{TemplateBinding Background}">
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="*"/>
        <ColumnDefinition Width="Auto"/>
    </Grid.ColumnDefinitions>
    <Grid.RowDefinitions>
        <RowDefinition Height="*"/>
        <RowDefinition Height="Auto"/>
    </Grid.RowDefinitions>
    <ScrollBar 
        x:Name="PART_VerticalScrollBar"
        Grid.Column="1"
        Minimum="0.0"
        Maximum="{TemplateBinding ScrollableHeight}"
        ViewportSize="{TemplateBinding ViewportHeight}"
        Value="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=VerticalOffset, Mode=OneWay}"
        Visibility="{TemplateBinding ComputedVerticalScrollBarVisibility}"         
        Cursor="Arrow"
        AutomationProperties.AutomationId="VerticalScrollBar"
        Style="{StaticResource MyScrollBarStyle}"/>
    <ScrollBar 
        x:Name="PART_HorizontalScrollBar"
        Orientation="Horizontal"
        Grid.Row="1"
        Minimum="0.0"
        Maximum="{TemplateBinding ScrollableWidth}"
        ViewportSize="{TemplateBinding ViewportWidth}"
        Value="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=HorizontalOffset, Mode=OneWay}"
        Visibility="{TemplateBinding ComputedHorizontalScrollBarVisibility}"
        Cursor="Arrow"
        AutomationProperties.AutomationId="HorizontalScrollBar"
        Style="{StaticResource MyScrollBarStyle}"/>
    <ScrollContentPresenter 
        x:Name="PART_ScrollContentPresenter"
        Margin="{TemplateBinding Padding}"
        Content="{TemplateBinding Content}"
        ContentTemplate="{TemplateBinding ContentTemplate}"
        CanContentScroll="{TemplateBinding CanContentScroll}"/>
    <Rectangle 
        x:Name="Corner"
        Grid.Column="1"
        Grid.Row="1"
        Fill="{DynamicResource {x:Static SystemColors.ControlBrushKey}}"/>
</Grid>

或者您可以刪除樣式的鍵，以便將其應用於所有ScrollBar控件。 希望這可以幫助。