没有背景的Scrollviewer

时间:2015-12-22 11:54:07

标签: wpf background scrollviewer

我想问你是否有人知道如何在没有背景的情况下创建ScrollViewer。我知道使用样式或模板是不可能的(我猜)并且必须从ScrollVeiwer创建新组件,但我找不到哪个方法/属性覆盖。

例如:

<Window x:Class="WpfScroll.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Title="MainWindow">
  <Grid>
    <Button x:Name="bt"></Button>
    <ScrollViewer Background="{x:Null}" Margin="20">
        <StackPanel Orientation="Horizontal" Background="{x:Null}">
            <Rectangle Fill="Red" Width="100" Margin="50"></Rectangle>
            <Rectangle Fill="Red" Width="100" Margin="50"></Rectangle>
            <Rectangle Fill="Red" Width="100" Margin="50"></Rectangle>
            <Rectangle Fill="Red" Width="100" Margin="50"></Rectangle>
        </StackPanel>
    </ScrollViewer>
  </Grid>
</Window>

我想要的是能够在矩形之间的背景上点击“bt”按钮。

感谢您的建议。 -pav -

3 个答案:

答案 0 :(得分:0)

您可以处理ScrollViewer的PreviewMouseDown事件。 在你的xaml中:

<Grid>
        <!--Button is removed as it will be not used-->
        <ScrollViewer Background="{x:Null}" Margin="20" PreviewMouseDown="ScrollViewer_MouseDown">
            <StackPanel Orientation="Horizontal" Background="{x:Null}">
                <Rectangle Fill="Red" Width="100" Margin="50"></Rectangle>
                <Rectangle Fill="Red" Width="100" Margin="50"></Rectangle>
                <Rectangle Fill="Red" Width="100" Margin="50"></Rectangle>
                <Rectangle Fill="Red" Width="100" Margin="50"></Rectangle>
            </StackPanel>
        </ScrollViewer>
    </Grid>

因为它是PreviewMouseDown(隧道)事件。因此,无论您何时单击scrollviewer,都将触发Event无论是Rectangle还是ScrollViewer本身。

在您的代码中,您可以通过e.Source参数处理它。 .cs文件中的PreviewMouseDown事件是:

private void ScrollViewer_PreviewMouseDown(object sender, MouseButtonEventArgs e)
{
    if (e.Source.GetType() == typeof(ScrollViewer))
    { 
        //Code which you want to perform on that Button click will be here.
    }
    if (e.Source.GetType() == typeof(Rectangle))
    {                
        //Code which you want to perform on rectangle will be here.
    }
}

我希望它会对你有所帮助。

答案 1 :(得分:0)

将样式下方的粘贴复制原样:

<Window.Resources>
    <Style TargetType="{x:Type ScrollBar}">
                <Setter Property="Stylus.IsFlicksEnabled"
                Value="false" />
                <Setter Property="Foreground"
                Value="#ADABAB" />
                <Setter Property="Background"
                Value="Transparent" />
                <Setter Property="Width"
                Value="7" />
                <Setter Property="Template">
                    <Setter.Value>
                        <ControlTemplate TargetType="{x:Type ScrollBar}">
                            <Grid x:Name="GridRoot"

                            Background="{TemplateBinding Background}">
                                <Grid.RowDefinitions>
                                    <RowDefinition Height="0.00001*" />
                                </Grid.RowDefinitions>
                                <Border x:Name="CornerScrollBarRectangle"
                                CornerRadius="5" BorderThickness="1" BorderBrush="Brown"
                                HorizontalAlignment="Stretch"
                                VerticalAlignment="Stretch"
                                Width="Auto"
                                Height="Auto"
                                Margin="0,1,0,1"
                                Background="Transparent" />
                                <Track x:Name="PART_Track"
                                Grid.Row="0"
                                IsDirectionReversed="true"
                                Focusable="false">
                                    <Track.Thumb>
                                        <Thumb x:Name="Thumb"
                                        Background="{TemplateBinding Foreground}"
                                        Style="{DynamicResource ScrollBarTrackThumb}" />
                                    </Track.Thumb>
                                    <Track.IncreaseRepeatButton>
                                        <RepeatButton x:Name="PageUp"
                                                Command="ScrollBar.PageDownCommand"
                                                Opacity="0"
                                                Focusable="false" />
                                    </Track.IncreaseRepeatButton>
                                    <Track.DecreaseRepeatButton>
                                        <RepeatButton x:Name="PageDown"
                                                Command="ScrollBar.PageUpCommand"
                                                Opacity="0"
                                                Focusable="false" />
                                    </Track.DecreaseRepeatButton>
                                </Track>

                            </Grid>
                            <ControlTemplate.Triggers>
                                <Trigger SourceName="Thumb"
                                    Property="IsMouseOver"
                                    Value="true">
                                    <Setter Value="{DynamicResource ButtonSelectBrush}"
                                    TargetName="Thumb"
                                    Property="Background" />
                                </Trigger>
                                <Trigger SourceName="Thumb"
                                    Property="IsDragging"
                                    Value="true">
                                    <Setter Value="{DynamicResource DarkBrush}"
                                    TargetName="Thumb"
                                    Property="Background" />
                                </Trigger>

                                <Trigger Property="IsEnabled"
                                    Value="false">
                                    <Setter TargetName="Thumb"
                                    Property="Visibility"
                                    Value="Collapsed" />
                                </Trigger>
                                <Trigger Property="Orientation"
                                    Value="Horizontal">
                                    <Setter TargetName="GridRoot"
                                    Property="LayoutTransform">
                                        <Setter.Value>
                                            <RotateTransform Angle="-90" />
                                        </Setter.Value>
                                    </Setter>
                                    <Setter TargetName="PART_Track"
                                    Property="LayoutTransform">
                                        <Setter.Value>
                                            <RotateTransform Angle="-90" />
                                        </Setter.Value>
                                    </Setter>
                                    <Setter Property="Width"
                                    Value="Auto" />
                                    <Setter Property="Height"
                                    Value="8" />
                                    <Setter TargetName="Thumb"
                                    Property="Tag"
                                    Value="Horizontal" />
                                    <Setter TargetName="PageDown"
                                    Property="Command"
                                    Value="ScrollBar.PageLeftCommand" />
                                    <Setter TargetName="PageUp"
                                    Property="Command"
                                    Value="ScrollBar.PageRightCommand" />
                                </Trigger>
                            </ControlTemplate.Triggers>
                        </ControlTemplate>
                    </Setter.Value>
                </Setter>
            </Style>

            <Style x:Key="ScrollBarTrackThumb"
            TargetType="{x:Type Thumb}">
                <Setter Property="Template">
                    <Setter.Value>
                        <ControlTemplate TargetType="{x:Type Thumb}">
                            <Grid x:Name="Grid" Background="Transparent">
                                <Rectangle HorizontalAlignment="Stretch"
                                    VerticalAlignment="Stretch"
                                    Width="Auto"
                                    Height="Auto"
                                    Fill="Transparent" />
                                <Border x:Name="CornerScrollBarRectangle"
                                CornerRadius="5" BorderThickness="1" BorderBrush="Yellow"
                                HorizontalAlignment="Stretch"
                                VerticalAlignment="Stretch"
                                Width="Auto"
                                Height="Auto"
                                Margin="0,1,0,1"
                                Background="Transparent" />
                            </Grid>
                            <ControlTemplate.Triggers>
                                <Trigger Property="Tag"
                                    Value="Horizontal">
                                    <Setter TargetName="CornerScrollBarRectangle"
                                    Property="Width"
                                    Value="Auto" />
                                    <Setter TargetName="CornerScrollBarRectangle"
                                    Property="Height"
                                    Value="6" />
                                </Trigger>
                            </ControlTemplate.Triggers>
                        </ControlTemplate>
                    </Setter.Value>
                </Setter>
            </Style>
</Window.Resources>

Transparent Scrollbar

答案 2 :(得分:0)

好的,你可以使用这个例子:

<Window x:Class="scrollviewerbackground.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="clr-namespace:scrollviewerbackground"
    Title="MainWindow" Height="350" Width="525">
<Grid>
    <Button x:Name="bt"></Button>
    <local:ScrollViewerClickable HorizontalScrollBarVisibility="Visible" Margin="20">
        <StackPanel IsHitTestVisible="True"  Orientation="Horizontal" Background="{x:Null}">
            <Rectangle Fill="Red" Width="100" Margin="50"></Rectangle>
            <Rectangle Fill="Red" Width="100" Margin="50"></Rectangle>
            <Rectangle Fill="Red" Width="100" Margin="50"></Rectangle>
            <Rectangle Fill="Red" Width="100" Margin="50"></Rectangle>
        </StackPanel>
    </local:ScrollViewerClickable>
</Grid>

    public class ScrollViewerClickable : ScrollViewer
    {
        protected override HitTestResult HitTestCore(PointHitTestParameters hitTestParameters)
        {
            return null;
        }
    }