【萬里征程——Windows App開發】動畫1
這個效果比較簡單,就是在啟動時,控制元件會稍微有那麼一點點的滑動效果。
<UserControl.Resources>
<Style x:Key="EntranceButtonStyle" TargetType="Button">
<Setter Property="Transitions">
<Setter.Value>
<TransitionCollection>
<EntranceThemeTransition/>
</TransitionCollection>
</Setter.Value>
</Setter>
</Style>
</UserControl.Resources>
<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
<Button Style="{StaticResource EntranceButtonStyle}" Content="滑動樣式"/>
</Grid>
既然主題是動畫,那麼不來點動畫怎麼行呢?不過由於GIF截圖不太方便,而且也非常推薦大家自己試一下。
<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
<ItemsControl Grid.Row="1" x:Name="itemsControlRectangle">
<ItemsControl.ItemContainerTransitions>
<TransitionCollection>
<EntranceThemeTransition/>
</TransitionCollection>
</ItemsControl.ItemContainerTransitions>
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<WrapGrid Height="400"/>
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
<ItemsControl.Items>
<Rectangle Fill="Red" Width="100" Height="100" Margin="12"/>
<Rectangle Fill="Wheat" Width="100" Height="100" Margin="12"/>
<Rectangle Fill="Yellow" Width="100" Height="100" Margin="12"/>
<Rectangle Fill="Blue" Width="100" Height="100" Margin="12"/>
<Rectangle Fill="Green" Width="100" Height="100" Margin="12"/>
<Rectangle Fill="Gray" Width="100" Height="100" Margin="12"/>
<Rectangle Fill="White" Width="100" Height="100" Margin="12"/>
<Rectangle Fill="Gainsboro" Width="100" Height="100" Margin="12"/>
<Rectangle Fill="Magenta" Width="100" Height="100" Margin="12"/>
<Rectangle Fill="CadetBlue" Width="100" Height="100" Margin="12"/>
<Rectangle Fill="NavajoWhite" Width="100" Height="100" Margin="12"/>
<Rectangle Fill="Khaki" Width="100" Height="100" Margin="12"/>
</ItemsControl.Items>
</ItemsControl>
</Grid>
因為這些Rectangle都是在ItemsControl中的,因為在容器控制元件中應用主題樣式時,其所有的子物件也都會繼承下來。
為使本文得到斧正和提問,轉載請註明出處:
http://blog.csdn.net/nomasp
相關文章
- 線上漫畫小程式app開發APP
- Flutter 掌握動畫開發Flutter動畫
- 2023整裝待發,開啟新的征程
- 安卓APP開發日記1——名為Another的日記APP開發安卓APP
- 移動端App開發 - 01 - 開篇APP
- iOS開發 - 動畫實踐系列iOS動畫
- Flutter動畫合集1Flutter動畫
- 運動瘦身動作識別APP開發APP
- 開發 React Native APP —— 從改造官方Demo開始(1)React NativeAPP
- 兩種方案開發小程式動畫動畫
- 即拼商城APP開發(開發APP)APP
- canvas動畫教程-1 引言Canvas動畫
- Vue.js開發移動端APPVue.jsAPP
- 【風農翻譯】開始畫畫素畫 #1
- Windows平臺上也可以進行iOS App的開發WindowsiOSAPP
- 微軟正式“封殺” UWP:建議開發者轉向 Windows APP SDK 作為 APP 開發的未來微軟WindowsAPP
- 直播軟體app開發,導航條根據位置移動實現定位、顏色過渡動畫效果APP動畫
- 【譯】闖入遊戲開發 #5:動畫遊戲開發動畫
- QuartzCode for Mac(動畫開發製作應用)quartzMac動畫
- 短視訊app開發,視訊、直播畫面跟隨手機橫屏、豎屏移動APP
- Flutter動畫例項——4缸發動機動畫Flutter動畫
- app直播原始碼,等待時的載入動畫(交錯載入動畫)APP原始碼動畫
- 快來!《30天,App開發從0到1》正式開售!APP
- APP 開發從 0 到 1(二)框架與網路APP框架
- APP 開發從 0 到 1(一)需求與準備APP
- 短視訊app開發,點選跳轉到另一個頁面時的過場動畫APP動畫
- 使用BindingX開發客戶端炫酷動畫客戶端動畫
- 阿里Android開發規範:Bitmap、Drawable 與動畫阿里Android動畫
- 領域模型驅動開發(1)模型
- 使用低程式碼開發平臺 YonBuilder 移動開發,開發閱讀 APP 教程UI移動開發APP
- 直播類app開發解決方案、直播app功能有哪些?-北京銳智互動軟體開發APP
- 開發者工具:我是如何從0到1來進行APP開發的?APP
- 佛家app開發APP
- 一步一步完成Flutter應用開發-掘金App文章詳情, 懸浮,標題動畫FlutterAPP動畫
- 前端動畫調研-V1前端動畫
- iOS 核心動畫高階技巧 - 1iOS動畫
- CodeHub#1 回顧 | 敏捷開發與動態更新在支付寶 App 內的實踐敏捷APP
- PhoneGap Hybrid APP 開發實戰(1):第一個 Android APKAPPAndroidAPK
- 教育APP開發_教育培訓APP開發解決方案APP