responsive UI

Question

how could I make this maximize with the window?

 <WrapPanel>  
        <Grid Margin="10">  
            <Grid.RowDefinitions>  
                <RowDefinition Height="Auto" />  
                <RowDefinition Height="600" />  
                <RowDefinition Height="Auto" />  
            </Grid.RowDefinitions>  
            <Grid.ColumnDefinitions>  
                <ColumnDefinition Width="110" />  
                <ColumnDefinition Width="400" />  
            </Grid.ColumnDefinitions>  
  
            <Label Content="Number of folders: " />  
  
            <syncfusion:IntegerTextBox  
                x:Name="FoldersNum"  
                Grid.Column="1"  
                VerticalAlignment="Center"  
                Foreground="White"  
                MaxValue="5000"  
                MinValue="0"  
                Value="{Binding Value, UpdateSourceTrigger=PropertyChanged}" />  
  
            <Button  
                Grid.Column="1"  
                HorizontalAlignment="Right"  
                VerticalAlignment="Center"  
                BorderBrush="Transparent"  
                Command="{Binding CreateCommand}"  
                Content="Create"  
                Focusable="False" />  
  
            <ScrollViewer  
                Grid.Row="1"  
                Grid.ColumnSpan="2"  
                Margin="10"  
                BorderBrush="Transparent"  
                Focusable="False"  
                HorizontalScrollBarVisibility="Auto">  
                <ItemsControl ItemsSource="{Binding FoldersCollection}">  
                    <ItemsControl.ItemTemplate>  
                        <DataTemplate>  
                            <StackPanel Orientation="Horizontal">  
                                <syncfusion:SfTextBoxExt  
                                    Width="300"  
                                    Margin="10,10,0,0"  
                                    VerticalAlignment="Center"  
                                    Text="{Binding FolderName}"  
                                    Watermark="Folder Name" />  
                                <syncfusion:ComboBoxAdv  
                                    Margin="10,10,0,0"  
                                    VerticalAlignment="Center"  
                                    DefaultText="File type to store"  
                                    IsEditable="False"  
                                    ItemsSource="{Binding DataContext.FilesTypes, ElementName=Main}"  
                                    SelectedValue="{Binding Ext}"/>  
                            </StackPanel>  
                        </DataTemplate>  
                    </ItemsControl.ItemTemplate>  
                </ItemsControl>  
            </ScrollViewer>  
  
  
            <Button  
                Grid.Row="2"  
                VerticalAlignment="Center"  
                Command="{Binding CreateFoldersCommand}"  
                Content="Create structure"  
                Style="{StaticResource MenuItem}" />  
  
            <Button  
                Grid.Row="2"  
                Grid.Column="1"  
                Margin="5,0,0,0"  
                VerticalAlignment="Center"  
                Command="{Binding SaveCommand}"  
                Content="Save structure"  
                Style="{StaticResource MenuItem}" />  
  
        </Grid>  
    </WrapPanel>  

As you can see this will look good in small

Answer 1

The ViewBox control is useful for stretching the UI. You could try to replace WrapPanel with ViewBox. The control will be stretched by setting Stretch="Fill" and StretchDirection="Both" , and you can modify the layout to make the controls sized appropriately.

<Viewbox Stretch="Fill" StretchDirection="Both">  
        <Grid Margin="10">   
            <Grid.RowDefinitions>  
                   <RowDefinition Height="Auto" />  
                  <RowDefinition Height="350" />  
                  <RowDefinition Height="Auto" />  
           </Grid.RowDefinitions>  
           <Grid.ColumnDefinitions>  
                   <ColumnDefinition Width="110" />  
                  <ColumnDefinition Width="400" />  
          </Grid.ColumnDefinitions>  
            Your code…  
      </Grid>  
</Viewbox>  

The picture of result:

---

If the response is helpful, please click "Accept Answer" and upvote it.
Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.