Saving Brushes to a ResourceDictionary

One of the things I REALLY like is the fact I can create a color and then save the information to be used later on in a different control, shape, panel (page) in the application.

In Blend it is SUPER easy. The example already has a border drawn on a page (in a grid) with a corner radius of 5 (different stumbling block for later). For manually - the code that Blend creates is the same you would use designing in Visual Studio. The tricky part (for me) is finding the specific color I want in Visual Studio. I'll learn that later though.

Blend allows me to use the color selector to decide on what color I want to use. In this case it is a medium blue. The Color selector shows the different values that are used to create static brushes in the resource dictionary. I have already created a new ResourceDictionary named Brushes.xaml that will store these colors.

Next to the color block that shows the color used in the background (in the brushes panel under the "Properties" tab), left click on that small white square to bring up a dialog box. The available options will be
  • Reset
  • Custom Expression
  • Local Resource
  • Convert to New Resource
  • Data Binding
  • Element Property Binding.

The only options that relate to this are the "Local Resource" and "Convert to New Resource"

Local Resource will bring up a dialog box showing all of the colors that have already been defined in the ResourceDictionary. The color in the border has not been converted so it will not be displayed in this list.

Convert to New Resource is the one to use right now, it will take the color defined in the border's background and convert it to a defined resource to use again later without remaking/retyping the color values. Choose "Convert to New Resource" - this will bring up a dialog box for you to set all of the specifics for this new brush definition.

For this example, I am giving the Brush the Name "BlueOne" and saving it in the Brushes.xaml file. Below shows the dialog box after entering this information.

Select the OK button and you will see the file now has a star beside the name shown in the tab. The star indicates there have been changes made to the file and it has not been saved yet. Also - in the background definition there is a change, instead of defining the color using the Argb values it has "{StaticResource BlueOne}". The white box next to the swatch showing the Background color is now green, this indicates the background is using a defined brush instead of just a color value.

If you click on the other square that is still white - and in the panel below the Brushes panel, the Local Brush Resources now shows the defined brush "BlueOne" as an option now. It is also now available in the "Local Resource" dialog that shows all of the available brushes you can use.

Save the file - and then open the Brushes.xaml file - you will notice that name also has a star next to the name. The file has had a new definition added to it when you converted the color, and has not been saved yet. (shown in the example above)

The Brushes.xaml file now has a definition for a "SolidColorBrush" with the key of "BlueOne" - the key is how you link to this color when used in new controls or pages. The "LinearGradientBrush" is from the chrome brush post earlier.

The "FF" in this color definition is for the Alpha channel... when defining the color in Argb this is translated to 255 (100% of a channel or color). Another way to define the color would be 

<Color x:Key="BlueOne">#FF1947B6</Color>
Same color just another way to create a resource.

Now, the color can be reused anywhere in the application without having to recode it in the element's definition and can be used for a Background, BorderBrush, Fill, or Foreground color.

No comments:

Post a Comment