Не могу понять, почему некоторые элементы управления обрезаются

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>

Вот XAML для стиля ToolIcon

<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 имел следующее понимание в комментарии:

Обрезка может быть сложным делом. См. этот вопрос для получения дополнительной информации по этому вопросу.

• Упомянутый вопрос звучит так: « Почему мои панели обрезаются по всей панели, если их размер меньше указанного размера? »