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:
parent
2f7df74000
commit
bd3dba0089
1 changed files with 71 additions and 44 deletions
|
|
@ -9,13 +9,24 @@
|
|||
mc:Ignorable="d"
|
||||
x:Class="PostIt.Views.MainPage"
|
||||
x:DataType="vm:MainPageViewModel"
|
||||
HorizontalAlignment="Center"
|
||||
VerticalAlignment="Center" >
|
||||
HorizontalAlignment="Stretch"
|
||||
VerticalAlignment="Stretch">
|
||||
<Design.DataContext>
|
||||
<vm:MainPageViewModel />
|
||||
</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" />
|
||||
|
||||
<StackPanel Orientation="Horizontal" Spacing="8">
|
||||
|
|
@ -25,9 +36,11 @@
|
|||
<Button Command="{Binding Save}" Content="Save" />
|
||||
<Button Command="{Binding Delete}" Content="Delete" />
|
||||
</StackPanel>
|
||||
</StackPanel>
|
||||
|
||||
<Border BorderBrush="Gray" BorderThickness="1" Padding="8">
|
||||
<ListBox ItemsSource="{Binding FilteredPosts}" SelectedItem="{Binding SelectedPost, Mode=TwoWay}" HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
|
||||
<Border Grid.Row="1" BorderBrush="Gray" BorderThickness="1" Padding="8">
|
||||
<ListBox ItemsSource="{Binding FilteredPosts}" SelectedItem="{Binding SelectedPost, Mode=TwoWay}"
|
||||
HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
|
||||
<ListBox.ItemTemplate>
|
||||
<DataTemplate x:DataType="models:BlogPost">
|
||||
<StackPanel Spacing="4">
|
||||
|
|
@ -40,21 +53,35 @@
|
|||
</ListBox>
|
||||
</Border>
|
||||
|
||||
<Border BorderBrush="Gray" BorderThickness="1" Padding="8">
|
||||
<StackPanel Spacing="10">
|
||||
<TextBlock Text="Post detail" FontWeight="SemiBold" />
|
||||
<TextBox Text="{Binding SelectedPost.Title, Mode=TwoWay}" PlaceholderText="Title" />
|
||||
<TextBox Text="{Binding SelectedPost.AuthorId, Mode=TwoWay}" PlaceholderText="Author id" />
|
||||
<AvaloniaEdit:TextEditor
|
||||
<Border Grid.Row="2" BorderBrush="Gray" BorderThickness="1" Padding="8">
|
||||
<Grid RowSpacing="10"
|
||||
HorizontalAlignment="Stretch"
|
||||
VerticalAlignment="Stretch">
|
||||
<Grid.RowDefinitions>
|
||||
<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}"
|
||||
ShowLineNumbers="True"
|
||||
FontFamily="Cascadia Code, Consolas, Menlo, Monospace"
|
||||
Height="320"
|
||||
MinHeight="320"
|
||||
HorizontalAlignment="Stretch"
|
||||
VerticalAlignment="Stretch"
|
||||
VerticalScrollBarVisibility="Auto"
|
||||
HorizontalScrollBarVisibility="Auto" />
|
||||
<TextBlock Text="{Binding StatusMessage}" Foreground="Gray" />
|
||||
</StackPanel>
|
||||
<TextBlock Grid.Row="4" Text="{Binding StatusMessage}" Foreground="Gray" />
|
||||
</Grid>
|
||||
</Border>
|
||||
|
||||
</StackPanel>
|
||||
</Grid>
|
||||
</ContentPage>
|
||||
Loading…
Add table
Add a link
Reference in a new issue