Below is a screenshot of the starting Blend Screen - this is what you see when you create a new project. Most will be different depending on how you set up your screen, but this is just going over some of the basics, helps to explain the process (for me at least).
The "Projects" window in the upper left shows you what files are currently in your project, "Assets" and "Stages" are not used when creating a Resource Dictionary. The "Objects and Timeline" window below "Projects" displays the elements you have either created or imported into the file. Think of this file as a new Illustrator file, the LayoutRoot grid is the new page and the "Objects and Timeline" window shows you the objects based on what layer they are in the file.
Step 1. Create a new folder in the project files.
I create a new folder so I can easily find my resource dictionaries - and keep them all in one place. Sort of like collecting images for print projects in InDesign. Everything for the document is now in one place and can be referenced through the entire document (or project for Silverlight).
I right click on the project name (for this demo it is XAMLTestingScreens) which brings up a menu - Choose "Add New Folder". I name my folder "Resources" since it is easy for me to remember.
Right click on your new folder, the same options menu will be displayed, this time select "Add New Item." This will bring up a dialog window showing various file types you can add to your current project.
Select "Resource Dictionary" - I named mine "Brushes.xaml" so it is easy for me to reference later as I build more functionality and design into this project.
You will now see a new file named (ok, I will in this demo) "Brushes.xaml" - there is no C# codebehind, since there is no real functionality to this document. Think of it as a .css file you use to style the Silverlight controls and elements.
I used the same brush I made for the chrome brush notes, just so I don't have to remake anything for this - the XAML for our Resource Dictionary now looks like below.
In order to reference this dictionary you have to make sure the file App.xaml includes the newly created Resource Dictionary (in this case Brushes.xaml) in it's listing of used style files.
For this small project the App.xaml file is located in the very top/first project named "XAMLTesting", it is usually located in your topmost project that is the name of the Silverlight file (nothing after the name such as XAMLTestingScreens).
Below is what we currently have in our App.xaml file for this mini project:
<Application
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
x:Class="XAMLTesting.App">
<Application.Resources>
<ResourceDictionary>
<ResourceDictionary.MergedDictionaries>
<ResourceDictionary Source="/Microsoft.Expression.Prototyping.SketchControls;component/ScrollViewerStyles.xaml"/>
<ResourceDictionary Source="/XAMLTesting.Screens;component/SketchStyles.xaml"/>
<ResourceDictionary Source="/XAMLTesting.Screens;component/Resources/Brushes.xaml"/>
</ResourceDictionary.MergedDictionaries>
</ResourceDictionary>
</Application.Resources>
</Application>
It lists all of the resource dictionaries that the application is supposed to use - the SketchStyles and ScrollViewerStyles are default when you create a Silverlight Sketchflow project (which this is).
This line should automatically be placed in your App.xaml file - and you will see a tab at the top of your page saying "App.xaml*" - the star means the file has not been saved yet - save your file and then rebuild the project. After you rebuild - you will be able to see the new file in the"Resources" Tab/Window on the right hand side.
Go back to the properties panel - click on the white box next to the "Fill" color selector. You will get a dropdown box - choose "Local Resources" for a selection of brush styles available to you in the application. Choose the "MyChrome" brush (this name is the x:Key value in the resource dictionary file.)
After you have selected this option, your shape will now have the newly chosen brush from your resource dictionary. You can now use this brush on any of your application controls or pages without having to recreate it - saving both coding time and number of lines in the file.
Above, you can see the XAML created by Blend to link the rectangle to this brush - it is now a "StaticResource" letting the application know it is a predefined resource and what key to use when referencing this brush style/definition.
You now have a rectangle (or any shape) with this brush as the fill.
No comments:
Post a Comment