WPF ScrollViewer(滾動條) 自定義樣式表制作 圖文並茂

先上效果圖

正常樣式

拖動時樣式

好下面 開始吧

=================================================================

打開blend 新建個 WPF應用程序工程   點擊左上角 文件 → 新建項目

 

項目類型WPF→右側選WPF應用程序→項目名稱你隨便起一個用輸入的ScrollViewerStyle→點確定,一個空的項目工程就建好了

 

建好工程后,blend會自動打開MainWindow窗體(以下簡稱畫布),我們在這編輯就可以了

先在窗體上創建一個ScrollViewer,步驟:打開資產面板→控件→鼠標左鍵點下ScrollViewer,然后鼠標指針圖標會變成十字花形,進入繪畫此控件模式,然后在畫布上拖出個ScrollViewer大小范圍

點左上角的 選擇(一個黑色的指針箭頭) 進入選擇操作狀態  → 右上角點屬性

點擊畫布上剛才創建的ScrollViewer,這個時候右側面板會聯動顯示出ScrollViewer的當前屬性,右側面板 HorizontalAlignment  橫向伸展模式設置成Stretch ,VerticalAlignment 縱向伸展模式 設置成 Stretch ,Margin設置成0

對象和時間線面板處 點 Window節點  →  右側屬性面板 Width 和 Height 設置成300 300 (把窗體寬高設置小 為了方便看 滾動條效果)

 

左側資產→控件→TextBlock→畫布中間畫出此控件→鼠標左鍵點擊此控件→右側屬性面板設置屬性 HorizontalAlignment  橫向伸展模式設置成Stretch ,VerticalAlignment 縱向伸展模式 設置成 Stretch ,Margin設置成0,Width和Height設置為自動(點輸入框旁邊的圖標設置為自動屬性),屬性面板 文本屬性分類中,點 嵌入 下面的三角號圖標 進入高級模式  TextWrapping 屬性設置成Wrap (自動換行)  如圖:

對象和時間線面板  鼠標右鍵 [ScrollViewer] →編輯模版→編輯副本→默認的就可以,直接點確定.

blend創建完ScrollViewer的樣式后 自動進入 此樣式的編輯模式

點右上角的拆分,進入拆分模式

對於我現在對滾動條只要求有縱向滾動功能的需求,blend自動生成的模版有些冗余代碼,需要手動整理下(這個地方也可以改成你自己需要顯示的樣式,比如給它加個標題或者我需要縱向滾動條在內容的左側地方顯示什么的)

點對象和時間線面板上的 Grid節點,中間下側拆分出來的代碼會自動 到當前 Grid 代碼處

我只需要滾動條縱向最基本的功能,左側顯示內容,右側是滾動條導航功能,橫向的導航模塊不需要,所以我只需要兩列的Grid即可,自動生成的是兩橫兩列,此處改成兩列,第一列寬度設置成*,第二列的寬度設置成Auto,意思是第二列滾動條的導航模塊(上滾動按鈕,滾動按鈕區域,下滾動按鈕)寬度自動分配,由里面的導航模塊寬度決定,然后剩下的寬度全部分配給第一列,及滾動條顯示的內容列. 

<Grid.ColumnDefinitions>
            <!-- 顯示滾動條左側的內容 -->    
3           <ColumnDefinition Width="*"/>
4　　　　　　　　<!--顯示滾動條右側的導航模塊-->                
  　　    <ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>

注意,Grid的橫和列屬性更改了,它里面的子元素對應的橫和列屬性設置要手動同步改下

Corner:當縱向和橫向導航模塊同時顯示的時候,最右下角的容器

PART_ScrollContentPresenter:滾動條左側的內容對象,不要更改它的x:Name屬性和控件類型,這是內置元件

PART_VerticalScrollBar:滾動條縱向導航模塊,不要更改它的x:Name屬性和控件類型,這是內置元件

PART_HorizontalScrollBar:滾動條橫向導航模塊,不要更改它的x:Name屬性和控件類型,這是內置元件

我只需要縱向導航功能,Corner和PART_HorizontalScrollBar不需要了刪除掉,ScrollContentPresenter顯示在第一列,更改Grid.Column為0,PART_VerticalScrollBar顯示在第二列,更改Grid.Column為1

Grid更改后的代碼如下

<Grid x:Name="Grid" Background="{TemplateBinding Background}">
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="*"/>
                    <ColumnDefinition Width="Auto"/>
                </Grid.ColumnDefinitions>
                <ScrollContentPresenter x:Name="PART_ScrollContentPresenter" CanContentScroll="{TemplateBinding CanContentScroll}" CanHorizontallyScroll="False" CanVerticallyScroll="False" ContentTemplate="{TemplateBinding ContentTemplate}" Content="{TemplateBinding Content}" Grid.Column="0" Margin="{TemplateBinding Padding}" />
                <ScrollBar x:Name="PART_VerticalScrollBar" AutomationProperties.AutomationId="VerticalScrollBar" Cursor="Arrow" Grid.Column="1" Maximum="{TemplateBinding ScrollableHeight}" Minimum="0"  Visibility="{TemplateBinding ComputedVerticalScrollBarVisibility}" Value="{Binding VerticalOffset, Mode=OneWay, RelativeSource={RelativeSource TemplatedParent}}" ViewportSize="{TemplateBinding ViewportHeight}"/>
            </Grid>

=============================================================================

 

現在開始改造縱向導航條樣式

=============================================================================

對象和時間線面板→鼠標右鍵PART_VerticalScrollBar→編輯模版→編輯副本→默認的就可以直接點確定→blend會自動創建好PART_VerticalScrollBar樣式表,並跳到此樣式表編輯模式

第一個RepeatButton:向上滾動按鈕,為了方便對它操作,對它鼠標右鍵選 重命名 改成 UpButton

第二個PART_Track:滾動條中間部分,同樣它是內置元件,不要改它的name和控件類型

第三個RepeatButton:向下滾動按鈕,它的狀態可以通過設置成和UpButton聯動,就不用改它名字

點擊UpButton(第一個RepeatButton已經重命名)節點,中間自動跳到它的代碼處,如下

<RepeatButton x:Name="UpButton" Command="{x:Static ScrollBar.LineUpCommand}" IsEnabled="{TemplateBinding IsMouseOver}" Style="{StaticResource ScrollBarButton}" Microsoft_Windows_Themes:ScrollChrome.ScrollGlyph="UpArrow"/>

說下UpButton里屬性的含義

Command="{x:Static ScrollBar.LineUpCommand}"  這個是綁定上滾動聯動命令 ,它與PART_Track里的上滾動事件聯動,怎么實現的不用管它,我們現在要做的是修改樣式,而不是要更改它的滾動行為邏輯

IsEnabled="{TemplateBinding IsMouseOver}"   當鼠標懸停在縱向導航條上的時候,按鈕的IsEnabled為True,進入可用狀態,否則反之(實現鼠標進入縱向滾動條區域的一個視覺反饋)

Style="{StaticResource ScrollBarButton}" 它綁定的樣式 ,要用自己的樣式,刪掉它不用默認的樣式

Microsoft_Windows_Themes:ScrollChrome.ScrollGlyph="UpArrow"   看名字就知道,blend自動給它設置了一個皮膚,既然我們要修改它的默認樣式,自然就不需要這個了刪除掉它

===================================================

現在開始更改UpButton的圖標

對象和時間線面板 點UpButton節點→中間下側拆分出來顯示的代碼處手動修改UpButton,設置一個圖片控件給它的Content屬性,並命名為imgUp

<RepeatButton x:Name="UpButton" Command="{x:Static ScrollBar.LineUpCommand}" IsEnabled="{TemplateBinding IsMouseOver}"  >
                            <RepeatButton.Content>
                                <Image x:Name="imgUp" Source="Images/BarUp.png" ></Image>   
                            </RepeatButton.Content>
                            </RepeatButton>

同步驟更改下滾動按鈕

<RepeatButton Command="{x:Static ScrollBar.LineDownCommand}" IsEnabled="{TemplateBinding IsMouseOver}" Grid.Row="2">
                                <RepeatButton.Content>
                                <Image x:Name="imgDown" Source="Images/BarDown.png"></Image>   
                            </RepeatButton.Content>
                            </RepeatButton>

現在添加當鼠標進入滾動條區域時,更改上下按鈕的圖標來,給用戶一個視覺反饋

對象和時間線面板 點 UpButton→左上角點觸發器標簽卡

點 +屬性→激活時機下面 目標元素換成UpButton→旁邊的選擇成IsEnabled→旁邊的值賦值成True→對象和時間線面板點 imageUp節點→右側屬性面板更改imageUp的Source屬性為Images/BarUp_S.png圖片(意思是添加了一個觸發器,當UpButton的IsEnabled屬性為True的時候,替換imageUp的圖片,視覺效果就是鼠標進入滾動條導航模塊區域的時候,上箭頭圖標會變成黑色的圖標,給用戶視覺反饋)→對象和時間線面板點 imageDown節點→右側屬性面板更改imageDown的Source屬性為Images/BarDown_S.png圖片(寫在上箭頭的觸發器里實現和上箭頭的狀態同步)

現在改造滾動條導航模塊中間的樣式

IncreaseRepeatButton:滾動條已滾動(上)區域,內置元件,不用動

DecreaseRepeatButton:滾動條未滾動(下)區域,內置元件,不用動

Thumb:中間的按鈕樣式

對象和時間線面板→點PART_TracK左側的三角→點Thumb左側的三角→點Thumb→刪除掉默認的樣式屬性 Microsoft_Windows_Themes:ScrollChrome.ScrollGlyph="VerticalGripper"→右鍵點Thumb→編輯模版→編輯副本→點確定

更改Thumb的樣式表如下

    <Style x:Key="ScrollBarThumb" TargetType="{x:Type Thumb}">
            <Setter Property="OverridesDefaultStyle" Value="true"/>
            <Setter Property="IsTabStop" Value="false"/>
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type Thumb}">
                        <Border x:Name="border" CornerRadius="3" Background="#A5A5A5" BorderBrush="#666666" BorderThickness="1" >
                            <Image x:Name="image" Source="Images/bar_center.png" VerticalAlignment="Center"></Image>
                        </Border>
                        <ControlTemplate.Triggers>
                            <Trigger Property="IsDragging" Value="True">
                                <Setter Property="Background" TargetName="border" Value="#7F7F7F"/>
                            </Trigger>
                        </ControlTemplate.Triggers>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>

自定義樣式已經修改好

源代碼