Sometimes you need to change the size of the HTML element hosting a Silverlight 2.0 control. Simply changing the width and height of your System.Windows.Controls.UserControl will not actually change the amount of space that the browser reserves for it. You may still be left with an ugly white border or scroll bars.
Here is a simle method that can be called from within your Silverlight 2.0 control to change the space that the browser alots for your it:
///<summary>
/// Change the height of the html element hosting the
/// Silverlight control.
///</summary>
///<param name="Width">The new width of the element</param>
///<param name="Height">The new height of the element</param>
private void SetPluginSize(double Width, double Height)
{
//Reference the html element hosting the control.
var host = HtmlPage.Document.GetElementById(
HtmlPage.Plugin.Id);
//Use CSS to change the size of the plugin.
host.SetStyleAttribute("width", Width.ToString());
host.SetStyleAttribute("height", Height.ToString());
}//end SetPluginSize
If you don't already have Fiddler, get it.
The problem:
Web traffic to and from your local ASP.NET development server is not captured by Fiddler 2.
The solution:
Replace "localhost" in the request with "somesite.com". Somesite just loops back to 127.0.0.1 (localhost), but Fiddler will now capture the request.
For example:
Change http://localhost:4028/devsite/Default.aspx to http://somesite.com:4028/devsite/Default.aspx.
I think that some well planned auto-tabbing on a web form can really make a page feel polished.
Suppose we have some lovely aspx markup like this:
<form id="aspnet_form" runat="server">
<label>Social Security Number:</label>
<asp:TextBox ID="PartOne" MaxLength="3" runat="server" />-
<asp:TextBox ID="PartTwo" MaxLength="2" runat="server" />-
<asp:TextBox ID="PartThree" MaxLength="4" runat="server" />
</form>
It would really be nice if the user didn't have to hit tab between these obviously related textboxes. The JavaScript snippet below can be used to easily enable auto-tabbing in your webforms.
Usage:
<script type="text/javascript">
$(document).ready(function() {
WireAutoTab('<%= PartOne.ClientID %>',
'<%= PartTwo.ClientID %>', 3);
WireAutoTab('<%= PartTwo.ClientID %>',
'<%= PartThree.ClientID %>', 2);
});
</script>
The code:
///<summary>
/// Wires an element's OnKeyUp event to move focus to the next element
/// once a certain number of chacaters have been entered.
///</summary>
///<param name="CurrentElementID">The client ID of the element to tab
/// from.</param>
///<param name="NextElementID">The client ID of the element to tab
/// to.</param>
///<param name="FieldLength">The number of characters that should be
/// allowed before tabbing away from the field.</param>
function WireAutoTab(CurrentElementID, NextElementID, FieldLength) {
//Get a reference to the two elements in the tab sequence.
var CurrentElement = $('#' + CurrentElementID);
var NextElement = $('#' + NextElementID);
CurrentElement.keyup(function(e) {
//Retrieve which key was pressed.
var KeyID = (window.event) ? event.keyCode : e.keyCode;
//If the user has filled the textbox to the given length and
//the user just pressed a number or letter, then move the
//cursor to the next element in the tab sequence.
if (CurrentElement.val().length >= FieldLength
&& ((KeyID >= 48 && KeyID <= 90) ||
(KeyID >= 96 && KeyID <= 105)))
NextElement.focus();
});
}
Problem: When debugging a Silverlight 2.0 application, the breakpoint appears as an empty circle with a tooltip saying, "The breakpoint will not currently be hit. No symbols have been loaded for this document." See screen shot below.
Solution (at least for me): I had two different versions of the application in my ClientBin folder, and my aspx markup was pointing toward the older version. The source code opened in Visual Studio did not match the IL in the older *.xap. Update the source attribute of the <asp:Silverlight /> tag in your aspx markup to point toward the newest *.xap (and probably delete the old *.xap) and debugging should work again.
.bmp)