无法弄清楚为什么某些控件被剪裁

Question

所以我的按钮超出了它们所在的网格，但它们只显示在鼠标上方。在某些网格中，它们可以正确渲染，有些则渲染不正确。似乎是一致的哪些是不正确的，但我无法弄清楚为什么问题发生在那些特定的网格上。我用snoop查看了元素，并且在呈现属性时看不到任何问题。

正确渲染：

渲染不正确：

这是代码

<ScrollViewer x:Name="GridItemScroller" Height="300">
    <ItemsControl Margin="0,0" ItemsSource="{Binding Source={StaticResource rowItemsView}}">
        <ItemsControl.ItemsPanel>
            <ItemsPanelTemplate>
                <Grid VerticalAlignment="Top"  />
            </ItemsPanelTemplate>
        </ItemsControl.ItemsPanel>
        <ItemsControl.ItemContainerStyle>
            <Style TargetType="ContentPresenter">
                <Setter Property="Margin"  Value="{Binding RowIndex, Converter={StaticResource IndexToPositionConverter}, ConverterParameter=20}" />
                <Setter Property="VerticalAlignment" Value="Top" />
            </Style>
        </ItemsControl.ItemContainerStyle>
        <ItemsControl.ItemTemplate>
            <DataTemplate >
                <Grid x:Name="itemPanel" VerticalAlignment="Top" ClipToBounds="False">
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="*" />
                        <ColumnDefinition Width="Auto" />
                    </Grid.ColumnDefinitions>
                    <Rectangle Grid.Column="0" Grid.ColumnSpan="2" Fill="Transparent" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" />
                    <CheckBox IsChecked="{Binding Path=Filtered, Converter={StaticResource NotConverter}}" Content="{Binding RowName}" />
                    <Canvas x:Name="CheckBoxButtonPanel" Grid.Column="1" ClipToBounds="False" VerticalAlignment="Center" Width="25" Height="2">
                        <Canvas.Style>
                            <Style TargetType="Canvas">
                                <Setter Property="Visibility" Value="Collapsed" />
                                <Setter Property="Panel.ZIndex" Value="0" />
                                <Style.Triggers>
                                    <DataTrigger Binding="{Binding ElementName=itemPanel, Path=IsMouseOver}" Value="True">
                                        <Setter Property="Visibility" Value="Visible" />
                                        <Setter Property="Panel.ZIndex" Value="10" />
                                    </DataTrigger>
                                </Style.Triggers>
                            </Style>
                        </Canvas.Style>
                        <Button HorizontalAlignment="Right" Height="15" Width="25" Canvas.Top="-15" local:ToolIcon.IconName ="{Binding Source={StaticResource LanguageInfo}, XPath=//Strings/@Up}" local:ToolIcon.Image="pack://application:,,,/CalUI;component/images/Up.png"  
                            Style="{DynamicResource ToolIcon}" Click="Move_Up"/>
                        <Button HorizontalAlignment="Right" Height="15" Width="25" Canvas.Top="2" local:ToolIcon.IconName ="{Binding Source={StaticResource LanguageInfo}, XPath=//Strings/@Down}" local:ToolIcon.Image="pack://application:,,,/CalUI;component/images/Down.png"  
                            Style="{DynamicResource ToolIcon}" Click="Move_Down"/>
                    </Canvas>
                </Grid>
            </DataTemplate>
        </ItemsControl.ItemTemplate>
    </ItemsControl>
</ScrollViewer>

这是ToolIcon Style的XAML

<Style x:Key="ToolIcon" TargetType="{x:Type Button}">
    <Setter Property="BorderBrush" Value="Transparent" />
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type Button}">
                <Grid x:Name="ImageGrid">
                    <Grid.Effect>
                        <local:SaturationLuminanceEffect SaturationShift="0.95" LuminanceShift="0.8" />
                    </Grid.Effect>
                    <Image x:Name="image" RenderTransformOrigin="0.5,0.5" Source="{TemplateBinding local:ToolIcon.Image}" />
                </Grid>
                <ControlTemplate.Triggers>
                    <Trigger Property="IsMouseOver" Value="True">
                        <Setter Property="Effect" TargetName="ImageGrid">
                            <Setter.Value>
                                <local:SaturationLuminanceEffect SaturationShift="1" LuminanceShift="1.2" />
                            </Setter.Value>
                        </Setter>
                    </Trigger>
                    <Trigger Property="IsPressed" Value="True">
                        <Setter Property="Effect" TargetName="ImageGrid">
                            <Setter.Value>
                                <local:SaturationLuminanceEffect SaturationShift="1.05" LuminanceShift="1.0" />
                            </Setter.Value>
                        </Setter>
                    </Trigger>
                    <Trigger Property="IsEnabled" Value="False">
                        <Setter Property="Effect" TargetName="ImageGrid">
                            <Setter.Value>
                                <local:SaturationLuminanceEffect SaturationShift="0.80" LuminanceShift="1.3" />
                            </Setter.Value>
                        </Setter>
                    </Trigger>
                </ControlTemplate.Triggers>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

Answer 1

@CodeNaked在评论中有以下见解：

  

剪辑可能是一件棘手的事情。有关此主题的详细信息，请参阅this问题。

• 提到的问题是«Why do my panels clip all the way around the panel when made smaller than the explicit size?»