Resizable
面板之间的调整手柄，即 Avalonia 的 GridSplitter。
示例可交互
Live demo unavailable
<Border BorderBrush="{DynamicResource UIKit.Border}" BorderThickness="1" CornerRadius="5.5" Width="480" Height="140" HorizontalAlignment="Left">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="160" MinWidth="80" />
<ColumnDefinition Width="1" />
<ColumnDefinition Width="*" MinWidth="80" />
</Grid.ColumnDefinitions>
<TextBlock Text="Sidebar" Margin="12" />
<GridSplitter Grid.Column="1" ResizeDirection="Columns" />
<TextBlock Grid.Column="2" Text="Content" Margin="12" />
</Grid>
</Border>用法
把 GridSplitter 放入 Grid 中宽或高为 1px 的列或行，并把 ResizeDirection 设为 Columns 或 Rows：主题据此决定手柄的方向。手柄是一条 1px 的细线，使用边框颜色，位于一条 9px 宽、可接收指针并与两侧面板重叠的区域中。一个弱化的胶囊形指示块沿手柄延伸，随状态在 120ms 内淡入：悬停时长 20px、透明度 35%，按下时长 28px、透明度 60%，拖拽时长 44px、透明度 90%；键盘焦点时显示悬停态的胶囊。面板按网格定义调整大小，因此把限制写在那里（MinWidth、MinHeight）。若不想保留那条 1px 的列，可把分隔条放在第二个面板所在单元格的起始处，设置 ResizeBehavior="PreviousAndCurrent"，并给每个面板设置 MinWidth="100"。
uikit:ResizablePanelGroup 自行完成调整，使用相同的手柄：支持按面板设置限制、级联调整与隐藏面板。
示例
在 1px 高的行中使用 ResizeDirection="Rows"。
Live demo unavailable
<Border BorderBrush="{DynamicResource UIKit.Border}" BorderThickness="1" CornerRadius="5.5" Width="480" Height="220" HorizontalAlignment="Left">
<Grid RowDefinitions="80,1,*">
<TextBlock Text="Editor" Margin="12" />
<GridSplitter Grid.Row="1" ResizeDirection="Rows" />
<TextBlock Grid.Row="2" Text="Terminal" Margin="12" />
</Grid>
</Border>每个方向各有一个分隔条，第二个网格嵌套在第一个网格的列中。
Live demo unavailable
<Border BorderBrush="{DynamicResource UIKit.Border}" BorderThickness="1" CornerRadius="5.5" Width="480" Height="220" HorizontalAlignment="Left">
<Grid ColumnDefinitions="160,1,*">
<TextBlock Text="Explorer" Margin="12" />
<GridSplitter Grid.Column="1" ResizeDirection="Columns" />
<Grid Grid.Column="2" RowDefinitions="*,1,80">
<TextBlock Text="Editor" Margin="12" />
<GridSplitter Grid.Row="1" ResizeDirection="Rows" />
<TextBlock Grid.Row="2" Text="Terminal" Margin="12" />
</Grid>
</Grid>
</Border>