通通玩blend美工（6）上——仿iPhone滾動選擇器的ListBox（UI設計）

 

---

 

　　好久沒更新博客了，由於項目比較緊，期間收到不少園友的短消息，感謝大家對我的支持~~。

　　相信各位都在自己的神機中看到過各種滾動選擇器，偶們項目經理就是個iPhone迷，前幾天一直抬着個手機對我說"這個炫，做這個...".於是就有了這個選擇器。

 　　　

最終效果如下： （按住鼠標，盡情滾吧~）

 

頁面代碼如下： 

　　　　　<TextBlock Text="{Binding SelectedItem.Content, ElementName=ListBox1}"/>        
        <ListBox x:Name="ListBox1"SelectedIndex="2">
            <ListBoxItem Content="1"/>
            <ListBoxItem Content="2"/>
            <ListBoxItem Content="3"/>
            <ListBoxItem Content="4"/>
            <ListBoxItem Content="5"/>
            <ListBoxItem Content="6"/>
            <ListBoxItem Content="7"/>
            <ListBoxItem Content="8"/>
            <ListBoxItem Content="9"/>
            <ListBoxItem Content="0"/>
        </ListBox>
        <TextBlock Text="選中內容："/>

 

　　你沒看錯，這就是個家喻戶曉ListBox，我只是用強大的Blend修改了他的各種容器模版，代碼處理了各種鼠標事件封裝成的控件。好處在於二次開發時可以創建各種模版副本來修改各種樣式，子項的呈現形式，數據綁定等，就和ListBox使用一樣。

 　　為避免文章太長，我這里分成兩篇來寫，第一篇是純Blend畫界面，第二篇，純VS寫各種鼠標事件動畫處理。

 

1.總體思路

---

 

首先“仿”，果斷上 下吧 找個iPhone的UI素材，觀摩下。

分析上面效果：一個框框里面有個滾筒，玻璃條下面為選中項

　　滾筒:其實就是在數字列表的上面加了一個具有不透明度漸變的遮罩，上下顏色深，中間亮，這樣我們的視覺習慣就讓一個垂直的列表看起來像是曲面。

　　玻璃條:其實就是在一個灰色的條上調整下透明度，加上漸變讓其中間出現分界線，讓其看起來有凸出來的感覺，再加上黑色邊框，陰影，完成。

 

2.設計過程

---

 

新建silverlight工程，果斷拖入一個ListBox控件，隨意加點內容。

現在數字居左，我們要讓它們居中顯示。

創建子項容器模版副本

選中內容占位控件。

把對其方式 點右邊的黃點 點重置，選擇居中對其

這樣就居中了。

接下來我們來畫它的外邊框，這樣有個對照，方便來設計里面的滾筒玻璃，什么的。

創建ListBox的模版副本

得到如下結構。

選中Grid添加一個矩形

再添加另一個矩形，如下圖：

改成圓角呢

現在我們想要的是大矩形減去小矩形的部分。

同時選中這兩個矩形 路徑→生成復合路徑。

這樣兩個Rectangle就合並為一個Path了。

接下來為這個路徑添加漸變背景填充，讓其看起來更有質感。漸變設置如下，顏色調到自己感覺好就行，要有耐心。質感線來源於中間那兩個幀顏色變化比較突然，於是就產生了線。兩個幀的位置分別為50%和51%。這里可以又下角的框里手動輸入的。

這里我提供我的漸變方案供參考：

<Path Data="M0,0 L639,0 L639,454 L0,454 z M84.5,54.5 C84.5,48.977153 88.977153,44.5 94.5,44.5 L544.5,44.5 C550.02285,44.5 554.5,48.977153 554.5,54.5 L554.5,399.5 C554.5,405.02285 550.02285,409.5 544.5,409.5 L94.5,409.5 C88.977153,409.5 84.5,405.02285 84.5,399.5 z" Stretch="Fill" Stroke="#7F0A0A0A" IsHitTestVisible="False" Margin="0,0,-1,-1">
                                    <Path.Effect>
                                        <DropShadowEffect Direction="529" BlurRadius="4" Opacity="0.37"/>
                                    </Path.Effect>
                                    <Path.Fill>
                                        <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                                            <GradientStop Color="Black" Offset="1"/>
                                            <GradientStop Color="#FF8D8D8D"/>
                                            <GradientStop Color="#FF313131" Offset="0.51"/>
                                            <GradientStop Color="#FF544C4C" Offset="0.5"/>
                                        </LinearGradientBrush>
                                    </Path.Fill>
                                </Path>

 

的到下圖。是不是開始有點感覺了~~

為這個路徑加上一點陰影，讓其看起來更真實。

接下來制作框里面滾筒的材質。

呈現的列表內容就是在這個scrollviewer下了，先把他的顏色重置透明的，這樣不影響我們發揮。

   

添加一個矩形來制作里面滾筒的底板。注意：層疊關系。

為其進行見漸變填充，如下：

接下來制作滾筒曲面的材質，同樣添加一個矩形。

 

調整大小顏色，如下：

接下來，添加不透明遮罩，讓其看起來像個曲面。

添加一個矩形。

改成黑色填充

更改其蒙板用漸變填充。這里和顏色的RGB值沒關系，只和alpha通道有關，即不透明度。100%為完全顯示，0%為完全透明。這里和PS里的蒙板差不多，PS里只不過是黑色為透明，白色為顯示。下面4個幀，中間兩個透明度為0，旁邊兩個為100%。大家自己調了看看，順眼即可。

<Rectangle IsHitTestVisible="False" Margin="0,-0.5,-1,6.5" >
                                    <Rectangle.OpacityMask>
                                        <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                                            <GradientStop Color="#E28F8F8F" Offset="0.065"/>
                                            <GradientStop Color="#EEFFFFFF" Offset="0.926"/>
                                            <GradientStop Color="#001A1A1A" Offset="0.368"/>
                                            <GradientStop Color="#00DDDDDD" Offset="0.649"/>
                                        </LinearGradientBrush>
                                    </Rectangle.OpacityMask>
                                    <Rectangle.Fill>
                                        <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                                            <GradientStop Color="Black" Offset="1"/>
                                            <GradientStop Color="Black"/>
                                        </LinearGradientBrush>
                                    </Rectangle.Fill>
                                </Rectangle>

 

得到如下，看起來已經是個曲面了。

接下來畫那個玻璃塊，添加一個矩形。

注意層疊關系，如下：

讓其寬為自動貼緊兩邊，高少許。

添加漸變，顏色如下，調出感覺即可。

<Rectangle Margin="0,0,-1,0" Stroke="#5B000000" VerticalAlignment="Center" Height="78.5" StrokeThickness="1.5" IsHitTestVisible="False">
                                    <Rectangle.Fill>
                                        <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                                            <GradientStop Color="#69F1F1F1" Offset="0"/>
                                            <GradientStop Color="#986E6E6E" Offset="1"/>
                                            <GradientStop Color="#91626262" Offset="0.554"/>
                                            <GradientStop Color="#6F525258" Offset="0.532"/>
                                        </LinearGradientBrush>
                                    </Rectangle.Fill>
                                </Rectangle>

如下，就制作完成了

接下來把他們全部分組到一個Viewbox里，這樣我們就可以按比例來隨意調整ListBox的大小，而不會改變之前設計好的樣式的布局

接下來添加個項的布局的模版備用。這個東西就相當與item的容器，子項就全部按這個容器的來排布。默認是StackPanel，所以內容一般呈現為一行或者一列。

 

 

下節預告

---

 

　　這節我們已經把它畫出來了，理想狀態下，作為一個美工的工作已經完成。作為一個中國美工，我們至少還需要把交互性做出來。

　　下節我們來學習下面幾點是如何實現的：

• 　　隨着鼠標的移動上下滾動。
• 　　當放開鼠標后，自動對正。
• 　　設置ListBox的SelectedIndex為但前玻璃塊下面的項。
• 　　load時根據XAML中設置的SelectedIndex自動滾動到相應項。

發表了這篇blog后突然發現個BUG，就是忘記禁用ListBox原生的滾動條了....這樣滾動了鼠標中鍵以后定位就不准了。這個BUG相信大家都可以自己解決。