Why won't StackPanel put textblock on left and button on right in Silverlight?

Question

OK, I give up: what do I have to change to this StackPanel below so that it puts the:

text on far left of form
button on far right of form.

alt text http://tanguay.info/web/external/stackPanelLeftRight.png

<UserControl x:Class="TestData333.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
    Width="400" Height="300">
    <Grid x:Name="LayoutRoot" Background="White">
        <Border CornerRadius="10" Background="Yellow" Padding="20">
            <StackPanel VerticalAlignment="Top" HorizontalAlignment="Left">
                <ScrollViewer Background="Beige" 
                              Height="230"
                              Width="360">
                    <StackPanel>
                        <TextBlock x:Name="TheContent" 
                           Foreground="Navy"
                           FontSize="14"
                           TextWrapping="Wrap"/>
                    </StackPanel>
                </ScrollViewer>

                <StackPanel Orientation="Horizontal">
                    <TextBlock x:Name="ProgressIndicator" Text="Ready..."
                               HorizontalAlignment="Left"/>
                    <Button Content="Load Data"
                        Width="100"
                        HorizontalAlignment="Right"
                        Click="Button_Load"
                        Margin="0 5 0 0"/>
                </StackPanel>

            </StackPanel>
        </Border>
    </Grid>
</UserControl>

ANSWER:

Downloaded Silverlight 3 toolkit which has DockPanel, installed, referenced System.Windows.Controls, then following XAML:

<UserControl x:Class="TestData333.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
    xmlns:toolkit="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls"
    Width="400" Height="300">
    <Grid x:Name="LayoutRoot" Background="White">
        <Border CornerRadius="10" Background="Yellow" Padding="20">
            <StackPanel VerticalAlignment="Top" HorizontalAlignment="Left">
                <ScrollViewer Background="Beige" 
                              Height="230"
                              Width="360">
                    <StackPanel>
                        <TextBlock x:Name="TheContent" 
                           Foreground="Navy"
                           FontSize="14"
                           TextWrapping="Wrap"/>
                    </StackPanel>
                </ScrollViewer>

                <toolkit:DockPanel Margin="0 5 0 0">
                    <TextBlock toolkit:DockPanel.Dock="Left" x:Name="ProgressIndicator" Text="Ready..."
                               FontSize="12"
                               HorizontalAlignment="Left"/>
                    <Button toolkit:DockPanel.Dock="Right" Content="Load Data"
                        Width="100"
                        HorizontalAlignment="Right"
                        Click="Button_Load"/>
                </toolkit:DockPanel>

            </StackPanel>
        </Border>
    </Grid>
</UserControl>

alt text http://tanguay.info/web/external/silverlightDockPanel.png

score 11 · Accepted Answer · answered Jun 15 '09 at 22:29

11

you could use dockpanel from toolkit or use grid with 2 columns. and have the content of the second column right aligned

answered Jun 15 '09 at 22:29

user122069

419
2
3

score 7 · Answer 2 · answered Jun 15 '09 at 22:21

7

Do you mean that you want the button aligned to the right of the form? If so, StackPanel won't do that. It's made to "stack things up" either horizontally or vertically.

I would suggest you try DockPanel:

<DockPanel>
    <TextBlock x:Name="ProgressIndicator" 
               DockPanel.Dock="Left"
               Text="Ready..." />
    <Button DockPanel.Dock="Right"
            Content="Load Data"
            Width="100"
            Click="Button_Load"
            Margin="0,5,0,0" />
</DockPanel>

answered Jun 15 '09 at 22:21

Matt Hamilton

200,371
61
386
320

yes, that's the way I do it in WPF but I'm using Silverlight at the moment, albeit Silverlight 3, sorry to see there's no dockpanel in this version, searching for some workaround... – Edward Tanguay Jun 15 '09 at 22:25
1

I'm pretty sure that the Silverlight control toolkit has a dockpanel – Jacob Adams Jun 15 '09 at 22:26
Silverlight doesn't have a DockPanel? I have to pay more attention to questions' tags. I automatically assumed it was a WPF question, but I had no idea that there was no DockPanel in Silverlight! – Matt Hamilton Jun 15 '09 at 22:28

score 1 · Answer 3 · edited Nov 09 '11 at 19:25

1

Reference should be:

xmlns:toolkit="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls.Toolkit"

edited Nov 09 '11 at 19:25

sth

222,467
53
283
367

answered Nov 09 '11 at 19:20

Ash

11
1

score 1 · Answer 4 · answered Jun 15 '09 at 22:26

1

I think Matt's approach it the best. Two alternatives though are to use a grid and align the content to the left and right or to just give the button a really large margin.

answered Jun 15 '09 at 22:26

Jacob Adams

3,944
3
26
42

Why won't StackPanel put textblock on left and button on right in Silverlight?

ANSWER:

4 Answers4