《界面開發風AYUI-基於WPF By AY》web
你們好!瀏覽器
距離上篇博客發佈有10天了,由於我在開發AYUI4.X效果更驚豔安全
我是AY,很高興,終於能夠寫本身的做品的,網絡博客的教程。服務器
這是篇個AYUI的使用開發系列博客,也是WPF技術快速核心技術掌握的途徑。在這裏你會學會如何開發一款360領航版界面,瞭解AYUI的設計和二次開發網絡
AYUI理念: 不管你在哪裏,賞心悅目就好app
AYUI產品:Wizard打包,AYUI庫,AYUI的DEMO,自動更新模塊。框架
AY承諾:使用AYUI作出本身的做品,若是是好做品,我會放到官網去推薦展現,給大家推廣本身的機會,ayui已經免費。可是源碼不會給。源碼是AY維持服務器費用和域名還有其餘的用處,好比治療身體。ide
設計的軟件輔助工具:Adobe air 安裝Markman工具
本期額外工具介紹: wpfinspector 用來查看wpf界面結構的。相似瀏覽器的DOM結構查看(vs2013開始就已經提供了,無需下載)oop
使用Picpick給360界面截圖而後導入markman進行標記
OK,開始寫吧。思想:先畫界面盒子,也就是用Border和grid等配合,畫出容器
第一步,一眼看出頁面分上下兩塊背景1塊,白色1快,咱們假設白色壓在綠色的上面,這裏爲了快速開發不考慮分辨率的,直接使用性能最好的Canvas
外側容器,我通常命名爲Layout,個人外層也通常是Grid,撐住整個界面的範圍
而後使用相對座標容器Canvas,來定位容器的位置
因爲點擊,當即體驗,下方有個動畫,直接定位下面的塊區域我爲動畫後的區域高度吧,這樣動畫只要考慮Canvas.Top便可,原本咱們設置是160的高度,動畫後此次是364px;
接着設置兩個Canvas的父親Canvas,超出部分裁剪。
原本是160,如今364,怎樣顯示保持160px的高度,就是160+?=364
計算動畫的高度:
目標高度(364)-當前高度(160)=204
也就是高度還差204,那麼當前距離上方是440,那麼動畫移動距離就是440-204=236;
HorizontalAlignment="Stretch" 這行代碼,表明水平拉伸,根據父元素的寬度來,還有
只要是WPF程序使用Snoop均可以3D方式看到層次:羣裏下載
打開snoop,查看層次。
通常作到最後,本身內心都是有層次感,也就到了寫wpf不須要設計界面的,內心有界面,F5調試查看就好了。
當前窗口代碼以下:
<control:AyWindow x:Class="AYUI360.MainWindow" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:control="http://www.ayjs.net/controls" Title="AY的360安全衛士" Height="629" Width="829" MinHeight="629" MinWidth="829" WindowStartupLocation="CenterScreen" ResizeMode="NoResize" MaxButtonVisibility="Collapsed" Icon="/AYUI360;component/Contents/Images/ICONS/app.ico" TitleVisibility="Collapsed" > <Grid Margin="0,-24,0,0" Background="Transparent" x:Name="Layout"> <Canvas HorizontalAlignment="Stretch" VerticalAlignment="Center" ClipToBounds="True" Width="{Binding ActualWidth,ElementName=Layout}" Height="{Binding ActualHeight,ElementName=Layout}"> <Canvas Height="440" Width="{Binding ActualWidth,ElementName=Layout}" Background="#089B55"> </Canvas> <Canvas Height="364" Canvas.Top="440" Width="{Binding ActualWidth,ElementName=Layout}" Background="#BA88FF"> </Canvas> </Canvas> </Grid> </control:AyWindow>
Width使用了WPF的綁定機制,綁定layout的節點的寬度,設置背景色方便調試。
默認Aywindow會有1像素的描邊色剩餘空間,設置Grid的Margin爲-1便可
<Grid Margin="-1,-24,-1,-1" Background="Transparent" x:Name="Layout">
若是確實須要描邊色,默認ayui只是提供1像素的透明的描邊,你須要窗體設置BorderBrush綁定主題定義的顏色資源,這裏我使用
關於AYUI提供的客戶端經過DynamicResource方式使用,若是在框架中,就是用StaticResource靜態方式,也能夠動態,通常若是想動態切換顏色,是影響到動畫上的層次的,須要在AYUI的框架的Themes文件夾下的AySkin/DefaultAyControl.xaml中增長控件,使用StaticResource方式,才能動態的在動畫中使用 ui自帶的顏色,由於動畫在綁定過渡到什麼顏色的時候只能是StaticResource不能是DynamicResource。這裏咱們直接使用顏色資源便可
下面我列出了顏色資源的文件表
<!--進度條顏色--> <SolidColorBrush x:Key="AyProgressBar.Progress" Color="#A74F4F"/> <SolidColorBrush x:Key="AyProgressBar.Background" Color="#FFFFFF"/> <SolidColorBrush x:Key="AyProgressBar.Border" Color="#DCE0E5"/> <Color x:Key="AyProgressBarAnimationColor1" >#D24F43</Color> <!--深色--> <Color x:Key="AyProgressBarAnimationColor2" >#E69982</Color> <SolidColorBrush Color="#E5FFFFFF" x:Key="contentBackground"></SolidColorBrush> <!--aypanel內容背景色--> <SolidColorBrush x:Key="AyWindow.Common.TextBlock.Hyperlink.Foreground" Color="#FF197DCB"/> <!--暫無沒用--> <SolidColorBrush x:Key="AyComboBox.Static.Border" Color="#FFE23939"/> <SolidColorBrush x:Key="AyComboBox.Static.Background" Color="#FFFFFFFF"/> <SolidColorBrush x:Key="AyComboBox.Static.Editable.Button.Background" Color="#00FFFFFF"/> <SolidColorBrush x:Key="AyComboBox.Static.Arrow.Foreground" Color="#89AFD9"/> <SolidColorBrush x:Key="AyTextbox.Static.Border" Color="#FFC4C4C4"/> <SolidColorBrush x:Key="ComboBoxItem.ItemsviewHover.Background" Color="#7F6B9BD0"/> <SolidColorBrush x:Key="ComboBoxItem.ItemsviewSelected.Background" Color="#996B9BD0"/> <SolidColorBrush x:Key="ComboBoxItem.ItemsviewSelectedHover.Background" Color="#CC6B9BD0"/> <SolidColorBrush x:Key="ComboBoxItem.ItemsviewSelectedNoFocus.Background" Color="#E56B9BD0"/> <Color x:Key="ComboBoxItem.ItemsviewHover.Background.Color">#7F6B9BD0</Color> <Color x:Key="ComboBoxItem.ItemsviewSelected.Background.Color">#996B9BD0</Color> <Color x:Key="ComboBoxItem.ItemsviewSelectedNoFocus.Background.Color">#E56B9BD0</Color> <Color x:Key="ComboBoxItem.ItemsviewSelectedHover.Background.Color">#CC6B9BD0</Color> <SolidColorBrush x:Key="AyListView.Border" Color="#828790"/> <!--borderbrush控制的--> <SolidColorBrush x:Key="AyListViewHeader.Static.Background" Color="#DFE9F6"/> <!--<Color x:Key="AyListViewHeader.Hover.Background">#C8DAF1</Color>--> <!--暫時沒用到↑ ↓--> <!--<SolidColorBrush x:Key="AyListViewHeader.Hover.Background2" Color="#C8DAF1"/>--> <SolidColorBrush x:Key="AyListViewHeader.Static.BorderBrush" Color="#D9D9D9"/> <SolidColorBrush x:Key="AyListView.GridLineBrush" Color="#CCCCCC"/> <SolidColorBrush x:Key="AyListView.Alter.AlterRow.Background.Color" Color="#FFFFFF"/> <SolidColorBrush x:Key="ScrollBar.Static.Thumb" Color="#99272727"/> <SolidColorBrush x:Key="AyFontRadioButton.Static.Background" Color="#7F4B6C8B"/> <SolidColorBrush x:Key="AyFontRadioButton.Static.Border" Color="#7F507392"/> <SolidColorBrush x:Key="AyFontRadioButton.Static.Font" Color="#7FFFFFFF"/> <SolidColorBrush x:Key="AyFontRadioButton.MouseOver.Background" Color="#B254789A"/> <SolidColorBrush x:Key="AyFontRadioButton.MouseOver.Border" Color="#7F43607E"/> <SolidColorBrush x:Key="AyFontRadioButton.MouseOver.Font" Color="#7F9CBCDC"/> <SolidColorBrush x:Key="AyFontRadioButton.Disabled.Background" Color="#7FE6E6E6"/> <SolidColorBrush x:Key="AyFontRadioButton.Disabled.Border" Color="#7FBCBCBC"/> <SolidColorBrush x:Key="AyFontRadioButton.Disabled.Font" Color="#7FFFFFFF"/> <SolidColorBrush x:Key="AyFontRadioButton.Pressed.Background" Color="#CC3D5B77"/> <SolidColorBrush x:Key="AyFontRadioButton.Pressed.Border" Color="#7F395773"/> <SolidColorBrush x:Key="AyFontRadioButton.Pressed.Font" Color="#7FFFFFFF"/> <!---ContextMenu 樣式 Start--> <SolidColorBrush x:Key="ContextMenuContainer.Static.Background" Color="#FCFFFFFF"/> <SolidColorBrush x:Key="ContextMenuContainer.Static.Border" Color="#FCFFFFFF"/> <SolidColorBrush x:Key="ContextMenuContainer.Static.Separator" Color="#D1DDE7"/> <SolidColorBrush x:Key="ContextMenuContainer.Static.Sjx" Color="#272727"/> <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0" x:Key="MenuItem.Hover.Background"> <GradientStop Color="#FF5992D3" Offset="0"/> <GradientStop Color="#FF4E7FC6" Offset="1"/> </LinearGradientBrush> <SolidColorBrush x:Key="MenuItem.Hover.Pressed" Color="#5E92CC"/> <Thickness x:Key="ContextMenuContainer.Static.BorderThickness" Bottom="1" Top="1" Left="1" Right="1"/> <!---ContextMenu 樣式 End--> <!--2015-03-04 10:04:55 aaronyang製做--> <Color x:Key="NormalButtonColor1">#F7F7F7</Color> <Color x:Key="NormalButtonColor2">#E5E5E5</Color> <Color x:Key="NormalButtonBorderColor">#D6D6D6</Color> <Color x:Key="HoverButtonColor1">#ECECEC</Color> <Color x:Key="HoverButtonColor2">#D9D9D9</Color> <Color x:Key="HoverButtonBorderColor">#B2B2B2</Color> <Color x:Key="PressedButtonColor1">#D7D7D7</Color> <Color x:Key="PressedButtonColor2">#E1E1E1</Color> <Color x:Key="PressedButtonBorderColor">#C6C6C6</Color> <Color x:Key="HoverButtonBorderColor.Mouseout">#00B2B2B2</Color> <Color x:Key="FlatButtonBackground">#4CFFFFFF</Color> <Color x:Key="FlatButtonBackground.Mouseout">#00FFFFFF</Color> <!--用於checkbox和radiobutton Start--> <SolidColorBrush x:Key="AyCheckBox.OptionMark.MouseOver.Background" Color="#FFE2EBE1"/> <SolidColorBrush x:Key="AyCheckBox.OptionMark.MouseOver.Border" Color="#FFA2BE9B"/> <SolidColorBrush x:Key="AyCheckBox.OptionMark.Static.Glyph" Color="#FFEC681C"/> <!--<SolidColorBrush x:Key="AyCheckBox.OptionMark.MouseOver.Glyph" Color="#FFE2CCBF"/>--> <SolidColorBrush x:Key="AyCheckBox.IndeterminateMark.Static.BackGround" Color="#FFE6E6E6"/> <SolidColorBrush x:Key="AyCheckBox.Static.BorderBrush" Color="#CFCFCF"/> <SolidColorBrush x:Key="AyCheckBox.Static.Foreground" Color="#030303"/> <SolidColorBrush x:Key="AyCheckBox.Static.Background" Color="#FFECECEC"/> <!--用於checkbox和radiobutton End--> <!-- 定義TabControl和TabItem的外觀 aaronyang 2015-03-25 10:06:12 --> <!-- TabItems 和 TabControl 的border畫刷--> <SolidColorBrush x:Key="TabBorderBrush" Color="#664F4F4F"/> <!--當未選中的時候Text的字體顏色--> <SolidColorBrush x:Key="TabGrayTextBrush" Color="#FF444444"/> <!-- AyTabItem 關閉按鈕的顏色--> <SolidColorBrush x:Key="TabCloseButton.Font.Static.Brush" Color="#FF7F8891"/> <SolidColorBrush x:Key="TabCloseButton.Font.Hover.Brush" Color="#FFFFFFFF"/> <SolidColorBrush x:Key="TabCloseButton.Background.Hover.Brush" Color="#FFE07476"/> <SolidColorBrush x:Key="TabCloseButton.Background.Pressed.Brush" Color="#FFED5152"/> <LinearGradientBrush x:Key="TabItemNormalBackground" EndPoint="0.5,1" StartPoint="0.5,0"> <GradientStop Color="#7FFFFFFF"/> <GradientStop Color="#FFFFFF" Offset="1"/> </LinearGradientBrush> <LinearGradientBrush x:Key="TabItemHoverBackground" EndPoint="0.5,1" StartPoint="0.5,0"> <GradientStop Color="#E0FFFFFF"/> <GradientStop Color="#FFFFFF" Offset="1"/> </LinearGradientBrush> <!-- AyTabItem 的 --> <!--<SolidColorBrush x:Key="TabItemNormalBackground" Color="red"/>--> <!--<SolidColorBrush x:Key="TabItemHoverBackground" Color="#E0FFFFFF"/>--> <SolidColorBrush x:Key="TabItemSelectedBackground" Color="#FFFFFF"/> <!--<LinearGradientBrush x:Key="TabItemSelectedBackground" EndPoint="0.5,1" StartPoint="0.5,0"> <GradientStop Color="#E0FFFFFF"/> <GradientStop Color="#FFFFFF" Offset="1"/> </LinearGradientBrush>--> <SolidColorBrush x:Key="AySplitButton.Static.Glyph.Background" Color="#E57F95AD"/> <SolidColorBrush x:Key="AySplitButton.Static.Background" Color="#FFF8FAFB"/> <SolidColorBrush x:Key="ProgressBar.Progress" Color="#FF06B025"/> <SolidColorBrush x:Key="ProgressBar.Background" Color="#FFE6E6E6"/> <SolidColorBrush x:Key="ProgressBar.Border" Color="#FFBCBCBC"/> <SolidColorBrush x:Key="AyWindow.ToolBarContent.TextBlock.Foreground.Recommand" Color="#FFFFFF"/> <SolidColorBrush x:Key="AyWindow.Common.TextBlock.Foreground.Recommand" Color="#E5080808"/> <Color x:Key="AyOpacitySet.Static.BorderBrush.Color">#62410B</Color> <!--透明度調節控件邊框顏色--> <!--用於AySliderThumb和AyOpacitySetSlider Start--> <!--<SolidColorBrush x:Key="SliderThumb.Static.Foreground" Color="#FFE5E5E5"/>--> <LinearGradientBrush x:Key="AySliderThumb.Static.Background" EndPoint="0.5,1" StartPoint="0.5,0"> <GradientStop Color="#FDFBFB" /> <GradientStop Color="#FCF7F5" Offset="1"/> </LinearGradientBrush> <LinearGradientBrush x:Key="AySliderThumb.MouseOver.Background" EndPoint="0.5,1" StartPoint="0.5,0" > <GradientStop Color="#F4E4DD"/> <GradientStop Color="#F3E3DB" Offset="1"/> </LinearGradientBrush> <LinearGradientBrush x:Key="AySliderThumb.Pressed.Background" EndPoint="0.5,1" StartPoint="0.5,0"> <GradientStop Color="#F4E4DD"/> <GradientStop Color="#F3E3DB" Offset="1"/> </LinearGradientBrush> <SolidColorBrush x:Key="AySliderThumb.Static.Border" Color="{DynamicResource AyOpacitySet.Static.BorderBrush.Color}"/> <SolidColorBrush x:Key="AySliderThumb.MouseOver.Border" Color="{DynamicResource AyOpacitySet.Static.BorderBrush.Color}"/> <SolidColorBrush x:Key="AySliderThumb.Pressed.Border" Color="{DynamicResource AyOpacitySet.Static.BorderBrush.Color}"/> <SolidColorBrush x:Key="AyOpacitySet.Static.Background" Color="{DynamicResource AyOpacitySet.Static.BorderBrush.Color}"/> <!--控制軌道背景色,漸變的那個--> <SolidColorBrush x:Key="AyOpacitySet.Static.BorderBrush" Color="{DynamicResource AyOpacitySet.Static.BorderBrush.Color}"/> <!--用於AySliderThumb和AyOpacitySetSlider End--> <Color x:Key="AySwitchStyle.Checked.Background">#FF9FD3FE</Color> <Color x:Key="AySwitchStyle.Checked.Border">#FF50ADE2</Color> <Color x:Key="AySwitchStyle.UnChecked.Background">#FFECECEC</Color> <Color x:Key="AySwitchStyle.UnChecked.Border">#FFD0D0D0</Color> <SolidColorBrush x:Key="Ay.SliderThumb.Track.Static.Background" Color="#CACACA"/> <SolidColorBrush x:Key="Ay.SliderThumb.Thumb.Static.Fill" Color="#FFFFFF"/> <SolidColorBrush x:Key="Ay.SliderThumb.Thumb.Static.Stroke" Color="#7EB4EA"/> <SolidColorBrush x:Key="Ay.SliderThumb.Track.Selected.Background" Color="#7EB4EA"/> <SolidColorBrush x:Key="Ay.SliderThumb.PART_SelectionRange.Fill" Color="#FF226584"/> <!--新版界面--> <SolidColorBrush x:Key="AyTreeViewItem.Static.Foreground" Color="#CCFFFFFF"></SolidColorBrush> <SolidColorBrush x:Key="AyTreeViewItem.Hover.Foreground" Color="#FFFFFF"></SolidColorBrush> <SolidColorBrush x:Key="AyTreeViewItem.Pressed.Foreground" Color="#CCFFFFFF"></SolidColorBrush> <SolidColorBrush x:Key="AyTreeViewItem.AyExpanderSanJiao.Static.Background" Color="#66FFFFFF"></SolidColorBrush> <!--鼠標移動上去,默認是90%的透明--> <SolidColorBrush x:Key="AyTreeViewItem.AyExpanderSanJiao.Checked.Background" Color="#FFFFFF"></SolidColorBrush> <SolidColorBrush x:Key="AyTreeViewItem.Icon.Stroke" Color="#747474"></SolidColorBrush> <Color x:Key="AyTreeViewItem.HoverLeave.Background.Color1">#00313A42</Color> <Color x:Key="AyTreeViewItem.HoverLeave.Background.Color2">#00313A42</Color> <Color x:Key="AyTreeViewItem.PressedLeave.Background.Color1">#00252C32</Color> <Color x:Key="AyTreeViewItem.PressedLeave.Background.Color2">#00252C32</Color> <Color x:Key="AyTreeViewItem.HoverLeave.Border.Color">#00313A42</Color> <Color x:Key="AyTreeViewItem.PressedLeave.Border.Color">#00252C32</Color> <Color x:Key="AyTreeViewItem.Hover.Border.Color">#313A42</Color> <Color x:Key="AyTreeViewItem.Pressed.Border.Color">#252C32</Color> <Color x:Key="AyTreeViewItem.Hover.Background.Color1">#313A42</Color> <Color x:Key="AyTreeViewItem.Hover.Background.Color2">#313A42</Color> <Color x:Key="AyTreeViewItem.Pressed.Background.Color1">#252C32</Color> <Color x:Key="AyTreeViewItem.Pressed.Background.Color2">#252C32</Color> <!--<SolidColorBrush x:Key="text1111" Color="#66FFFFFF"></SolidColorBrush>--> <SolidColorBrush x:Key="Win_RightButton_Fill_Background" Color="#CCFFFFFF"></SolidColorBrush> <SolidColorBrush x:Key="Win_RightButton.Stroke" Color="#664F4F4F"></SolidColorBrush> <!--默認stroke顏色--> <SolidColorBrush x:Key="Win_RightButton_Close.Hover.Stroke" Color="#4CAB3E46"></SolidColorBrush> <SolidColorBrush x:Key="Win_RightButton_Other.Hover.Stroke" Color="#2969B3"></SolidColorBrush> <Color x:Key="Win_RightButton_Close.Hover.Background">#D94747</Color> <Color x:Key="Win_RightButton_Other.Hover.Background">#428ADC</Color> <Color x:Key="Win_RightButton_Close.Pressed.Background">#BC3434</Color> <Color x:Key="Win_RightButton_Other.Pressed.Background">#317CD1</Color> <!--<SolidColorBrush x:Key="AyWindow.MainLayout.Background" Color="#7FFFFFFF"/>--> <SolidColorBrush x:Key="AyWindow.Left.Background" Color="#E578685A"/> <LinearGradientBrush x:Key="AyWindow.Left.OpacityMask" EndPoint="0.5,1" MappingMode="RelativeToBoundingBox" StartPoint="0.5,0"> <GradientStop Color="White" Offset="1"/> <!--<GradientStop Color="#08FFFFFF" Offset="0.9 "/> <GradientStop Color="#0AFFFFFF" Offset="0.3"/>--> <GradientStop Color="White" Offset="0"/> </LinearGradientBrush> <SolidColorBrush x:Key="AyWindow.Right.Background" Color="#D8FFFFFF"/> <SolidColorBrush x:Key="AyWindow.RightTopNav.Background" Color="#00FFFFFF"/> <SolidColorBrush x:Key="AyWindow.RightBottomNav.Background" Color="#00FFFFFF"/> <SolidColorBrush x:Key="AyWindow.CenterBorder.BorderBrush" Color="#C7C7C7"/> <SolidColorBrush x:Key="AyWindow.TitleText.Foreground" Color="#E0000000"/> <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0" x:Key="AyWindow.Right.OpacityMask"> <GradientStop Color="#E5FEFEFE" Offset="1"/> </LinearGradientBrush> <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0" x:Key="AyWindow.Common.OpacityMask"> <GradientStop Color="White" Offset="1"/> <GradientStop Color="#CCFFFFFF"/> <GradientStop Color="#E5FEFEFE" Offset="0.3"/> </LinearGradientBrush> <!--ayui3.5--> <Color x:Key="AyInstallNormalButtonColor1">#FCFEFF</Color> <Color x:Key="AyInstallNormalButtonColor2">#EFF2F5</Color> <Color x:Key="AyInstallNormalButtonBorderColor">#D4DEEA</Color> <Color x:Key="AyInstallHoverButtonColor1">#FEFAF9</Color> <Color x:Key="AyInstallHoverButtonColor2">#F9E3E1</Color> <Color x:Key="AyInstallHoverButtonBorderColor">#DD9389</Color> <Color x:Key="AyInstallPressedButtonColor1">#E4E7EB</Color> <Color x:Key="AyInstallPressedButtonColor2">#FBFCFD</Color> <Color x:Key="AyInstallPressedButtonBorderColor">#C7D0DA</Color> <Color x:Key="AyInstallDisabledButtonColor1">#FEFFFF</Color> <Color x:Key="AyInstallDisabledButtonColor2">#F8F9FB</Color> <Color x:Key="AyInstallDisabledButtonBorderColor">#EAEFF5</Color> <SolidColorBrush x:Key="AyInstallDisabledButtonBorderColor_bottom">#FBFCFC</SolidColorBrush> <SolidColorBrush x:Key="AyInstallForeground.static" Color="#383838"></SolidColorBrush> <SolidColorBrush x:Key="AyInstallForeground" Color="#DC5542"></SolidColorBrush>
以上顏色,有的在主題切換時候,會自動變成分析後的顏色,好比我使用:
設置AyWindow的borderbrush
<control:AyWindow x:Class="AYUI360.MainWindow" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:control="http://www.ayjs.net/controls" Title="AY的360安全衛士" Height="629" Width="829" MinHeight="629" MinWidth="829" WindowStartupLocation="CenterScreen" ResizeMode="NoResize" MaxButtonVisibility="Collapsed" BorderBrush="{DynamicResource AyProgressBar.Border}"
注意描邊色
顏色會隨着框架的主色變化而變化。
因爲360沒有描邊,因此咱們不須要設置顏色,相反還要設置layout的margin爲-1,-25,-1,-1
若是你是額外的描邊,例如個人QQ音樂demo,底部的描邊是被壓住的,這個就要額外的寫個border,而後本身綁定ui主題顏色資源便可
我相信你已經會了。
在AYUI4.X中,AY特意給你們簡化了顏色key的記憶
增長 20個 Ay.Brush1-20 個顏色,此顏色是AYUI對背景圖分析後獲得的顏色。14是中間色,大於14比當前顏色亮,小於14的Brush比當前色暗
增長分配的顏色透明度顏色畫刷,好比 Op9 表明90%透明度的Ay.Brush1畫刷,同理下面都是
<SolidColorBrush x:Key="Ay.Op9.Brush1" ></SolidColorBrush> <SolidColorBrush x:Key="Ay.Op9.Brush2" ></SolidColorBrush> <SolidColorBrush x:Key="Ay.Op9.Brush3" ></SolidColorBrush> <SolidColorBrush x:Key="Ay.Op9.Brush4" ></SolidColorBrush> <SolidColorBrush x:Key="Ay.Op9.Brush5" ></SolidColorBrush> <SolidColorBrush x:Key="Ay.Op9.Brush6" ></SolidColorBrush> <SolidColorBrush x:Key="Ay.Op9.Brush7" ></SolidColorBrush> <SolidColorBrush x:Key="Ay.Op9.Brush8" ></SolidColorBrush> <SolidColorBrush x:Key="Ay.Op9.Brush9" ></SolidColorBrush> <SolidColorBrush x:Key="Ay.Op9.Brush10" ></SolidColorBrush> <SolidColorBrush x:Key="Ay.Op9.Brush11" ></SolidColorBrush> <SolidColorBrush x:Key="Ay.Op9.Brush12" ></SolidColorBrush> <SolidColorBrush x:Key="Ay.Op9.Brush13" ></SolidColorBrush> <SolidColorBrush x:Key="Ay.Op9.Brush14" ></SolidColorBrush> <SolidColorBrush x:Key="Ay.Op9.Brush15" ></SolidColorBrush> <SolidColorBrush x:Key="Ay.Op9.Brush16" ></SolidColorBrush> <SolidColorBrush x:Key="Ay.Op9.Brush17" ></SolidColorBrush> <SolidColorBrush x:Key="Ay.Op9.Brush18" ></SolidColorBrush> <SolidColorBrush x:Key="Ay.Op9.Brush19" ></SolidColorBrush> <SolidColorBrush x:Key="Ay.Op9.Brush20" ></SolidColorBrush> <SolidColorBrush x:Key="Ay.Op8.Brush1" ></SolidColorBrush> <SolidColorBrush x:Key="Ay.Op8.Brush2" ></SolidColorBrush> <SolidColorBrush x:Key="Ay.Op8.Brush3" ></SolidColorBrush> <SolidColorBrush x:Key="Ay.Op8.Brush4" ></SolidColorBrush> <SolidColorBrush x:Key="Ay.Op8.Brush5" ></SolidColorBrush> <SolidColorBrush x:Key="Ay.Op8.Brush6" ></SolidColorBrush> <SolidColorBrush x:Key="Ay.Op8.Brush7" ></SolidColorBrush> <SolidColorBrush x:Key="Ay.Op8.Brush8" ></SolidColorBrush> <SolidColorBrush x:Key="Ay.Op8.Brush9" ></SolidColorBrush> <SolidColorBrush x:Key="Ay.Op8.Brush10" ></SolidColorBrush> <SolidColorBrush x:Key="Ay.Op8.Brush11" ></SolidColorBrush> <SolidColorBrush x:Key="Ay.Op8.Brush12" ></SolidColorBrush> <SolidColorBrush x:Key="Ay.Op8.Brush13" ></SolidColorBrush> <SolidColorBrush x:Key="Ay.Op8.Brush14" ></SolidColorBrush> <SolidColorBrush x:Key="Ay.Op8.Brush15" ></SolidColorBrush> <SolidColorBrush x:Key="Ay.Op8.Brush16" ></SolidColorBrush> <SolidColorBrush x:Key="Ay.Op8.Brush17" ></SolidColorBrush> <SolidColorBrush x:Key="Ay.Op8.Brush18" ></SolidColorBrush> <SolidColorBrush x:Key="Ay.Op8.Brush19" ></SolidColorBrush> <SolidColorBrush x:Key="Ay.Op8.Brush20" ></SolidColorBrush> <SolidColorBrush x:Key="Ay.Op7.Brush1" ></SolidColorBrush> <SolidColorBrush x:Key="Ay.Op7.Brush2" ></SolidColorBrush> <SolidColorBrush x:Key="Ay.Op7.Brush3" ></SolidColorBrush> <SolidColorBrush x:Key="Ay.Op7.Brush4" ></SolidColorBrush> <SolidColorBrush x:Key="Ay.Op7.Brush5" ></SolidColorBrush> <SolidColorBrush x:Key="Ay.Op7.Brush6" ></SolidColorBrush> <SolidColorBrush x:Key="Ay.Op7.Brush7" ></SolidColorBrush> <SolidColorBrush x:Key="Ay.Op7.Brush8" ></SolidColorBrush> <SolidColorBrush x:Key="Ay.Op7.Brush9" ></SolidColorBrush> <SolidColorBrush x:Key="Ay.Op7.Brush10" ></SolidColorBrush> <SolidColorBrush x:Key="Ay.Op7.Brush11" ></SolidColorBrush> <SolidColorBrush x:Key="Ay.Op7.Brush12" ></SolidColorBrush> <SolidColorBrush x:Key="Ay.Op7.Brush13" ></SolidColorBrush> <SolidColorBrush x:Key="Ay.Op7.Brush14" ></SolidColorBrush> <SolidColorBrush x:Key="Ay.Op7.Brush15" ></SolidColorBrush> <SolidColorBrush x:Key="Ay.Op7.Brush16" ></SolidColorBrush> <SolidColorBrush x:Key="Ay.Op7.Brush17" ></SolidColorBrush> <SolidColorBrush x:Key="Ay.Op7.Brush18" ></SolidColorBrush> <SolidColorBrush x:Key="Ay.Op7.Brush19" ></SolidColorBrush> <SolidColorBrush x:Key="Ay.Op7.Brush20" ></SolidColorBrush> <SolidColorBrush x:Key="Ay.Op6.Brush1" ></SolidColorBrush> <SolidColorBrush x:Key="Ay.Op6.Brush2" ></SolidColorBrush> <SolidColorBrush x:Key="Ay.Op6.Brush3" ></SolidColorBrush> <SolidColorBrush x:Key="Ay.Op6.Brush4" ></SolidColorBrush> <SolidColorBrush x:Key="Ay.Op6.Brush5" ></SolidColorBrush> <SolidColorBrush x:Key="Ay.Op6.Brush6" ></SolidColorBrush> <SolidColorBrush x:Key="Ay.Op6.Brush7" ></SolidColorBrush> <SolidColorBrush x:Key="Ay.Op6.Brush8" ></SolidColorBrush> <SolidColorBrush x:Key="Ay.Op6.Brush9" ></SolidColorBrush> <SolidColorBrush x:Key="Ay.Op6.Brush10" ></SolidColorBrush> <SolidColorBrush x:Key="Ay.Op6.Brush11" ></SolidColorBrush> <SolidColorBrush x:Key="Ay.Op6.Brush12" ></SolidColorBrush> <SolidColorBrush x:Key="Ay.Op6.Brush13" ></SolidColorBrush> <SolidColorBrush x:Key="Ay.Op6.Brush14" ></SolidColorBrush> <SolidColorBrush x:Key="Ay.Op6.Brush15" ></SolidColorBrush> <SolidColorBrush x:Key="Ay.Op6.Brush16" ></SolidColorBrush> <SolidColorBrush x:Key="Ay.Op6.Brush17" ></SolidColorBrush> <SolidColorBrush x:Key="Ay.Op6.Brush18" ></SolidColorBrush> <SolidColorBrush x:Key="Ay.Op6.Brush19" ></SolidColorBrush> <SolidColorBrush x:Key="Ay.Op6.Brush20" ></SolidColorBrush> <SolidColorBrush x:Key="Ay.Op5.Brush1" ></SolidColorBrush> <SolidColorBrush x:Key="Ay.Op5.Brush2" ></SolidColorBrush> <SolidColorBrush x:Key="Ay.Op5.Brush3" ></SolidColorBrush> <SolidColorBrush x:Key="Ay.Op5.Brush4" ></SolidColorBrush> <SolidColorBrush x:Key="Ay.Op5.Brush5" ></SolidColorBrush> <SolidColorBrush x:Key="Ay.Op5.Brush6" ></SolidColorBrush> <SolidColorBrush x:Key="Ay.Op5.Brush7" ></SolidColorBrush> <SolidColorBrush x:Key="Ay.Op5.Brush8" ></SolidColorBrush> <SolidColorBrush x:Key="Ay.Op5.Brush9" ></SolidColorBrush> <SolidColorBrush x:Key="Ay.Op5.Brush10" ></SolidColorBrush> <SolidColorBrush x:Key="Ay.Op5.Brush11" ></SolidColorBrush> <SolidColorBrush x:Key="Ay.Op5.Brush12" ></SolidColorBrush> <SolidColorBrush x:Key="Ay.Op5.Brush13" ></SolidColorBrush> <SolidColorBrush x:Key="Ay.Op5.Brush14" ></SolidColorBrush> <SolidColorBrush x:Key="Ay.Op5.Brush15" ></SolidColorBrush> <SolidColorBrush x:Key="Ay.Op5.Brush16" ></SolidColorBrush> <SolidColorBrush x:Key="Ay.Op5.Brush17" ></SolidColorBrush> <SolidColorBrush x:Key="Ay.Op5.Brush18" ></SolidColorBrush> <SolidColorBrush x:Key="Ay.Op5.Brush19" ></SolidColorBrush> <SolidColorBrush x:Key="Ay.Op5.Brush20" ></SolidColorBrush> <SolidColorBrush x:Key="Ay.Op4.Brush1" ></SolidColorBrush> <SolidColorBrush x:Key="Ay.Op4.Brush2" ></SolidColorBrush> <SolidColorBrush x:Key="Ay.Op4.Brush3" ></SolidColorBrush> <SolidColorBrush x:Key="Ay.Op4.Brush4" ></SolidColorBrush> <SolidColorBrush x:Key="Ay.Op4.Brush5" ></SolidColorBrush> <SolidColorBrush x:Key="Ay.Op4.Brush6" ></SolidColorBrush> <SolidColorBrush x:Key="Ay.Op4.Brush7" ></SolidColorBrush> <SolidColorBrush x:Key="Ay.Op4.Brush8" ></SolidColorBrush> <SolidColorBrush x:Key="Ay.Op4.Brush9" ></SolidColorBrush> <SolidColorBrush x:Key="Ay.Op4.Brush10" ></SolidColorBrush> <SolidColorBrush x:Key="Ay.Op4.Brush11" ></SolidColorBrush> <SolidColorBrush x:Key="Ay.Op4.Brush12" ></SolidColorBrush> <SolidColorBrush x:Key="Ay.Op4.Brush13" ></SolidColorBrush> <SolidColorBrush x:Key="Ay.Op4.Brush14" ></SolidColorBrush> <SolidColorBrush x:Key="Ay.Op4.Brush15" ></SolidColorBrush> <SolidColorBrush x:Key="Ay.Op4.Brush16" ></SolidColorBrush> <SolidColorBrush x:Key="Ay.Op4.Brush17" ></SolidColorBrush> <SolidColorBrush x:Key="Ay.Op4.Brush18" ></SolidColorBrush> <SolidColorBrush x:Key="Ay.Op4.Brush19" ></SolidColorBrush> <SolidColorBrush x:Key="Ay.Op4.Brush20" ></SolidColorBrush> <SolidColorBrush x:Key="Ay.Op3.Brush1" ></SolidColorBrush> <SolidColorBrush x:Key="Ay.Op3.Brush2" ></SolidColorBrush> <SolidColorBrush x:Key="Ay.Op3.Brush3" ></SolidColorBrush> <SolidColorBrush x:Key="Ay.Op3.Brush4" ></SolidColorBrush> <SolidColorBrush x:Key="Ay.Op3.Brush5" ></SolidColorBrush> <SolidColorBrush x:Key="Ay.Op3.Brush6" ></SolidColorBrush> <SolidColorBrush x:Key="Ay.Op3.Brush7" ></SolidColorBrush> <SolidColorBrush x:Key="Ay.Op3.Brush8" ></SolidColorBrush> <SolidColorBrush x:Key="Ay.Op3.Brush9" ></SolidColorBrush> <SolidColorBrush x:Key="Ay.Op3.Brush10" ></SolidColorBrush> <SolidColorBrush x:Key="Ay.Op3.Brush11" ></SolidColorBrush> <SolidColorBrush x:Key="Ay.Op3.Brush12" ></SolidColorBrush> <SolidColorBrush x:Key="Ay.Op3.Brush13" ></SolidColorBrush> <SolidColorBrush x:Key="Ay.Op3.Brush14" ></SolidColorBrush> <SolidColorBrush x:Key="Ay.Op3.Brush15" ></SolidColorBrush> <SolidColorBrush x:Key="Ay.Op3.Brush16" ></SolidColorBrush> <SolidColorBrush x:Key="Ay.Op3.Brush17" ></SolidColorBrush> <SolidColorBrush x:Key="Ay.Op3.Brush18" ></SolidColorBrush> <SolidColorBrush x:Key="Ay.Op3.Brush19" ></SolidColorBrush> <SolidColorBrush x:Key="Ay.Op3.Brush20" ></SolidColorBrush>
AY在AYUI4.X 增長了本身研究的超級漸變畫刷,本身看了不少顏色理論,才作出來的。 Key爲 Ay.Y.Bursh1
以下demo,文字和圖標都是根據背景色來的,生成的漸變。
接下來,添加其餘東西
下篇博客再講了