沒有背景的滾動查看器

我想問你，如果有人知道如何創建沒有背景的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-

來源

2015-12-22 pav

好吧，我想你知道你可以設置IsHitTestV isible =「False」給scrollviewer。問題是，scrollviewer會吞噬您的鼠標事件。 – SnowballTwo

是的，我知道，但正如你所說，鼠標事件將消失，我需要它們。 – pav

您可以處理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，無論是Rectangle還是ScrollViewer本身，都會觸發Event。

在你的代碼背後，你可以通過e.Source參數來處理它。 PreviewMouseDown事件在cs文件是：

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. 
    } 
}

我希望這會幫助你。

來源

2015-12-22 13:25:13

我瞭解你，謝謝你。它可以工作，但我有更多的鼠標事件背景上的幾個複雜的用戶控件。我認爲即使在我的情況下它也可以工作，但它會非常混亂而且不乾淨。 – pav

@pav所以你可以更具體地瞭解你的問題？ –

這些矩形是聊天對話框，在前臺可見（最大化）或摺疊（最小化，只有名稱可見）。背景是與谷歌日曆等鼠標事件的日曆。聊天的數量是多種多樣的，我使用ScrollViewer進行水平滾動。問題是，如果聊天是可見的，日曆就在這些聊天后面，無法點擊（或拖放）。我在某處閱讀，ScrollViewer可以沒有背景（空），所以這是我的想法。無論如何，如果它是不可能的，我必須用畫布（沒有背景）和兩個按鈕像滾動。 – pav

低於風格複製粘貼，因爲它是：

<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>

來源

2015-12-22 18:31:11 AnjumSKhan

問題是別的。由於ScrollViewer具有透明背景（用於事件），並且無法使用樣式或模板更改，所以無法單擊矩形之間名稱爲「bt」（位於scrollviewer後面）的按鈕。 – pav

OK，你可以用這個例子：

<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; 
     } 
    }

來源

2016-04-02 07:23:47

沒有背景的滾動查看器

回答

相關問題