WPF ToolBar和StackPanel在裁剪时自动转换ClipToBounds=“真”

Question

我需要在WPF中显示它边界外的工具栏中的一些子项(当光标在工具栏上盘旋时，工具栏上的按钮会增长)。

图1:右面板行为: ClipToBounds="False“

当ClipToBounds="False“和所有按钮在工具栏中都有一个位置时，一切都是正确的。当面板的一部分被窗口的边缘裁剪，并且没有一些按钮的位置时，就会发生故障。在本例中，ToolBar和StackPanel自动将ClipToBounds属性切换到"True“，并开始裁剪子文件。

图2:错误的面板行为: ClipToBounds快照为“真”

我是否可以禁用此行为，或者除了在最上面的宽透明容器上绘制按钮之外，没有其他方法？

Answer 1

我的解决方案(只需将工具栏划分为层)：

<Window x:Class="ZoomBarMockup.Window1"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Height="200" Width="300">

    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="30"/>
            <RowDefinition Height="30"/>
            <RowDefinition Height="30"/>
        </Grid.RowDefinitions>

        <Rectangle Grid.Row="0" Fill="#CCC"/>
        <Rectangle Grid.Row="2" Fill="#CCC"/>

        <!-- Decorative toolbar background strip -->
        <Border Grid.Row="1">
            <Border.Background>
                <LinearGradientBrush StartPoint="0,0" EndPoint="0,1">
                    <GradientStop Color="#FFF" Offset="0"/>
                    <GradientStop Color="#DDD" Offset="1"/>
                </LinearGradientBrush>
            </Border.Background>            
        </Border>

        <!-- Wide transparent panel with negative margin -->
        <StackPanel Grid.Row="1" Orientation="Horizontal" ClipToBounds="False"
                    Height="50" Margin="0 -10 0 -10">
            <Ellipse Fill="Orange" Height="50" Width="50" Margin="5 0"/>
            <Ellipse Fill="Orange" Height="50" Width="50" Margin="5 0"/>
            <Ellipse Fill="Orange" Height="50" Width="50" Margin="5 0"/>
            <Ellipse Fill="Orange" Height="50" Width="50" Margin="5 0"/>
            <Ellipse Fill="Orange" Height="50" Width="50" Margin="5 0"/>
        </StackPanel>

    </Grid>
</Window>

Answer 2

可以禁用面板的默认裁剪行为。但为了做到这一点，您必须扩展现有的面板之一，或者实现您自己的面板：

class NoClipStackPanel : StackPanel
{
    protected override Geometry GetLayoutClip(Size layoutSlotSize)
    {
        return null;
    }
}

请查看这个答案以获得有关不同裁剪方法的更多详细信息。