效果描述:初始狀態(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ì)一直更新中...
界面效果如下圖:
