Saturday, March 24, 2012

DropShadow Extender: Opacity-property problem

I create Atlas-website, put ScriptManager on top of the page, add panel and set height, width and background-color properties. Then i add AtlasToolkit Dropdown Extender on the page ja set it's properties. My problem is that the dropshadow is only visible when Opacity is set to 1.0. If I set Opacity-property to less than 1.0 eg. 0.75, Panel-control doesn't show drop shadow. Am I missing something?

DropShadow-sample page works though..

Which browser are you using? But you're saying the sample is working okay, so I'm not sure what's wrong. If opacity is 1.0, the extender doesn't bother to apply the OpacityBehavior, which manages the opacity property. It would be interesting to see if the OpacityBehavior works on your panel. Maybe take a closer look at any differences between the sample and your page?


I'm using IE6 & IE7.

This markup with opacity set to .7 doesn't show dropshadow for panel:

<%@.PageLanguage="VB"AutoEventWireup="true"CodeFile="Default.aspx.vb"Inherits="_Default"%>

<%@.RegisterAssembly="AtlasControlToolkit"Namespace="AtlasControlToolkit"TagPrefix="atlasToolkit"%>

<!DOCTYPEhtmlPUBLIC"-//W3C//DTD XHTML 1.1//EN""http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

<htmlxmlns="http://www.w3.org/1999/xhtml">

<headrunat="server">

<title>mySample Page</title>

<styletype="text/css">

.panelStyle {

width:350px;

height:250px;

background:#517dbf;

}

</style>

</head>

<body>

<formid="form1"runat="server">

<atlas:ScriptManagerID="ScriptManager1"runat="server"/>

<div>

<asp:PanelID="Panel1"runat="server"CssClass="panelStyle">

</asp:Panel>

<atlasToolkit:DropShadowExtenderID="DropShadowExtender1"runat="server">

<atlasToolkit:DropShadowProperties

TargetControlID="Panel1"

Width="5"

Opacity=".75"

TrackPosition="true"

Rounded="false"/>

</atlasToolkit:DropShadowExtender>

</div>

</form>

<scripttype="text/xml-script">

<page xmlns:script="http://schemas.microsoft.com/xml-script/2005">

<references>

</references>

<components>

</components>

</page>

</script>

</body>

</html>

But when I add the checboxlist w/ onclick-events from the samplepage , dropshadow is visible when checkbox is checked: now opacity values from .25 to .75 are working ok.

On DesignView DropShadowExtender1-Control displays error-text: 'TargetProperties' could not be initialized. Details: 'TargetProperties' could not be added to the collection. Details: 'dsBehavior' could not be set on property 'ID'. Doesn't throw any run-time errors.

<%@.PageLanguage="VB"AutoEventWireup="true"CodeFile="Default.aspx.vb"Inherits="_Default"%>

<%@.RegisterAssembly="AtlasControlToolkit"Namespace="AtlasControlToolkit"TagPrefix="atlasToolkit"%>

<!DOCTYPEhtmlPUBLIC"-//W3C//DTD XHTML 1.1//EN""http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

<htmlxmlns="http://www.w3.org/1999/xhtml">

<headrunat="server">

<title>mySample Page</title>

<styletype="text/css">

.panelStyle {

width:350px;

height:250px;

background:#517dbf;

}

</style>

</head>

<body>

<formid="form1"runat="server">

<atlas:ScriptManagerID="ScriptManager1"runat="server"/>

<div>

<asp:PanelID="Panel1"runat="server"CssClass="panelStyle">

</asp:Panel>

<atlasToolkit:DropShadowExtenderID="DropShadowExtender1"runat="server">

<atlasToolkit:DropShadowProperties

ID="dsBehavior"

Opacity=".75"

Rounded="false"

TargetControlID="Panel1"

TrackPosition="true"

Width="5"/>

</atlasToolkit:DropShadowExtender>

</div>

<divstyle="padding: 15px;">

<labelfor="chkShadow">

Show Drop Shadow:

</label>

<inputid="chkShadow"checked="checked"onclick="var b = $object('dsBehavior'); b.set_Width(chkShadow.checked ? 5 : 0);"

type="checkbox"/><br/>

<labelfor="chkRounded">

Rounded:

</label>

<inputid="chkRounded"checked="checked"onclick="var b = $object('dsBehavior'); b.set_Rounded(chkRounded.checked);"

type="checkbox"/>

<div>

Opacity:

<inputid="opacity25"name="opacityValues"onclick="$object('dsBehavior').set_Opacity(this.value);"

type="radio"value=".25"/><labelfor="opacity25">25%</label>

<inputid="opacity50"name="opacityValues"onclick="$object('dsBehavior').set_Opacity(this.value);"

type="radio"value=".5"/><labelfor="opacity50">50%</label>

<inputid="opacity75"checked="checked"name="opacityValues"onclick="$object('dsBehavior').set_Opacity(this.value);"

type="radio"value=".75"/><labelfor="opacity75">75%</label>

<inputid="opacity100"name="opacityValues"onclick="$object('dsBehavior').set_Opacity(this.value);"

type="radio"value="1.0"/><labelfor="opacity100">100%</label>

</div>

</div>

</form>

<scripttype="text/xml-script">

<page xmlns:script="http://schemas.microsoft.com/xml-script/2005">

<references>

</references>

<components>

</components>

</page>

</script>

</body>

</html>


My best guess is that this has something to do with your video card/driver. I'm not sure how IE (or FireFox) does opacity but your first sample works fine for me for all Opacity values. Note I also do not get the design time errors you're mentioning, but that shouldn't affect the runtime behavior. Does it work in other browsers for you?

I've tried with FF & IE and two different laptops with same results (both laptops have VS 2005 Team Developer installed). I don't think it's video card/driver 'cause SamplePage's checkboxlist w/ onclick-events works ok. (BTW i have NVIDIA FX 1400 Go 256Mt-video card.) DesignView error happens when I add ID-property for the DropShadowProperties. Error disappears when I remove ID-property.

IntelliSense shows only "Opacity, Rounded, TargetControlID, TrackPosition and Width"-properties, no Id-property? I uninstalled and reinstalled all Atlas relatud stuff and created a new Atlas-website, but no dropshadow with opacity less than 1.0.

I'll keep digging.. or just use CSS-based dropshadows..Sad [:(]


This markup displays default dropshadow with opacity 1.0:

<

atlas:ScriptManagerID="ScriptManager1"runat="server"EnablePartialRendering="true"/><div>
<asp:PanelID="Panel1"CssClass="panelStyle"runat="server"></asp:Panel>
<atlasToolkit:DropShadowExtenderID="DropShadowExtender1"runat="server"EnableViewState="true">
<atlasToolkit:DropShadowPropertiesTargetControlID="Panel1"/>
</atlasToolkit:DropShadowExtender>
</div>

BTW) Why tagprefix is cc1 and not atlasToolkit (you have to manually change it)

From the DropShadowProperties.cs:

// (c) Copyright Microsoft Corporation.
// This source is subject to the Microsoft Permissive License.
// Seehttp://www.microsoft.com/resources/sharedsource/licensingbasics/sharedsourcelicenses.mspx.
// All other rights reserved.


using System.Web.UI.WebControls;
using System.Web.UI;
using System.ComponentModel;
using Microsoft.AtlasControlExtender;

namespace AtlasControlToolkit
{
public class DropShadowProperties : TargetControlPropertiesBase<Panel>
{

/// <summary>
/// The opacity of the shadow, from 0 (transparent - no shadow rendered) to 1.0, which is fully opaque black.
///The default is .5.
/// </summary>
[DefaultValue(1.0f)]<-- This is not default .5
public float Opacity
{
get
{
return GetPropertyValue<float>("Opacity", 1.0f);<-- This is not default .5
}
set
{
SetPropertyValue<float>("Opacity", value);
}
}


Yes, that's a documentation bug, thanks for pointing it out.

The tag prefixes are arbitrary. They default to "cc1" or whatever, there isn't any way to specify them automatically.

Thanks!


Oh - the ID field is marked Browsable(false) so it won't show up in intellisense.

It's not needed in the 90% case and you can get yourself in trouble (e.g. if you use it in a repeater) so it's hidden.

No comments:

Post a Comment