ResizablePanelGroup

并排排列、之间带调整手柄的面板，即 uikit:ResizablePanelGroup。

示例可交互

ResizablePanelGroup — Avalonia UIKit

Live demo unavailable

<Border BorderBrush="{DynamicResource UIKit.Border}" BorderThickness="1" CornerRadius="5.5" Width="560" Height="240" HorizontalAlignment="Left">
  <uikit:ResizablePanelGroup>
    <uikit:ResizablePanel Size="150" MinSize="120" MaxSize="240">
      <TextBlock Text="Explorer (120..240)" Margin="12" />
    </uikit:ResizablePanel>
    <uikit:ResizablePanel>
      <uikit:ResizablePanelGroup Orientation="Vertical">
        <uikit:ResizablePanel>
          <TextBlock Text="Editor" Margin="12" />
        </uikit:ResizablePanel>
        <uikit:ResizablePanel Size="80" MinSize="60">
          <TextBlock Text="Terminal" Margin="12" />
        </uikit:ResizablePanel>
      </uikit:ResizablePanelGroup>
    </uikit:ResizablePanel>
    <uikit:ResizablePanel Size="120">
      <TextBlock Text="Outline" Margin="12" />
    </uikit:ResizablePanel>
  </uikit:ResizablePanelGroup>
</Border>

用法

uikit:ResizablePanelGroup 把面板并排排列（Orientation="Vertical" 则纵向堆叠），每两个可见面板之间是 Resizable 的手柄，并由它自己完成调整。uikit:ResizablePanel 以其 Size 为起始（未设置的均分剩余空间），并保持在 MinSize（默认 100）与 MaxSize 之间。拖动某个手柄会把它前面的面板调整到指针位置：增大时依次从后面的面板取空间，每个最多缩到自己的最小值；缩小到最小值以下时则缩小前面的面板。组的总长度变化时按比例缩放各面板；隐藏的面板（IsVisible="False"）把自己的空间让给其他面板，重新显示时再取回；增删面板同样按比例重新分配。ResizePanel(index, size) 按相同规则调整尺寸，Resized 在拖拽或调用 ResizePanel 之后报告各面板长度（Sizes）。组可以嵌套：把组放进面板中。

演示包含一个限制在 120..240 的左侧面板、中间的纵向组以及一个右侧面板。

示例

隐藏左侧面板、ResizePanel，以及 Resized 报告的各尺寸。

编程控制可交互

Live demo unavailable

<StackPanel Spacing="8" Width="560" HorizontalAlignment="Left">
  <WrapPanel ItemSpacing="8" LineSpacing="8">
    <ToggleButton Classes="outline" Content="Show left" IsChecked="{Binding #Left.IsVisible}" />
    <Button Classes="outline small" Content="Left to 100" Tag="100" Click="OnResizeLeft" />
    <Button Classes="outline small" Content="Left to 200" Tag="200" Click="OnResizeLeft" />
    <TextBlock Name="Sizes" VerticalAlignment="Center" Foreground="{DynamicResource UIKit.MutedForeground}" />
  </WrapPanel>
  <Border BorderBrush="{DynamicResource UIKit.Border}" BorderThickness="1" CornerRadius="5.5" Height="160">
    <uikit:ResizablePanelGroup Name="Group" Resized="OnResized">
      <uikit:ResizablePanel Name="Left" Size="200">
        <TextBlock Text="Left" Margin="12" />
      </uikit:ResizablePanel>
      <uikit:ResizablePanel>
        <TextBlock Text="Center" Margin="12" />
      </uikit:ResizablePanel>
      <uikit:ResizablePanel Size="160">
        <TextBlock Text="Right" Margin="12" />
      </uikit:ResizablePanel>
    </uikit:ResizablePanelGroup>
  </Border>
</StackPanel>

ResizablePanelGroup

#用法

#示例

用法

示例