refactor(postit): rewrite MainPage layout in Grid

- ContentPage now stretches to fill the window
- root StackPanel replaced by a 3-row Grid (Auto, *, Auto)
  so the post list absorbs the middle band and the detail
  panel sits below
- detail panel inner StackPanel replaced by a Grid (Auto,
  Auto, Auto, *, Auto) so the AvaloniaEdit TextEditor fills
  all remaining width and height; MinHeight=320 keeps a
  sane floor on tiny windows
This commit is contained in:
Paul Schneider 2026-06-28 01:47:12 +01:00
commit bd3dba0089

View file

@ -9,13 +9,24 @@
mc:Ignorable="d" mc:Ignorable="d"
x:Class="PostIt.Views.MainPage" x:Class="PostIt.Views.MainPage"
x:DataType="vm:MainPageViewModel" x:DataType="vm:MainPageViewModel"
HorizontalAlignment="Center" HorizontalAlignment="Stretch"
VerticalAlignment="Center" > VerticalAlignment="Stretch">
<Design.DataContext> <Design.DataContext>
<vm:MainPageViewModel /> <vm:MainPageViewModel />
</Design.DataContext> </Design.DataContext>
<StackPanel Margin="12" Spacing="12" HorizontalAlignment="Center" > <Grid Margin="12" RowSpacing="12"
HorizontalAlignment="Stretch"
VerticalAlignment="Stretch">
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="*" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<StackPanel Grid.Row="0" Spacing="12"
HorizontalAlignment="Stretch"
VerticalAlignment="Top">
<TextBlock Text="PostIt Blog API Interface" FontSize="20" FontWeight="Bold" /> <TextBlock Text="PostIt Blog API Interface" FontSize="20" FontWeight="Bold" />
<StackPanel Orientation="Horizontal" Spacing="8"> <StackPanel Orientation="Horizontal" Spacing="8">
@ -25,9 +36,11 @@
<Button Command="{Binding Save}" Content="Save" /> <Button Command="{Binding Save}" Content="Save" />
<Button Command="{Binding Delete}" Content="Delete" /> <Button Command="{Binding Delete}" Content="Delete" />
</StackPanel> </StackPanel>
</StackPanel>
<Border BorderBrush="Gray" BorderThickness="1" Padding="8"> <Border Grid.Row="1" BorderBrush="Gray" BorderThickness="1" Padding="8">
<ListBox ItemsSource="{Binding FilteredPosts}" SelectedItem="{Binding SelectedPost, Mode=TwoWay}" HorizontalAlignment="Stretch" VerticalAlignment="Stretch"> <ListBox ItemsSource="{Binding FilteredPosts}" SelectedItem="{Binding SelectedPost, Mode=TwoWay}"
HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
<ListBox.ItemTemplate> <ListBox.ItemTemplate>
<DataTemplate x:DataType="models:BlogPost"> <DataTemplate x:DataType="models:BlogPost">
<StackPanel Spacing="4"> <StackPanel Spacing="4">
@ -40,21 +53,35 @@
</ListBox> </ListBox>
</Border> </Border>
<Border BorderBrush="Gray" BorderThickness="1" Padding="8"> <Border Grid.Row="2" BorderBrush="Gray" BorderThickness="1" Padding="8">
<StackPanel Spacing="10"> <Grid RowSpacing="10"
<TextBlock Text="Post detail" FontWeight="SemiBold" /> HorizontalAlignment="Stretch"
<TextBox Text="{Binding SelectedPost.Title, Mode=TwoWay}" PlaceholderText="Title" /> VerticalAlignment="Stretch">
<TextBox Text="{Binding SelectedPost.AuthorId, Mode=TwoWay}" PlaceholderText="Author id" /> <Grid.RowDefinitions>
<AvaloniaEdit:TextEditor <RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="*" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<TextBlock Grid.Row="0" Text="Post detail" FontWeight="SemiBold" />
<TextBox Grid.Row="1" Text="{Binding SelectedPost.Title, Mode=TwoWay}" PlaceholderText="Title" />
<TextBox Grid.Row="2" Text="{Binding SelectedPost.AuthorId, Mode=TwoWay}" PlaceholderText="Author id" />
<AvaloniaEdit:TextEditor Grid.Row="3"
views:TextEditorBinding.Text="{Binding SelectedPost.Article, Mode=TwoWay}" views:TextEditorBinding.Text="{Binding SelectedPost.Article, Mode=TwoWay}"
ShowLineNumbers="True" ShowLineNumbers="True"
FontFamily="Cascadia Code, Consolas, Menlo, Monospace" FontFamily="Cascadia Code, Consolas, Menlo, Monospace"
Height="320" MinHeight="320"
HorizontalAlignment="Stretch"
VerticalAlignment="Stretch"
VerticalScrollBarVisibility="Auto" VerticalScrollBarVisibility="Auto"
HorizontalScrollBarVisibility="Auto" /> HorizontalScrollBarVisibility="Auto" />
<TextBlock Text="{Binding StatusMessage}" Foreground="Gray" /> <TextBlock Grid.Row="4" Text="{Binding StatusMessage}" Foreground="Gray" />
</StackPanel> </Grid>
</Border> </Border>
</Grid>
</StackPanel>
</ContentPage> </ContentPage>