How do you change the Silverlight loading screen's background? - silverlight

I'm trying to avoid the default Silverlight loading screen displaying before my applet and was trying to show a blank coloured background, the same colour as my applet's. The aim is to avoid the jarring white and make it look like it's all part of one app drawing.
I've discovered SplashScreenSource but I'm not sure how to hook that up to just show a single colour background instead of the loading screen. Any suggestions?

Add new XAML file to ASP.NET website, in which Silverlight will be shown.
Replace content of XAML with this:
<Grid xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<StackPanel VerticalAlignment="Center">
<Grid>
<Rectangle x:Name="progressBarBackground" Fill="White" Stroke="Black"
StrokeThickness="1" Height="30" Width="200"></Rectangle>
<Rectangle x:Name="progressBar" Fill="Yellow" Height="28" Width="0">
</Rectangle>
</Grid>
<TextBlock x:Name="progressText" HorizontalAlignment="Center"
Text="0% downloaded ..."></TextBlock>
</StackPanel>
</Grid>
Next, you need to add a JavaScript function to your HTML entry page or ASP.NET.
<script type="text/javascript">
function onSourceDownloadProgressChanged(sender, eventArgs)
{
sender.findName("progressText").Text =
Math.round((eventArgs.progress * 100)) + "% downloaded ...";
sender.findName("progressBar").Width =
eventArgs.progress * sender.findName("progressBarBackground").Width;
}
</script>
To use this splash screen, you need to add the splashscreensource parameter to
identify your XAML splash screen and the onsourcedownloadprogresschanged parameter to
hook up your JavaScript event handler. If you want to react when the download is finished, you
can hook up a different JavaScript event handler using the onsourcedownloadcomplete
parameter:
<object data="data:application/x-silverlight," type="application/x-silverlight-2"
width="100%" height="100%">
<param name="source" value="ClientBin/SplashScreen.xap"/>
<param name="onerror" value="onSilverlightError" />
<param name="background" value="white" />
<param name="splashscreensource" value="SplashScreen.xaml" />
<param name="onsourcedownloadprogresschanged"
value="onSourceDownloadProgressChanged" />
...
</object>
I hope this will help you.

Related

Using SVG image in WPF project as Canvas background [duplicate]

Can someone describe a recommended Step by Step procedure for doing this?
Step1. Convert SVG to XAML... thats easy
Step2. Now what?
Your technique will depend on what XAML object your SVG to XAML converter produces. Does it produce a Drawing? An Image? A Grid? A Canvas? A Path? A Geometry? In each case your technique will be different.
In the examples below I will assume you are using your icon on a button, which is the most common scenario, but note that the same techniques will work for any ContentControl.
Using a Drawing as an icon
To use a Drawing, paint an approriately-sized rectangle with a DrawingBrush:
<Button>
<Rectangle Width="100" Height="100">
<Rectangle.Fill>
<DrawingBrush>
<DrawingBrush.Drawing>
<Drawing ... /> <!-- Converted from SVG -->
</DrawingBrush.Drawing>
</DrawingBrush>
</Rectangle.Fill>
</Rectangle>
</Button>
Using an Image as an icon
An image can be used directly:
<Button>
<Image ... /> <!-- Converted from SVG -->
</Button>
Using a Grid as an icon
A grid can be used directly:
<Button>
<Grid ... /> <!-- Converted from SVG -->
</Button>
Or you can include it in a Viewbox if you need to control the size:
<Button>
<Viewbox ...>
<Grid ... /> <!-- Converted from SVG -->
</Viewbox>
</Button>
Using a Canvas as an icon
This is like using an image or grid, but since a canvas has no fixed size you need to specify the height and width (unless these are already set by the SVG converter):
<Button>
<Canvas Height="100" Width="100"> <!-- Converted from SVG, with additions -->
</Canvas>
</Button>
Using a Path as an icon
You can use a Path, but you must set the stroke or fill explicitly:
<Button>
<Path Stroke="Red" Data="..." /> <!-- Converted from SVG, with additions -->
</Button>
or
<Button>
<Path Fill="Blue" Data="..." /> <!-- Converted from SVG, with additions -->
</Button>
Using a Geometry as an icon
You can use a Path to draw your geometry. If it should be stroked, set the Stroke:
<Button>
<Path Stroke="Red" Width="100" Height="100">
<Path.Data>
<Geometry ... /> <!-- Converted from SVG -->
</Path.Data>
</Path>
</Button>
or if it should be filled, set the Fill:
<Button>
<Path Fill="Blue" Width="100" Height="100">
<Path.Data>
<Geometry ... /> <!-- Converted from SVG -->
</Path.Data>
</Path>
</Button>
How to data bind
If you're doing the SVG -> XAML conversion in code and want the resulting XAML to appear using data binding, use one of the following:
Binding a Drawing:
<Button>
<Rectangle Width="100" Height="100">
<Rectangle.Fill>
<DrawingBrush Drawing="{Binding Drawing, Source={StaticResource ...}}" />
</Rectangle.Fill>
</Rectangle>
</Button>
Binding an Image:
<Button Content="{Binding Image}" />
Binding a Grid:
<Button Content="{Binding Grid}" />
Binding a Grid in a Viewbox:
<Button>
<Viewbox ...>
<ContentPresenter Content="{Binding Grid}" />
</Viewbox>
</Button>
Binding a Canvas:
<Button>
<ContentPresenter Height="100" Width="100" Content="{Binding Canvas}" />
</Button>
Binding a Path:
<Button Content="{Binding Path}" /> <!-- Fill or stroke must be set in code unless set by the SVG converter -->
Binding a Geometry:
<Button>
<Path Width="100" Height="100" Data="{Binding Geometry}" />
</Button>
Install the SharpVectors library
Install-Package SharpVectors
Add the following in XAML
<UserControl xmlns:svgc="http://sharpvectors.codeplex.com/svgc">
<svgc:SvgViewbox Source="/Icons/icon.svg"/>
</UserControl>
Windows 10 build 15063 "Creators Update" natively supports SVG images (though with some gotchas) to UWP/UAP applications targeting Windows 10.
If your application is a WPF app rather than a UWP/UAP, you can still use this API (after jumping through quite a number of hoops): Windows 10 build 17763 "October 2018 Update" introduced the concept of XAML islands (as a "preview" technology but I believe allowed in the app store; in all cases, with Windows 10 build 18362 "May 2019 Update" XAML islands are no longer a preview feature and are fully supported) allowing you to use UWP APIs and controls in your WPF applications.
You need to first add the references to the WinRT APIs, and to use certain Windows 10 APIs that interact with user data or the system (e.g. loading images from disk in a Windows 10 UWP webview or using the toast notification API to show toasts), you also need to associate your WPF application with a package identity, as shown here (immensely easier in Visual Studio 2019). This shouldn't be necessary to use the Windows.UI.Xaml.Media.Imaging.SvgImageSource class, though.
Usage (if you're on UWP or you've followed the directions above and added XAML island support under WPF) is as simple as setting the Source for an <Image /> to the path to the SVG. That is equivalent to using SvgImageSource, as follows:
<Image>
<Image.Source>
<SvgImageSource UriSource="Assets/svg/icon.svg" />
</Image.Source>
</Image>
However, SVG images loaded in this way (via XAML) may load jagged/aliased. One workaround is to specify a RasterizePixelHeight or RasterizePixelWidth value that is double+ your actual height/width:
<SvgImageSource RasterizePixelHeight="300" RasterizePixelWidth="300" UriSource="Assets/svg/icon.svg" /> <!-- presuming actual height or width is under 150 -->
This can be worked around dynamically by creating a new SvgImageSource in the ImageOpened event for the base image:
var svgSource = new SvgImageSource(new Uri("ms-appx://" + Icon));
PrayerIcon.ImageOpened += (s, e) =>
{
var newSource = new SvgImageSource(svgSource.UriSource);
newSource.RasterizePixelHeight = PrayerIcon.DesiredSize.Height * 2;
newSource.RasterizePixelWidth = PrayerIcon.DesiredSize.Width * 2;
PrayerIcon2.Source = newSource;
};
PrayerIcon.Source = svgSource;
The aliasing may be hard to see on non high-dpi screens, but here's an attempt to illustrate it.
This is the result of the code above: an Image that uses the initial SvgImageSource, and a second Image below it that uses the SvgImageSource created in the ImageOpened event:
This is a blown up view of the top image:
Whereas this is a blown-up view of the bottom (antialiased, correct) image:
(you'll need to open the images in a new tab and view at full size to appreciate the difference)
After various searches and attempts I managed to find the method without having to use external libraries.
First you will need to use Inkscape to open the SVG file to prepare, then follow the procedure according to the following list:
Open the SVG file with Inkscape;
Press Ctrl + A to select everything;
Go to Edit > Resize page to selection;
Press Ctrl + C;
Press Ctrl + S then close Inkscape;
Open the SVG file a file editor then go to <path>, you could view several paths. This is an example:
<path d="..." fill="..." id="path2"/>
<path d="..." fill="..." id="path4"/>
<path d="..." fill="..." id="path6"/>
In your XAML file you have to create a ViewBox element, then insert a Grid element and then Path elements for the number of times when in the SVG file see the paths:
<Viewbox Stretch="Fill">
<Grid>
<Path Fill="..." Data="..."/>
<Path Fill="..." Data="..."/>
<Path Fill="..." Data="..."/>
</Grid>
</Viewbox>
Where in Fill property on your XAML you have to insert the fill property in the SVG file and in Data property on your XAML you have to insert the d property in the SVG file.
You should get a result like this:
Option 1: Use SVG icons directly using "SharpVectors" nuget package
Add SharpVectors nuget package to your project.
Add SVG files to your project, for example, in a "Icons" subfolder and set their Build Action property to Resource
Use it in your code:
<Window x:Class="WpfApp.MainWindow"
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:svgc="http://sharpvectors.codeplex.com/svgc/"
xmlns:local="clr-namespace:WpfApp"
mc:Ignorable="d"
Title="MainWindow" Height="450" Width="800">
<Grid>
<StackPanel>
<Button Height="100">
<svgc:SvgViewbox Source="/Icons/Checkmark_16x.svg"/>
</Button>
<ContentControl Height="100">
<svgc:SvgViewbox Source="/Icons/CollapseAll_16x.svg"/>
</ContentControl>
<Label Height="100">
<svgc:SvgViewbox Source="/Icons/Refresh_16x.svg"/>
</Label>
</StackPanel>
</Grid>
</Window>
Option 2: Convert SVG to XAML using "SvgToXaml" tool
SvgToXaml. Download the latest release (this answer was tested with the "Ver_1.3.0")
Place all your SVG icons into a folder and execute the following command:
SvgToXaml.exe BuildDict /inputdir "c:\Icons" /outputdir "c:\MyWpfApp" /outputname IconsDictionary
Add generated IconsDictionary.xaml file to your project and use it in your code:
<Window x:Class="WpfApp.MainWindow"
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:local="clr-namespace:WpfApp"
mc:Ignorable="d"
Title="MainWindow" Height="450" Width="800">
<Window.Resources>
<ResourceDictionary>
<ResourceDictionary.MergedDictionaries>
<ResourceDictionary Source="IconsDictionary.xaml"/>
</ResourceDictionary.MergedDictionaries>
</ResourceDictionary>
</Window.Resources>
<Grid>
<StackPanel>
<Button Height="100">
<Image Source="{StaticResource Refresh_16xDrawingImage}"/>
</Button>
<ContentControl Height="100">
<Image Source="{StaticResource CollapseAll_16xDrawingImage}"/>
</ContentControl>
<Label Height="100">
<Image Source="{StaticResource Checkmark_16xDrawingImage}"/>
</Label>
</StackPanel>
</Grid>
</Window>
Option 3: Use IValueConverter for some already generated XAML files
If you already have generated XAML files and you want to use them, for some types of them it is possible to create a custom ValueConverter class. Please refer to the following answers for more information:
Option 2: Use .xaml icon files directly
https://stackoverflow.com/a/21588195/7585517
You can use the resulting xaml from the SVG as a drawing brush on a rectangle. Something like this:
<Rectangle>
<Rectangle.Fill>
--- insert the converted xaml's geometry here ---
</Rectangle.Fill>
</Rectangle>
Use the SvgImage or the SvgImageConverter extensions, the SvgImageConverter supports binding.
See the following link for samples demonstrating both extensions.
https://github.com/ElinamLLC/SharpVectors/tree/master/TutorialSamples/ControlSamplesWpf
We can use directly the path's code from the SVG's code:
<Path>
<Path.Data>
<PathGeometry Figures="M52.8,105l-1.9,4.1c ...
Another alternative is dotnetprojects SVGImage
This allows native use of .svg files directly in xaml.
The nice part is, it is only one assembly which is about 100k. In comparision to sharpvectors which is much bigger any many files.
Usage:
...
xmlns:svg1="clr-namespace:SVGImage.SVG;assembly=DotNetProjects.SVGImage"
...
<svg1:SVGImage Name="mySVGImage" Source="/MyDemoApp;component/Resources/MyImage.svg"/>
...
That's all.
See:
https://www.nuget.org/packages/DotNetProjects.SVGImage/
https://github.com/dotnetprojects/SVGImage
I found this tutorial extremely helpful: https://msadowski.github.io/WPF-vector-graphics-tutorial/
Download the zip file for the program from github.
Use program to convert the SVG to XAML.
Copy/paste the .xaml file into your folder of choice in your project.
Add the application resource to App.xaml for your file.
Reference your vector image in your xaml page with Source="{StaticResource }"
The tutorial explains all steps very well with an example shown. I've tried it and my svg image is showing up great in my application now.

Using BindingContext within Border (C# MAUI, appliable to Xamarin/WPF)

I've been struggling with getting Binding to work within a Border. When I try to bind something outside the Border, it works wonderfully, but I can't get it to work within the Border.
Code here of what works:
<DataTemplate x:Key="TaskTemplate">
<GridLayout
ColumnDefinitions="*"
>
<Label Text={Binding Path=TestText}/>
</GridLayout>
</DataTemplate>
This code displays the text properly.
What does not and what I need to get to work:
<DataTemplate x:Key="TaskTemplate">
<GridLayout
ColumnDefinitions="*"
>
<Border
GridLayout.Column="0"
BackgroundColor="{StaticResource MidBackgroundColor}"
StrokeThickness="1"
Stroke="Transparent"
HorizontalOptions="Center">
<Border.StrokeShape>
<RoundRectangle CornerRadius="30"/>
</Border.StrokeShape>
<Label
Text="{Binding Path=TestText}"/>
</Border>
</GridLayout>
</DataTemplate>
This code shows it as empty.
From what I've understood so far, the Border takes away the Context and I've tried numerous things off of other threads to get it to work, but since I'm quite new, I'm struggling to find out how it works exactly.
Thanks in advance!
EDIT:
I've already tried replacing the Binding with plain text and that works just fine, so it's not that a Label within a Border would be invisible.
I want to clarify that the aforementioned Text property is not actually the Label's or Border's Text property, but a Text property of a bounded object. Renamed it for clarity above to TestText.
This code shows proper text:
<GridLayout
ColumnDefinitions="*"
>
<Border
GridLayout.Column="0"
BackgroundColor="{StaticResource MidBackgroundColor}"
StrokeThickness="1"
Stroke="Transparent"
HorizontalOptions="Center">
<Border.StrokeShape>
<RoundRectangle CornerRadius="30"/>
</Border.StrokeShape>
<Label
Text="Testing text."/>
</Border>
</GridLayout>
</DataTemplate>
The desired result is this: https://i.stack.imgur.com/wUdGD.jpg
But instead of the hard-coded text, it should Bind text of another object. This shouldn't be an issue of other code, since it works just fine if I write the code outside the Border.
EDIT2:
Including all the other code.
This is the Page that displays everything.
TasksPage.xaml:
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
<ContentPage.Resources>
<ResourceDictionary Source="/Views/ViewTask.xaml"/>
</ContentPage.Resources>
<GridLayout RowDefinitions="*">
<GridLayout
GridLayout.Row="0"
HorizontalOptions="FillAndExpand"
VerticalOptions="FillAndExpand">
<StackLayout Margin="5,5,5,0">
<CollectionView x:Name="TasksCollection"
ItemsSource="{Binding Tasks}"
ItemTemplate="{StaticResource TaskTemplate}">
</CollectionView>
</StackLayout>
</GridLayout>
</GridLayout>
</ContentPage>
TasksPage.xaml.cs:
public partial class TasksPage : ContentPage
{
public TasksPage()
{
InitializeComponent();
BindingContext = new TaskViewModel();
}
}
This is the itemtemplate for that collection.
ViewTask.xaml:
<ResourceDictionary xmlns="http://schemas.microsoft.com/dotnet/2021/maui" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
<DataTemplate x:Key="TaskTemplate">
<GridLayout
ColumnDefinitions="*">
<Border
GridLayout.Column="0"
BackgroundColor="{StaticResource MidBackgroundColor}"
StrokeThickness="1"
Stroke="Transparent"
HorizontalOptions="Center">
<Border.StrokeShape>
<RoundRectangle CornerRadius="30"/>
</Border.StrokeShape>
<Label GridLayout.Column="0"
GridLayout.Row="0"
Text="{Binding TaskText}" />
</Border>
</GridLayout>
</DataTemplate>
</ResourceDictionary>
The ViewModel just has an ObservableCollection, which works just fine. So all the items actually populate the DataTemplate, it's just that the DataTemplate only shows Binded properties if it's not within a Border.
Someone else has also seen this as a bug. Lester Moreno's comment on blog announcing maui preview 9.
For now, you can simulate Border by using "Frame-inside-Frame":
<!-- Without Grid, the Frame takes the whole width. -->
<!-- To have multiple buttons in one row, use more Grid columns. -->
<!-- Border will be more convenient once it works. -->
<Grid ColumnDefinitions="Auto,*">
<!-- "Padding 6" of outer frame determines how thick the Border color is. -->
<Frame HasShadow="False" CornerRadius="18" Padding="6" BackgroundColor="#F69927">
<!-- "Padding 2" of inner frame is white space surrounding the label. -->
<Frame HasShadow="False" CornerRadius="12" BackgroundColor="White" Padding="6,2">
<Label Text="{Binding LabelText}" VerticalTextAlignment="Center" HorizontalTextAlignment="Center"
TextColor="Blue"/>
</Frame>
</Frame>
</Grid>

My Silverlight app doesnt show changes

It's my first time with SL (but not WPF). Im learning PRISM watching the great videos of MTaulty: http://channel9.msdn.com/blogs/mtaulty/prism--silverlight-part-1-taking-sketched-code-towards-unity
So far so good, I'm with the last video and I'm doing the same things He does in my VS. I'm using SL4 & mvc2 web & prism for sl4.
I Found a problem and I don't know what is going on.
My SL application itself doesnt show any changes. I have a basic shell:
<Grid x:Name="LayoutRoot" Background="Azure">
<Grid.RowDefinitions>
<RowDefinition />
<RowDefinition />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="2*" />
</Grid.ColumnDefinitions>
<ctls:GridSplitter Grid.RowSpan="2" HorizontalAlignment="Right"
VerticalAlignment="Stretch" Width="2"
Background="Black" />
<ctls:GridSplitter Grid.Column="1"
HorizontalAlignment="Stretch" VerticalAlignment="Bottom"
Height="2" Background="Black" />
<Border Background="SkyBlue" CornerRadius="3"
Margin="5" Grid.RowSpan="2">
<ContentControl rgn:RegionManager.RegionName="FolderSelectionRegion"
HorizontalAlignment="Stretch" VerticalAlignment="Stretch"
HorizontalContentAlignment="Stretch" VerticalContentAlignment="Stretch" />
</Border>
<Border
Background="SkyBlue"
CornerRadius="3"
Margin="5"
Grid.Column="1">
<ContentControl
rgn:RegionManager.RegionName="MailSelectionRegion"
HorizontalAlignment="Stretch"
VerticalAlignment="Stretch"
HorizontalContentAlignment="Stretch"
VerticalContentAlignment="Stretch" />
</Border>
</Grid>
The thing is, I registered a View in the first regionManager, perfect, I registered a second view but it doesnt show... Ok, some bug in someplace... but no.
I realized that the border for the second regionManager is not showing up, ok. I commented the line that register the view (the view is working) and the view is still showing up. I commented the bootstrapper, deleting it from Application_Startup, nothing the view is still showing up (not possible, there is no way that my app knows how to execute the Shell, is all commented out).
In short, I'm sure if I Delete 3 files, the app is still working... I cleaned the solution, deleted the .xap files from the ClientBin... Nothing, the app is still showing up the view and so on. On other words, the app is not reflecting changes on the code.
What's going on?
Thank you.
EDIT: Near one year later...
So, I didn't touch Silverlight since this, but today I wanted to make a very simple app (just a path and textbox) and... Yay my app started to dont show the changes.
I can't reproduce the bug, I don't know what trigger this, but I know that is a problem with ASP.NET MVC.
The project Im talking here, and the project I made today, both were using ASP.NET MVC to launch the SL project.
I uploaded the EmailClient project (just the part we are interested in) to my host: www.foxandxss.net/stuff/EmailClient.rar
Is easy to see the problem. For start, you can see that in Shell.xaml, the LayoutRoot's color is Azure and if you run the application, it will be Green (When I opened today this app, I changed it to Green and worked, but no more changes). If you change the color to another one, it didn't change. If you go to App.xaml.cs and comment the lines that creates and run the bootstrapper (so the app will not run), the app will still opening. Is like the app running is some cache and everychange you make, you wont see it.
I tried deleting the xap from the MVC project, and nothing.
The thing is that if you right click on the SL project and click on "View in browser" you will see the changes (Azure BG or nothing if you commented the boostrapper) but if you run it from the MVC project, nothing.
In the past, I had issues with XAP file caching. If it's the issue, I would inject a dummy parameter next to the xap file path (in this case a timestamp) :
<div id="silverlightControlHost">
<object data="data:application/x-silverlight-2," type="application/x-silverlight-2" width="100%" height="100%">
<param name="source" value="ClientBin/EmailClient.xap?20110712160700"/>
<param name="onError" value="onSilverlightError" />
<param name="background" value="white" />
<param name="minRuntimeVersion" value="4.0.50826.0" />
<param name="autoUpgrade" value="true" />
<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></div>
If you refresh that parameter on each build, this should invalidate the cache and load the latest xap file.
Samuel has the right idea, however you can get Silverlight to automatically ignore previous timestamps by checking the last write time on the server
<div id="silverlightControlHost">
<object data="data:application/x-silverlight-2," type="application/x-silverlight-2" width="100%" height="100%">
<%
const string orgSourceValue = #"ClientBin/SilverlightApp.xap";
string param;
if (System.Diagnostics.Debugger.IsAttached)
param = "<param name=\"source\" value=\"" + orgSourceValue + "\" />";
else
{
string xappath = HttpContext.Current.Server.MapPath(#"") + #"\" + orgSourceValue;
DateTime xapCreationDate = System.IO.File.GetLastWriteTime(xappath);
param = "<param name=\"source\" value=\"" + orgSourceValue + "?ignore=" + xapCreationDate.ToString("yyyy-MM-dd_HH-mm-ss") + "\" />";
}
Response.Write(param);
%>
<param name="onError" value="onSilverlightError" />
<param name="background" value="white" />
<param name="minRuntimeVersion" value="4.0.50401.0" />
<param name="autoUpgrade" value="true" />
<a href="http://go.microsoft.com/fwlink/?LinkID=149156&v=4.0.50401.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></div>

Silverlight Grid Auto Size not working within canvas

How do you make a grid width 100% inside a canvas? Here's some simple XAML but it doesn't work as expected.
<Canvas Background="MediumSlateBlue" Width="Auto" Height="Auto" >
<Grid x:Name="LayoutRoot" MouseMove="MainPage_MouseMove" Background="Beige" >
<TextBlock x:Name="lblDisplay" Height="24" HorizontalAlignment="Right" VerticalAlignment="Top" Width="128" Text="asdf" ></TextBlock>
</Grid>
</Canvas>
I don't understand why my grid doesn't take up as much room as it can get it's hands on! I've even tried adding a single row and column definition with a width of 100*, but still my grid will only take up as much space as the label it contains. The goal is to have a canvas, with a grid child and takes up 100% width and height. This is important because I need the silverlight to resize when the browser resizes.
Canvas lays out its content using absolute positioning. It's much more similar to the way Windows Forms worked in that all elements must have a top, left, width, and height specified.
You can achieve similar functionality by replacing Canvas with a Grid that has no rows/columns defined and use margins to place child elements.
Looks like I found a solution here
http://forums.silverlight.net/forums/t/13415.aspx
I've adjusted my code to automatically resize my grid whenever the content is resized. This will allow me to position elements absolutly using Canvas.LeftProperty and maintain the position of horizontally/vertically aligned elements.
I considered using just a grid as my primary layout, however should the need arise to animate an object, margin cannot be animated. Additionally, setting the margin Left and Top during the mousemove event did not accurately position my element to the cursor position.
Also check to make sure that your form is actually stretching the Silverlight application.
<form id="form1" runat="server" style="height:100%">
<div id="silverlightControlHost">
<object data="data:application/x-silverlight-2," type="application/x-silverlight-2" width="100%" height="100%">
<param name="source" value="clientbin/MyApp.xap"/>
<param name="onError" value="onSilverlightError" />
<param name="background" value="white" />
<param name="minRuntimeVersion" value="3.0.40818.0" />
<param name="autoUpgrade" value="true" />
<a href="http://go.microsoft.com/fwlink/?LinkID=149156&v=3.0.40818.0" style="text-decoration:none">
<img src="http://go.microsoft.com/fwlink/?LinkId=108181" alt="Get Microsoft Silverlight" style="border-style:none"/>
</a>
</object><iframe id="_sl_historyFrame" style="visibility:hidden;height:0px;width:0px;border:0px"></iframe></div>
</form>

ProgressBar in Silverlight Custom Splash Screen

How does one embed the Silverlight ProgressBar control in a a custom splash screen? I put the following into loose xaml (simplified for brevity):
<Grid xmlns="http://schemas.microsoft.com/client/2007"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<ProgressBar />
</Grid>
The error message is as follows:
Error: Unhandled Error in Silverlight Application
Code: 2007
Category: ParserError
Message: Unknown element: ProgressBar.
etc
Isn't the ProgressBar a standard control defined in the http://schemas.microsoft.com/winfx/2006/xaml/presentation namespace?
I'm assuming SL2 or SL3 since the presence of a progress bar - it got added in SL2.
The /winfx/2006/xaml/presentation name space isn't declared - but certainly in SL2/3 that is where it resides. You have used the alternative http://schemas.microsoft.com/client/2007, this is a legacy namespace for SL1.0
The code given will work, but to reproduce I have to have the root element as a user control and the namespaces have to reside in there, otherwise the usercontrol tag itself is not recognised.
<UserControl x:Class="myApp.scratchpad"
xmlns="http://schemas.microsoft.com/client/2007"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Width="400" Height="300">
<Grid x:Name="LayoutRoot" Background="White">
<ProgressBar />
</Grid>
</UserControl>
Worked fine in SL3.
Can you post more of the page, root element, update the reference to the SL2/3 namespace and also say which verison of SL is being used?
If this is for the SplashScreenSource property of the object tag, then the XAML must be Silverlight 1+JavaScript (non-managed XAML) Here is how you would do that: (Taken from the Silverlight SDK here)
<Canvas Background="Black" Width="302" Height="52">
<Rectangle Canvas.Left="1" Canvas.Top="1" Width="300" Height="30" Fill="White"/>
<Rectangle x:Name="progressBarFill" Canvas.Left="1" Canvas.Top="1" Height="30" Fill="Blue"/>
</Canvas>
And then use a JS function to update the progress:
function onProgressChanged(sender, eventArgs)
{
var slPlugin = sender.getHost();
slPlugin.content.findName("progressBarFill").width = eventArgs.progress * 300;
}

Resources