效果描述：初始狀態(tài)只在右側(cè)顯示一個(gè)導(dǎo)航條，鼠標(biāo)進(jìn)入導(dǎo)航條范圍則整個(gè)右側(cè)菜單從右向左勻速推出。

實(shí)現(xiàn)概述：完全在界面中用xaml編寫完成，不用在.cs文件中加支持代碼，不需要使用blend等設(shè)計(jì)工具。

涉及技術(shù)：WPF觸發(fā)器，簡(jiǎn)單動(dòng)畫故事板的使用，其他的就是布局和相關(guān)控件的樣式重寫，。

?????? 真實(shí)案例中實(shí)現(xiàn)的效果，用到的可以拿去。應(yīng)客戶浦發(fā)銀行的要求，導(dǎo)航條改為在界面底部顯示，有機(jī)會(huì)去到北京金融街浦發(fā)銀行的小伙伴可以在大廳看到真正的東西。

????? 在我實(shí)際的項(xiàng)目中，整個(gè)菜單的布局使用grid實(shí)現(xiàn)，菜單加導(dǎo)航條的實(shí)際寬度為240，導(dǎo)航條寬度為48，在grid中添加兩個(gè)觸發(fā)器，分別為鼠標(biāo)進(jìn)入的事件的觸發(fā)和鼠標(biāo)離開的觸發(fā)，每個(gè)觸發(fā)器中添加一個(gè)故事板動(dòng)畫，鼠標(biāo)進(jìn)入觸發(fā)的動(dòng)畫為使整個(gè)菜單寬度變?yōu)?40，鼠標(biāo)離開的動(dòng)畫使整個(gè)菜單的寬度變?yōu)?8，具體的導(dǎo)航條和菜單的樣式重寫不在此處詳述，關(guān)于樣式重寫會(huì)新開一篇文章進(jìn)行講解，因?yàn)樯婕暗降臇|西還是比較多的。

源代碼地址：https://github.com/leoualy/WPFExamples

該地址是整個(gè)wpf案例的工程， 包含多個(gè)wpf實(shí)例，下載即可運(yùn)行選定的項(xiàng)目。

可以下載整個(gè)wpf的案例項(xiàng)目，會(huì)一直更新中...

界面效果如下圖: