I have a layout like this:
The requirement is When I click the button, the size of the detailText object will be enlarged/shrunken (BOTH CASES) as an animation.
This is my code:
#include <QPropertyAnimation>
MainWindow::MainWindow(QWidget *parent) : QMainWindow(parent), ui(new Ui::MainWindow)
{
ui->setupUi(this);
ui->detailText->setVisible(false);
connect (ui->button, &QPushButton::clicked, this, &MainWindow::buttonClicked);
}
void MainWindow::buttonClicked()
{
ui->detailText->setVisible(!ui->detailText->isVisible());
ui->detailText->isVisible() ? ui->button->setText( "view less" ) : ui->button->setText( "view more" );
runAnimation();
}
void MainWindow::runAnimation()
{
QPropertyAnimation *animation = new QPropertyAnimation( ui->detailText, "size" );
animation->setDuration( 1250 );
if (ui->detailText->isVisible()) {
animation->setStartValue( QSize( ui->detailText->width(), 0 ) );
animation->setEndValue( QSize( ui->detailText->width(), ui->detailText->height() ) );
}
else {
animation->setStartValue( QSize( ui->detailText->width(), ui->detailText->height() ) );
animation->setEndValue( QSize( ui->detailText->width(), 0 ) );
}
animation->start();
}
With this code, there are two problems:
When the detailText is invisible, and I click the button: the whole window is suddenly extended, and then there is animation for the detailText. I need the animation of the detailText makes the size of window larger accordingly. Or in another word, the enlargement of the whole window and the animation of detailText are synchronized.
The animation happens only one way: when detailText is invisible, I click the button, detailText will be shown and there is animation. But when detailText is visible, I click the button, the detailText is hidden, but no animation, the size of window is suddenly shrunken.
How should I correct my code?
My *.ui file:
<?xml version="1.0" encoding="UTF-8"?>
<ui version="4.0">
<class>MainWindow</class>
<widget class="QMainWindow" name="MainWindow">
<property name="geometry">
<rect>
<x>0</x>
<y>0</y>
<width>400</width>
<height>300</height>
</rect>
</property>
<property name="windowTitle">
<string>MainWindow</string>
</property>
<widget class="QWidget" name="centralWidget">
<widget class="QWidget" name="">
<property name="geometry">
<rect>
<x>110</x>
<y>60</y>
<width>201</width>
<height>161</height>
</rect>
</property>
<layout class="QVBoxLayout" name="verticalLayout_2">
<property name="spacing">
<number>0</number>
</property>
<item>
<layout class="QHBoxLayout" name="horizontalLayout">
<item>
<widget class="QLabel" name="incon">
<property name="minimumSize">
<size>
<width>0</width>
<height>0</height>
</size>
</property>
<property name="text">
<string>Icon here</string>
</property>
</widget>
</item>
<item>
<layout class="QVBoxLayout" name="verticalLayout">
<property name="spacing">
<number>0</number>
</property>
<item>
<widget class="QLineEdit" name="introText">
<property name="text">
<string>intro text</string>
</property>
</widget>
</item>
<item>
<widget class="QTextEdit" name="detailText">
<property name="html">
<string><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN" "http://www.w3.org/TR/REC-html40/strict.dtd">
<html><head><meta name="qrichtext" content="1" /><style type="text/css">
p, li { white-space: pre-wrap; }
</style></head><body style=" font-family:'MS Shell Dlg 2'; font-size:8.25pt; font-weight:400; font-style:normal;">
<p style=" margin-top:0px; margin-bottom:0px; margin-left:0px; margin-right:0px; -qt-block-indent:0; text-indent:0px;">detail text. This is the detail text of the intro text.</p>
<p style=" margin-top:0px; margin-bottom:0px; margin-left:0px; margin-right:0px; -qt-block-indent:0; text-indent:0px;">You can see this text when you click onto the button.</p>
<p style=" margin-top:0px; margin-bottom:0px; margin-left:0px; margin-right:0px; -qt-block-indent:0; text-indent:0px;">Lorem Ipsum</p>
<p style=" margin-top:0px; margin-bottom:0px; margin-left:0px; margin-right:0px; -qt-block-indent:0; text-indent:0px;">Blablabla</p>
<p style=" margin-top:0px; margin-bottom:0px; margin-left:0px; margin-right:0px; -qt-block-indent:0; text-indent:0px;">1234</p>
<p style=" margin-top:0px; margin-bottom:0px; margin-left:0px; margin-right:0px; -qt-block-indent:0; text-indent:0px;">5678</p>
<p style=" margin-top:0px; margin-bottom:0px; margin-left:0px; margin-right:0px; -qt-block-indent:0; text-indent:0px;">Hello World</p></body></html></string>
</property>
</widget>
</item>
</layout>
</item>
</layout>
</item>
<item>
<widget class="QPushButton" name="button">
<property name="styleSheet">
<string notr="true"/>
</property>
<property name="text">
<string>View more</string>
</property>
</widget>
</item>
</layout>
</widget>
</widget>
<widget class="QMenuBar" name="menuBar">
<property name="geometry">
<rect>
<x>0</x>
<y>0</y>
<width>400</width>
<height>21</height>
</rect>
</property>
</widget>
<widget class="QToolBar" name="mainToolBar">
<attribute name="toolBarArea">
<enum>TopToolBarArea</enum>
</attribute>
<attribute name="toolBarBreak">
<bool>false</bool>
</attribute>
</widget>
<widget class="QStatusBar" name="statusBar"/>
</widget>
<layoutdefault spacing="6" margin="11"/>
<resources/>
<connections/>
</ui>
I think logic should be improved. In case your ui->detailText is visible, logically it should be like this:
animation->setStartValue( QSize( ui->detailText->width(), ui->detailText->height()));
animation->setEndValue( QSize( ui->detailText->width(), 0));
This would be because in case you detailText is visible, you already hide it instead of trying to shrink it to become invisible. And when it is invisible, you should probably try the following:
animation->setStartValue( QSize( ui->detailText->width(), 0));
animation->setEndValue( QSize( ui->detailText->width(), ui->detailText->height()));
In other words, the problem might be that you should change size of you widget you want to animate in a opposite direction than it is now. And finally, it would be very appreciated if you would provide *.ui file for your project, so we may be able to debug your code better, and see how it should be fixed. Currently, it is a bit of a wild guess, so I can not guarantee it will work for you.
Related
This is the code of the svg I am using in scss as a cursor. It is a crosshair of vertical and horizontal lines, and they are currently opaque and barely visible. I need to get them to black with no opacity, but nothing I have changed in the code works. I am working in ReactJS using SASS css: cursor: url(crosshairs.svg), auto;.
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Created with Inkscape (http://www.inkscape.org/) EDIT: was height: 3301, width:2161 reduced to x128 else it wont show up-->
<svg
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:cc="http://creativecommons.org/ns#"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
width="128"
height="128"
viewBox="0 0 873.389 571.765"
version="1.1"
id="svg8"
inkscape:version="0.92.3 (unknown)"
sodipodi:docname="fullscreen-crosshair-1650x1080.svg">
<defs
id="defs2" />
<sodipodi:namedview
id="base"
pagecolor="#ffffff"
bordercolor="#666666"
borderopacity="1.0"
inkscape:pageopacity="0.0"
inkscape:pageshadow="2"
inkscape:zoom="0.25"
inkscape:cx="1437.71"
inkscape:cy="1122.57"
inkscape:document-units="mm"
inkscape:current-layer="layer1"
showgrid="false"
units="px"
inkscape:window-width="1680"
inkscape:window-height="1016"
inkscape:window-x="0"
inkscape:window-y="0"
inkscape:window-maximized="1" />
<metadata
id="metadata5">
<rdf:RDF>
<cc:Work
rdf:about="">
<dc:format>image/svg+xml</dc:format>
<dc:type
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
<dc:title></dc:title>
</cc:Work>
</rdf:RDF>
</metadata>
<g
inkscape:label="Layer 1"
inkscape:groupmode="layer"
id="layer1"
transform="translate(0,274.765)">
<path
style="fill:none;fill-rule:evenodd;stroke:#000000;stroke-width:0.793751;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
d="M 436.694,-322.259 V 344.493"
id="path10"
inkscape:connector-curvature="0" />
<path
style="fill:none;fill-rule:evenodd;stroke:#000000;stroke-width:0.793751;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1;stroke-miterlimit:4;stroke-dasharray:none"
d="M -58.6065,11.1175 H 931.996"
id="path12"
inkscape:connector-curvature="0" />
</g>
</svg>
Increase the stroke-width of the paths. stroke-width:10 seems pretty opaque to me for instance.
This question already has answers here:
SVG USE element and :hover style
(3 answers)
Closed 7 years ago.
I try to apply css-style to svg-elements. I want to do this without any script.
While the style seems not to work on a <defs>:
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN"
"http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
<svg xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
width="300" height="80">
<style>
rect:hover {
opacity: 0.5;
}
</style>
<defs>
<rect id="box" x="0" y="0" width="30" height="20" rx="3" ry="3" style="fill:green;stroke-width:1;stroke:rgb(0,0,0)"/>
<g id="month">
<!-- first row -->
<g transform="translate(50 40)">
<use xlink:href='#box'/>
<text x="5" y="15" fill="grey">Mon</text>
</g>
<g transform="translate(80 40)">
<use xlink:href='#box'/>
<text x="5" y="15" fill="grey">Thu</text>
</g>
</g>
</defs>
<use xlink:href='#month'/>
</svg>
This works:
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN"
"http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
<svg xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
width="300" height="80">
<style>
rect:hover {
opacity: 0.5;
}
</style>
<rect id="box" x="0" y="0" width="30" height="20" rx="3" ry="3" style="fill:green;stroke-width:1;stroke:rgb(0,0,0)"/>
</svg>
Is there a way to apply the css? Is there maybe a different way to apply it to a <defs>-element? Or any workaround?
EDIT -- This is an answer to the original question which has now been updated and invalidates the response.
Sure, just give the use a class or ID..
.box {
fill: green;
stroke-width: 1;
stroke: rgb(0, 0, 0);
}
.box:hover {
fill: red;
}
<?xml version="1.0" encoding="UTF-8" standalone="no" ?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN" "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="300" height="80">
<defs>
<rect id="box" x="0" y="0" width="30" height="20" rx="3" ry="3" />
</defs>
<use xlink:href='#box' class="box" />
</svg>
I learned how to add a shadow to PNG images from the answers to this question. A user named Dudley posted this code which works for me except if Firefox (and an older version of Safari):
.shadowed {
-webkit-filter: drop-shadow(12px 12px 25px rgba(0,0,0,0.5));
filter: url(#drop-shadow);
-ms-filter: "progid:DXImageTransform.Microsoft.Dropshadow(OffX=12, OffY=12,
Color='#444')";
filter: "progid:DXImageTransform.Microsoft.Dropshadow(OffX=12, OffY=12,
Color='#444')";
}
<!-- HTML elements here -->
<svg height="0" xmlns="http://www.w3.org/2000/svg">
<filter id="drop-shadow">
<feGaussianBlur in="SourceAlpha" stdDeviation="4"/>
<feOffset dx="12" dy="12" result="offsetblur"/>
<feFlood flood-color="rgba(0,0,0,0.5)"/>
<feComposite in2="offsetblur" operator="in"/>
<feMerge>
<feMergeNode/>
<feMergeNode in="SourceGraphic"/>
</feMerge>
</filter>
</svg>
The code is based on this article. I added the code. I used it as-is except the values for OffX, OffY, and the rgb values. Additionally, I copied the CSS code in a a:hover section of the CSS shown below. (Note: I'd added the id tag change later to try to get it to work, but it didn't appear to work either).
#cssicons > ul > li > a:hover {
color: rgb(255,255,221);
id: shadowed;
-webkit-filter: drop-shadow(-2px 2px 3px rgba(0,0,0,0.5));
filter: url(#drop-shadow);
-ms-filter: "progid:DXImageTransform.Microsoft.Dropshadow(OffX=2, OffY=2, Color='#444')";
filter: "progid:DXImageTransform.Microsoft.Dropshadow(OffX=2, OffY=2, Color='#444')";
}
The HTML looks like this (truncated for brevity):
<link href="/icon_assets/styles.css" rel="stylesheet" type="text/css">
<div id='cssicons'>
<ul>
<li class='has-sub last'></span></li>
<li class='has-sub last'></span></li>
<li class='has-sub last'></span>
<ul>
<li><a href='https://www.facebook.com/sharer/sharer.php?u=www.RhythmShuffle.com&t=Rhythm%20Shuffle'><span>Share</span></a></li>
<li><a href='http://www.facebook.com/plugins/like.php?href=http%3A%2F%2FRhythmShuffle.com%2F&send=false&layout=standard&width=450&show_faces=true&font=trebuchet+ms&colorscheme=light&action=like&height=80'><span>Like</span></a></li>
<li><a href='http://www.facebook.com/events/442624375809049/'><span>RSVP</span></a></li>
<li class='last'><a href='http://www.facebook.com/SwingBuffalo/'><span>Swing Buffalo</span></a></li>
</ul>
</li>
...
<svg height="0" xmlns="http://www.w3.org/2000/svg">
<filter id="drop-shadow">
<feGaussianBlur in="SourceAlpha" stdDeviation="4"/>
<feOffset dx="2" dy="2" result="offsetblur"/>
<feFlood flood-color="rgba(0,0,0,0.5)"/>
<feComposite in2="offsetblur" operator="in"/>
<feMerge>
<feMergeNode/>
<feMergeNode in="SourceGraphic"/>
</feMerge>
</filter>
</svg>
The page containing the code is here. Anyone know what I'm doing wrong?
Thanks,
Rob
I think this may be the answer
css-filters browser support
Browsers that currently support css-filters are Chrome and Safari.
Update #1
It works in Firefox
The point was that filter: url(shadow.svg#drop-shadow); was needed
.shadowed {
-webkit-filter: drop-shadow(-2px 2px 3px rgba(0,0,0,0.5));
filter: url(shadow.svg#drop-shadow);
-ms-filter: "progid:DXImageTransform.Microsoft.Dropshadow(OffX=2, OffY=2, Color='#444')";
filter: "progid:DXImageTransform.Microsoft.Dropshadow(OffX=2, OffY=2, Color='#444')";
}
#cssicons > ul > li > a:hover {
color: rgb(255,255,221);
id: shadowed;
-webkit-filter: drop-shadow(-2px 2px 3px rgba(0,0,0,0.5));
filter: url(shadow.svg#drop-shadow);
-ms-filter: "progid:DXImageTransform.Microsoft.Dropshadow(OffX=2, OffY=2,
Color='#444')";
filter: "progid:DXImageTransform.Microsoft.Dropshadow(OffX=2, OffY=2,
Color='#444')";
}
I have shadow.svg as actual file, not embedded in html.
Hint initiated by user2057516 : Add the "Content-Type: image/svg+xml" header if it doesn't work
I would used the box-shadow property instead as this can achieve the same effects based upon the offset you use.
/* Firefox */
-moz-box-shadow: 3px 3px 4px #000;
/* Webkit browsers */
-webkit-box-shadow: 3px 3px 4px #000;
/* W3C */
box-shadow: 3px 3px 4px #000;
/* For IE 8 */
-ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#000000')";
/* For IE 5.5 - 7 */
filter: progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#000000');
Most modern browsers are now adopting the basic box-shadow property rather than having a vendor prefix. Just modify these until you get the desired output.
I have an SVG figure and want to apply :hover property on one <rect> element inside another . But it doesn't work:
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" id="svg">
<style type="text/css"><![CDATA[
#rec1 {
fill:black; // outer element
}
#rec2 {
fill:white; // inner element
display:none; // and element not visible
}
#rec1:hover #rec2 {
display:block; // when hover outer lets inner become visible
// but it doesn't work
}
#rec1:hover {
fill:red; // strange but this hover works
}
]]></style>
<g id="g">
<rect id="rec1" x="0" y="0" width="200" height="50" />
<rect id="rec2" x="100" y="20" width="20" height="20" />
</g>
</svg>
What is the right way to apply hover in such a case?
UPD: one solution found.
First it's not one <rect> element in another. They are siblings. And as far as such kind of styles apply #rec1:hover #rec2 only possible with nested elements, it won't work here. So I applied style on the most outer <g> element:
#g:hover #rec2 {
display:block; // it works just fine
}
But are there any more ways to solve this problem?
Just use:
#rec1:hover + #rec2 {
display: block;
}
The + selector is used for selecting siblings (children of the same element -- g in this case), which is the case here.
Hope that helped!
Those rectangles are not nested as far as CSS is concerned.
This style #rec1:hover #rec2 would only apply if #rec2 was nested inside the #rec1 elements and the #rec1 element was being hovered.
Just apply the style as #rec2:hover
I have used Spark panel to display the object inside a container. The panel and the inside elements are created dynamically. (using ActionScript). I need to remove the title bar of the panel in actionscript. When I tried to remove that, I am unable to hide the same.
Tried below ways.
Used style (classname) and set headerheight = 0.
Override the panel component and used the property this.titleBar.visible = false.
But not able to hide the titlebar.
I have used Panel spark component and Flash Builder 4.5 for development.
If there is any other way to achieve this, please let me know.
Your best bet is to create a custom skin and move the title bar pieces from the skin. It was very quick to put together a sample.
This is your custom skin; created as a copy of the PanelSkin with visual elements commented out.
<?xml version="1.0" encoding="utf-8"?>
<!--
ADOBE SYSTEMS INCORPORATED
Copyright 2008 Adobe Systems Incorporated
All Rights Reserved.
NOTICE: Adobe permits you to use, modify, and distribute this file
in accordance with the terms of the license agreement accompanying it.
-->
<!--- The default skin class for a Spark Panel container.
#see spark.components.Panel
#langversion 3.0
#playerversion Flash 10
#playerversion AIR 1.5
#productversion Flex 4
-->
<s:SparkSkin xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:fb="http://ns.adobe.com/flashbuilder/2009" blendMode="normal" mouseEnabled="false"
minWidth="131" minHeight="127" alpha.disabled="0.5" alpha.disabledWithControlBar="0.5">
<fx:Metadata>
<![CDATA[
/**
* #copy spark.skins.spark.ApplicationSkin#hostComponent
*/
[HostComponent("spark.components.Panel")]
]]>
</fx:Metadata>
<fx:Script fb:purpose="styling">
<![CDATA[
import mx.core.FlexVersion;
/* Define the skin elements that should not be colorized.
For panel, border and title background are skinned, but the content area, background, border, and title text are not. */
static private const exclusions:Array = ["background", "titleDisplay", "contentGroup", "controlBarGroup", "border"];
/* exclusions before Flex 4.5 for backwards-compatibility purposes */
static private const exclusions_4_0:Array = ["background", "titleDisplay", "contentGroup", "controlBarGroup"];
/**
* #private
*/
override public function get colorizeExclusions():Array
{
// Since border is styleable via borderColor, no need to allow chromeColor to affect
// the border. This is wrapped in a compatibility flag since this change was added
// in Flex 4.5
if (FlexVersion.compatibilityVersion < FlexVersion.VERSION_4_5)
{
return exclusions_4_0;
}
return exclusions;
}
/**
* #private
*/
override protected function initializationComplete():void
{
useChromeColor = true;
super.initializationComplete();
}
/**
* #private
*/
override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void
{
if (getStyle("borderVisible") == true)
{
border.visible = true;
background.left = background.top = background.right = background.bottom = 1;
contents.left = contents.top = contents.right = contents.bottom = 1;
}
else
{
border.visible = false;
background.left = background.top = background.right = background.bottom = 0;
contents.left = contents.top = contents.right = contents.bottom = 0;
}
dropShadow.visible = getStyle("dropShadowVisible");
var cr:Number = getStyle("cornerRadius");
var withControls:Boolean =
(currentState == "disabledWithControlBar" ||
currentState == "normalWithControlBar");
if (cornerRadius != cr)
{
cornerRadius = cr;
dropShadow.tlRadius = cornerRadius;
dropShadow.trRadius = cornerRadius;
dropShadow.blRadius = withControls ? cornerRadius : 0;
dropShadow.brRadius = withControls ? cornerRadius : 0;
setPartCornerRadii(topMaskRect, withControls);
setPartCornerRadii(border, withControls);
setPartCornerRadii(background, withControls);
}
if (bottomMaskRect) setPartCornerRadii(bottomMaskRect, withControls);
borderStroke.color = getStyle("borderColor");
borderStroke.alpha = getStyle("borderAlpha");
backgroundFill.color = getStyle("backgroundColor");
backgroundFill.alpha = getStyle("backgroundAlpha");
super.updateDisplayList(unscaledWidth, unscaledHeight);
}
/**
* #private
*/
private function setPartCornerRadii(target:Rect, includeBottom:Boolean):void
{
target.topLeftRadiusX = cornerRadius;
target.topRightRadiusX = cornerRadius;
target.bottomLeftRadiusX = includeBottom ? cornerRadius : 0;
target.bottomRightRadiusX = includeBottom ? cornerRadius : 0;
}
private var cornerRadius:Number;
]]>
</fx:Script>
<s:states>
<s:State name="normal" />
<s:State name="disabled" />
<s:State name="normalWithControlBar" stateGroups="withControls" />
<s:State name="disabledWithControlBar" stateGroups="withControls" />
</s:states>
<!-- drop shadow can't be hittable so it stays sibling of other graphics -->
<!--- #private -->
<s:RectangularDropShadow id="dropShadow" blurX="20" blurY="20" alpha="0.32" distance="11"
angle="90" color="#000000" left="0" top="0" right="0" bottom="0"/>
<!-- drop shadow can't be hittable so all other graphics go in this group -->
<s:Group left="0" right="0" top="0" bottom="0">
<!-- top group mask -->
<!--- #private -->
<s:Group left="1" top="1" right="1" bottom="1" id="topGroupMask" >
<!--- #private -->
<s:Rect id="topMaskRect" left="0" top="0" right="0" bottom="0">
<s:fill>
<s:SolidColor alpha="0"/>
</s:fill>
</s:Rect>
</s:Group>
<!-- bottom group mask -->
<!--- #private -->
<s:Group left="1" top="1" right="1" bottom="1" id="bottomGroupMask"
includeIn="normalWithControlBar, disabledWithControlBar">
<!--- #private -->
<s:Rect id="bottomMaskRect" left="0" top="0" right="0" bottom="0">
<s:fill>
<s:SolidColor alpha="0"/>
</s:fill>
</s:Rect>
</s:Group>
<!-- layer 1: border -->
<!--- #private -->
<s:Rect id="border" left="0" right="0" top="0" bottom="0" >
<s:stroke>
<!--- #private -->
<s:SolidColorStroke id="borderStroke" weight="1" />
</s:stroke>
</s:Rect>
<!-- layer 2: background fill -->
<!--- Defines the appearance of the PanelSkin class's background. -->
<s:Rect id="background" left="1" top="1" right="1" bottom="1">
<s:fill>
<!--- #private
Defines the PanelSkin class's background fill. The default color is 0xFFFFFF. -->
<s:SolidColor id="backgroundFill" color="#FFFFFF"/>
</s:fill>
</s:Rect>
<!-- layer 3: contents -->
<!--- Contains the vertical stack of titlebar content and controlbar. -->
<s:Group left="1" right="1" top="1" bottom="1" id="contents">
<s:layout>
<s:VerticalLayout gap="0" horizontalAlign="justify" />
</s:layout>
<!--- #private -->
<!-- <s:Group id="topGroup" mask="{topGroupMask}">
-->
<!-- layer 0: title bar fill -->
<!--- #private -->
<!-- <s:Rect id="tbFill" left="0" right="0" top="0" bottom="1">
<s:fill>
<s:LinearGradient rotation="90">
<s:GradientEntry color="0xE2E2E2" />
<s:GradientEntry color="0xD9D9D9" />
</s:LinearGradient>
</s:fill>
</s:Rect>
-->
<!-- layer 1: title bar highlight -->
<!--- #private -->
<!-- <s:Rect id="tbHilite" left="0" right="0" top="0" bottom="0">
<s:stroke>
<s:LinearGradientStroke rotation="90" weight="1">
<s:GradientEntry color="0xEAEAEA" />
<s:GradientEntry color="0xD9D9D9" />
</s:LinearGradientStroke>
</s:stroke>
</s:Rect>
-->
<!-- layer 2: title bar divider -->
<!--- #private -->
<!-- <s:Rect id="tbDiv" left="0" right="0" height="1" bottom="0">
<s:fill>
<s:SolidColor color="0xC0C0C0" />
</s:fill>
</s:Rect>
-->
<!-- layer 3: text -->
<!--- #copy spark.components.Panel#titleDisplay -->
<!-- <s:Label id="titleDisplay" maxDisplayedLines="1"
left="9" right="3" top="1" bottom="0" minHeight="30"
verticalAlign="middle" textAlign="start" fontWeight="bold">
</s:Label>
-->
<!-- </s:Group>
-->
<!--
Note: setting the minimum size to 0 here so that changes to the host component's
size will not be thwarted by this skin part's minimum size. This is a compromise,
more about it here: http://bugs.adobe.com/jira/browse/SDK-21143
-->
<!--- #copy spark.components.SkinnableContainer#contentGroup -->
<s:Group id="contentGroup" width="100%" height="100%" minWidth="0" minHeight="0">
</s:Group>
<!--- #private -->
<s:Group id="bottomGroup" minWidth="0" minHeight="0"
includeIn="normalWithControlBar, disabledWithControlBar" >
<s:Group left="0" right="0" top="0" bottom="0" mask="{bottomGroupMask}">
<!-- layer 0: control bar divider line -->
<s:Rect left="0" right="0" top="0" height="1" alpha="0.22">
<s:fill>
<s:SolidColor color="0x000000" />
</s:fill>
</s:Rect>
<!-- layer 1: control bar highlight -->
<s:Rect left="0" right="0" top="1" bottom="0">
<s:stroke>
<s:LinearGradientStroke rotation="90" weight="1">
<s:GradientEntry color="0xE5E5E5" />
<s:GradientEntry color="0xD8D8D8" />
</s:LinearGradientStroke>
</s:stroke>
</s:Rect>
<!-- layer 2: control bar fill -->
<s:Rect left="1" right="1" top="2" bottom="1">
<s:fill>
<s:LinearGradient rotation="90">
<s:GradientEntry color="0xDADADA" />
<s:GradientEntry color="0xC5C5C5" />
</s:LinearGradient>
</s:fill>
</s:Rect>
</s:Group>
<!-- layer 3: control bar -->
<!--- #copy spark.components.Panel#controlBarGroup -->
<s:Group id="controlBarGroup" left="0" right="0" top="1" bottom="1" minWidth="0" minHeight="0">
<s:layout>
<s:HorizontalLayout paddingLeft="10" paddingRight="10" paddingTop="7" paddingBottom="7" gap="10" />
</s:layout>
</s:Group>
</s:Group>
</s:Group>
</s:Group>
</s:SparkSkin>
And this is the app:
<?xml version="1.0" encoding="utf-8"?>
<s:WindowedApplication xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx">
<fx:Declarations>
<!-- Place non-visual elements (e.g., services, value objects) here -->
</fx:Declarations>
<s:VGroup>
<s:Panel />
<s:Panel skinClass="PanelNoTitleBar"/>
</s:VGroup>
</s:WindowedApplication>
The first panel will display the original skin; the second panel displays the custom skin; with no title bar.
Skinning is the common advice, and apparently that is the intended design. The other answer does a fine job of showing this method.
However, there is also a nice subclassing solution on a related question: Flex 4 spark Panel has an ugly gray top part. That may be enough if you only want to remove the title bar.