Search code examples
xamluwpcombobox

How to make a ComboBox fill all the space of the Grid line where it is contained in UWP


I'm migrating a WPF application to UWP and I'm having a design issue. How to make a ComboBox fill all the space of the grid line in which it is contained? In WPF I used the code below.

<Grid>
  <Grid.RowDefinitions>
    <RowDefinition Height="*"/>
  </Grid.RowDefinitions>
  <Grid.ColumnDefinitions>
    <ColumnDefinition Width="150"/>
    <ColumnDefinition Width="*"/>
  </Grid.ColumnDefinitions>
  <TextBlock x:Uid="SpkPgTxtLanguage" Width="auto" Height="auto" Grid.Column="0" Grid.Row="0" Margin="0,0,0,0" FontSize="12" />
  <ComboBox Name="cbxDefaultLanguage" Margin="3,3,3,3" Width="auto" Height="auto" Grid.Column="1" Grid.Row="0" >
    <ComboBox.ItemTemplate>
      <DataTemplate>
        <StackPanel Orientation="Horizontal">
          <Image Source="{Binding Flag}" Width="32" Height="32" />
          <TextBlock Text="{Binding Name}" Margin="10, 0, 0, 0"  FontSize="12"/>
        </StackPanel>
      </DataTemplate>
    </ComboBox.ItemTemplate>
  </ComboBox>
</Grid>

Solution

  • In UWP, you can set ComboBox.HorizontalAlignment to Stretch, which means that ComboBox can fill the remaining space horizontally.

    <ComboBox Name="cbxDefaultLanguage" Margin="3,3,3,3" HorizontalAlignment="Stretch" Grid.Column="1" Grid.Row="0" >
        ...
    </ComboBox>
    

    Best regards.