园龄：13年粉丝：902 关注：178

[界面开发新秀]免费的AYUI,开发360领航版系列教程[2/40]

《界面开发风AYUI-基于WPF By AY》

大家好!

距离上篇博客发布有10天了，因为我在开发AYUI4.X效果更惊艳

我是AY,很高兴，终于可以写自己的作品的，网络博客的教程。

这是篇个AYUI的使用开发系列博客，也是WPF技术快速核心技术掌握的途径。在这里你会学会如何开发一款360领航版界面，了解AYUI的设计和二次开发

AYUI理念：无论你在哪里，赏心悦目就好

AYUI产品：Wizard打包，AYUI库，AYUI的DEMO，自动更新模块。

AY承诺：使用AYUI做出自己的作品，如果是好作品，我会放到官网去推荐展示，给你们推广自己的机会，ayui已经免费。但是源码不会给。源码是AY维持服务器费用和域名还有其他的用处，比如治疗身体。

设计的软件辅助工具：Adobe air 安装Markman

本期额外工具介绍： wpfinspector 用来查看wpf界面结构的。类似浏览器的DOM结构查看（vs2013开始就已经提供了，无需下载）

使用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即可

如果确实需要描边色，默认ayui只是提供1像素的透明的描边，你需要窗体设置BorderBrush绑定主题定义的颜色资源，这里我使用

关于AYUI提供的客户端通过DynamicResource方式使用，如果在框架中，就是用StaticResource静态方式，也可以动态，一般如果想动态切换颜色，是影响到动画上的层次的，需要在AYUI的框架的Themes文件夹下的AySkin/DefaultAyControl.xaml中增加控件，使用StaticResource方式，才能动态的在动画中使用 ui自带的颜色，因为动画在绑定过渡到什么颜色的时候只能是StaticResource不能是DynamicResource。这里我们直接使用颜色资源即可

下面我列出了颜色资源的文件表

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

169

170

171

172

173

174

175

176

177

178

179

180

181

182

183

184

185

186

187

188

189

190

191

192

193

194

195

196

197

198

199

200

201

202

203

204

205

206

207

208

209

210

211

212

213

214

215

216

217

218

219

220

221

222

223

224

225

226

227

228

229

230

231

232

233

234

235

236

237

238

239

240

241

242

243

244

245

246

247

248

249

250

251

252

253

254

255

256

257

258

259

260

261

262

263

264

265

266

267

268

269

270

271

272

273

274

275

276

277

<!--进度条颜色-->
   <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>