windows phone (23) ScrollViewer元素

 

ScrollViewer類表示可包含其他可見元素的可滾動區域， 一般會用在屏幕的寬度和高度不夠用時，作爲一種延伸使用，參考書上稱之爲滾動條，在默認的情況下垂直滾動條是可見的，水平滾動條不顯示，即 VerticalScrollBarVisibility和HorizontalScrollBarVisibility兩個屬性，這兩個屬性的值是 ScrollBarVisibility枚舉成員【作者：神舟龍】

Visible 顯示滾動條；Hidden不顯示滾動條；Auto 需要時顯示；Disabled 可見但是不響應觸摸事件，這兩個屬性也正是下面會用到的，下面示例中把程序標題給更改了，爲了顯示更好的效果

xaml代碼：

<!--TitlePanel 包含應用程序的名稱和頁標題-->
        <StackPanel x:Name="TitlePanel" Grid.Row="0" Margin="12,17,0,28">

            <StackPanel.Resources>
                <Style x:Key="stStyle" TargetType="TextBlock">
                    <Setter Property="TextTrimming" Value="WordEllipsis"></Setter>
                    <Setter Property="FontSize" Value="23"></Setter>
                    <Setter Property="Foreground" Value="BlueViolet"></Setter>
                    <Setter Property="HorizontalAlignment" Value="Center"></Setter>
                </Style>
            </StackPanel.Resources>
            <TextBlock x:Name="ApplicationTitle" Text="笑一笑" Style="{StaticResource stStyle}"/>
        </StackPanel>

可以看到的是我們自定義了樣式，這裏定義的原則是先定義再使用，即上面代碼中的textblock 不能再樣式之上，如果這樣系統就會報錯；

內容區域的xaml代碼：

<!--ContentPanel - 在此處放置其他內容-->
        <Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
            <Grid.Resources>
                <Style x:Key="paragraphStyle" TargetType="TextBlock">
                    <Setter Property="TextWrapping" Value="Wrap"></Setter>
                    <Setter Property="Margin" Value="5"></Setter>
                    <Setter Property="FontSize" Value="19"></Setter>
                </Style>
            </Grid.Resources>
            <ScrollViewer Padding="5" >
                <StackPanel>
                    <TextBlock Style="{ StaticResource paragraphStyle}">
                       一天中午下班,由於天氣挺好.大家就在食堂打了飯一起在外面吃飯.
                        我就問了,用什麼方法修理別人最慘,大家都在一起笑談自己的看法.<LineBreak/>
 　　                   一會就見我侄女打着飯來了,她開口就問:你們在聊什麼啊?我就說:如果你恨一個人,
                        你認爲用什麼方法可以修理的他最慘.她張口就說:找人海扁他一頓,我就說了:
                        皮肉之傷過幾天就好了,這有什麼.她又說了:找幾個人狠狠的羞辱他一番,呵呵!心靈上的創傷,
                        隨着時間流逝,也會慢慢的好起來的.我說不算什麼?當時她一聽,把手裏的碗往花臺上一放,雙手往腰間一插,右手往上一指,
                        嘿嘿!嫁給他!我當時無語了,她說:我用一生來折磨他還不夠嗎?<LineBreak/>
 　　                  從那以後她多了一個外號叫(二莽)
                    </TextBlock>
                    <Line  StrokeThickness="9" Stroke="Blue"  X1="0" Y1="20" X2="480" Y2="20"></Line>
                    <TextBlock Style="{StaticResource paragraphStyle}">
                        <Run> 一對年輕人談戀愛，男的想試探女的是否能做到守身如玉，便問女友道：“如果你深夜一人在街上走，突然來了一個男人要和你親嘴，你怎麼辦？”
                         女友答道：“我會反抗，並打他一個耳光。”
                         男的又問：“如果又來一個喝醉酒了的男人一下子要抱住你，你怎麼辦？”
                         女友答道：“我會全力反抗，不讓他得逞。”
                         男的聽了，高興地連連點頭，繼續問道：“假如又走來一個很帥的男人，向你提出那種要求，你怎麼辦？”
                         女友聽了，回答說：“你要知道，
                       </Run>
                        <Run FontStyle="Italic">一個女人的反抗畢竟是有限的！” </Run>
                    </TextBlock>
                    <Line Stroke="Blue" StrokeThickness="9"  X1="0" Y1="20" X2="480" Y2="20"></Line>
                    <TextBlock x:Name="tb3" Style="{StaticResource paragraphStyle }">
                        收到一條短信：“今日15點31分開始起，我老婆就要開始陪別人的老公睡啦，我還得幸福的伺候着洗漱更衣沐浴，沒辦法他帶槍來的。”看了百思不得其解，咋會有這麼賤的人。後來一看發信人，我了個去，生孩子居然有這樣報喜的！

                    </TextBlock>
                </StackPanel>

            </ScrollViewer>
        </Grid>

可以看到這裏也有用到自定義樣式，內外邊距分別是5，書上說這樣有利於閱讀，不過看到效果後，確實感覺不錯；代碼中用到的stackPanel默認 爲垂直分佈，你可以設置Orientation="Horizontal"爲水平方向對子元素進行排列；在每個段落之前都有Unicode字符“ ” 表示所在行縮進一個字符的寬度

 Line類

上面代碼中還使用Line，在兩個點之間繪製一條直線 ，需要滿足的基本屬性是X1，X2,Y1,Y2其中X1，Y1作爲起點，X2，Y2作爲終點，並以此進行連接成一條直線；可以使用Stroke設置顏色，並使用StrokeThickness設置顯示的粗細，這裏爲了效果，設置的比較粗；

看效果圖吧：

 

 ScrollViewer默認垂直是顯示的，所以效果如上，那麼我們設置水平滾動條顯示效果會如何那；直接在scrollviewer標籤中加HorizontalScrollBarVisibility="Visible"即可，代碼不在貼出，直接來效果吧

 

這裏需要注意的是我們在樣式中已經設置了自動換行，但是因爲我們設置水平滾動條顯示，所以字行換行的行的概念也就沒有了；但是我想知道如果文字不換行的情況下，水平方向上顯示的文字是多長，事實或許並不是我們想象中的那麼好

 

當滾動條走到大概一半不到時，上面的文字已經不顯示了，所以如果文字太長，即使設置了顯示水平滾動條，也不會完全顯示，這是一種極端的情況，一般也不會用到

 那麼水平滾動區域寬度時多少那，加了個觸摸完成事件

private void sv1_ManipulationCompleted(object sender, ManipulationCompletedEventArgs e)
       {
           this.ApplicationTitle.Text = "水平滾動區域寬度：" + sv1.ScrollableWidth.ToString();

       }

 

 版本7.0和7.1的差別：

 

行爲	Windows Phone OS 7.0 app/Windows Phone OS 7.0 設備	Windows Phone OS 7.0 or Windows Phone OS 7.1 app/Windows Phone OS 7.1 設備
ScrollViewer 在滾動期間在 UI 線程上更新屬性	屬性在值更改時即更新。	屬性在用戶舉起手指時更新，或當用戶在任何方向拖動、搖動，或輕擊屏幕 1/4 時更新。
ManipulationDelta 內拖動時 UI 線程上引發的事件 ScrollViewer。	通過 ScrollViewer 中的元素處理事件。	由於事件處於輸入線程上，這些事件不會引發。

第一個還好理解，第二個我的理解是因爲有滾動，所以觸摸移動是事件ManipulationDelta不會被引發，這樣就證明了剛剛我是用該事件獲取水平滾動寬度得到值爲0，

 

如果應用程序依賴於 Windows Phone OS 7.0 行爲，您可以取消性能改進通過在與ListBox關聯的 ScrollViewer上，將 ManipulationMode 屬性設置爲 Control。 下面的代碼示例演示具體做法。

<ListBox ItemsSource="{Binding Items}" ScrollViewer.ManipulationMode ="Control" Height="652" Canvas.Top="80">

 

五一假到了，放鬆一下吧