Floating control at the bottom of the web page??

[Sunil P V]

Hi All, I am working on Silverlight 2.0. I have a grid (which is actually a menu) in my silverlight page. I want this grid to have a floating capability, that is, as and when the user scrolls, it should always stick to the bottom of the page or at the centre of the page page. Even when the page is minimized/maximized, this grid should be placed to the bottom of the page. Is there an option in silverlight to dock a control to the any particular portion of the page ? Is coding necessary to create such an effect? Any pointers to online samples or code snippets will be really helpful. Thanks in advance.

Sunil

[Mark Salsbery]

The layout of the Silverlight control plugin on a page is an HTML issue and outside the scope of this message board. For layout within your Silverlight app, you need to use the elements that give you the functionality you need. A couple possible solutions: The Silverlight Toolkit[^] has a DockPanel element you could use to fix the grid at the bottom. You could also use an outer grid with two rows - the first row star-sized, and the second row fixed/auto sized. Put the grid you want fixed to the bottom in the second row of the outer grid.

Mark Salsbery Microsoft MVP - Visual C++ :java:

[Sunil P V]

Mark, I suppose there is a disconnect in the issue that i am facing and the your understanding of my issue. I do know that silverlight is a plugin. What I wanted to achieve is like this: 1. A complete silverlight web page. 2. A menu (silverlight control) that floats top of this silverlight page. When the user scrolls the silverlight page, the menu should still be as docked botttom to the page. I hope i am clear. Please let me know if I should elaborate the problem. Thanks.

Sunil

[Mark Salsbery]

I'm not sure what you mean by "floats" but I gave you two possible solutions for docking something to the bottom of the page... Use a DockPanel:

<UserControl x:Class="SilverlightTester.MyPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:stk="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls.Toolkit"
>
<stk:DockPanel x:Name="layoutRoot" >

    <!-- This is the menu that stays anchored at the bottom of the page -->
    <StackPanel stk:DockPanel.Dock="Bottom" Orientation="Horizontal" Background="SteelBlue" >
        <Button Content="Menu 1" />
        <Button Content="Menu 2" />
        <Button Content="Menu 3" />
    </StackPanel>

    <!-- This is the main body of the page (scrollable) -->
    <ScrollViewer HorizontalScrollBarVisibility="Auto" VerticalScrollBarVisibility="Auto" >
        <Grid Width="1000" Height="1000" Background="LightSteelBlue" />
    </ScrollViewer>

</stk:DockPanel>

</UserControl>

Use a Grid:

<UserControl x:Class="SilverlightTester.MyPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
>
<Grid x:Name="layoutRoot" >

    <Grid.RowDefinitions>
        <RowDefinition Height="\*" />
        <RowDefinition Height="Auto" />
    </Grid.RowDefinitions>
    
    <!-- This is the main body of the page (scrollable) -->
    <ScrollViewer Grid.Row="0" HorizontalScrollBarVisibility="Auto" VerticalScrollBarVisibility="Auto" >
        <Grid Width="1000" Height="1000" Background="LightSteelBlue" />
    </ScrollViewer>

    <!-- This is the menu that stays anchored at the bottom of the page -->
    <StackPanel Grid.Row="1" Orientation="Horizontal" Background="SteelBlue" >
        <Button Content="Menu 1" />
        <Button Content="Menu 2" />
        <Button Content="Menu 3" />
    </StackPanel> 
    
</Grid>

</UserControl>

Mark Salsbery Microsoft MVP - Visual C++ :java:

[Sunil P V]

Hi Mark, Thanks for your suggestion. I had to do a little tweaking to the canvas and i was able to achieve what I wished for. I could mail the .xap and html file of my prototype if you need. I will surely try out as per your suggestion and let you know... Thanks for your time.

Sunil