<!--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>
我有一个列表框,我在堆栈面板中显示一组图像。我添加的滚动条位于列表框的中心,它没有显示在列表框的右上角。有人可以提供帮助
答案 0 :(得分:0)
将滚动条置于右侧的一种方法是将HorizontalAlignment="Right"
添加到<ScrollBar>
控件。这会将滚动条移动到右侧,但如果ListBox
不够宽以适合它们,则意味着滚动条和滚动内容将重叠。
如果您想阻止滚动条和滚动内容重叠,您需要修改包含Grid
和ScrollBar
的{{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>
ColumnDefinition
为Width
,因此此列只能获得所需的空间。 Auto
位于第0列,其ScrollContentPresenter
保留为默认值,这意味着它将获得所有剩余空间。