这是一个纯 XAMl 示例,说明如何实现 Pin/Unpin 功能。
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<DockPanel Grid.Column="1">
<Label Content="Main Content Area" FontSize="22"
VerticalAlignment="Center" HorizontalAlignment="Center"/>
</DockPanel>
<StackPanel HorizontalAlignment="Left">
<StackPanel.Style>
<Style>
<Setter Property="Grid.Column" Value="1"/>
<Style.Triggers>
<DataTrigger Binding="{Binding ElementName=LeftPinBtn,Path=IsChecked}" Value="True">
<Setter Property="Grid.Column" Value="0"/>
</DataTrigger>
</Style.Triggers>
</Style>
</StackPanel.Style>
<ToggleButton Content="Pin/Unpin" x:Name="LeftPinBtn"/>
</StackPanel>
</Grid>
在上面的代码中,
- 左侧面板位于(浮动)主要内容的同一网格列上。
- 检查togglebutton时,他们跳到各自的对接网格列。
您可以自定义此示例并包含将显示/隐藏面板的鼠标悬停事件。
- 在右侧添加一个 Grid 列 +
HorizontalAlignment="Right"
将为您提供右侧面板。
- 同样使用行(而不是列)和垂直对齐
将添加顶部/底部引脚功能。