question

EduardoGomez-1870 avatar image
0 Votes"
EduardoGomez-1870 asked HuiLiu-MSFT edited

responsive UI

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>

135722-max.png
135673-min.png

As you can see this will look good in small




windows-wpf
max.png (33.9 KiB)
min.png (39.7 KiB)
5 |1600 characters needed characters left characters exceeded

Up to 10 attachments (including images) can be used with a maximum of 3.0 MiB each and 30.0 MiB total.

1 Answer

HuiLiu-MSFT avatar image
0 Votes"
HuiLiu-MSFT answered HuiLiu-MSFT edited

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:
135766-2.gif


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.



1.gif (841.8 KiB)
2.gif (1014.1 KiB)
· 2
5 |1600 characters needed characters left characters exceeded

Up to 10 attachments (including images) can be used with a maximum of 3.0 MiB each and 30.0 MiB total.

Thanks, but I want all my controls to stretch as well, for example the with of the button should double in size, the item control and the save structure button

0 Votes 0 ·
HuiLiu-MSFT avatar image HuiLiu-MSFT EduardoGomez-1870 ·

Hi,@EduardoGomez-1870 . I have updated the answer, you could check it out.

0 Votes 0 ·