This is a migrated thread and some comments may be shown as answers.

convert standard web application to silverlight application

5 Answers 89 Views

Gauge

This is a migrated thread and some comments may be shown as answers.

5 Answers, 1 is accepted

answered on 04 Mar 2011, 10:08 AM

Hi Harry,

Silverlight allows interaction between HTML and managed code.
http://msdn.microsoft.com/en-us/library/cc645076(v=VS.95).aspx
You can use scriptable members (properties and methods) in your Silverlight control which will be accessible from JavaScript for communication between the SL Gauge control and the controls on the hosting web page.
The sample code is below.

Copy Code

<UserControl x:Class="RadControlsSilverlightApp1.MainPage"

xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

xmlns:d="http://schemas.microsoft.com/expression/blend/2008"

xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"

xmlns:telerik="http://schemas.telerik.com/2008/xaml/presentation"

mc:Ignorable="d" d:DesignWidth="640" d:DesignHeight="480">

<Grid x:Name="LayoutRoot">

<telerik:RadGauge Height="200" x:Name="radGauge1" Width="200">

<telerik:RadialGauge>

<telerik:RadialScale>

<telerik:IndicatorList>

<telerik:Needle Name="Needle1" Value="50" />

</telerik:IndicatorList>

</telerik:RadialScale>

</telerik:RadialGauge>

</telerik:RadGauge>

</Grid>

</UserControl>

Copy Code

using System.Windows.Browser;

using System.Windows.Controls;

namespace RadControlsSilverlightApp1

{

public partial class MainPage : UserControl

{

public MainPage()

{

InitializeComponent();

HtmlPage.RegisterScriptableObject("slGaugeObject", this);

}

[ScriptableMember]

public double Needle

{

get { return Needle1.Value; }

set

{

Needle1.Value = value;

}

Copy Code

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="WebApplication1._Default" %>

<%@ Register assembly="Telerik.Web.UI" namespace="Telerik.Web.UI" tagprefix="telerik" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<script type="text/javascript">

var silverlightControl;

function pluginLoaded(sender, args) {

// get reference to the silverlight control on the page

silverlightControl = sender.getHost();

}

function setGauge() {

silverlightControl.content.slGaugeObject.Needle = 25;

}

</script>

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

<head runat="server">

<title>RadControlsSilverlightApp1</title>

<style type="text/css">

html, body {

height: 100%;

overflow: auto;

}

body {

padding: 0;

margin: 0;

}

#silverlightControlHost {

height: 100%;

text-align:center;

}

</style>

<script type="text/javascript" src="Silverlight.js"></script>

<script type="text/javascript">

function onSilverlightError(sender, args) {

var appSource = "";

if (sender != null && sender != 0) {

appSource = sender.getHost().Source;

}

var errorType = args.ErrorType;

var iErrorCode = args.ErrorCode;

if (errorType == "ImageError" || errorType == "MediaError") {

return;

}

var errMsg = "Unhandled Error in Silverlight Application " + appSource + "\n" ;

errMsg += "Code: "+ iErrorCode + " \n";

errMsg += "Category: " + errorType + " \n";

errMsg += "Message: " + args.ErrorMessage + " \n";

if (errorType == "ParserError") {

errMsg += "File: " + args.xamlFile + " \n";

errMsg += "Line: " + args.lineNumber + " \n";

errMsg += "Position: " + args.charPosition + " \n";

}

else if (errorType == "RuntimeError") {

if (args.lineNumber != 0) {

errMsg += "Line: " + args.lineNumber + " \n";

errMsg += "Position: " + args.charPosition + " \n";

}

errMsg += "MethodName: " + args.methodName + " \n";

}

throw new Error(errMsg);

}

</script>

</head>

<body>

<div id="silverlightControlHost">

<Button onclick="setGauge();">Set 25 to Gauge value</Button>

<br />

<object data="data:application/x-silverlight-2," type="application/x-silverlight-2" width="100%" height="100%">

<param name="source" value="ClientBin/RadControlsSilverlightApp1.xap"/>

<param name="onError" value="onSilverlightError" />

<param name="background" value="white" />

<param name="minRuntimeVersion" value="4.0.50826.0" />

<param name="autoUpgrade" value="true" />

<param name="onload" value="pluginLoaded" />

<a href="http://go.microsoft.com/fwlink/?LinkID=149156&v=4.0.50826.0" style="text-decoration:none">

<img src="http://go.microsoft.com/fwlink/?LinkId=161376" alt="Get Microsoft Silverlight" style="border-style:none"/>

</a>

</object>

</div>

</body>

</html>

Greetings,
Andrey Murzov
the Telerik team

Registration for Q1 2011 What’s New Webinar Week is now open. Mark your calendar for the week starting March 21st and book your seat for a walk through all the exciting stuff we ship with the new release!

answered on 04 Mar 2011, 08:50 PM

Hi all
and thank you for all the help I still cannot get this code to work could someone look at it to see what they think??

xaml.cs

namespace workingto2

{

public partial class MainPage : UserControl

{

public MainPage()

{

InitializeComponent();

HtmlPage.RegisterScriptableObject("slGaugeObject", this);

}

[ScriptableMemberAttribute]

public double indiactor1

{

get{ return indicator.Value;}

set

{

indicator.Value = value;

}

private void UserControl_Loaded(object sender, RoutedEventArgs e)

{

//double value =29;

//this.indicator.Value = value;

}

xaml

<UserControl

xmlns:telerik="http://schemas.telerik.com/2008/xaml/presentation"

xmlns:control="clr-namespace:Telerik.Windows.Controls;assembly=Telerik.Windows.Controls.Gauge"

x:Class="workingto2.MainPage"

xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

xmlns:d="http://schemas.microsoft.com/expression/blend/2008"

xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"

mc:Ignorable="d" d:DesignWidth="640" d:DesignHeight="480" Loaded="UserControl_Loaded">

<UserControl.Resources>

<ResourceDictionary>

<ResourceDictionary.MergedDictionaries>

<ResourceDictionary Source="/Telerik.Windows.Controls.Gauge;component/Themes/Generic.xaml" />

</ResourceDictionary.MergedDictionaries>

</ResourceDictionary>

</UserControl.Resources>

<Grid x:Name="LayoutRoot">

<telerik:RadGauge Width="340" Height="200">

<telerik:RadialGauge Style="{StaticResource RadialGaugeHalfCircleNStyle}">

<telerik:RadialScale Style="{StaticResource RadialScaleHalfCircleNStyle}">

<telerik:IndicatorList>

<telerik:Needle x:Name="indicator"/>

</telerik:IndicatorList>

</telerik:RadialScale>

</telerik:RadialGauge>

</telerik:RadGauge>

</Grid>

</UserControl>

aspx

<script type="text/javascript">

var silverlightControl;

function pluginLoaded(sender, args) {

// get reference to the silverlight control on the page

silverlightControl = sender.getHost();

}

function setGauge() {

silverlightControl.content.slGaugeObject.indiactor1 = 25;

}

</script>

<object data="data:application/x-silverlight-2," type="application/x-silverlight-2" width="340" height="200">

<param name="source" value="ClientBin/workingto2.xap"/>

<param name="onError" value="onSilverlightError" />

<param name="background" value="white" />

<param name="minRuntimeVersion" value="4.0.50826.0" />

<param name="autoUpgrade" value="true" />

<param name="onload" value="pluginLoaded" />

<a href="http://go.microsoft.com/fwlink/?LinkID=149156&v=4.0.50826.0" style="text-decoration:none">

<img src="http://go.microsoft.com/fwlink/?LinkId=161376" alt="Get Microsoft Silverlight" style="border-style:none"/>

</a>

</object><iframe id="_sl_historyFrame" style="visibility:hidden;height:0px;width:0px;border:0px"></iframe>

answered on 07 Mar 2011, 10:05 PM

Hi All
just a final note on my quest to tie a needle to a text box control

<script type="text/javascript">

        var silverlightControl;

        function pluginLoaded(sender, args) {
            // get reference to the silverlight control on the page
            silverlightControl = sender.getHost();
        }

        function setGauge() {

            var Myvalue = document.getElementById("<%=GaugeRATxt.ClientID %>");

            silverlightControl.content.slGaugeObject.indiactor1 = Myvalue.value;
        }

    </script>

where the GaugeRATxt is a RadNumericTextBox. Although I used a ontextchanged event to trigger the setGauge(()

Product Bundles

DevCraft

Web

Mobile

Document Management

Desktop

Reporting & Mocking

Automated Testing

CMS

UI/UX Tools

Debugging

Free Tools

Support and Learning

convert standard web application to silverlight application

5 Answers, 1 is accepted