How to make Responsive Grid using Avalonia framework

Viewed 202

I want to make responsive desktop application which can run on different screen size as well as different platform. I have used Grid.Extra.Avalonia library but it is only working for border. I want to make grid Which have 2X2 column and row within that column and row we can place other control which would be responsive based on scree size. Below is my code.

<Window 
 xmlns="https://github.com/avaloniaui" 
 xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
 xmlns:ge="clr-namespace:GridExtra.Avalonia;assembly=GridExtra.Avalonia"
 x:Class="ResponsiveGridSample.MainWindow"
 Title="ResponsiveGrid Example" Height="350" Width="525">
 <Grid>
   <Grid.Styles>
       <Style Selector="Grid">
           <Setter Property="ge:ResponsiveGrid.XS" Value="12" />
           <Setter Property="ge:ResponsiveGrid.SM" Value="6" />
           <Setter Property="ge:ResponsiveGrid.MD" Value="2" />
       </Style>
   </Grid.Styles>
   <ge:ResponsiveGrid>
           <Grid ShowGridLines="True">
               <Grid.ColumnDefinitions>
                   <ColumnDefinition Width="250"/>
                   <ColumnDefinition Width="250"/>
               </Grid.ColumnDefinitions>
               <Grid.RowDefinitions>
                   <RowDefinition Height="40"/>
                   <RowDefinition Height="40"/>
               </Grid.RowDefinitions>
               <!--<Label Grid.Column="0" Grid.Row="0">Vehilce Class</Label>-->
               <ComboBox Grid.Column="1" Grid.Row="0" Width="250">
                   <ComboBoxItem>Car</ComboBoxItem>
                   <ComboBoxItem>Jeep</ComboBoxItem>
                   <ComboBoxItem>Van</ComboBoxItem>
               </ComboBox>
           </Grid>
   </ge:ResponsiveGrid>
 </Grid>
</Window>```

Where can we add class selector for grid to make responsive.
0 Answers
Related