Rounded Corner Control

I was trying to use the rounded corner extender with panels. I have applied border to the panels. Whenever i use the extender with the panels the effect is there however it is not clearly visible as the border does not have the rounded corners. When i remove the border then the effect is clearly visible. Please help me using the rounded corner extender with the panels so that the border will have rounded corners.

Thanks and Regards,

Geevika

Hi Geevika

To troubleshoot this issue, we really need the source code to reproduce the problem, so that we can investigate the issue in house. It is not necessary that you send out the complete source of your project. We just need a simplest sample to reproduce the problem. You can remove any confidential information or business logic from it.Before that , We also suggest that you should have a look at thishttp://www.asp.net/AJAX/Control-Toolkit/Live/RoundedCorners/RoundedCorners.aspx.

Here we provide a sample ,which is contained in Control Toolkit source code.

<ajaxToolkit:ToolkitScriptManager runat="Server" ID="ScriptManager1" />
<div class="demoarea">
<div class="demoheading">RoundedCorners Demonstration</div>

<asp:Panel ID="Panel1" runat="server" Width="330px" CssClass="roundedPanel">
<div style="padding: 10px; text-align: center">
<div style="padding: 5px; border: solid black thin; background-color: #B4B4B4;">
<asp:Image ID="Image1" runat="server" ImageUrl="~/images/AJAX.gif" AlternateText="ASP.NET AJAX" /><br />
ASP.NET AJAX
</div>
</div>
</asp:Panel>

<ajaxToolkit:RoundedCornersExtender ID="RoundedCornersExtender1" runat="server"
BehaviorID="RoundedCornersBehavior1"
TargetControlID="Panel1"
Radius="6"
Corners="All" />

<div style="padding-top: 3px;">CornerRadius:</div>
<div style="padding: 10px;">
<input type="radio" id="radius0" name="radiusValues" value="0"
onclick="$find('RoundedCornersBehavior1').set_Radius(this.value);" />
<label for="radius0">None</label>

<input type="radio" id="radius2" name="radiusValues" value="2"
onclick="$find('RoundedCornersBehavior1').set_Radius(this.value);" />
<label for="radius2">2px</label>

<input type="radio" id="radius4" name="radiusValues" value="4"
onclick="$find('RoundedCornersBehavior1').set_Radius(this.value);" />
<label for="radius4">4px</label>

<input type="radio" id="radius6" name="radiusValues" value="6"
onclick="$find('RoundedCornersBehavior1').set_Radius(this.value);" checked="checked" />
<label for="radius6">6px</label>

<input type="radio" id="radius10" name="radiusValues" value="10"
onclick="$find('RoundedCornersBehavior1').set_Radius(this.value);" />
<label for="radius10">10px</label>
</div>

<div style="padding-top: 3px;">Corners:</div>
<div style="padding: 10px;">
<input type="checkbox" id="corner1" name="cornerValues" value="1"
onclick="$find('RoundedCornersBehavior1').setCorner(this.value, this.checked);" checked="checked" />
<label for="corner1">Top Left</label>

<input type="checkbox" id="corner2" name="cornerValues" value="2"
onclick="$find('RoundedCornersBehavior1').setCorner(this.value, this.checked);" checked="checked" />
<label for="corner2">Top Right</label><br />

<input type="checkbox" id="corner8" name="cornerValues" value="8"
onclick="$find('RoundedCornersBehavior1').setCorner(this.value, this.checked);" checked="checked" />
<label for="corner8" >Bottom Left</label>

<input type="checkbox" id="corner4" name="cornerValues" value="4"
onclick="$find('RoundedCornersBehavior1').setCorner(this.value, this.checked);" checked="checked" />
<label for="corner4">Bottom Right</label>
</div>

<div style="padding-top: 3px;">Border Color:</div>
<div style="padding: 10px;">
<input type="radio" id="color0" name="colorValues" value=""
onclick="$find('RoundedCornersBehavior1').set_BorderColor(this.value);" checked="checked" />
<label for="color0">None</label>

<input type="radio" id="color1" name="colorValues" value="Black"
onclick="$find('RoundedCornersBehavior1').set_BorderColor(this.value);" />
<label for="color1">Black</label>

<input type="radio" id="color2" name="colorValues" value="Red"
onclick="$find('RoundedCornersBehavior1').set_BorderColor(this.value);" />
<label for="color2">Red</label>

<input type="radio" id="color3" name="colorValues" value="Aqua"
onclick="$find('RoundedCornersBehavior1').set_BorderColor(this.value);" />
<label for="color3">Aqua</label>
</div>
</div>

If your problem has been resolved or be resolved by the sample , please mark it as "Answered" or "Resolved", so our community members will not waste their time on a resolved issue. Otherwise, would you please provide a sample here? Thanks.

Best Regards,

Jonathan

Hi Jonathan,

Thanks for ur reply. The following is the part of the source code:

<asp:Panel ID="pnlCountry" runat="server" Style="position: relative; top: 24px; border-style: groove;
left: 8px; z-index: 101;" Height="125px" Width="950px" BackColor="#E0E0E0">

<asp:Label ID="lblCountryName" runat="server" Style="z-index: 100; left: 296px; position: absolute;
top: 32px" Text="Country Name" Width="104px"></asp:Label>
<asp:TextBox ID="txtCountryName" runat="server" Style="z-index: 101; left: 424px;
position: absolute; top: 32px"></asp:TextBox>
<asp:Button ID="btnCancelCountry" runat="server" Style="z-index: 106; left: 808px;
position: absolute; top: 80px" Text="Cancel" BackColor="Silver" />
<asp:Button ID="btnSaveCountry" runat="server" Style="z-index: 104; left: 712px;
position: absolute; top: 80px" Text="Save" Width="56px" BackColor="Silver" />
</asp:Panel>

<ajaxToolkit:RoundedCornersExtender ID="RoundedCornersExtender2" runat="server" TargetControlID="pnlCountry"
Radius="8" Corners="All" />

As u might have noticed I have applied border style= groove to the panel name pnlCountry. After that I have used the RoundedCornersExtender to round the corner of the panel. However, the effect is that the panel has the rounded corner but because of the border it seems that corners are still pointed as it is the panel that gets the rounded corners not the border of the panel. So the effect is there but it is not visible. Plz help.

Thanks & Regards,

Geevika

Hi Geevika,

Would you please explain more clearly? I have tested your sample and it seems that the border , which is groove ,is not displayed well. If it is your problem, I think it's CSS issue. My suggestion is using a <div> element show the border instead of your Panel control.

Best Regards,

Jonathan

Country Name

Hi Jonathan,

I think I was unable to explain my point clearly. The code that i sent to you gives the above result however, this above displayed output did not include Ajax rounded corner control. As you can see the border is clearly visible and border style is groove. Now whenever I apply the ajax rounded corner control, the border remain as it is(pointed corners) but the panel body(inner light gray part) gets the rounded corners. So the effect of rounded corner control is there but that is not clearly visible as the border did not get the rounded corners. What I m trying to do is that the panel border should also get the rounded corners so that the effect should be clearly visible.

Thanks & Regards,

Geevika

Hi Geevika,

As far as I know, I'm afraid that we cannot achieve this by setting any property directly.I have nested a RoundedCornersExtender but find that it is difficult to control its diplay position.So I think the best way is using <div> element.

Best Regards,

Jonathan

RoundedCornersExtender - postback flashing

I get 'flashing' when using the roundedcornerextenders

It's as if the style get's applied after the panel is loaded, which causes the panels to make a strange 'shift'

Any workarounds ?

Nothing? Where can I get official support for the toolkit?

I need to make a decision here on a project whether to use the toolkit, it all depends on support.

roundedcornersextender destroys size settings for contained Windows Media Player

All --

Please help.

I have a Ajax RC1 and VS.NET 2005 SP.

I have a roundedcornersextender applied to a Panel.

Inside the Panel, I have a Literal.

Based on an event firing, I load the Literal with an <object> tag that is a Windows Media Player control, dynamically set with all properties including height and width.

When the page loads, the Media Player is shown but its size is the size of the video playing, not the size set in the <object> tag.

Viewing the source of the page at run-time shows that the <object> tag does, in fact, have the custom settings 640x480, but the Media Player is being displayed on the page as 1024x768.

If the Literal is NOT in the Panel (and thus does not come into contact with the roundedcornersextended) then the Media Player is sized properly, 640x480, as set in the <object> tag.

Ideas?

Thoughts?

Guesses?

Please advise.

Thank you.

-- Mark Kamoski

It sounds very strange that?the Media Player is shown as the size which is the size of the video playing, not the size set in the <object> tag.I once testedajax:RoundedCornersExtenderand didn't find this issue.Maybe this issue is caused by Media Player control. Try to place it outside of a asp:UpdatePanel and check if it works. Can you post some codes here? We'd like to test it.
Here are my simple testing codes about Ajax:RoundedCornersExtender.
<div>
<asp:Panel ID="pnlRoundedCorner" runat="server" BackColor="LimeGreen">
<table>
<tr><td id="RoundedCorner">Rounded Corner Rectangle:<asp:TextBox ID="TBRoundedCorner" runat="server"></asp:TextBox></td></tr>
</table>
</asp:Panel>
<Ajax:RoundedCornersExtender ID="RoundedCornersExtender1" runat="server" TargetControlID="pnlRoundedCorner" Radius="60"></Ajax:RoundedCornersExtender>
</div

Ji Cheng Wang - MSFT:

It sounds very strange that the Media Player is shown as the size which is the size of the video playing, not the size set in the <object> tag.I once testedajax:RoundedCornersExtenderand didn't find this issue.Maybe this issue is caused by Media Player control. Try to place it outside of a asp:UpdatePanel and check if it works. Can you post some codes here? We'd like to test it.
Here are my simple testing codes about Ajax:RoundedCornersExtender.
<div>
<asp:Panel ID="pnlRoundedCorner" runat="server" BackColor="LimeGreen">
<table>
<tr><td id="RoundedCorner">Rounded Corner Rectangle:<asp:TextBox ID="TBRoundedCorner" runat="server"></asp:TextBox></td></tr>
</table>
</asp:Panel>
<Ajax:RoundedCornersExtender ID="RoundedCornersExtender1" runat="server" TargetControlID="pnlRoundedCorner" Radius="60"></Ajax:RoundedCornersExtender>
</div

OK.

I built a sample and posted it online, with all the source code, here...

http://www.WebLogicArts.com/DemoWindowsMediaPlayerAjax.aspx

...so that demonstrates the issue.

As you will see...

I have 2 cases there, one with Ajax and one without.

I have 2 Literals there, one inside a roundedcornersextender and one that is not.

I load each Literal with the exact same <object> tag code, which is Windows Media Player (WMP).

Without Ajax, the video does load in "small size", as specified by the <object> tag, where WMP's height and width is set.

With Ajax, the video does NOT load in "small size", as specified by the <object> tag, where WMP's height and width is set.

And so on.

Please let me know what you think.

Thank you.

-- Mark Kamoski

Just in case my site is down, here is the code...

........CodeInfrontBegin
 
<%@. page language="C#" autoeventwireup="true" codefile="DemoWindowsMediaPlayerAjax.aspx.cs" inherits="DemoWindowsMediaPlayerAjax" %>
<%@. register assembly="AjaxControlToolkit" namespace="AjaxControlToolkit" tagprefix="asp" %>
<%@. register assembly="System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35" namespace="System.Web.UI" tagprefix="asp" %>
<%@. register tagprefix="wla" tagname="codeviewercontrol" src="http://pics.10026.com/?src=CodeViewerControl.ascx" mce_src="CodeViewerControl.ascx" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="MainHead" runat="server">
 <title>WebLogicArts Demo</title>
 <meta name="GENERATOR" content="Microsoft Visual Studio .NET 7.1" />
 <meta content="C#" name="CODE_LANGUAGE" />
 <meta name="vs_defaultClientScript" content="JavaScript" />
 <meta content="http://schemas.microsoft.com/intellisense/ie5" name="vs_targetSchema" />
</head>
<body style="font-size: small;">
 <form id="Form2" method="post" runat="server">
  <asp:scriptmanager id="ScriptManager1" runat="server">
  </asp:scriptmanager>
  <asp:roundedcornersextender id="RoundedCornersExtender1" runat="server" behaviorid="RoundedCornersExtenderBehavior1" radius="10" targetcontrolid="Panel1">
  </asp:roundedcornersextender>
  <hr />
  <h5>
   Attention</h5>
  <ul>
   <li>NOTICE: THIS CODE AND INFORMATION ARE PROVIDED "AS IS" WITHOUT WARRANTY OF ANY KIND, EITHER EXPRESSED OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE IMPLIED WARRANTIES OF MERCHANTABILITY AND/OR FITNESS FOR A PARTICULAR PURPOSE. THIS CODE MAY BE COPIED, ALTERED, QUOTED, AND USED FREE OF CHARGE. </li>
  </ul>
  <hr />
  <h5>
   Introduction</h5>
  <ul>
   <li>This sample has been provided courtesy of <asp:hyperlink id="Hyperlink1" runat="server" navigateurl="http://www.weblogicarts.com/" target="_blank">WebLogicArts.com</asp:hyperlink>.</li>
   <li>If you have any comments or questions, please <asp:hyperlink id="Hyperlink2" runat="server" navigateurl="mailto:MKamoski@.WebLogicArts.com" target="_blank">send some feedback</asp:hyperlink>.</li>
   <li>For more C#.NET 2.0+ samples, please <asp:hyperlink id="Hyperlink3" runat="server" navigateurl="DemoList.aspx" target="_blank">see the complete C#.NET Demo List</asp:hyperlink>.</li>
   <li>For VB.NET 1.0+ samples, please <asp:hyperlink id="Hyperlink4" runat="server" navigateurl="http://vb2.WebLogicArts.com/" target="_blank">see the complete VB.NET 1.0+ Demo List</asp:hyperlink>.</li>
   <li>For VB.NET 2.0+ samples, please <asp:hyperlink id="Hyperlink5" runat="server" navigateurl="http://vb1.WebLogicArts.com/" target="_blank">see the complete VB.NET 2.0+ Demo List</asp:hyperlink>.</li>
   <li>To browse all the code available <asp:hyperlink id="Hyperlink6" runat="server" navigateurl="CodeBrowserForm.aspx" target="_blank">see the CodeBrowserForm</asp:hyperlink>.</li>
  </ul>
  <hr />
  <h5>
   Purpose</h5>
  <ul>
   <li>The purpose of this demo is to present some code that shows a current issue (as of 2007-Jan-06) that I am having with Ajax and Windows Media Player (WMP). When WMP is loaded without Ajax, it is sized properly. When WMP is loaded with Ajax (inside a roundedcornersextender), it is not sized properly. See the code for details.</li>
  </ul>
  <hr />
  <h5>
   Code</h5>
  <p>
   <wla:codeviewercontrol id="MainCodeViewerControl" runat="server"></wla:codeviewercontrol>
  </p>
  <hr />
  <h5>
   Demo</h5>
  <asp:textbox id="TextBox1" runat="server" width="500px" height="50px" wrap="true" textmode="multiLine" readonly="false">http://www.WebLogicArts.com/Downloads/Test1.wmv</asp:textbox>
  <br />
  <br />
  <asp:button id="Button1" runat="server" text="Load Video" onclick="Button1_Click" />
  <h5>
   Without Ajax...</h5>
  <asp:literal id="Literal1" runat="server"></asp:literal>
  <br />
  <br />
  <h5>
   With Ajax...</h5>
  <asp:panel id="Panel1" runat="server" backcolor="Silver">
   <table cellpadding="10" cellspacing="0">
    <tr>
     <td>
      <asp:literal id="Literal2" runat="server"></asp:literal>
     </td>
    </tr>
   </table>
  </asp:panel>
  <br />
  <br />
  <hr />
 </form>
</body>
</html>
........CodeInfrontEnd
 
 
........CodeBehindBegin
 
using System;
using System.Data;
using System.Configuration;
using System.Collections;
using System.Diagnostics;
using System.IO;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Web.UI.HtmlControls;
/// <summary>
/// This class is
/// </summary>
/// <remarks>
/// ----------------------
/// NOTICE: THIS CODE AND INFORMATION ARE PROVIDED "AS IS" WITHOUT
/// WARRANTY OF ANY KIND, EITHER EXPRESSED OR IMPLIED, INCLUDING
/// BUT NOT LIMITED TO THE IMPLIED WARRANTIES OF MERCHANTABILITY
/// AND/OR FITNESS FOR A PARTICULAR PURPOSE. THIS CODE MAY BE
/// COPIED, ALTERED, QUOTED, AND USED FREE OF CHARGE.
/// ----------------------
/// To run this code, one may need make alterations as follows:
/// In the code-infront, remove the "@. Register" line (if it exists) because it is only needed for the CodeViewer control.
/// In the code-infront, remove the "wla:codeviewercontrol" line (if it exists) because it is only needed for the CodeViewer control.
/// </remarks>
public partial class DemoWindowsMediaPlayerAjax : System.Web.UI.Page
{
 /// <summary>
 /// This method is the event handler for page-load.
 /// </summary>
 /// <param name="sender">This is the event source.</param>
 /// <param name="e">These are the event arguments.</param>
 protected void Page_Load(object sender, System.EventArgs e)
 {
  try
  {
   //Continue.
  }
  catch (Exception ex)
  {
   this.Response.Write(ex.ToString());
  }
 }
 /// <summary>
 /// This method is the event handler for button-click.
 /// </summary>
 /// <param name="sender">This is the event source.</param>
 /// <param name="e">These are the event arguments.</param>
 protected void Button1_Click(object sender, EventArgs e)
 {
  try
  {
   string mySourceUrl = this.TextBox1.Text;
   bool isFullSize = false;
   string myObjectTag = this.GetWmaObject(mySourceUrl, isFullSize);
   this.Literal1.Text = myObjectTag;
   this.Literal2.Text = myObjectTag;
  }
  catch (Exception ex)
  {
   this.Response.Write(ex.ToString());
  }
 }
 /// <summary>
 /// This is a helper that will get the object tag code needed.
 /// </summary>
 /// <param name="sourceUrl">This is the URL of the video to be loaded.</param>
 /// <param name="isFullSize">This is a flag indicating if the video should be show full-size (true) or a default-size (false).</param>
 /// <returns></returns>
 private string GetWmaObject(string sourceUrl, bool isFullSize)
 {
  string myObjectTag = "";
  sourceUrl = sourceUrl + "";
  sourceUrl = sourceUrl.Trim();
  if (sourceUrl.Length > 0)
  {
   //Continue.
  }
  else
  {
   throw new System.ArgumentNullException("sourceUrl");
  }
  string myWidthAndHeight = "";
  if (isFullSize)
  {
   myWidthAndHeight = "";
  }
  else
  {
   myWidthAndHeight = "width='210' height='280'";
  }
  myObjectTag = myObjectTag + "<object classid='CLSID:22D6F312-B0F6-11D0-94AB-0080C74C7E95' id='player' " + myWidthAndHeight + " standby='Please wait while the object is loaded...'>";
  myObjectTag = myObjectTag + "<param name='url' value='" + sourceUrl + "' />";
  myObjectTag = myObjectTag + "<param name='src' value='" + sourceUrl + "' />";
  myObjectTag = myObjectTag + "<param name='AutoStart' value='true' />";
  myObjectTag = myObjectTag + "<param name='Balance' value='0' />"; //-100 is fully left, 100 is fully right.
  myObjectTag = myObjectTag + "<param name='CurrentPosition' value='0' />"; //Position in seconds when starting.
  myObjectTag = myObjectTag + "<param name='showcontrols' value='true' />"; //Show play/stop/pause controls.
  myObjectTag = myObjectTag + "<param name='enablecontextmenu' value='true' />"; //Allow right-click.
  myObjectTag = myObjectTag + "<param name='fullscreen' value='" + isFullSize.ToString() + "' />"; //Start in full screen or not.
  myObjectTag = myObjectTag + "<param name='mute' value='false' />";
  myObjectTag = myObjectTag + "<param name='PlayCount' value='1' />"; //Number of times the content will play.
  myObjectTag = myObjectTag + "<param name='rate' value='1.0' />"; //0.5=Slow, 1.0=Normal, 2.0=Fast
  myObjectTag = myObjectTag + "<param name='uimode' value='full' />"; // full, mini, custom, none, invisible
  myObjectTag = myObjectTag + "<param name='showdisplay' value='true' />"; //Show or hide the name of the file.
  myObjectTag = myObjectTag + "<param name='volume' value='50' />"; // 0=lowest, 100=highest
  myObjectTag = myObjectTag + "</object>";
  return myObjectTag;
 }
}
 
........CodeBehindEnd