CODEWITHSUNDEEP
c#wpfxamlgroupbox
GettingStarted
GettingStarted

Reputation: 7605

how to nest controls in a groupbox when using WPF

I want to layout 2 labels on top of each other and then two buttons horizontally next to each other but below the labels (below is an example of what I would like it to look like)

(All items are centered)

Welcome
Please Select A Language

English     Spanish

Here is my XAML

<Window x:Class="Probation_Sign_In.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow" Height="768" Width="1024" Closing="Window_Closing" ResizeMode="NoResize" Topmost="True" WindowStartupLocation="CenterScreen" WindowState="Maximized">
    <Grid>        
        <GroupBox Header="GroupBox" HorizontalAlignment="Left" Height="492" Margin="10,10,0,0" VerticalAlignment="Top" Width="505">
            <StackPanel>
                <Label x:Name="labelWelcome" Content="Welcome." HorizontalAlignment="Left" VerticalAlignment="Top" FontSize="48" FontWeight="Bold" Margin="136,55,0,0"/>
                <Label x:Name="labelWelcomeMessage" Content="Please select a language." HorizontalAlignment="Left" Margin="50,193,0,0" VerticalAlignment="Top" FontSize="36"/>
                <Button x:Name="englishButton" Content="English" HorizontalAlignment="Center" Margin="109,410,767,297" VerticalAlignment="Center" Width="142" FontSize="20" TouchUp="englishButton_TouchUp" Click="englishButton_Click">
                    <Button.Background>
                        <LinearGradientBrush EndPoint="0,1" StartPoint="0,0">
                            <GradientStop Color="#FFF3F3F3" Offset="0"/>
                            <GradientStop Color="#FFEBEBEB" Offset="0.5"/>
                            <GradientStop Color="#FFDDDDDD" Offset="0.5"/>
                            <GradientStop Color="#FF71B5BB" Offset="1"/>
                        </LinearGradientBrush>
                    </Button.Background>
                </Button>
                <Button Content="Español" HorizontalAlignment="Center" Margin="269,410,607,300" VerticalAlignment="Center" Width="142" FontSize="20" Height="30">
                    <Button.Background>
                        <LinearGradientBrush EndPoint="0,1" StartPoint="0,0">
                            <GradientStop Color="#FFF3F3F3" Offset="0"/>
                            <GradientStop Color="#FFEBEBEB" Offset="0.5"/>
                            <GradientStop Color="#FFDDDDDD" Offset="0.5"/>
                            <GradientStop Color="#FF71B5BB" Offset="1"/>
                        </LinearGradientBrush>
                    </Button.Background>
                </Button>
            </StackPanel>
        </GroupBox>


    </Grid>
</Window>

The above XAML doesn't give me the desired result. But all controls must be inside the GroupBox

Upvotes: 0

Views: 9617

Answers (2)

user1548266
user1548266

Reputation:

Wrap your Button controls in another StackPanel and set its Orientation property to Horizontal:

<Grid>
    <GroupBox Header="GroupBox" HorizontalAlignment="Left" Margin="10,10,0,0" VerticalAlignment="Top" Width="505">
        <StackPanel>
            <Label x:Name="labelWelcome" Content="Welcome." HorizontalAlignment="Left" VerticalAlignment="Top" FontSize="48" FontWeight="Bold" Margin="136,10,0,0"/>
            <Label x:Name="labelWelcomeMessage" Content="Please select a language." HorizontalAlignment="Left" Margin="50,0,0,0" VerticalAlignment="Top" FontSize="36"/>
            <StackPanel Orientation="Horizontal" HorizontalAlignment="Center">
                <Button x:Name="englishButton" Content="English" Width="142" FontSize="20" Margin="5" TouchUp="englishButton_TouchUp" Click="englishButton_Click">
                    <Button.Background>
                        <LinearGradientBrush EndPoint="0,1" StartPoint="0,0">
                            <GradientStop Color="#FFF3F3F3" Offset="0"/>
                            <GradientStop Color="#FFEBEBEB" Offset="0.5"/>
                            <GradientStop Color="#FFDDDDDD" Offset="0.5"/>
                            <GradientStop Color="#FF71B5BB" Offset="1"/>
                        </LinearGradientBrush>
                    </Button.Background>
                </Button>
                <Button Content="Español" Width="142" FontSize="20" Height="30" Margin="5">
                    <Button.Background>
                        <LinearGradientBrush EndPoint="0,1" StartPoint="0,0">
                            <GradientStop Color="#FFF3F3F3" Offset="0"/>
                            <GradientStop Color="#FFEBEBEB" Offset="0.5"/>
                            <GradientStop Color="#FFDDDDDD" Offset="0.5"/>
                            <GradientStop Color="#FF71B5BB" Offset="1"/>
                        </LinearGradientBrush>
                    </Button.Background>
                </Button>
            </StackPanel>
        </StackPanel>
    </GroupBox>
</Grid>

EDIT: Altered margin values so that controls stack closer. Play with the Margin property to get your spacing how you want it.

Upvotes: 3

BRAHIM Kamel
BRAHIM Kamel

Reputation: 13755

try this

                </Grid.ColumnDefinitions>
            <Button x:Name="englishButton" Content="English" HorizontalAlignment="Center"  VerticalAlignment="Center" Width="142" FontSize="20" Click="englishButton_Click">
                <Button.Background>
                    <LinearGradientBrush EndPoint="0,1" StartPoint="0,0">
                        <GradientStop Color="#FFF3F3F3" Offset="0"/>
                        <GradientStop Color="#FFEBEBEB" Offset="0.5"/>
                        <GradientStop Color="#FFDDDDDD" Offset="0.5"/>
                        <GradientStop Color="#FF71B5BB" Offset="1"/>
                    </LinearGradientBrush>
                </Button.Background>
            </Button>
            <Button  Grid.Column="1" Content="Español" HorizontalAlignment="Center" VerticalAlignment="Center" Width="142" FontSize="20" Height="30">
                <Button.Background>
                    <LinearGradientBrush EndPoint="0,1" StartPoint="0,0">
                        <GradientStop Color="#FFF3F3F3" Offset="0"/>
                        <GradientStop Color="#FFEBEBEB" Offset="0.5"/>
                        <GradientStop Color="#FFDDDDDD" Offset="0.5"/>
                        <GradientStop Color="#FF71B5BB" Offset="1"/>
                    </LinearGradientBrush>
                </Button.Background>
            </Button>
            </Grid>
        </StackPanel>
    </GroupBox>


</Grid>

Upvotes: 0

Related Questions