How to have a set of labels and dropdowns in a row

[Kook Jin Noh]

Hi, I'd like to have multiple dropdowns in a row with text labels before them. Currently I have the below layout and there are too much spaces between dropdowns. Could you please help me? Thanks.

MainWindow.xaml:

<Window x:Class="SyncfusionWpfDropdownTest.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:SyncfusionWpfDropdownTest" xmlns:syncfusion="http://schemas.syncfusion.com/wpf"
        mc:Ignorable="d"
        Title="MainWindow" Height="450" Width="800">
    <Window.DataContext>
        <local:ViewModel x:Name="viewModel"/>
    </Window.DataContext>
    <Grid>
        <StackPanel HorizontalAlignment="Left" VerticalAlignment="Top">
            <syncfusion:DropDownButtonAdv IconHeight="1" IconWidth="1" SizeMode="Normal" x:Name="CountryDropDown" Label="Country">
                <syncfusion:DropDownMenuGroup ScrollBarVisibility="Visible" ItemsSource="{Binding Countries}">
                    <syncfusion:DropDownMenuGroup.ItemTemplate>
                        <DataTemplate>
                            <syncfusion:DropDownMenuItem Header="{Binding Name}" HorizontalAlignment="Left" Click="DropDownMenuItem_CountryClick">
                            </syncfusion:DropDownMenuItem>
                        </DataTemplate>
                    </syncfusion:DropDownMenuGroup.ItemTemplate>
                </syncfusion:DropDownMenuGroup>
            </syncfusion:DropDownButtonAdv>
        </StackPanel>
        <StackPanel HorizontalAlignment="Left" VerticalAlignment="Center">
            <syncfusion:DropDownButtonAdv IconHeight="1" IconWidth="1" SizeMode="Normal" x:Name="MarketDropDown" Label="Market">
                <syncfusion:DropDownMenuGroup ScrollBarVisibility="Visible" ItemsSource="{Binding Markets}">
                    <syncfusion:DropDownMenuGroup.ItemTemplate>
                        <DataTemplate>
                            <syncfusion:DropDownMenuItem Header="{Binding Name}" HorizontalAlignment="Left" Click="DropDownMenuItem_MarketClick">
                            </syncfusion:DropDownMenuItem>
                        </DataTemplate>
                    </syncfusion:DropDownMenuGroup.ItemTemplate>
                </syncfusion:DropDownMenuGroup>
            </syncfusion:DropDownButtonAdv>
        </StackPanel>
        <StackPanel HorizontalAlignment="Left" VerticalAlignment="Bottom">
            <syncfusion:DropDownButtonAdv IconHeight="1" IconWidth="1" SizeMode="Normal" x:Name="DeliveryMonthDropDown" Label="Delivery Month">
                <syncfusion:DropDownMenuGroup ScrollBarVisibility="Visible" ItemsSource="{Binding DeliveryMonths}">
                    <syncfusion:DropDownMenuGroup.ItemTemplate>
                        <DataTemplate>
                            <syncfusion:DropDownMenuItem Header="{Binding Month}" HorizontalAlignment="Left" Click="DropDownMenuItem_DeliveryMonthClick">
                            </syncfusion:DropDownMenuItem>
                        </DataTemplate>
                    </syncfusion:DropDownMenuGroup.ItemTemplate>
                </syncfusion:DropDownMenuGroup>
            </syncfusion:DropDownButtonAdv>
        </StackPanel>
        <syncfusion:ButtonAdv Height="44" Width="200" IconHeight="1" IconWidth="1" SizeMode="Normal" VerticalAlignment="Top" HorizontalAlignment="Right" Label="Open Economic Calendar Table"/>
    </Grid>
</Window>

[Priyanka Vijayasankar]

Hi Kook Jin Noh,

 

We have checked your query, and please refer to the code snippet attached below. If you adjust the margin values as needed, you can achieve your desired layout. Please let us know if you need any further assistance.

<Grid>

    <StackPanel HorizontalAlignment="Left" VerticalAlignment="Top">

        <syncfusion:DropDownButtonAdv IconHeight="1" IconWidth="1" SizeMode="Normal" x:Name="CountryDropDown" Label="Country" HorizontalAlignment="Left">

            <syncfusion:DropDownMenuGroup ScrollBarVisibility="Visible" ItemsSource="{Binding Countries}">

                <syncfusion:DropDownMenuGroup.ItemTemplate>

                    <DataTemplate>

                        <syncfusion:DropDownMenuItem Header="{Binding Name}" HorizontalAlignment="Left" Click="DropDownMenuItem_CountryClick">

                        </syncfusion:DropDownMenuItem>

                    </DataTemplate>

                </syncfusion:DropDownMenuGroup.ItemTemplate>

            </syncfusion:DropDownMenuGroup>

        </syncfusion:DropDownButtonAdv>

        <syncfusion:DropDownButtonAdv IconHeight="1" IconWidth="1" SizeMode="Normal" x:Name="MarketDropDown" Label="Market" HorizontalAlignment="Left" Margin="0,50,0,0">

            <syncfusion:DropDownMenuGroup ScrollBarVisibility="Visible" ItemsSource="{Binding Markets}">

                <syncfusion:DropDownMenuGroup.ItemTemplate>

                    <DataTemplate>

                        <syncfusion:DropDownMenuItem Header="{Binding Name}" HorizontalAlignment="Left" Click="DropDownMenuItem_MarketClick">

                        </syncfusion:DropDownMenuItem>

                    </DataTemplate>

                </syncfusion:DropDownMenuGroup.ItemTemplate>

            </syncfusion:DropDownMenuGroup>

        </syncfusion:DropDownButtonAdv>

        <syncfusion:DropDownButtonAdv IconHeight="1" IconWidth="1" SizeMode="Normal" x:Name="DeliveryMonthDropDown" Label="Delivery Month" HorizontalAlignment="Left" Margin="0,50,0,0">

            <syncfusion:DropDownMenuGroup ScrollBarVisibility="Visible" ItemsSource="{Binding DeliveryMonths}">

                <syncfusion:DropDownMenuGroup.ItemTemplate>

                    <DataTemplate>

                        <syncfusion:DropDownMenuItem Header="{Binding Month}" HorizontalAlignment="Left" Click="DropDownMenuItem_DeliveryMonthClick">

                        </syncfusion:DropDownMenuItem>

                    </DataTemplate>

                </syncfusion:DropDownMenuGroup.ItemTemplate>

            </syncfusion:DropDownMenuGroup>

        </syncfusion:DropDownButtonAdv>

    </StackPanel>

    <syncfusion:ButtonAdv Height="44" Width="200" IconHeight="1" IconWidth="1" SizeMode="Normal" VerticalAlignment="Top" HorizontalAlignment="Right" Label="Open Economic Calendar Table"/>

</Grid>

Regards,

Priyanka Vijayasankar