如何设计ScrollViewer中水平滚动条的高度？

2010-08-02 03:31:15 644 阅读 AI 写同款 · GEO 优化AI 选题数据监测一键分发 ›

WPF ScrollViewer滚动条失效？可能是这个属性没设置对（附完整代码示例）本文深入解析WPF中ScrollViewer滚动条失效的核心原因，指出关键在于控件或其父容器缺乏明确的尺寸约束。通过剖析Height、Width属性与不同布局容器（如Grid、StackPanel）的交互，并提供多个完整代码示例，帮助开发者快速定位并解决滚动问题，确保滚动功能正常生效。阅读详情

下面是我设计的，模板加上高度是可以改变。但是为什么移动但是ScrollViewer容器中的东西不移动了？



<ScrollViewer x:Name="sl" HorizontalAlignment="Left" HorizontalScrollBarVisibility="Visible" VerticalScrollBarVisibility="Auto" Template="{StaticResource sll}">

<StackPanel x:Name="ChildGrid2" Orientation="Horizontal"></StackPanel>

</ScrollViewer>

下面是我的模板的代码





<ControlTemplate x:Key="sll" TargetType="ScrollViewer">

<Grid Background="{TemplateBinding Panel.Background}">

<Grid.ColumnDefinitions>

<ColumnDefinition Width="*" />

<ColumnDefinition Width="Auto" />

</Grid.ColumnDefinitions>

<Grid.RowDefinitions>

<RowDefinition Height="*" />

<RowDefinition Height="Auto" />

</Grid.RowDefinitions>

<Rectangle Grid.Column="1" Grid.Row="1" Fill="{DynamicResource {x:Static SystemColors.ControlBrushKey}}" />

<ScrollContentPresenter 

Grid.Column="0" 

Grid.Row="0" 

Margin="{TemplateBinding Control.Padding}" 

Content="{TemplateBinding ContentControl.Content}" 

ContentTemplate="{TemplateBinding ContentControl.ContentTemplate}" 

CanContentScroll="{TemplateBinding ScrollViewer.CanContentScroll}" />

<ScrollBar 

Grid.Column="1" 

Grid.Row="0" 

Minimum="0" 

Maximum="{TemplateBinding ScrollViewer.ScrollableHeight}" 

ViewportSize="{TemplateBinding ScrollViewer.ViewportHeight}" 

Value="{Binding Path=VerticalOffset, Mode=OneWay, RelativeSource={RelativeSource Mode=TemplatedParent}}" 

Visibility="{TemplateBinding ScrollViewer.ComputedVerticalScrollBarVisibility}" 

Cursor="Arrow" 

AutomationProperties.AutomationId="VerticalScrollBar" />

<ScrollBar Height="50"

Orientation="Horizontal" 

Grid.Column="0" 

Grid.Row="1" 

Minimum="0" 

Maximum="{TemplateBinding ScrollViewer.ScrollableWidth}" 

ViewportSize="{TemplateBinding ScrollViewer.ViewportWidth}" 

Value="{Binding Path=HorizontalOffset, Mode=OneWay, RelativeSource={RelativeSource Mode=TemplatedParent}}" 

Visibility="{TemplateBinding ScrollViewer.ComputedHorizontalScrollBarVisibility}" 

Cursor="Arrow" 

AutomationProperties.AutomationId="HorizontalScrollBar" />

</Grid>

</ControlTemplate>

下面是效果图。但是滚动不了了~~

...全文

WPF ScrollViewer控件：7大黄金法则让你轻松掌控滚动世界！ WPF ScrollViewer终极指南：7大黄金法则解决滚动难题本文针对WPF ScrollViewer常见问题（滚动失效/样式混乱/性能卡顿），提出7大解决方案：基础配置：必须设置VerticalScrollBarVisibility="Auto" 动态控制：代码中灵活切换滚动条状态样式定制：通过ControlTemplate美化滚动条事件处理：用ScrollChanged实现精准同步性能优化：IsDeferredScrollingEnabled缓解卡顿逻辑滚动：CanC 阅读详情

jstangwh

WPF/Silverlight 8,757 成员 12,031 内容

+ 关注 + 加入社区

切换为时间正序

jv9 2010-08-03

打赏
举报

[Quote=引用 9 楼 jstangwh 的回复:]
引用 8 楼 guoluren_kang 的回复:
引用 7 楼 jstangwh 的回复:
引用 6 楼 sunpire 的回复:
这个只能在派生类的 override OnApplyTemplate() 中去实现，

C# code

public ScrollBar HorizontalBar{ get; private set; }
public override void……
[/Quote]

效果看起来很不错啊，加油文辉。

jstangwh 2010-08-03

打赏
举报

[Quote=引用 11 楼 jv9 的回复:]
引用 9 楼 jstangwh 的回复:
引用 8 楼 guoluren_kang 的回复:
引用 7 楼 jstangwh 的回复:
引用 6 楼 sunpire 的回复:
这个只能在派生类的 override OnApplyTemplate() 中去实现，

C# code

public ScrollBar HorizontalBar{ get; private set; }……
[/Quote]

好~~~

Sunpire 2010-08-02

打赏
举报

[Quote=引用 9 楼 jstangwh 的回复:]
步骤1,将滚动条隐藏
步骤2.自己做了一个"滚动条" 来控制隐藏的滚动条实现滑块的效果[/Quote]
还有一种办法，从 Panel 派生一个子类，实现自定义面板，用来摆放特定的对象，可以更彻底的解决问题。

jstangwh 2010-08-02

打赏
举报

[Quote=引用 8 楼 guoluren_kang 的回复:]
引用 7 楼 jstangwh 的回复:
引用 6 楼 sunpire 的回复:
这个只能在派生类的 override OnApplyTemplate() 中去实现，

C# code

public ScrollBar HorizontalBar{ get; private set; }
public override void OnApplyTemplate()
{
base……
[/Quote]
刚回宿舍~代码在公司.说白了
由于我们的产品全是在触摸屏下面操作的.所以
步骤1,将滚动条隐藏
步骤2.自己做了一个"滚动条" 来控制隐藏的滚动条实现滑块的效果

明天贴下代码和效果图吧.

老Key 2010-08-02

打赏
举报

[Quote=引用 7 楼 jstangwh 的回复:]
引用 6 楼 sunpire 的回复:
这个只能在派生类的 override OnApplyTemplate() 中去实现，

C# code

public ScrollBar HorizontalBar{ get; private set; }
public override void OnApplyTemplate()
{
base.OnAppl……

我已经用另外一……
[/Quote]说出来分享一下啊。。呵呵

jstangwh 2010-08-02

打赏
举报

[Quote=引用 6 楼 sunpire 的回复:]
这个只能在派生类的 override OnApplyTemplate() 中去实现，

C# code

public ScrollBar HorizontalBar{ get; private set; }
public override void OnApplyTemplate()
{
base.OnAppl……
[/Quote]

我已经用另外一种方式实现了~~明天贴解决方案,先谢谢了~~

Sunpire 2010-08-02

打赏
举报

这个只能在派生类的 override OnApplyTemplate() 中去实现，



        public ScrollBar HorizontalBar{ get; private set; }

        public override void OnApplyTemplate()

        {

            base.OnApplyTemplate();

            HorizontalBar= (ScrollBar)GetTemplateChild("HorizontalBar");

        }

在WPF中这称为创建“CutomControl” ，不是“UserControl”。

感觉LZ的做法越来越歪了。其实，从 ScrollViewer 中派生出一个 XXXScrollViewer ，并指定 ControlTemplate ，LZ的要求应都能解决。

LZ究竟想实现什么功能？

jstangwh 2010-08-02

打赏
举报

[Quote=引用 4 楼 sunpire 的回复:]
引用 3 楼 jstangwh 的回复:
谢了1楼的兄弟~~有思路了~~

这个不是思路吧，这个是ControlTemplate的硬性要求吧
[/Quote]

现在问题又来了~~郁闷~~



<Window.Resources>

		<ControlTemplate x:Key="sll" TargetType="{x:Type ScrollViewer}">

			<Grid    Background="{TemplateBinding Panel.Background}">

				<Grid.ColumnDefinitions>

					<ColumnDefinition      Width="*" />

					<ColumnDefinition   Width="Auto" />

				</Grid.ColumnDefinitions>

				<Grid.RowDefinitions>

					<RowDefinition       Height="*" />

					<RowDefinition       Height="Auto" />

				</Grid.RowDefinitions>

				<Rectangle       Grid.Column="1"        Grid.Row="1"      Fill="{DynamicResource {x:Static SystemColors.ControlBrushKey}}" />

				<ScrollContentPresenter 

					Grid.Column="0" 

					Grid.Row="0" 

					Margin="{TemplateBinding Padding}" 

					Content="{TemplateBinding Content}" 

					ContentTemplate="{TemplateBinding ContentTemplate}" 

					CanContentScroll="{TemplateBinding ScrollViewer.CanContentScroll}" />

				<ScrollBar Width="50" 

					Grid.Column="1" 

					Grid.Row="0" 

					Minimum="0" 

					Maximum="{TemplateBinding ScrollableHeight}" 

					ViewportSize="{TemplateBinding ViewportHeight}" 

					Value="{Binding VerticalOffset, Mode=OneWay, RelativeSource={RelativeSource Mode=TemplatedParent}}" 

					Visibility="{TemplateBinding ComputedVerticalScrollBarVisibility}" 

					Cursor="Arrow" 

					AutomationProperties.AutomationId="VerticalScrollBar" />

				<ScrollBar Height="50" x:Name="HorizontalBar" 

					Orientation="Horizontal" 

					Grid.Column="0" 

					Grid.Row="1" 

					Minimum="0" 

					Maximum="{TemplateBinding ScrollableWidth}" 

					ViewportSize="{TemplateBinding ViewportWidth}" 

					Value="{Binding HorizontalOffset, Mode=OneWay, RelativeSource={RelativeSource Mode=TemplatedParent}}" 

					Visibility="{TemplateBinding ComputedHorizontalScrollBarVisibility}" 

					Cursor="Arrow" 

					AutomationProperties.AutomationId="HorizontalScrollBar" />

			</Grid>

		</ControlTemplate>

	</Window.Resources>

如何获取Template里的HorizontalBar????????????

Sunpire 2010-08-02

打赏
举报

[Quote=引用 3 楼 jstangwh 的回复:]
谢了1楼的兄弟~~有思路了~~
[/Quote]
这个不是思路吧，这个是ControlTemplate的硬性要求吧

jstangwh 2010-08-02

打赏
举报

谢了1楼的兄弟~~有思路了~~

jstangwh 2010-08-02

打赏
举报

好主意~

Sunpire 2010-08-02

打赏
举报

ScrollViewer 中有三个部件：ScrollContentPresenter、HorizontalScrollBar
、VerticalScrollBar ，但是LZ给的 ControlTemplate 中不包含这三个部件的名称，用 x:Key 补回去吧。

如何设计ScrollViewer中水平滚动条的高度？

相关推荐