在列表框项目WPF周围显示边框时发生图像移位

Question

我正在使用列表框显示图像。 选择列表框项目后，它将在图像周围显示边框。 与其在图像周围显示边框，不如将图像向右移动。

列表框样式：

<Style TargetType="{x:Type ListBox}">
    <Setter Property="ItemTemplate">
        <Setter.Value>
            <DataTemplate>
                <StackPanel Orientation="Horizontal">
                    <Image Source="{Binding Path=UriSource}" 
                        Stretch="Fill"
                        Width="639" Height="530">
                     </Image>
                 </StackPanel>
             </DataTemplate>
         </Setter.Value>
     </Setter>
     <Setter Property="ItemsPanel">
         <Setter.Value>
             <ItemsPanelTemplate>
                 <WrapPanel />
             </ItemsPanelTemplate>
          </Setter.Value>
      </Setter>
      <Setter Property="ScrollViewer.HorizontalScrollBarVisibility" 
          Value="Disabled"/>
      <Setter Property="ScrollViewer.VerticalScrollBarVisibility" 
          Value="Disabled"/>

       <Setter Property="HorizontalContentAlignment" 
           Value="Left"/>
       <Setter Property="VerticalContentAlignment" 
           Value="Center" />
</Style>

列表框项目样式：

<Style TargetType="{x:Type ListBoxItem}" x:Key="ContainerStyle">
   <Setter Property="Padding" Value="0,0,0,0"/>
       <Setter Property="Template">
           <Setter.Value>
               <ControlTemplate TargetType="{x:Type ListBoxItem}">
                   <Border x:Name="Bd"
                      SnapsToDevicePixels="True"
                      Background="{TemplateBinding Background}"
                      BorderBrush="{TemplateBinding BorderBrush}"
                      BorderThickness="0"
                      Padding="{TemplateBinding Padding}">
                <ContentPresenter  HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" 
                            VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
                            SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"/>
                    </Border>
                    <ControlTemplate.Triggers>
                        <Trigger Property="IsSelected" Value="true">
                            <Setter Property="BorderBrush" TargetName="Bd" Value="{StaticResource BorderColor}"/>
                            <Setter Property="BorderThickness" TargetName="Bd" Value="12" />
                            <Setter Property="Width" Value="639"  />
                            <Setter Property="Height" Value="530"  />
                        </Trigger>
                        <MultiTrigger>
                            <MultiTrigger.Conditions>
                                <Condition Property="IsSelected" Value="true"/>
                                <Condition Property="Selector.IsSelectionActive" Value="false"/>
                            </MultiTrigger.Conditions>
                            <Setter Property="BorderBrush" TargetName="Bd" Value="{StaticResource BorderColor}"/>
                            <Setter Property="BorderThickness" TargetName="Bd" Value="12" />
                            <Setter Property="Width" Value="639" />
                            <Setter Property="Height" Value="530" />
                        </MultiTrigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

Answer 1

这是因为在您的ListBoxItem样式中，您正在将边框的厚度从正常情况下的0更改为选中该项目时的12 。 这会将内容移动12pt。

您这里有几种可能的解决方案，这里有两种可能性：

• 始终使用12pt边框，但在未选择状态下使用Transparent或{x:Null}笔刷
• 在ContentPresenter上使用12边距，然后在触发器中将其设置为0

Answer 2

使用布局变换，而不是使用渲染变换。 为列表框设置边距=“-2,0，-2,0”填充=“-1,0，-1,0”。 和