Can't figure out why some controls are being clipped

So I have buttons that extend beyond the grid they are in, but they only show up on mouse over. In some grids they render correctly and some they are rendered incorrectly. It seems to be consistent which ones are incorrect, but I cannot figure out why the issue occurs on those particular grids. I looked at the elements with snoop and can't see any issues with the properties as they are being rendered.

Correct rendering:

Incorrect rendering:

Here's the code

<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>

Here's the XAML for the ToolIcon Style

<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>

@CodeNaked had the following insight in a comment:

Clipping can be a tricky business. See this question for more info on the subject.

• The question mentioned is «Why do my panels clip all the way around the panel when made smaller than the explicit size?»