滚动条不在右侧,它位于列表框的中心

时间:2012-01-22 13:35:44

标签: wpf

 <!--listBoxWithAutoScroll_Vertical-->
    <SolidColorBrush x:Key="NormalBrush" Color="#FFCCCCCC"/>
    <SolidColorBrush x:Key="PressedBrush" Color="#FFEEEEEE"/>
    <SolidColorBrush x:Key="DisabledForegroundBrush" Color="#888" />
    <LinearGradientBrush x:Key="NormalBorderBrush" StartPoint="0,0" EndPoint="0,1">
        <GradientBrush.GradientStops>
            <GradientStopCollection>
                <GradientStop Color="#CCC" Offset="0.0"/>
                <GradientStop Color="#444" Offset="1.0"/>
            </GradientStopCollection>
        </GradientBrush.GradientStops>
    </LinearGradientBrush>
    <Style x:Key="ScrollBarPageButton" TargetType="{x:Type RepeatButton}">
        <Setter Property="SnapsToDevicePixels" Value="True"/>
        <Setter Property="OverridesDefaultStyle" Value="true"/>
        <Setter Property="IsTabStop" Value="false"/>
        <Setter Property="Focusable" Value="false"/>
        <Setter Property="Width" Value="6"/>
        <Setter Property="FlowDirection" Value="LeftToRight"/>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type RepeatButton}">
                    <Border BorderBrush="#989590" BorderThickness="1" Background="Transparent" />
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
    <Style x:Key="ScrollBarThumb" TargetType="{x:Type Thumb}">
        <Setter Property="SnapsToDevicePixels" Value="True"/>
        <Setter Property="OverridesDefaultStyle" Value="true"/>
        <Setter Property="IsTabStop" Value="false"/>
        <Setter Property="Focusable" Value="false"/>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type Thumb}">
                    <Border FlowDirection="LeftToRight" Width="6" Background="Gray" 
                            BorderBrush="#989590" BorderThickness="1" />
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
    <Style x:Key="ScrollBarLineButton" TargetType="{x:Type RepeatButton}">
        <Setter Property="SnapsToDevicePixels" Value="True"/>
        <Setter Property="OverridesDefaultStyle" Value="true"/>
        <Setter Property="Focusable" Value="false"/>
         <Setter Property="FlowDirection" Value="LeftToRight"/>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type RepeatButton}">
                    <Border Name="Border" CornerRadius="2" Background="{StaticResource NormalBrush}"
                          BorderBrush="{StaticResource NormalBorderBrush}" >
                        <Path HorizontalAlignment="Left" VerticalAlignment="Center" Fill="Gray"
                            Data="{Binding Path=Content, RelativeSource={RelativeSource TemplatedParent}}" 
                            Opacity="{Binding Path=Opacity, RelativeSource={RelativeSource TemplatedParent}}"  />
                    </Border>
                    <ControlTemplate.Triggers>
                        <Trigger Property="IsPressed" Value="true">
                            <Setter TargetName="Border" Property="Background" Value="{StaticResource PressedBrush}" />
                        </Trigger>
                        <Trigger Property="IsEnabled" Value="false">
                            <Setter Property="Foreground" Value="{StaticResource DisabledForegroundBrush}"/>
                        </Trigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
    <Style x:Key="ListBoxWithAutoScroll_Vertical" TargetType="{x:Type ListBox}" >
        <Setter Property="SnapsToDevicePixels" Value="true"/>
        <Setter Property="OverridesDefaultStyle" Value="true"/>
        <Setter Property="ScrollViewer.HorizontalScrollBarVisibility" Value="Auto"/>
        <Setter Property="ScrollViewer.VerticalScrollBarVisibility" Value="Auto"/>
        <Setter Property="ScrollViewer.CanContentScroll" Value="true"/>
        <Setter Property="Background" Value="Transparent"/>
        <Setter Property="Template">
            <Setter.Value >
                <ControlTemplate>
                    <Grid>
                        <ScrollViewer x:Name="scrollviewer">
                            <ScrollViewer.Template>
                                <ControlTemplate TargetType="{x:Type ScrollViewer}">
                                    <Grid>
                                        <ScrollBar x:Name="PART_VerticalScrollBar" Orientation="Vertical" 
                                                           Value="{TemplateBinding VerticalOffset}"
                                                           Maximum="{TemplateBinding ScrollableHeight}"
                                                           ViewportSize="{TemplateBinding ViewportHeight}"
                                                           Visibility="{TemplateBinding ComputedVerticalScrollBarVisibility}">
                                            <ScrollBar.Template>

                                                <ControlTemplate>
                                                    <Track x:Name="PART_Track" IsDirectionReversed="True">
                                                        <Track.DecreaseRepeatButton>
                                                            <RepeatButton Command="ScrollBar.PageUpCommand"
                                                                        Style="{StaticResource ScrollBarPageButton}"/>
                                                        </Track.DecreaseRepeatButton>
                                                        <Track.IncreaseRepeatButton>
                                                            <RepeatButton Command="ScrollBar.PageDownCommand"
                                                                        Style="{StaticResource ScrollBarPageButton}"/>
                                                        </Track.IncreaseRepeatButton>
                                                        <Track.Thumb>
                                                            <Thumb Style="{StaticResource ScrollBarThumb}" 
                                                                     Background="Gray" Opacity="0.8"/>
                                                        </Track.Thumb>
                                                    </Track>
                                                </ControlTemplate>
                                            </ScrollBar.Template>
                                        </ScrollBar>
                                        <ScrollContentPresenter Width="Auto" HorizontalAlignment="Left"/>
                                    </Grid>
                                </ControlTemplate>
                            </ScrollViewer.Template>
                            <ItemsPresenter/>
                        </ScrollViewer>
                        <Grid x:Name="Panel">
                            <Grid.RowDefinitions>
                                <RowDefinition Height="Auto"/>
                                <RowDefinition Height="*"/>
                                <RowDefinition Height="Auto"/>
                            </Grid.RowDefinitions>
                            <RepeatButton x:Name="LineUpButton" Grid.Row="0" Height="20" Opacity="0" Visibility="Collapsed"
                                  Style="{StaticResource ScrollBarLineButton}"
                                  Content="M 0 8 L 32 8 L 16 0 Z"      
                                  Command="{x:Static ScrollBar.LineUpCommand}"       
                                  CommandTarget="{Binding ElementName=scrollviewer}"
                                  ClickMode="Hover" />
                            <RepeatButton x:Name="LineDownButton" Grid.Row="2" Height="20" Opacity="0" Visibility="Collapsed"
                                  Style="{StaticResource ScrollBarLineButton}"
                                  Content="M 0 0 L 16 8 L 32 0 Z" 
                                  Command="{x:Static ScrollBar.LineDownCommand}"       
                                  CommandTarget="{Binding ElementName=scrollviewer}"
                                  ClickMode="Hover"/>
                        </Grid>
                    </Grid>
                    <ControlTemplate.Triggers>
                        <MultiTrigger>
                            <MultiTrigger.Conditions>
                                <Condition Property="IsMouseOver" Value="True"/>
                                <Condition Property="ComputedVerticalScrollBarVisibility" SourceName="scrollviewer" Value="Visible"/>
                            </MultiTrigger.Conditions>
                            <MultiTrigger.Setters>
                                <Setter TargetName="LineUpButton" Property="Visibility" Value="Visible" />
                                <Setter TargetName="LineDownButton" Property="Visibility" Value="Visible" />
                            </MultiTrigger.Setters>
                            <MultiTrigger.EnterActions>
                                <BeginStoryboard>
                                    <Storyboard>
                                        <DoubleAnimation Storyboard.TargetName="LineUpButton" 
                                                         Storyboard.TargetProperty="Opacity" To="0.8" Duration="0:0:0.25"/>
                                        <DoubleAnimation Storyboard.TargetName="LineDownButton" 
                                                         Storyboard.TargetProperty="Opacity" To="0.8" Duration="0:0:0.25"/>
                                    </Storyboard>
                                </BeginStoryboard>
                            </MultiTrigger.EnterActions>
                            <MultiTrigger.ExitActions>
                                <BeginStoryboard>
                                    <Storyboard>
                                        <DoubleAnimation Storyboard.TargetName="LineUpButton" 
                                                         Storyboard.TargetProperty="Opacity" To="0" Duration="0:0:0.25"/>
                                        <DoubleAnimation Storyboard.TargetName="LineDownButton" 
                                                         Storyboard.TargetProperty="Opacity" To="0" Duration="0:0:0.25"/>
                                    </Storyboard>
                                </BeginStoryboard>
                            </MultiTrigger.ExitActions>
                        </MultiTrigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
        <Setter Property="ItemsPanel">
            <Setter.Value >
                <ItemsPanelTemplate>
                    <VirtualizingStackPanel Orientation="Vertical"/>
                </ItemsPanelTemplate>
            </Setter.Value>
        </Setter>
    </Style>

我有一个列表框,我在堆栈面板中显示一组图像。我添加的滚动条位于列表框的中心,它没有显示在列表框的右上角。有人可以提供帮助

1 个答案:

答案 0 :(得分:0)

将滚动条置于右侧的一种方法是将HorizontalAlignment="Right"添加到<ScrollBar>控件。这会将滚动条移动到右侧,但如果ListBox不够宽以适合它们,则意味着滚动条和滚动内容将重叠。

如果您想阻止滚动条和滚动内容重叠,您需要修改包含GridScrollBar的{​​{1}}。向此ScrollContentPresenter添加两个ColumnDefinition,并将这两个控件放在两个不同的列中:

Grid

第1列(包含滚动条)的<Grid> <Grid.ColumnDefinitions> <ColumnDefinition /> <ColumnDefinition Width="Auto" /> </Grid.ColumnDefinitions> <ScrollBar Grid.Column="1"> <!-- ScrollBar contents and other properties omitted for brevity --> </ScrollBar> <ScrollContentPresenter Grid.Column="0" Width="Auto" HorizontalAlignment="Left"/> </Grid> ColumnDefinitionWidth,因此此列只能获得所需的空间。 Auto位于第0列,其ScrollContentPresenter保留为默认值,这意味着它将获得所有剩余空间。