</ iframe > </noscript> <!-- End Google Tag Manager (noscript) --> <div id="BeforeHeaderContent"> </div> <div id="HeaderContent"> <!--DXMETADATA start type="Literal" condition="communityenabled" value="%%scrap:name=_COMMUNITY_RATING%%" --><!--DXMETADATA end --> <!--DXMETADATA start type="LogoImage" --><!--DXMETADATA end--> <div id="ProjectTitle"><!--DXMETADATA start type="ProjectTitle" -->Extended Library for WPF and Silverlight<!--DXMETADATA end--></div> <div id="PageTitle"><div id="PageTitleText"><!--DXMETADATA start type="ItemTitle" -->Advanced ColorPicker Mode<!--DXMETADATA end--></div></div> </div> <div id="AfterHeaderContent"> <!-- Spacing --> <span id="ToggleAllSectionsLink" class="FunctionLink"> <label id="CollapseAllLabel"><!--DXMETADATA start type="Phrase" name="COLLAPSE_ALL" -->Collapse All<!--DXMETADATA end--></label> <label id="ExpandAllLabel" style="display: none;"><!--DXMETADATA start type="Phrase" name="EXPAND_ALL" -->Expand All<!--DXMETADATA end--></label> </span><!--DXMETADATA start type="Literal" condition="communityenabled" value="%%scrap:name=_COMMUNITY_DROPDOWN%%" --><!--DXMETADATA end --> </div> <!--DXMETADATA start type="Breadcrumbs" scrap="_BREADCRUMBS" --><div class="BreadcrumbsContainer"><table><tr><td> <a href="ColorPicker.html">ColorPicker</a> > <a href="ColorPickerFeatures.html">ColorPicker Features</a> > Advanced ColorPicker Mode</td></tr></table></div><!--DXMETADATA end --> <div id="BodyContent"> <!--DXMETADATA start type="TopicSection" name="BodyText"--><p style='MARGIN: 0.15in 0in 0.7pt; mso-style-name: "Heading 4 Reference"'> </p> <p class="MsoBodyText">By default, the <a href="C1.WPF.Extended.4~C1.WPF.Extended.C1ColorPicker.html">C1ColorPicker</a> control will open with the <b>Advanced</b> tab available when the control's drop-down arrow is clicked. The <b>Basic</b> tab appears by default, but the <b>Advanced</b> view can be selected by clicking the <b>Advanced</b> at the bottom of the control. The <b>Advanced</b> view appears similar to the following image:</p> <p class="MsoBodyText"> </p> <p class="MsoBodyText"><img src="Advanced_x0020_ColorPicker_x0020_Mode_files/image001.png" width="408" height="256"></p> <p class="MsoBodyText"> </p> <p class="MsoBodyText">The <b>Advanced</b> tab includes the following options/sections:</p> <ul> <li> <div class="MsoBodyText"> <strong>Color Field/Picked Color:</strong> The <strong>Color Field</strong> lets you choose a tone in a color's range. The <strong>Picked Color</strong> indicates the currently selected color. Move the <strong>Color Slider</strong> to pick a general color family and then fine tune the color selection in the <strong>Color Field</strong>. </div> </li> <li> <div class="MsoBodyText"> <strong>Color Slider:</strong> This slider lets you choose from the color spectrum. Move the <strong>Color Slider</strong> to pick a general color and then fine tune the color selection in the <strong>Color Field</strong>. </div> </li> <li> <div class="MsoBodyText"> <strong>Transparency Slider:</strong> This slider lets you lets you set the color's transparency. You can choose to make the color opaque or partially or completely transparent. Move the Transparency Slider to pick a transparency and note that the number in the <strong>Transparency Value</strong> box changes as well. This slider is only visible when the <a href="C1.WPF.Extended.4~C1.WPF.Extended.C1ColorPicker~ShowAlphaChannel.html">C1ColorPicker.ShowAlphaChannel</a> property is set to True (default) </div> </li> <li> <div class="MsoBodyText"> <strong>Color Preview:</strong> Preview the color you are currently choosing. Once you are satisfied with the color choice, click the <strong>OK</strong> button to close the drop-down box and set the color as the <strong>Selected Color</strong>. </div> </li> <li> <div class="MsoBodyText"> <strong>Transparency Value:</strong> This box lets you set the color's transparency. You can set the <strong>Transparency</strong> to a number between 0, which is completely transparent, and 255, which is completely opaque (default). When the <span class="LinkProperty"><strong>C1ColorPicker.ShowAlphaChannel</strong></span> property is set to <strong>False</strong> this box appears grayed out. </div> </li> <li> <div class="MsoBodyText"> <strong>RGB Color:</strong> These three numeric boxes let you choose a color using the Red Green Blue (RGB) color model. </div> </li> <li> <div class="MsoBodyText"> <strong>HSL Color:</strong> These three numeric boxes let you choose a color using the Hue Saturation Lightness (HSL) color model. </div> </li> <li> <div class="MsoBodyText"> <strong>Hexadecimal Color:</strong> If eight digits are visible, the first two digits represent the color's transparency ranging from FF (opaque) to 00 (transparent) and the last six digits represent standard hexadecimal color selection. Note that if the <strong><span class="LinkProperty">C1ColorPic</span><span class="LinkProperty">ker.ShowAlphaChannel</span></strong> property is set to False, only the last six digits will be visible (no transparency value). For more information about hexadecimal color selection, see w3school </div> </li> <li> <div class="C1HBullet"> <strong>OK Button:</strong> Once you are satisfied with the color choice, click the <strong>OK</strong> button to close the drop-down box and set the color as the <strong>Selected Color</strong>. </div> </li> <li> <div class="C1HBullet"> <strong>Selected Color:</strong> The currently selected color will appear in the color picker's window. </div> </li> <li> <div class="C1HBullet"> <strong>Drop-Down Arrow:</strong> Click the drop-down arrow to open the <span class="LinkClass"><strong>C1ColorPicker</strong></span> control's window. See <a href="DropDownDirection.html">Drop-Down Direction</a> for information about setting where the drop-down window appears. </div> </li> <li> <div class="C1HBullet"> <strong>Advanced Tab:</strong> Click the Advanced tab to choose a custom color at run time. Click the Basic tab to view pre-selected colors. The <a href="C1.WPF.Extended.4~C1.WPF.Extended.C1ColorPicker~Mode.html">C1ColorPicker.Mode</a> property must be set to <strong>Advanced</strong> or <strong>Both</strong> for the <strong>Advanced</strong> tab to be visible. </div> </li> </ul> <p class="MsoNormal"> </p><!--DXMETADATA end--> <a name="seealsobookmark"></a> <!--DXMETADATA start type="FilteredItemList" scrap="CATEGORISED_LINKS" namespace="linkcategory" source="Item" filter="" NoHeader="True" NoFooter="True" format="%%replaceinquotes:value=false%%%%scrap:name=_COLLAPSIBLE_HEADER,idprefix=seealso,caption=""%%phrase:name=SeeAlso%%%%designlist:tagidentifier=seealso,itemtype=See Also%%""%%%%filtereditemlist%%</div>"--><!--DXMETADATA end--> </div> <div id="FooterContent"> <!--DXMETADATA start type="Scrap" condition="communityenabled" name="_COMMUNITY_FOOTER" --><!--DXMETADATA end --> <!--DXMETADATA start type="Variable" name="CopyrightNotice" format="<p> </p><p> </p><hr style=""height: 1px"" /><p>%%variable%%</p>" --><p> </p><p> </p><hr style="height: 1px"><p>Copyright (c) <script type="text/javascript"> var theDate=new Date() document.write(theDate.getFullYear()) </script> GrapeCity, inc. All rights reserved. <script> $(document).ready(function() { if (!(window.self !== window.top)) { // Not running in a frameset // Get the page name var pageName = location.href.substring(location.href.lastIndexOf("/") + 1); if (pageName.indexOf("#") != -1) { pageName = pageName.substring(0, pageName.indexOf("#")); } // Append to webframe.html var framePage = "webframe.html#" + pageName; location.href = framePage; } }); </script></p><!--DXMETADATA end --> <!--DXMETADATA start type="Variable" name="FeedbackLink" format="" --><a target="_blank" href="http://our.componentone.com/groups/">Product Support Forum</a> | <a target="_blank" href="http://feedback.componentone.com/forums/272000-wpf-and-silverlight-documentation">Documentation Feedback</a><!--DXMETADATA end--> </div> </body> </html>