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

 

五一假到了，放鬆一下吧